plazbot-cli 0.3.7 → 0.4.0

package/src/studio/components/Footer.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-
-interface FooterProps {
-  inputTokens: number;
-  outputTokens: number;
-  streaming: boolean;
-}
-
-function fmt(n: number): string {
-  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
-  return String(n);
-}
-
-export function Footer({ inputTokens, outputTokens, streaming }: FooterProps): React.ReactElement {
-  return (
-    <Box paddingX={1} flexDirection="row" justifyContent="space-between">
-      <Box>
-        <Text dimColor>tokens: </Text>
-        <Text>{fmt(inputTokens)}</Text>
-        <Text dimColor> in / </Text>
-        <Text>{fmt(outputTokens)}</Text>
-        <Text dimColor> out</Text>
-        {streaming ? (
-          <>
-            <Text>  </Text>
-            <Text color="yellow"><Spinner type="dots" /></Text>
-            <Text color="yellow"> streaming…</Text>
-          </>
-        ) : null}
-      </Box>
-      <Box>
-        <Text dimColor>/help · ↑↓ history · Tab accept · Esc cancel · Ctrl+C quit</Text>
-      </Box>
-    </Box>
-  );
-}

package/src/studio/components/Header.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-
-interface HeaderProps {
-  version: string;
-  workspace: string;
-  zone: 'LA' | 'EU';
-  agentId: string | null;
-  dev: boolean;
-  supportMode?: boolean;
-}
-
-export function Header({ version, workspace, zone, agentId, dev, supportMode }: HeaderProps): React.ReactElement {
-  // Sin borde: cualquier `borderStyle` se acumula visualmente cuando el usuario
-  // redimensiona la terminal (Ink no limpia el scrollback). Estilo Claude Code:
-  // una sola línea con título a la izquierda y metadata a la derecha.
-  return (
-    <Box flexDirection="row" justifyContent="space-between" paddingX={1}>
-      <Box>
-        <Text bold color={supportMode ? 'yellow' : 'green'}>● Plazbot Studio</Text>
-        <Text dimColor> v{version}</Text>
-        {dev ? <Text color="yellow">  dev</Text> : null}
-        {supportMode ? <Text color="yellow" bold>  · SUPPORT</Text> : null}
-      </Box>
-      <Box>
-        <Text dimColor>workspace </Text>
-        <Text color={supportMode ? 'yellow' : undefined}>{workspace}</Text>
-        <Text dimColor>  zone </Text>
-        <Text>{zone}</Text>
-        {agentId ? (
-          <>
-            <Text dimColor>  agent </Text>
-            <Text color="cyan">{agentId.slice(0, 12)}</Text>
-          </>
-        ) : null}
-      </Box>
-    </Box>
-  );
-}

package/src/studio/components/Input.tsx

@@ -1,176 +0,0 @@
-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>
-      {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/components/Message.tsx

@@ -1,87 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-import type { ChatMessage } from '../state/store.js';
-import { renderMarkdown } from '../render/markdown.js';
-
-interface MessageProps {
-  message: ChatMessage;
-}
-
-/**
- * Phrases shown next to the spinner while waiting for the first text token.
- * Rotated every ~1.8s for a Claude Code–style feel.
- */
-const THINKING_PHRASES = [
-  'Thinking',
-  'Pondering',
-  'Cooking',
-  'Reasoning',
-  'Crafting',
-  'Working',
-  'Brewing',
-];
-
-function useRotatingPhrase(active: boolean): string {
-  const [idx, setIdx] = useState(0);
-  useEffect(() => {
-    if (!active) return;
-    const t = setInterval(() => setIdx((i) => (i + 1) % THINKING_PHRASES.length), 1800);
-    return () => clearInterval(t);
-  }, [active]);
-  return THINKING_PHRASES[idx];
-}
-
-function useBlinkingCursor(active: boolean): boolean {
-  const [on, setOn] = useState(true);
-  useEffect(() => {
-    if (!active) return;
-    const t = setInterval(() => setOn((v) => !v), 450);
-    return () => clearInterval(t);
-  }, [active]);
-  return on;
-}
-
-export function Message({ message }: MessageProps): React.ReactElement {
-  const isUser = message.role === 'user';
-  const dotColor = isUser ? 'cyan' : message.error ? 'red' : 'green';
-  const labelColor = message.error ? 'red' : undefined;
-  const label = isUser ? 'You' : 'Plazbot';
-  const streamingNoContent = !!message.streaming && !message.content && !isUser;
-  const streamingWithContent = !!message.streaming && !!message.content && !isUser;
-
-  const phrase = useRotatingPhrase(streamingNoContent);
-  const cursorOn = useBlinkingCursor(streamingWithContent);
-
-  const body = useMemo(() => {
-    if (!message.content) return '';
-    if (isUser) return message.content;
-    return renderMarkdown(message.content);
-  }, [message.content, isUser]);
-
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      <Box>
-        <Text color={dotColor} bold>● </Text>
-        <Text bold color={labelColor}>{label}</Text>
-        {streamingNoContent ? (
-          <>
-            <Text dimColor> </Text>
-            <Text color="yellow"><Spinner type="dots" /></Text>
-            <Text dimColor> {phrase}…</Text>
-          </>
-        ) : null}
-      </Box>
-      {body || streamingWithContent ? (
-        <Box marginLeft={2}>
-          <Text>
-            {body}
-            {streamingWithContent ? (
-              <Text color="green" dimColor>{cursorOn ? '▍' : ' '}</Text>
-            ) : null}
-          </Text>
-        </Box>
-      ) : null}
-    </Box>
-  );
-}

