plazbot-cli 0.2.26 → 0.3.1

package/src/studio/api/studioApi.ts

@@ -0,0 +1,27 @@
+import type { StudioStreamOptions } from './types.js';
+
+/**
+ * Construye la URL base según zona / modo dev.
+ *  LA  -> https://api.plazbot.com
+ *  EU  -> https://apieu.plazbot.com
+ *  dev -> http://localhost:5090
+ */
+export function getBaseUrl(zone: 'LA' | 'EU', dev?: boolean): string {
+  if (dev) return 'http://localhost:5090';
+  return zone === 'EU' ? 'https://apieu.plazbot.com' : 'https://api.plazbot.com';
+}
+
+export function buildStudioUrl(zone: 'LA' | 'EU', dev?: boolean): string {
+  return `${getBaseUrl(zone, dev)}/api/agent/studio`;
+}
+
+export function buildStudioHeaders(opts: StudioStreamOptions): Record<string, string> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    Accept: 'text/event-stream',
+    Authorization: `Bearer ${opts.apiKey}`,
+    'x-workspace-id': opts.workspaceId,
+  };
+  if (opts.userId) headers['x-user-id'] = opts.userId;
+  return headers;
+}

package/src/studio/api/types.ts

@@ -0,0 +1,96 @@
+/**
+ * Tipos de los chunks que emite el endpoint POST /api/agent/studio (SSE).
+ * Espejo del modelo del backend AgentStudioModels.cs.
+ */
+
+export type StudioChunkType = 'text' | 'tool_call' | 'tool_result' | 'usage' | 'done' | 'error';
+
+export interface StudioChunkText {
+  type: 'text';
+  content: string;
+}
+
+export interface StudioChunkToolCall {
+  type: 'tool_call';
+  tool_name: string;
+  tool_args?: unknown;
+}
+
+/** Resultado genérico devuelto por una tool (espejo de ToolExecutionResult.cs). */
+export interface ToolExecutionResult {
+  success: boolean;
+  tool?: string;
+  type?: string; // "agent_config" | "agent_list" | "diagnostic" | "agent_loaded" | ...
+  data?: unknown;
+  message?: string;
+  error?: string;
+}
+
+export interface StudioChunkToolResult {
+  type: 'tool_result';
+  tool_name: string;
+  tool_result?: ToolExecutionResult;
+}
+
+export interface StudioChunkUsage {
+  type: 'usage';
+  input_tokens: number;
+  output_tokens: number;
+}
+
+export interface StudioChunkDone {
+  type: 'done';
+}
+
+export interface StudioChunkError {
+  type: 'error';
+  error: string;
+}
+
+export type StudioChunk =
+  | StudioChunkText
+  | StudioChunkToolCall
+  | StudioChunkToolResult
+  | StudioChunkUsage
+  | StudioChunkDone
+  | StudioChunkError;
+
+/**
+ * Mensaje conversacional enviado al backend en el array `messages`.
+ */
+export interface StudioMessageIn {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+/**
+ * Payload del request POST /api/agent/studio.
+ * NB: el backend valida `message` (singular, string) y devuelve 400 si está vacío.
+ * `messages` lleva el historial; `message` lleva el último turno del usuario.
+ */
+export interface StudioRequest {
+  message: string;
+  messages: StudioMessageIn[];
+  agentId?: string | null;
+  agentConfig?: unknown;
+  workspaceId?: string;
+  userId?: string;
+}
+
+/**
+ * Opciones para el cliente SSE (autenticación + ruteo).
+ */
+export interface StudioStreamOptions {
+  apiKey: string;       // JWT
+  workspaceId: string;
+  userId?: string;
+  zone: 'LA' | 'EU';
+  dev?: boolean;
+}
+
+export class StudioHttpError extends Error {
+  constructor(public status: number, public statusText: string, public body?: string) {
+    super(`HTTP ${status} ${statusText}`);
+    this.name = 'StudioHttpError';
+  }
+}

package/src/studio/components/App.tsx

@@ -0,0 +1,266 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Box, useApp, useInput } from 'ink';
+import { Header } from './Header.js';
+import { Footer } from './Footer.js';
+import { ChatLog } from './ChatLog.js';
+import { Input } from './Input.js';
+import { Suggestions } from './Suggestions.js';
+import { useStudioStore, selectBackendMessages } from '../state/store.js';
+import { parseSlash } from '../slash/parser.js';
+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 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';
+
+export interface AppProps {
+  version: string;
+  stream: StudioStreamOptions;
+  initialAgentId?: string | null;
+  dev: boolean;
+  supportMode?: boolean;
+}
+
+export function App({ version, stream, initialAgentId, dev, supportMode }: AppProps): React.ReactElement {
+  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<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;
+    }
+  }, []);
+
+  // Cargar agente inicial si se pasó por flag.
+  useEffect(() => {
+    if (initialAgentId) {
+      useStudioStore.getState().setAgentId(initialAgentId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Cleanup on unmount.
+  useEffect(() => {
+    return () => { stopWaPolling(); };
+  }, [stopWaPolling]);
+
+  // 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');
+        return;
+      }
+      useStudioStore.getState().abortStream();
+      return;
+    }
+    if (key.ctrl && input === 'c') {
+      stopWaPolling();
+      useStudioStore.getState().abortStream();
+      exit();
+      return;
+    }
+  });
+
+  const sendToBackend = useCallback(async (userText: string) => {
+    const store = useStudioStore.getState();
+    // Snapshot del historial ANTES de agregar el nuevo user message, igual que
+    // el front (AgentStudioModal.tsx:504). Si se calcula después, el último
+    // user input queda duplicado (en `message` y en `messages`).
+    const historyForApi = selectBackendMessages();
+    store.pushUserMessage(userText);
+
+    const assistantId = store.startAssistantMessage();
+    const controller = new AbortController();
+    store.setAbortController(controller);
+    store.setStreaming(true);
+
+    const onChunk = (chunk: StudioChunk) => {
+      const s = useStudioStore.getState();
+      switch (chunk.type) {
+        case 'text':
+          s.appendAssistantText(assistantId, chunk.content ?? '');
+          break;
+        case 'tool_call':
+          s.startStep(chunk.tool_name, assistantId);
+          break;
+        case 'tool_result': {
+          const tr = chunk.tool_result;
+          const success = tr?.success !== false && !tr?.error;
+          s.resolveLastStep(chunk.tool_name, success ? 'success' : 'error', tr?.data, tr?.error);
+          // Stash the agent config in state (used as `agentConfig` context on
+          // the next request) and remember its id. We no longer render it.
+          const data = tr?.data as Record<string, unknown> | undefined;
+          if (data) {
+            const cfg = data.config ?? data.agentConfig ?? data.agent ?? null;
+            if (cfg && typeof cfg === 'object') {
+              s.setAgentConfig(cfg);
+              const idCandidate = (cfg as Record<string, unknown>).id;
+              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;
+            // 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,
+                {
+                  onAttempt(attempt) {
+                    useStudioStore.getState().updateWaConnect({ attempt });
+                  },
+                  onActivating() {
+                    useStudioStore.getState().setWaStatus('activating');
+                  },
+                  onConnected(number) {
+                    useStudioStore.getState().setWaStatus('connected', { connectedNumber: number });
+                    waPollingRef.current = null;
+                    if (!streamingRef.current) {
+                      const followUp =
+                        `My WhatsApp is now connected. Number: ${number || '(no number)'}. ` +
+                        `Continue with the agent setup.`;
+                      void sendBackendRef.current(followUp);
+                    }
+                  },
+                  onTimeout() {
+                    useStudioStore.getState().setWaStatus('timeout');
+                    waPollingRef.current = null;
+                  },
+                  onError(message) {
+                    useStudioStore.getState().setWaStatus('error', { errorMessage: message });
+                    waPollingRef.current = null;
+                  },
+                },
+              );
+            }
+          }
+          break;
+        }
+        case 'usage':
+          s.addUsage(chunk.input_tokens ?? 0, chunk.output_tokens ?? 0);
+          break;
+        case 'error':
+          s.failAllRunningSteps(chunk.error);
+          s.pushSyntheticAssistant(`✖ ${chunk.error}`, { error: true });
+          break;
+        case 'done':
+          break;
+      }
+    };
+
+    try {
+      await streamStudio(
+        stream,
+        {
+          message: userText,
+          messages: historyForApi,
+          agentId: useStudioStore.getState().agentId,
+          agentConfig: useStudioStore.getState().agentConfig,
+        },
+        onChunk,
+        controller.signal,
+      );
+    } catch (err) {
+      const msg = formatError(err, dev);
+      useStudioStore.getState().failAllRunningSteps('Network error');
+      useStudioStore.getState().pushSyntheticAssistant(msg, { error: true });
+    } finally {
+      useStudioStore.getState().finishAssistantMessage(assistantId);
+      useStudioStore.getState().setStreaming(false);
+      useStudioStore.getState().setAbortController(null);
+      // /compact flow: replace history with the assistant summary just produced.
+      if (useStudioStore.getState().pendingCompact) {
+        useStudioStore.getState().compactInto(assistantId);
+      }
+    }
+  }, [stream, dev, stopWaPolling]);
+
+  useEffect(() => { sendBackendRef.current = sendToBackend; }, [sendToBackend]);
+
+  const handleSubmit = useCallback(async (raw: string) => {
+    const parsed = parseSlash(raw);
+    if (parsed) {
+      const spec = slashRegistry.get(parsed.name);
+      if (!spec) {
+        useStudioStore.getState().pushSyntheticAssistant(
+          `Unknown command: \`/${parsed.name}\`. Run \`/help\` to see the list.`,
+          { error: true },
+        );
+        return;
+      }
+      const res = await spec.handler(parsed, { exit });
+      if (res.kind === 'message') {
+        await sendToBackend(res.content);
+      }
+      return;
+    }
+    await sendToBackend(raw);
+  }, [sendToBackend, exit]);
+
+  const empty = messages.length === 0;
+
+  return (
+    <Box flexDirection="column">
+      <Header
+        version={version}
+        workspace={stream.workspaceId}
+        zone={stream.zone}
+        agentId={agentId}
+        dev={dev}
+        supportMode={!!supportMode}
+      />
+
+      <Box flexDirection="column" paddingX={1}>
+        {empty ? <Suggestions /> : <ChatLog />}
+      </Box>
+
+      <Input disabled={streaming} onSubmit={handleSubmit} />
+      <Footer
+        inputTokens={usage.inputTokens}
+        outputTokens={usage.outputTokens}
+        streaming={streaming}
+      />
+    </Box>
+  );
+}
+
+function formatError(err: unknown, dev: boolean): string {
+  if (err instanceof StudioHttpError) {
+    if (err.status === 401) return '✖ Token expired or invalid. Run `plazbot init` with a valid JWT.';
+    if (err.status === 403) return '✖ No permission for this workspace.';
+    if (err.status === 429) return '✖ Rate limit reached. Wait a few seconds and try again.';
+    if (err.status >= 500) {
+      return dev
+        ? `✖ Backend error ${err.status}.\n\`\`\`\n${err.body ?? err.statusText}\n\`\`\``
+        : `✖ The backend returned error ${err.status}. Retry in a few seconds.`;
+    }
+    return `✖ HTTP ${err.status} ${err.statusText}`;
+  }
+  if (err instanceof Error) {
+    if (err.name === 'AbortError') return '✖ Stream cancelled.';
+    return `✖ ${err.message}`;
+  }
+  return '✖ Unknown error';
+}

