plazbot-cli 0.3.3 → 0.3.5

package/dist/studio/connect/types.js

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ */
+/** Mapea el `type` del tool_result al canal logico del cliente. */
+export function channelFromToolResultType(type) {
+    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) {
+    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) {
+    switch (channel) {
+        case 'whatsapp': return 'whatsapp';
+        case 'instagram': return 'instagram';
+        case 'messenger': return 'facebook';
+    }
+}
+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, integrations, knownIds) {
+    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));
+    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, alias de pagina, etc.). */
+export function describeIntegration(channel, i) {
+    switch (channel) {
+        case 'whatsapp':
+            return i.cellphoneNumberFormat || i.cellphoneNumber || '';
+        case 'instagram':
+            return i.aliasName || i.instagramPageId || '';
+        case 'messenger':
+            return i.aliasName || i.facebookPageId || '';
+    }
+}

package/dist/studio/runRepl.js

@@ -6,12 +6,11 @@ import { dirname, join } from 'node:path';
 import { App } from './components/App.js';
 import { getStoredCredentials } from '../utils/credentials.js';
 import { logger } from '../utils/logger.js';
-// 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) {
     let creds;
     try {
@@ -36,31 +35,6 @@ export async function runRepl(opts) {
         dev: opts.dev,
     };
     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(_jsx(App, { version: version, stream: stream, initialAgentId: opts.agentId ?? null, dev: opts.dev, supportMode: supportMode }), {
         exitOnCtrlC: false,
     });
@@ -68,12 +42,7 @@ export async function runRepl(opts) {
     process.on('SIGINT', () => {
         // no-op aquí; App.tsx llama exit() al detectar Ctrl+C.
     });
-    try {
-        await waitUntilExit();
-    }
-    finally {
-        restoreTerminal();
-    }
+    await waitUntilExit();
 }
 function readVersion() {
     try {

package/dist/studio/state/store.js

@@ -17,7 +17,7 @@ export const useStudioStore = create((set, get) => ({
     usage: { inputTokens: 0, outputTokens: 0 },
     streaming: false,
     abortController: null,
-    waConnect: null,
+    connectCard: null,
     pendingCompact: false,
     pushUserMessage(content) {
         const id = uid();
@@ -92,11 +92,12 @@ export const useStudioStore = create((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,
@@ -105,14 +106,14 @@ export const useStudioStore = create((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() {
         const ctrl = get().abortController;
@@ -123,7 +124,7 @@ export const useStudioStore = create((set, get) => ({
             steps: [],
             streaming: false,
             abortController: null,
-            waConnect: null,
+            connectCard: null,
             pendingCompact: false,
             // agentConfig, agentId, usage se mantienen para seguir trabajando.
         });
@@ -147,7 +148,7 @@ export const useStudioStore = create((set, get) => ({
                     },
                 ],
                 steps: [],
-                waConnect: null,
+                connectCard: null,
                 pendingCompact: false,
             };
         });
@@ -164,7 +165,7 @@ export const useStudioStore = create((set, get) => ({
             usage: { inputTokens: 0, outputTokens: 0 },
             streaming: false,
             abortController: null,
-            waConnect: null,
+            connectCard: null,
             pendingCompact: false,
         });
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plazbot-cli",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "CLI para Plazbot SDK",
   "type": "module",
   "main": "dist/cli.js",

package/src/studio/components/App.tsx

@@ -12,9 +12,9 @@ import { slashRegistry } from '../slash/registry.js';
 import { streamStudio } from '../api/sseClient.js';
 import { StudioHttpError } from '../api/types.js';
 import type { StudioChunk, StudioStreamOptions } from '../api/types.js';
-import { startWhatsappPolling, type PollingHandle } from '../whatsapp/polling.js';
-import { workspaceOptsFromStream } from '../whatsapp/api.js';
-import type { WhatsappLinkData } from '../whatsapp/types.js';
+import { startConnectPolling, type PollingHandle } from '../connect/polling.js';
+import { workspaceOptsFromStream } from '../connect/api.js';
+import { channelFromToolResultType, type ChannelLinkData } from '../connect/types.js';
 
 export interface AppProps {
   version: string;
@@ -31,18 +31,18 @@ export function App({ version, stream, initialAgentId, dev, supportMode }: AppPr
   const streaming = useStudioStore((s) => s.streaming);
   const agentId = useStudioStore((s) => s.agentId);
 
-  // Active WhatsApp polling handle (cancelled on Esc / unmount / new stream).
-  const waPollingRef = useRef<PollingHandle | null>(null);
+  // Active channel-connect polling handle (cancelled on Esc / unmount / new stream).
+  const connectPollingRef = useRef<PollingHandle | null>(null);
   const streamingRef = useRef(streaming);
   useEffect(() => { streamingRef.current = streaming; }, [streaming]);
   // Ref so the polling onConnected callback can trigger sendToBackend from the
   // most recent closure without resubscribing every render.
   const sendBackendRef = useRef<(text: string) => Promise<void>>(async () => {});
 
-  const stopWaPolling = useCallback(() => {
-    if (waPollingRef.current) {
-      waPollingRef.current.cancel();
-      waPollingRef.current = null;
+  const stopConnectPolling = useCallback(() => {
+    if (connectPollingRef.current) {
+      connectPollingRef.current.cancel();
+      connectPollingRef.current = null;
     }
   }, []);
 
@@ -56,23 +56,23 @@ export function App({ version, stream, initialAgentId, dev, supportMode }: AppPr
 
   // Cleanup on unmount.
   useEffect(() => {
-    return () => { stopWaPolling(); };
-  }, [stopWaPolling]);
+    return () => { stopConnectPolling(); };
+  }, [stopConnectPolling]);
 
   // Atajos de teclado globales.
   useInput((input, key) => {
     if (key.escape) {
-      const wa = useStudioStore.getState().waConnect;
-      if (wa && (wa.status === 'waiting' || wa.status === 'activating')) {
-        stopWaPolling();
-        useStudioStore.getState().setWaStatus('cancelled');
+      const cc = useStudioStore.getState().connectCard;
+      if (cc && (cc.status === 'waiting' || cc.status === 'activating')) {
+        stopConnectPolling();
+        useStudioStore.getState().setConnectStatus('cancelled');
         return;
       }
       useStudioStore.getState().abortStream();
       return;
     }
     if (key.ctrl && input === 'c') {
-      stopWaPolling();
+      stopConnectPolling();
       useStudioStore.getState().abortStream();
       exit();
       return;
@@ -116,41 +116,49 @@ export function App({ version, stream, initialAgentId, dev, supportMode }: AppPr
               if (typeof idCandidate === 'string') s.setAgentId(idCandidate);
             }
           }
-          // WhatsApp connect tool: spin up the card + polling.
-          if (tr?.type === 'whatsapp_link' && data) {
-            const linkData = data as WhatsappLinkData;
+          // Channel connect tool (whatsapp / instagram / messenger): spin up the
+          // card + polling. The chunk discriminator (`whatsapp_link`,
+          // `instagram_link`, `messenger_link`) tells us which channel.
+          const channel = channelFromToolResultType(tr?.type);
+          if (channel && data) {
+            const linkData = data as ChannelLinkData;
             // No link to show (e.g. alreadyConnected without a new url) → skip card.
             if (linkData.shortUrl) {
               // Cancel any previous active polling before starting a new one.
-              stopWaPolling();
-              s.startWaConnect(linkData, assistantId);
-              waPollingRef.current = startWhatsappPolling(
+              stopConnectPolling();
+              s.startConnectCard(channel, linkData, assistantId);
+              connectPollingRef.current = startConnectPolling(
                 workspaceOptsFromStream(stream),
+                channel,
                 linkData,
                 {
                   onAttempt(attempt) {
-                    useStudioStore.getState().updateWaConnect({ attempt });
+                    useStudioStore.getState().updateConnectCard({ attempt });
                   },
                   onActivating() {
-                    useStudioStore.getState().setWaStatus('activating');
+                    useStudioStore.getState().setConnectStatus('activating');
                   },
-                  onConnected(number) {
-                    useStudioStore.getState().setWaStatus('connected', { connectedNumber: number });
-                    waPollingRef.current = null;
+                  onConnected(label) {
+                    useStudioStore.getState().setConnectStatus('connected', { connectedLabel: label });
+                    connectPollingRef.current = null;
                     if (!streamingRef.current) {
+                      const channelName =
+                        channel === 'whatsapp' ? 'WhatsApp'
+                        : channel === 'instagram' ? 'Instagram'
+                        : 'Messenger';
                       const followUp =
-                        `My WhatsApp is now connected. Number: ${number || '(no number)'}. ` +
+                        `My ${channelName} is now connected. ${label ? `Label: ${label}.` : ''} ` +
                         `Continue with the agent setup.`;
                       void sendBackendRef.current(followUp);
                     }
                   },
                   onTimeout() {
-                    useStudioStore.getState().setWaStatus('timeout');
-                    waPollingRef.current = null;
+                    useStudioStore.getState().setConnectStatus('timeout');
+                    connectPollingRef.current = null;
                   },
                   onError(message) {
-                    useStudioStore.getState().setWaStatus('error', { errorMessage: message });
-                    waPollingRef.current = null;
+                    useStudioStore.getState().setConnectStatus('error', { errorMessage: message });
+                    connectPollingRef.current = null;
                   },
                 },
               );
@@ -195,7 +203,7 @@ export function App({ version, stream, initialAgentId, dev, supportMode }: AppPr
         useStudioStore.getState().compactInto(assistantId);
       }
     }
-  }, [stream, dev, stopWaPolling]);
+  }, [stream, dev, stopConnectPolling]);
 
   useEffect(() => { sendBackendRef.current = sendToBackend; }, [sendToBackend]);
 

package/src/studio/components/ChatLog.tsx

@@ -2,33 +2,32 @@ import React from 'react';
 import { Box, Static } from 'ink';
 import { useStudioStore } from '../state/store.js';
 import type { ChatMessage, ToolStep } from '../state/store.js';
+import type { ConnectState } from '../connect/types.js';
 import { Message } from './Message.js';
 import { ToolCall } from './ToolCall.js';
-import { WhatsappConnectCard } from './WhatsappConnectCard.js';
+import { ConnectCard } from './ConnectCard.js';
 
 type HistoricItem =
   | { kind: 'message'; key: string; message: ChatMessage }
-  | { kind: 'step'; key: string; step: ToolStep };
+  | { kind: 'step'; key: string; step: ToolStep }
+  | { kind: 'connectCard'; key: string; state: ConnectState };
 
 /**
- * Renders the conversation log.
+ * Renderiza el log de la conversacion.
  *
- * Stable items (finished assistant/user messages + resolved tool steps that
- * are not anchored to an active WhatsApp card) are rendered inside <Static>
- * so Ink writes them to scrollback once and never re-renders them on resize.
- * This is what fixes the "Header echoed multiple times" effect you see when
- * dragging the terminal window while the dynamic frame is taller than the
- * viewport.
+ * Items estables (mensajes finalizados + tool steps resueltos que no estan
+ * anclados a una tarjeta de conexion activa) van dentro de <Static> para que
+ * Ink los escriba al scrollback una sola vez y no los re-renderice en resize.
  *
- * The dynamic block at the bottom contains the streaming message, any steps
- * still in `running`, and the WhatsApp connect card while it is active.
+ * El bloque dinamico al final contiene el mensaje en streaming, los steps que
+ * siguen en `running`, y la tarjeta de conexion (whatsapp/instagram/messenger)
+ * mientras esta activa.
  */
 export function ChatLog(): React.ReactElement {
   const messages = useStudioStore((s) => s.messages);
   const steps = useStudioStore((s) => s.steps);
-  const waConnect = useStudioStore((s) => s.waConnect);
+  const connectCard = useStudioStore((s) => s.connectCard);
 
-  // Group steps by their anchor message for quick lookup.
   const stepsByMsg = new Map<string, ToolStep[]>();
   for (const step of steps) {
     const arr = stepsByMsg.get(step.afterMessageId) ?? [];
@@ -36,27 +35,52 @@ export function ChatLog(): React.ReactElement {
     stepsByMsg.set(step.afterMessageId, arr);
   }
 
-  // Determine which message ids must stay in the dynamic frame:
-  // - the last message if it's still streaming
-  // - any message whose tool steps are still running
-  // - the message anchored to an active WhatsApp connect card
+  // La tarjeta solo permanece en el dynamic frame mientras esta "viva"
+  // (polling activo o activando). En estados terminales
+  // (connected/cancelled/timeout/error) migra a <Static> junto a su mensaje
+  // ancla, de modo que los mensajes nuevos fluyen debajo.
+  const cardActive =
+    !!connectCard && (connectCard.status === 'waiting' || connectCard.status === 'activating');
+  const cardInScrollback = !!connectCard && !cardActive;
+
+  // Mensajes que deben quedar en el dynamic frame:
+  // - el ultimo si sigue streameando
+  // - cualquiera con tool steps en running
+  // - el ancla de una tarjeta de conexion ACTIVA
   const dynamicMsgIds = new Set<string>();
   const last = messages[messages.length - 1];
   if (last?.streaming) dynamicMsgIds.add(last.id);
   for (const step of steps) {
     if (step.status === 'running') dynamicMsgIds.add(step.afterMessageId);
   }
-  if (waConnect) dynamicMsgIds.add(waConnect.anchorMessageId);
+  if (cardActive && connectCard) dynamicMsgIds.add(connectCard.anchorMessageId);
 
-  // Build the static (scrollback) list. Each message and step gets a unique
-  // key so React/Ink only writes it once.
   const staticItems: HistoricItem[] = [];
+  let cardInjected = false;
   for (const m of messages) {
     if (dynamicMsgIds.has(m.id)) continue;
     staticItems.push({ kind: 'message', key: `m-${m.id}`, message: m });
     for (const s of stepsByMsg.get(m.id) ?? []) {
       staticItems.push({ kind: 'step', key: `s-${s.id}`, step: s });
     }
+    if (cardInScrollback && connectCard && connectCard.anchorMessageId === m.id) {
+      staticItems.push({
+        kind: 'connectCard',
+        key: `cc-${connectCard.id}-${connectCard.status}`,
+        state: connectCard,
+      });
+      cardInjected = true;
+    }
+  }
+  // Fallback: la tarjeta terminal quedo huerfana porque su mensaje ancla ya no
+  // esta (p.ej. tras /compact). La empujamos igual al scrollback para no perder
+  // el registro visual.
+  if (cardInScrollback && connectCard && !cardInjected) {
+    staticItems.push({
+      kind: 'connectCard',
+      key: `cc-${connectCard.id}-${connectCard.status}-orphan`,
+      state: connectCard,
+    });
   }
 
   const dynamicMessages = messages.filter((m) => dynamicMsgIds.has(m.id));
@@ -64,13 +88,15 @@ export function ChatLog(): React.ReactElement {
   return (
     <Box flexDirection="column">
       <Static items={staticItems}>
-        {(item) =>
-          item.kind === 'message' ? (
-            <Message key={item.key} message={item.message} />
-          ) : (
-            <ToolCall key={item.key} step={item.step} />
-          )
-        }
+        {(item) => {
+          if (item.kind === 'message') {
+            return <Message key={item.key} message={item.message} />;
+          }
+          if (item.kind === 'step') {
+            return <ToolCall key={item.key} step={item.step} />;
+          }
+          return <ConnectCard key={item.key} state={item.state} />;
+        }}
       </Static>
 
       <Box flexDirection="column">
@@ -80,14 +106,14 @@ export function ChatLog(): React.ReactElement {
             {(stepsByMsg.get(m.id) ?? []).map((s) => (
               <ToolCall key={s.id} step={s} />
             ))}
-            {waConnect && waConnect.anchorMessageId === m.id ? (
-              <WhatsappConnectCard state={waConnect} />
+            {cardActive && connectCard && connectCard.anchorMessageId === m.id ? (
+              <ConnectCard state={connectCard} />
             ) : null}
           </React.Fragment>
         ))}
-        {/* Fallback: waConnect anchor message was cleared. */}
-        {waConnect && !messages.some((m) => m.id === waConnect.anchorMessageId) ? (
-          <WhatsappConnectCard state={waConnect} />
+        {/* Fallback: tarjeta activa cuyo ancla ya no esta en messages. */}
+        {cardActive && connectCard && !messages.some((m) => m.id === connectCard.anchorMessageId) ? (
+          <ConnectCard state={connectCard} />
         ) : null}
       </Box>
     </Box>

package/src/studio/components/{WhatsappConnectCard.tsx → ConnectCard.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
-import type { WaConnectState } from '../whatsapp/types.js';
-import { WA_POLL_MAX_ATTEMPTS } from '../whatsapp/types.js';
+import type { ConnectChannel, ConnectState } from '../connect/types.js';
+import { CONNECT_POLL_MAX_ATTEMPTS } from '../connect/types.js';
 
 interface Props {
-  state: WaConnectState;
+  state: ConnectState;
 }
 
 function formatExpiry(iso?: string): string {
@@ -21,33 +21,69 @@ function formatExpiry(iso?: string): string {
 }
 
 /**
- * Wraps a URL in an OSC 8 hyperlink escape sequence. Terminals that don't
- * support it just print the visible text — but iTerm2, kitty, Wezterm,
- * Alacritty (recent), and modern VS Code/Hyper terminals do.
+ * Envuelve una URL en un hyperlink OSC 8. Terminales que no lo soportan
+ * imprimen solo el label visible — iTerm2, kitty, Wezterm, Alacritty (reciente),
+ * VS Code/Hyper modernos si lo soportan.
  */
 function osc8(url: string, label: string): string {
   return `\u001b]8;;${url}\u001b\\${label}\u001b]8;;\u001b\\`;
 }
 
-export function WhatsappConnectCard({ state }: Props): React.ReactElement {
-  const { linkData, status, connectedNumber, errorMessage, attempt } = state;
+interface ChannelCopy {
+  headerWaiting: string;
+  headerConnected: string;
+  typeLabel: (linkType: string | undefined) => string;
+  hint: string;
+  connectedTpl: (label: string) => string;
+}
+
+function copyFor(channel: ConnectChannel): ChannelCopy {
+  switch (channel) {
+    case 'whatsapp':
+      return {
+        headerWaiting: 'Connect your WhatsApp',
+        headerConnected: 'WhatsApp connected',
+        typeLabel: (lt) => (lt === 'whatsapp_business' ? 'WhatsApp Business' : 'WhatsApp Cloud API'),
+        hint: "Open the link from a phone with WhatsApp installed. We'll keep watching for the new number.",
+        connectedTpl: (n) => `Number ${n || '(connected)'} activated successfully.`,
+      };
+    case 'instagram':
+      return {
+        headerWaiting: 'Connect your Instagram',
+        headerConnected: 'Instagram connected',
+        typeLabel: () => 'Instagram Business',
+        hint: "Open the link in your browser and authorize the Instagram Business account linked to a Facebook Page. We'll keep watching for the connection.",
+        connectedTpl: (n) => `Account ${n || '(connected)'} activated successfully.`,
+      };
+    case 'messenger':
+      return {
+        headerWaiting: 'Connect your Messenger',
+        headerConnected: 'Messenger connected',
+        typeLabel: () => 'Facebook Page',
+        hint: "Open the link in your browser and select the Facebook Page(s) you want to use with Messenger. We'll keep watching for the connection.",
+        connectedTpl: (n) => `Page ${n || '(connected)'} activated successfully.`,
+      };
+  }
+}
+
+export function ConnectCard({ state }: Props): React.ReactElement {
+  const { channel, linkData, status, connectedLabel, errorMessage, attempt } = state;
   const shortUrl = linkData.shortUrl || '';
   const expiry = formatExpiry(linkData.expiresAt);
-  const typeLabel =
-    linkData.linkType === 'whatsapp_business' ? 'WhatsApp Business' : 'WhatsApp Cloud API';
+  const copy = copyFor(channel);
+  const typeLabel = copy.typeLabel(linkData.linkType);
 
-  // Header glyph + color per status.
   let headerIcon = '●';
   let headerColor: 'green' | 'red' | 'yellow' = 'green';
-  let headerText = 'Connect your WhatsApp';
+  let headerText = copy.headerWaiting;
   if (status === 'connected') {
     headerIcon = '✓';
     headerColor = 'green';
-    headerText = 'WhatsApp connected';
+    headerText = copy.headerConnected;
   } else if (status === 'error') {
     headerIcon = '✖';
     headerColor = 'red';
-    headerText = 'Could not activate the number';
+    headerText = 'Could not activate the integration';
   } else if (status === 'timeout') {
     headerIcon = '○';
     headerColor = 'yellow';
@@ -94,9 +130,7 @@ export function WhatsappConnectCard({ state }: Props): React.ReactElement {
             </Box>
           ) : null}
           <Box marginTop={1}>
-            <Text dimColor>
-              Open the link from a phone with WhatsApp installed. We'll keep watching for the new number.
-            </Text>
+            <Text dimColor>{copy.hint}</Text>
           </Box>
         </Box>
       ) : null}
@@ -107,20 +141,18 @@ export function WhatsappConnectCard({ state }: Props): React.ReactElement {
           <>
             <Text color="yellow"><Spinner type="dots" /></Text>
             <Text dimColor> Waiting for connection… </Text>
-            <Text dimColor>({attempt}/{WA_POLL_MAX_ATTEMPTS})</Text>
+            <Text dimColor>({attempt}/{CONNECT_POLL_MAX_ATTEMPTS})</Text>
             <Text dimColor>   · press Esc to cancel</Text>
           </>
         ) : null}
         {status === 'activating' ? (
           <>
             <Text color="yellow"><Spinner type="dots" /></Text>
-            <Text dimColor> Number detected, activating…</Text>
+            <Text dimColor> Connection detected, activating…</Text>
           </>
         ) : null}
         {status === 'connected' ? (
-          <Text color="green">
-            Number {connectedNumber || '(connected)'} activated successfully.
-          </Text>
+          <Text color="green">{copy.connectedTpl(connectedLabel || '')}</Text>
         ) : null}
         {status === 'timeout' ? (
           <Text dimColor>

package/src/studio/components/Footer.tsx

@@ -31,7 +31,7 @@ export function Footer({ inputTokens, outputTokens, streaming }: FooterProps): R
         ) : null}
       </Box>
       <Box>
-        <Text dimColor>/help · Esc cancel · Ctrl+C quit</Text>
+        <Text dimColor>/help · ↑↓ history · Tab accept · Esc cancel · Ctrl+C quit</Text>
       </Box>
     </Box>
   );