package/src/studio/components/Suggestions.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-
-const HINTS = [
-  { title: 'List my agents', cmd: '/agents' },
-  { title: 'Load an agent', cmd: '/load <id>' },
-  { title: 'Diagnose the current agent', cmd: '/diagnose' },
-  { title: 'Create a new agent', cmd: 'Create a sales agent for WhatsApp' },
-];
-
-export function Suggestions(): React.ReactElement {
-  return (
-    <Box flexDirection="column" marginY={1} paddingX={1}>
-      <Text dimColor>Try one of these to get started:</Text>
-      <Box flexDirection="column" marginTop={1}>
-        {HINTS.map((h) => (
-          <Box key={h.title}>
-            <Text color="green">  ▸ </Text>
-            <Text bold>{h.title}</Text>
-            <Text dimColor>  {h.cmd}</Text>
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-}

package/src/studio/components/ToolCall.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-import type { ToolStep } from '../state/store.js';
-import { stepLabel } from '../render/steps.js';
-
-interface ToolCallProps {
-  step: ToolStep;
-}
-
-/**
- * Some tool errors are expected control flow (e.g. the model asks to load
- * an agent that doesn't exist; the backend returns "not found"). The model
- * always explains these in plain text afterwards, so showing a loud red ✗
- * with a duplicated error string is just visual noise. We detect those
- * messages and render them as a soft dim line instead.
- */
-function isSoftFailure(msg?: string): boolean {
-  if (!msg) return false;
-  const m = msg.toLowerCase();
-  return (
-    m.includes('no encontrado') ||
-    m.includes('no existe') ||
-    m.includes('not found') ||
-    m.includes("doesn't exist") ||
-    m.includes('does not exist')
-  );
-}
-
-export function ToolCall({ step }: ToolCallProps): React.ReactElement {
-  const label = stepLabel(step.toolName, step.status);
-  if (step.status === 'running') {
-    return (
-      <Box marginLeft={2}>
-        <Text color="yellow"><Spinner type="dots" /></Text>
-        <Text> </Text>
-        <Text dimColor>{label}…</Text>
-      </Box>
-    );
-  }
-  if (step.status === 'success') {
-    return (
-      <Box marginLeft={2}>
-        <Text color="green">✓</Text>
-        <Text dimColor> {label}</Text>
-      </Box>
-    );
-  }
-  // error
-  const soft = isSoftFailure(step.errorMessage);
-  return (
-    <Box marginLeft={2}>
-      <Text color={soft ? 'gray' : 'red'}>{soft ? '○' : '✗'}</Text>
-      <Text color={soft ? undefined : 'red'} dimColor={soft}> {label}</Text>
-      {step.errorMessage ? <Text dimColor> — {step.errorMessage}</Text> : null}
-    </Box>
-  );
-}

package/src/studio/connect/api.ts

@@ -1,98 +0,0 @@
-import { getBaseUrl } from '../api/studioApi.js';
-import type { StudioStreamOptions } from '../api/types.js';
-import { platformCodeForChannel, type ConnectChannel, type WorkspaceIntegrationItem } from './types.js';
-
-/**
- * Helpers REST para el polling/activacion durante la conexion de un canal.
- * Reusa el mismo base URL + Bearer del SSE client.
- */
-
-interface WorkspaceFetchOpts {
-  apiKey: string;
-  workspaceId: string;
-  zone: 'LA' | 'EU';
-  dev?: boolean;
-  userId?: string;
-}
-
-interface WorkspaceShape {
-  id?: string;
-  integrations?: WorkspaceIntegrationItem[];
-}
-
-function headers(opts: WorkspaceFetchOpts): Record<string, string> {
-  const h: Record<string, string> = {
-    '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: WorkspaceFetchOpts,
-  signal?: AbortSignal,
-): Promise<WorkspaceShape | null> {
-  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()) as WorkspaceShape | WorkspaceShape[] | null;
-  if (!json) return null;
-  if (Array.isArray(json)) return json[0] ?? null;
-  return json;
-}
-
-export interface ActivateResult {
-  success?: boolean;
-  message?: string;
-}
-
-/**
- * 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: WorkspaceFetchOpts,
-  channel: ConnectChannel,
-  integrationId: string,
-  signal?: AbortSignal,
-): Promise<ActivateResult> {
-  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: ActivateResult = {};
-  if (text) {
-    try { parsed = JSON.parse(text) as ActivateResult; } 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 };
-}
-
-export type WorkspaceAuthOpts = WorkspaceFetchOpts;
-
-/** Adapter: deriva las opciones de fetch desde un StudioStreamOptions. */
-export function workspaceOptsFromStream(stream: StudioStreamOptions): WorkspaceAuthOpts {
-  return {
-    apiKey: stream.apiKey,
-    workspaceId: stream.workspaceId,
-    zone: stream.zone,
-    dev: stream.dev,
-    userId: stream.userId,
-  };
-}

package/src/studio/connect/polling.ts

@@ -1,94 +0,0 @@
-import { activateIntegration, getWorkspaceById, type WorkspaceAuthOpts } from './api.js';
-import {
-  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, label: string): void;
-  onConnected(label: string): void;
-  onTimeout(): void;
-  onError(message: string): void;
-}
-
-export interface PollingHandle {
-  cancel(): void;
-  /** True una vez que el loop se detuvo (success, timeout, error o cancel). */
-  readonly stopped: boolean;
-}
-
-/**
- * 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: WorkspaceAuthOpts,
-  channel: ConnectChannel,
-  linkData: ChannelLinkData,
-  cb: PollingCallbacks,
-): PollingHandle {
-  const knownIds = new Set(linkData.existingIntegrationIds ?? []);
-  const controller = new AbortController();
-  let attempts = 0;
-  let busy = false;
-  let stopped = false;
-  let timer: ReturnType<typeof setInterval> | null = 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 as Error).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; },
-  };
-}