package/src/studio/components/ChatLog.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Box, Static } from 'ink';
+import { useStudioStore } from '../state/store.js';
+import type { ChatMessage, ToolStep } from '../state/store.js';
+import { Message } from './Message.js';
+import { ToolCall } from './ToolCall.js';
+import { WhatsappConnectCard } from './WhatsappConnectCard.js';
+
+type HistoricItem =
+  | { kind: 'message'; key: string; message: ChatMessage }
+  | { kind: 'step'; key: string; step: ToolStep };
+
+/**
+ * Renders the conversation log.
+ *
+ * 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.
+ *
+ * The dynamic block at the bottom contains the streaming message, any steps
+ * still in `running`, and the WhatsApp connect card while it is active.
+ */
+export function ChatLog(): React.ReactElement {
+  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 stepsByMsg = new Map<string, ToolStep[]>();
+  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
+  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);
+
+  // Build the static (scrollback) list. Each message and step gets a unique
+  // key so React/Ink only writes it once.
+  const staticItems: HistoricItem[] = [];
+  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 });
+    }
+  }
+
+  const dynamicMessages = messages.filter((m) => dynamicMsgIds.has(m.id));
+
+  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} />
+          )
+        }
+      </Static>
+
+      <Box flexDirection="column">
+        {dynamicMessages.map((m) => (
+          <React.Fragment key={m.id}>
+            <Message message={m} />
+            {(stepsByMsg.get(m.id) ?? []).map((s) => (
+              <ToolCall key={s.id} step={s} />
+            ))}
+            {waConnect && waConnect.anchorMessageId === m.id ? (
+              <WhatsappConnectCard state={waConnect} />
+            ) : null}
+          </React.Fragment>
+        ))}
+        {/* Fallback: waConnect anchor message was cleared. */}
+        {waConnect && !messages.some((m) => m.id === waConnect.anchorMessageId) ? (
+          <WhatsappConnectCard state={waConnect} />
+        ) : null}
+      </Box>
+    </Box>
+  );
+}

package/src/studio/components/Footer.tsx

@@ -0,0 +1,38 @@
+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 · Esc cancel · Ctrl+C quit</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/studio/components/Header.tsx

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

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+
+interface InputProps {
+  disabled: boolean;
+  onSubmit: (value: string) => void;
+}
+
+export function Input({ disabled, onSubmit }: InputProps): React.ReactElement {
+  const [value, setValue] = useState('');
+
+  return (
+    <Box borderStyle="round" borderColor={disabled ? 'gray' : 'green'} paddingX={1}>
+      <Text color={disabled ? 'gray' : 'green'} bold>
+        {disabled ? '·' : '›'}{' '}
+      </Text>
+      <TextInput
+        value={value}
+        onChange={disabled ? () => {} : setValue}
+        onSubmit={(v: string) => {
+          if (disabled) return;
+          if (!v.trim()) return;
+          setValue('');
+          onSubmit(v);
+        }}
+        placeholder={disabled ? 'Waiting for response… (press Esc to cancel)' : 'Type a message or /help'}
+        showCursor={!disabled}
+      />
+    </Box>
+  );
+}

package/src/studio/components/Message.tsx

@@ -0,0 +1,87 @@
+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>
+  );
+}