plazbot-cli 0.3.3 → 0.3.6

package/dist/studio/components/App.js

@@ -12,25 +12,26 @@ import '../slash/handlers.js'; // side effect: registra slashes
 import { slashRegistry } from '../slash/registry.js';
 import { streamStudio } from '../api/sseClient.js';
 import { StudioHttpError } from '../api/types.js';
-import { startWhatsappPolling } from '../whatsapp/polling.js';
-import { workspaceOptsFromStream } from '../whatsapp/api.js';
+import { startConnectPolling } from '../connect/polling.js';
+import { workspaceOptsFromStream } from '../connect/api.js';
+import { channelFromToolResultType } from '../connect/types.js';
 export function App({ version, stream, initialAgentId, dev, supportMode }) {
     const { exit } = useApp();
     const messages = useStudioStore((s) => s.messages);
     const usage = useStudioStore((s) => s.usage);
     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(null);
+    // Active channel-connect polling handle (cancelled on Esc / unmount / new stream).
+    const connectPollingRef = useRef(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(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;
         }
     }, []);
     // Cargar agente inicial si se pasó por flag.
@@ -42,22 +43,22 @@ export function App({ version, stream, initialAgentId, dev, supportMode }) {
     }, []);
     // 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;
@@ -99,37 +100,43 @@ export function App({ version, stream, initialAgentId, dev, supportMode }) {
                                 s.setAgentId(idCandidate);
                         }
                     }
