plazbot-cli 0.2.26 → 0.3.2

package/src/studio/components/Suggestions.tsx

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,58 @@
+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/components/WhatsappConnectCard.tsx

@@ -0,0 +1,139 @@
+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';
+
+interface Props {
+  state: WaConnectState;
+}
+
+function formatExpiry(iso?: string): string {
+  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',
+  });
+}
+
+/**
+ * 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.
+ */
+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;
+  const shortUrl = linkData.shortUrl || '';
+  const expiry = formatExpiry(linkData.expiresAt);
+  const typeLabel =
+    linkData.linkType === 'whatsapp_business' ? 'WhatsApp Business' : 'WhatsApp Cloud API';
+
+  // Header glyph + color per status.
+  let headerIcon = '●';
+  let headerColor: 'green' | 'red' | 'yellow' = 'green';
+  let headerText = 'Connect your WhatsApp';
+  if (status === 'connected') {
+    headerIcon = '✓';
+    headerColor = 'green';
+    headerText = 'WhatsApp connected';
+  } else if (status === 'error') {
+    headerIcon = '✖';
+    headerColor = 'red';
+    headerText = 'Could not activate the number';
+  } 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 (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={status === 'error' ? 'red' : status === 'connected' ? 'green' : 'gray'}
+      paddingX={1}
+      marginY={1}
+      marginLeft={2}
+    >
+      {/* Header */}
+      <Box>
+        <Text bold color={headerColor}>{headerIcon} </Text>
+        <Text bold>{headerText}</Text>
+        {status !== 'connected' && status !== 'error' && status !== 'cancelled' ? (
+          <>
+            <Text dimColor>   </Text>
+            <Text dimColor>· {typeLabel}</Text>
+          </>
+        ) : null}
+      </Box>
+
+      {/* Link block */}
+      {showLink ? (
+        <Box marginTop={1} flexDirection="column">
+          <Box>
+            <Text dimColor>link: </Text>
+            <Text color="cyan" underline>{osc8(shortUrl, shortUrl)}</Text>
+          </Box>
+          {expiry ? (
+            <Box>
+              <Text dimColor>expires: {expiry}</Text>
+            </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>
+          </Box>
+        </Box>
+      ) : null}
+
+      {/* Status line */}
+      <Box marginTop={1}>
+        {status === 'waiting' ? (
+          <>
+            <Text color="yellow"><Spinner type="dots" /></Text>
+            <Text dimColor> Waiting for connection… </Text>
+            <Text dimColor>({attempt}/{WA_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>
+          </>
+        ) : null}
+        {status === 'connected' ? (
+          <Text color="green">
+            Number {connectedNumber || '(connected)'} activated successfully.
+          </Text>
+        ) : null}
+        {status === 'timeout' ? (
+          <Text dimColor>
+            We didn't detect the connection within 5 minutes. Ask the agent to try again.
+          </Text>
+        ) : null}
+        {status === 'cancelled' ? (
+          <Text dimColor>Polling cancelled by user.</Text>
+        ) : null}
+        {status === 'error' ? (
+          <Text color="red">{errorMessage || 'An error occurred while activating the integration.'}</Text>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}

package/src/studio/index.ts

@@ -0,0 +1,58 @@
+import { Command } from 'commander';
+
+interface StudioCmdOpts {
+  dev: boolean;
+  agentId?: string;
+  message?: string;
+  workspaceId?: string;
+}
+
+interface AskCmdOpts {
+  dev: boolean;
+  agentId?: string;
+  json: boolean;
+  workspaceId?: string;
+}
+
+export const studioCommand = new Command('studio')
+  .description('Interactive Plazbot Studio REPL (create, diagnose and manage AI agents)')
+  .option('--dev', 'Target the local backend (http://localhost:5090)', false)
+  .option('-a, --agent-id <id>', 'Preload an agent on startup')
+  .option('-w, --workspace-id <id>', 'Override the workspace (support / white-label partner mode)')
+  .option('-m, --message <text>', 'Run a one-shot prompt and exit')
+  .action(async (opts: StudioCmdOpts) => {
+    if (opts.message) {
+      const { runOneShot } = await import('./runOneShot.js');
+      await runOneShot({
+        dev: opts.dev,
+        agentId: opts.agentId,
+        message: opts.message,
+        workspaceOverride: opts.workspaceId,
+      });
+      return;
+    }
+    const { runRepl } = await import('./runRepl.js');
+    await runRepl({
+      dev: opts.dev,
+      agentId: opts.agentId,
+      workspaceOverride: opts.workspaceId,
+    });
+  });
+
+studioCommand
+  .command('ask <message>')
+  .description('Run a one-shot studio query without opening the TUI')
+  .option('--dev', 'Target the local backend (http://localhost:5090)', false)
+  .option('-a, --agent-id <id>', 'Agent to use as context')
+  .option('-w, --workspace-id <id>', 'Override the workspace (support / white-label partner mode)')
+  .option('--json', 'Print SSE chunks as raw NDJSON', false)
+  .action(async (message: string, opts: AskCmdOpts) => {
+    const { runOneShot } = await import('./runOneShot.js');
+    await runOneShot({
+      dev: opts.dev,
+      agentId: opts.agentId,
+      message,
+      json: opts.json,
+      workspaceOverride: opts.workspaceId,
+    });
+  });

package/src/studio/render/markdown.ts

@@ -0,0 +1,93 @@
+// @ts-ignore - marked-terminal no provee tipos
+import TerminalRenderer from 'marked-terminal';
+import { marked } from 'marked';
+import chalk from 'chalk';
+// @ts-ignore - cli-highlight no provee tipos completos
+import { highlight, supportsLanguage } from 'cli-highlight';
+
+let configured = false;
+
+const LANG_ALIASES: Record<string, string> = {
+  sh: 'bash',
+  shell: 'bash',
+  zsh: 'bash',
+  curl: 'bash',
+  jsx: 'javascript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  yml: 'yaml',
+  html: 'xml',
+  text: 'plaintext',
+  txt: 'plaintext',
+};
+
+function resolveLang(raw: string | undefined): string {
+  const k = (raw ?? '').toLowerCase().trim();
+  const aliased = LANG_ALIASES[k] ?? k;
+  if (!aliased) return 'plaintext';
+  try {
+    return supportsLanguage(aliased) ? aliased : 'plaintext';
+  } catch {
+    return 'plaintext';
+  }
+}
+
+function renderCodeBlock(code: string, rawLang: string | undefined): string {
+  const lang = resolveLang(rawLang);
+  let body: string;
+  try {
+    body = highlight(code, { language: lang, ignoreIllegals: true });
+  } catch {
+    body = code;
+  }
+
+  const label = (rawLang ?? '').trim() || lang;
+  const width = Math.max(20, Math.min(80, (process.stdout.columns || 80) - 8));
+  const headerLabel = ` ${label} `;
+  const headerRule = '─'.repeat(Math.max(0, width - headerLabel.length - 4));
+  const header = chalk.gray.dim(`──${headerLabel}${headerRule}`);
+  const footer = chalk.gray.dim('─'.repeat(width - 2));
+
+  // Indent del cuerpo para diferenciar del prosa
+  const indented = body
+    .split('\n')
+    .map((l) => '  ' + l)
+    .join('\n');
+
+  return `\n${header}\n${indented}\n${footer}\n`;
+}
+
+function configure(): void {
+  if (configured) return;
+
+  const renderer = new TerminalRenderer({
+    width: Math.max(40, (process.stdout.columns || 80) - 8),
+    reflowText: true,
+    tab: 2,
+    // Inline code mejor diferenciado del texto normal
+    codespan: chalk.cyan,
+  }) as any;
+
+  // Override del code block para syntax highlight + box delimitado.
+  // marked-terminal pasa (code, lang, escaped) al método `code`.
+  renderer.code = (code: string, lang: string | undefined): string =>
+    renderCodeBlock(code, lang);
+
+  marked.setOptions({ renderer });
+  configured = true;
+}
+
+/**
+ * Renderiza markdown a una cadena con secuencias ANSI lista para imprimir
+ * dentro de un <Text/> de Ink. Limpia el salto de línea trailing que añade marked.
+ */
+export function renderMarkdown(md: string): string {
+  if (!md) return '';
+  configure();
+  try {
+    const out = marked.parse(md) as string;
+    return typeof out === 'string' ? out.replace(/\n+$/, '') : md;
+  } catch {
+    return md;
+  }
+}

package/src/studio/render/steps.ts

@@ -0,0 +1,57 @@
+/**
+ * Maps backend tool_name values to human-readable step labels for the REPL.
+ * Keeps both forms (gerund for "running" and past tense for "success").
+ */
+const LABELS: Record<string, { running: string; done: string; failed: string }> = {
+  list_agents: {
+    running: 'Listing agents',
+    done: 'Agents listed',
+    failed: 'Could not list agents',
+  },
+  load_agent: {
+    running: 'Loading agent',
+    done: 'Agent loaded',
+    failed: 'Could not load agent',
+  },
+  diagnose_agent: {
+    running: 'Diagnosing agent',
+    done: 'Diagnosis complete',
+    failed: 'Could not diagnose agent',
+  },
+  create_agent_config: {
+    running: 'Generating agent configuration',
+    done: 'Configuration generated',
+    failed: 'Could not generate configuration',
+  },
+  update_agent_config: {
+    running: 'Updating agent configuration',
+    done: 'Configuration updated',
+    failed: 'Could not update configuration',
+  },
+  save_agent: {
+    running: 'Saving agent',
+    done: 'Agent saved',
+    failed: 'Could not save agent',
+  },
+  delete_agent: {
+    running: 'Deleting agent',
+    done: 'Agent deleted',
+    failed: 'Could not delete agent',
+  },
+  connect_whatsapp: {
+    running: 'Connecting WhatsApp',
+    done: 'WhatsApp connected',
+    failed: 'Could not connect WhatsApp',
+  },
+};
+
+export function stepLabel(toolName: string, status: 'running' | 'success' | 'error'): string {
+  const entry = LABELS[toolName] ?? {
+    running: `Running ${toolName}`,
+    done: `Ran ${toolName}`,
+    failed: `Failed: ${toolName}`,
+  };
+  if (status === 'running') return entry.running;
+  if (status === 'success') return entry.done;
+  return entry.failed;
+}

package/src/studio/runOneShot.ts

@@ -0,0 +1,114 @@
+import { getStoredCredentials } from '../utils/credentials.js';
+import { logger } from '../utils/logger.js';
+import { streamStudio } from './api/sseClient.js';
+import { StudioHttpError } from './api/types.js';
+import type { StudioChunk, StudioStreamOptions } from './api/types.js';
+import { stepLabel } from './render/steps.js';
+
+interface RunOneShotOptions {
+  dev: boolean;
+  agentId?: string;
+  message: string;
+  /** Si true, imprime cada chunk como una línea JSON (NDJSON). */
+  json?: boolean;
+  /** Overrides the workspace from local config (support / white-label partner mode). */
+  workspaceOverride?: string;
+}
+
+export async function runOneShot(opts: RunOneShotOptions): Promise<void> {
+  let creds;
+  try {
+    creds = await getStoredCredentials();
+  } catch {
+    logger.error('No active session. Run:');
+    console.log('  plazbot init -e <email> -k <jwt> -w <workspace> -z <LA|EU>');
+    process.exit(1);
+    return;
+  }
+
+  const effectiveWorkspace = opts.workspaceOverride ?? creds.workspace;
+  const supportMode = !!opts.workspaceOverride && opts.workspaceOverride !== creds.workspace;
+
+  if (supportMode && !opts.json) {
+    process.stderr.write(`! Support mode: acting on workspace "${effectiveWorkspace}" (your account belongs to "${creds.workspace}")\n`);
+  }
+
+  const stream: StudioStreamOptions = {
+    apiKey: creds.apiKey,
+    workspaceId: effectiveWorkspace,
+    userId: creds.userId ?? creds.email ?? undefined,
+    zone: creds.zone,
+    dev: opts.dev,
+  };
+
+  const controller = new AbortController();
+  process.on('SIGINT', () => controller.abort());
+
+  let assistantText = '';
+  const onChunk = (chunk: StudioChunk) => {
+    if (opts.json) {
+      process.stdout.write(JSON.stringify(chunk) + '\n');
+      return;
+    }
+    switch (chunk.type) {
+      case 'text':
+        assistantText += chunk.content ?? '';
+        process.stdout.write(chunk.content ?? '');
+        break;
+      case 'tool_call':
+        process.stderr.write(`\n  ▸ ${stepLabel(chunk.tool_name, 'running')}…\n`);
+        break;
+      case 'tool_result': {
+        const tr = chunk.tool_result;
+        const ok = tr?.success !== false && !tr?.error;
+        const label = stepLabel(chunk.tool_name, ok ? 'success' : 'error');
+        process.stderr.write(`  ${ok ? '✓' : '✗'} ${label}${tr?.error ? ' — ' + tr.error : ''}\n`);
+        break;
+      }
+      case 'usage':
+        process.stderr.write(
+          `  tokens: ${chunk.input_tokens} in / ${chunk.output_tokens} out\n`,
+        );
+        break;
+      case 'error':
+        process.stderr.write(`\n  ✖ ${chunk.error}\n`);
+        break;
+      case 'done':
+        break;
+    }
+  };
+
+  try {
+    await streamStudio(
+      stream,
+      {
+        message: opts.message,
+        messages: [{ role: 'user', content: opts.message }],
+        agentId: opts.agentId ?? null,
+      },
+      onChunk,
+      controller.signal,
+    );
+    if (!opts.json) process.stdout.write('\n');
+    if (!assistantText && !opts.json) process.stderr.write('  (no text response)\n');
+  } catch (err) {
+    process.stderr.write('\n' + formatError(err, opts.dev) + '\n');
+    process.exit(1);
+  }
+}
+
+function formatError(err: unknown, dev: boolean): string {
+  if (err instanceof StudioHttpError) {
+    if (err.status === 401) return '✖ Token expired or invalid. Run `plazbot init`.';
+    if (err.status === 403) return '✖ No permission for this workspace.';
+    if (err.status === 429) return '✖ Rate limit reached.';
+    if (err.status >= 500) {
+      return dev
+        ? `✖ Backend ${err.status}: ${err.body ?? err.statusText}`
+        : `✖ Backend returned ${err.status}. Retry.`;
+    }
+    return `✖ HTTP ${err.status} ${err.statusText}`;
+  }
+  if (err instanceof Error) return `✖ ${err.message}`;
+  return '✖ Unknown error';
+}

package/src/studio/runRepl.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render } from 'ink';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { App } from './components/App.js';
+import { getStoredCredentials } from '../utils/credentials.js';
+import { logger } from '../utils/logger.js';
+import type { StudioStreamOptions } from './api/types.js';
+
+interface RunReplOptions {
+  dev: boolean;
+  agentId?: string;
+  /** Overrides the workspace from local config (support / white-label partner mode). */
+  workspaceOverride?: string;
+}
+
+export async function runRepl(opts: RunReplOptions): Promise<void> {
+  let creds;
+  try {
+    creds = await getStoredCredentials();
+  } catch (err) {
+    logger.error('No active session. Run:');
+    console.log('  plazbot init -e <email> -k <jwt> -w <workspace> -z <LA|EU>');
+    process.exit(1);
+  }
+
+  const effectiveWorkspace = opts.workspaceOverride ?? creds.workspace;
+  const supportMode = !!opts.workspaceOverride && opts.workspaceOverride !== creds.workspace;
+
+  if (supportMode) {
+    logger.warning(`Support mode: acting on workspace "${effectiveWorkspace}" (your account belongs to "${creds.workspace}")`);
+    logger.warning('All actions are tied to your user and will be visible in audit trails.');
+  }
+
+  const stream: StudioStreamOptions = {
+    apiKey: creds.apiKey,
+    workspaceId: effectiveWorkspace,
+    userId: creds.userId ?? creds.email ?? undefined,
+    zone: creds.zone,
+    dev: opts.dev,
+  };
+
+  const version = readVersion();
+
+  const { waitUntilExit } = render(
+    <App
+      version={version}
+      stream={stream}
+      initialAgentId={opts.agentId ?? null}
+      dev={opts.dev}
+      supportMode={supportMode}
+    />,
+    {
+      exitOnCtrlC: false,
+    },
+  );
+
+  // Cierre limpio con Ctrl+C: la App lo gestiona vía useInput.
+  process.on('SIGINT', () => {
+    // no-op aquí; App.tsx llama exit() al detectar Ctrl+C.
+  });
+
+  await waitUntilExit();
+}
+
+function readVersion(): string {
+  try {
+    const __dirname = dirname(fileURLToPath(import.meta.url));
+    const pkgPath = join(__dirname, '..', '..', 'package.json');
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    return pkg.version ?? '0.0.0';
+  } catch {
+    return '0.0.0';
+  }
+}