-                    // WhatsApp connect tool: spin up the card + polling.
-                    if (tr?.type === 'whatsapp_link' && data) {
+                    // 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;
                         // 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(workspaceOptsFromStream(stream), linkData, {
+                            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 followUp = `My WhatsApp is now connected. Number: ${number || '(no number)'}. ` +
+                                        const channelName = channel === 'whatsapp' ? 'WhatsApp'
+                                            : channel === 'instagram' ? 'Instagram'
+                                                : 'Messenger';
+                                        const followUp = `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;
                                 },
                             });
                         }
@@ -169,7 +176,7 @@ export function App({ version, stream, initialAgentId, dev, supportMode }) {
                 useStudioStore.getState().compactInto(assistantId);
             }
         }
-    }, [stream, dev, stopWaPolling]);
+    }, [stream, dev, stopConnectPolling]);
     useEffect(() => { sendBackendRef.current = sendToBackend; }, [sendToBackend]);
     const handleSubmit = useCallback(async (raw) => {
         const parsed = parseSlash(raw);

package/dist/studio/components/ChatLog.js

@@ -4,35 +4,38 @@ import { Box, Static } from 'ink';
 import { useStudioStore } from '../state/store.js';
 import { Message } from './Message.js';
 import { ToolCall } from './ToolCall.js';
-import { WhatsappConnectCard } from './WhatsappConnectCard.js';
+import { ConnectCard } from './ConnectCard.js';
 /**
- * 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() {
     const messages = useStudioStore((s) => s.messages);
     const steps = useStudioStore((s) => s.steps);
-    const waConnect = useStudioStore((s) => s.waConnect);
-    // Group steps by their anchor message for quick lookup.
+    const connectCard = useStudioStore((s) => s.connectCard);
     const stepsByMsg = new Map();
     for (const step of steps) {
         const arr = stepsByMsg.get(step.afterMessageId) ?? [];
         arr.push(step);
         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();
     const last = messages[messages.length - 1];
     if (last?.streaming)
@@ -41,11 +44,10 @@ export function ChatLog() {
         if (step.status === 'running')
             dynamicMsgIds.add(step.afterMessageId);
     }
-    if (waConnect)
-        dynamicMsgIds.add(waConnect.anchorMessageId);
-    // Build the static (scrollback) list. Each message and step gets a unique
-    // key so React/Ink only writes it once.
+    if (cardActive && connectCard)
+        dynamicMsgIds.add(connectCard.anchorMessageId);
     const staticItems = [];
+    let cardInjected = false;
     for (const m of messages) {
         if (dynamicMsgIds.has(m.id))
             continue;
@@ -53,7 +55,33 @@ export function ChatLog() {
         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));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => item.kind === 'message' ? (_jsx(Message, { message: item.message }, item.key)) : (_jsx(ToolCall, { step: item.step }, item.key)) }), _jsxs(Box, { flexDirection: "column", children: [dynamicMessages.map((m) => (_jsxs(React.Fragment, { children: [_jsx(Message, { message: m }), (stepsByMsg.get(m.id) ?? []).map((s) => (_jsx(ToolCall, { step: s }, s.id))), waConnect && waConnect.anchorMessageId === m.id ? (_jsx(WhatsappConnectCard, { state: waConnect })) : null] }, m.id))), waConnect && !messages.some((m) => m.id === waConnect.anchorMessageId) ? (_jsx(WhatsappConnectCard, { state: waConnect })) : null] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => {
+                    if (item.kind === 'message') {
+                        return _jsx(Message, { message: item.message }, item.key);
+                    }
+                    if (item.kind === 'step') {
+                        return _jsx(ToolCall, { step: item.step }, item.key);
+                    }
+                    return _jsx(ConnectCard, { state: item.state }, item.key);
+                } }), _jsxs(Box, { flexDirection: "column", children: [dynamicMessages.map((m) => (_jsxs(React.Fragment, { children: [_jsx(Message, { message: m }), (stepsByMsg.get(m.id) ?? []).map((s) => (_jsx(ToolCall, { step: s }, s.id))), cardActive && connectCard && connectCard.anchorMessageId === m.id ? (_jsx(ConnectCard, { state: connectCard })) : null] }, m.id))), cardActive && connectCard && !messages.some((m) => m.id === connectCard.anchorMessageId) ? (_jsx(ConnectCard, { state: connectCard })) : null] })] }));
 }

package/dist/studio/components/ConnectCard.js

@@ -0,0 +1,85 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { CONNECT_POLL_MAX_ATTEMPTS } from '../connect/types.js';
+function formatExpiry(iso) {
+    if (!iso)
+        return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return '';
+    return d.toLocaleString('en-US', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+/**
+ * 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, label) {
+    return `\u001b]8;;${url}\u001b\\${label}\u001b]8;;\u001b\\`;
+}
+function copyFor(channel) {
+    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 }) {
+    const { channel, linkData, status, connectedLabel, errorMessage, attempt } = state;
+    const shortUrl = linkData.shortUrl || '';
+    const expiry = formatExpiry(linkData.expiresAt);
+    const copy = copyFor(channel);
+    const typeLabel = copy.typeLabel(linkData.linkType);
+    let headerIcon = '●';
+    let headerColor = 'green';
+    let headerText = copy.headerWaiting;
+    if (status === 'connected') {
+        headerIcon = '✓';
+        headerColor = 'green';
+        headerText = copy.headerConnected;
+    }
+    else if (status === 'error') {
+        headerIcon = '✖';
+        headerColor = 'red';
+        headerText = 'Could not activate the integration';
+    }
+    else if (status === 'timeout') {
+        headerIcon = '○';
+        headerColor = 'yellow';
+        headerText = 'No connection detected';
+    }
+    else if (status === 'cancelled') {
+        headerIcon = '○';
+        headerColor = 'yellow';
+        headerText = 'Connection cancelled';
+    }
+    const showLink = status !== 'connected' && status !== 'cancelled' && !!shortUrl;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: status === 'error' ? 'red' : status === 'connected' ? 'green' : 'gray', paddingX: 1, marginY: 1, marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: headerColor, children: [headerIcon, " "] }), _jsx(Text, { bold: true, children: headerText }), status !== 'connected' && status !== 'error' && status !== 'cancelled' ? (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "   " }), _jsxs(Text, { dimColor: true, children: ["\u00B7 ", typeLabel] })] })) : null] }), showLink ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "link: " }), _jsx(Text, { color: "cyan", underline: true, children: osc8(shortUrl, shortUrl) })] }), expiry ? (_jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["expires: ", expiry] }) })) : null, _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: copy.hint }) })] })) : null, _jsxs(Box, { marginTop: 1, children: [status === 'waiting' ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { dimColor: true, children: " Waiting for connection\u2026 " }), _jsxs(Text, { dimColor: true, children: ["(", attempt, "/", CONNECT_POLL_MAX_ATTEMPTS, ")"] }), _jsx(Text, { dimColor: true, children: "   \u00B7 press Esc to cancel" })] })) : null, status === 'activating' ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { dimColor: true, children: " Connection detected, activating\u2026" })] })) : null, status === 'connected' ? (_jsx(Text, { color: "green", children: copy.connectedTpl(connectedLabel || '') })) : null, status === 'timeout' ? (_jsx(Text, { dimColor: true, children: "We didn't detect the connection within 5 minutes. Ask the agent to try again." })) : null, status === 'cancelled' ? (_jsx(Text, { dimColor: true, children: "Polling cancelled by user." })) : null, status === 'error' ? (_jsx(Text, { color: "red", children: errorMessage || 'An error occurred while activating the integration.' })) : null] })] }));
+}

package/dist/studio/components/Footer.js

@@ -7,5 +7,5 @@ function fmt(n) {
     return String(n);
 }
 export function Footer({ inputTokens, outputTokens, streaming }) {
-    return (_jsxs(Box, { paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "tokens: " }), _jsx(Text, { children: fmt(inputTokens) }), _jsx(Text, { dimColor: true, children: " in / " }), _jsx(Text, { children: fmt(outputTokens) }), _jsx(Text, { dimColor: true, children: " out" }), streaming ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "  " }), _jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "yellow", children: " streaming\u2026" })] })) : null] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "/help \u00B7 Esc cancel \u00B7 Ctrl+C quit" }) })] }));
+    return (_jsxs(Box, { paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "tokens: " }), _jsx(Text, { children: fmt(inputTokens) }), _jsx(Text, { dimColor: true, children: " in / " }), _jsx(Text, { children: fmt(outputTokens) }), _jsx(Text, { dimColor: true, children: " out" }), streaming ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "  " }), _jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: "yellow", children: " streaming\u2026" })] })) : null] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "/help \u00B7 \u2191\u2193 history \u00B7 Tab accept \u00B7 Esc cancel \u00B7 Ctrl+C quit" }) })] }));
 }

package/dist/studio/components/Input.js

@@ -1,15 +1,147 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
+import { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useStudioStore } from '../state/store.js';
+/**
+ * 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 }) {
     const [value, setValue] = useState('');
-    return (_jsxs(Box, { borderStyle: "round", borderColor: disabled ? 'gray' : 'green', paddingX: 1, children: [_jsxs(Text, { color: disabled ? 'gray' : 'green', bold: true, children: [disabled ? '·' : '›', ' '] }), _jsx(TextInput, { value: value, onChange: disabled ? () => { } : setValue, onSubmit: (v) => {
-                    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 })] }));
+    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 = [];
+        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 (_jsxs(Box, { borderStyle: "round", borderColor: disabled ? 'gray' : 'green', paddingX: 1, children: [_jsxs(Text, { color: disabled ? 'gray' : 'green', bold: true, children: [disabled ? '·' : '›', ' '] }), disabled ? (_jsx(Text, { dimColor: true, children: "Waiting for response\u2026 (press Esc to cancel)" })) : value.length === 0 ? (_jsx(Text, { dimColor: true, children: "Type a message or /help" })) : (_jsxs(Text, { children: [_jsx(Text, { children: value.slice(0, cursor) }), _jsx(Text, { inverse: true, children: value.slice(cursor, cursor + 1) || ' ' }), _jsx(Text, { children: value.slice(cursor + 1) }), ghost ? _jsx(Text, { dimColor: true, children: ghost }) : null] }))] }));
 }

package/dist/studio/connect/api.js

@@ -0,0 +1,66 @@
+import { getBaseUrl } from '../api/studioApi.js';
+import { platformCodeForChannel } from './types.js';
+function headers(opts) {
+    const h = {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${opts.apiKey}`,
+        'x-workspace-id': opts.workspaceId,
+    };
+    if (opts.userId)
+        h['x-user-id'] = opts.userId;
+    return h;
+}
+/**
+ * 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, signal) {
+    const url = `${getBaseUrl(opts.zone, opts.dev)}/api/workspace/${encodeURIComponent(opts.workspaceId)}`;
+    const res = await fetch(url, { method: 'GET', headers: headers(opts), signal });
+    if (!res.ok) {
+        throw new Error(`GET workspace ${res.status} ${res.statusText}`);
+    }
+    const json = (await res.json());
+    if (!json)
+        return null;
+    if (Array.isArray(json))
+        return json[0] ?? null;
+    return json;
+}
+/**
+ * POST /api/workspace/{workspaceId}/integrations/{integrationId}/activate
+ * Body: { isActive: true, platformCode }
+ *
+ * `platformCode` se deriva del canal logico (whatsapp/instagram/facebook).
+ */
+export async function activateIntegration(opts, channel, integrationId, signal) {
+    const url = `${getBaseUrl(opts.zone, opts.dev)}/api/workspace/${encodeURIComponent(opts.workspaceId)}/integrations/${encodeURIComponent(integrationId)}/activate`;
+    const res = await fetch(url, {
+        method: 'POST',
+        headers: headers(opts),
+        body: JSON.stringify({ isActive: true, platformCode: platformCodeForChannel(channel) }),
+        signal,
+    });
+    const text = await res.text();
+    let parsed = {};
+    if (text) {
+        try {
+            parsed = JSON.parse(text);
+        }
+        catch { /* not json */ }
+    }
+    if (!res.ok) {
+        return { success: false, message: parsed.message || `HTTP ${res.status} ${res.statusText}` };
+    }
+    return parsed.success === false ? parsed : { success: true, ...parsed };
+}
+/** Adapter: deriva las opciones de fetch desde un StudioStreamOptions. */
+export function workspaceOptsFromStream(stream) {
+    return {
+        apiKey: stream.apiKey,
+        workspaceId: stream.workspaceId,
+        zone: stream.zone,
+        dev: stream.dev,
+        userId: stream.userId,
+    };
+}

package/dist/studio/connect/polling.js

@@ -0,0 +1,76 @@
+import { activateIntegration, getWorkspaceById } from './api.js';
+import { CONNECT_POLL_INTERVAL_MS, CONNECT_POLL_MAX_ATTEMPTS, describeIntegration, findNewIntegrationForChannel, } from './types.js';
+/**
+ * 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 startConnectPolling(opts, channel, linkData, cb) {
+    const knownIds = new Set(linkData.existingIntegrationIds ?? []);
+    const controller = new AbortController();
+    let attempts = 0;
+    let busy = false;
+    let stopped = false;
+    let timer = null;
+    const stop = () => {
+        stopped = true;
+        if (timer) {
+            clearInterval(timer);
+            timer = null;
+        }
+        controller.abort();
+    };
+    const tick = async () => {
+        if (busy || stopped)
+            return;
+        busy = true;
+        attempts++;
+        cb.onAttempt(attempts);
+        try {
+            const ws = await getWorkspaceById(opts, controller.signal);
+            const newIntegration = findNewIntegrationForChannel(channel, ws?.integrations, knownIds);
+            if (newIntegration?.id) {
+                const label = describeIntegration(channel, newIntegration);
+                cb.onActivating(newIntegration.id, label);
+                if (timer) {
+                    clearInterval(timer);
+                    timer = null;
+                }
+                const res = await activateIntegration(opts, channel, newIntegration.id, controller.signal);
+                if (res.success !== false) {
+                    cb.onConnected(label);
+                }
+                else {
+                    cb.onError(res.message || 'Could not activate the integration.');
+                }
+                stopped = true;
+                return;
+            }
+        }
+        catch (err) {
+            if (err.name === 'AbortError')
+                return;
+            // Network transient: swallow and keep polling.
+        }
+        finally {
+            busy = false;
+        }
+        if (attempts >= CONNECT_POLL_MAX_ATTEMPTS) {
+            if (timer) {
+                clearInterval(timer);
+                timer = null;
+            }
+            stopped = true;
+            cb.onTimeout();
+        }
+    };
+    timer = setInterval(() => { void tick(); }, CONNECT_POLL_INTERVAL_MS);
+    // Primer attempt inmediato para feedback visual.
+    void tick();
+    return {
+        cancel() { stop(); },
+        get stopped() { return stopped; },
+    };
+}