@ghostystudio/cli 0.52.0 → 0.53.0

package/README.md

@@ -42,6 +42,7 @@ ghosty agents embed enable|disable <id> [--domains a.com,*.b.com]   # web widget
 ghosty agents embed <id> [--per-visitor N] [--per-ip N] [--welcome TEXT] [--color #hex] [--rotate]   # state + the <script> to paste
 ghosty agents embed <id> [--title T] [--avatar URL] [--icon chat|avatar|ghost] [--position left] [--theme auto] [--bubble-text T] [--auto-open S] [--starters "a|b"]   # its look
 ghosty agents embed <id> [--style '{json}'] [--theme-source teams|site --site-url URL] [--style-file theme.json]   # its theme · `theme` exports it
+ghosty agents embed <id> --out src/components/GhostyChat.tsx [--force]   # your own React chat component (no deps), token + theme baked in · the output also prints the React snippet (`react` in --json)
 ghosty agents doctor <id> [--verbose]                 # exits 1 when it finds a problem
 ghosty agents docs ls|grant|revoke <id> [doc]         [--write] [--no-deliver]
 ghosty agents docs add <id> --url URL | --file PATH   [--description TEXT] [--grant read|write|no]
@@ -115,7 +116,7 @@ Exit codes: `0` ok · `1` API error · `2` usage error · `3` not signed in.
 
 ### Changes in 0.51.0
 
-- `agents embed enable|disable <id> [--domains a.com,*.b.com] [--per-visitor N] [--per-ip N] [--welcome T] [--color #hex] [--rotate]`: the **web widget**, a chat bubble with the agent on your own site (one `<script>`), loading only on the domains you list; each visitor gets an isolated conversation and talks as a customer. Claude engine only. No flags = state + the snippet.
+- `agents embed enable|disable <id> [--domains a.com,*.b.com] [--per-visitor N] [--per-ip N] [--welcome T] [--color #hex] [--rotate]`: the **web widget**, a chat bubble with the agent on your own site (one `<script>`), loading only on the domains you list; each visitor gets an isolated conversation and talks as a customer. Claude or MiniGhosty (ghosty-lite) engine only. No flags = state + the snippet.
 
 ### Changes in 0.50.0
 

package/dist/index.js

@@ -2625,10 +2625,10 @@ var require_binary = __commonJS({
         if (typeof node_buffer.Buffer === "function") {
           str = buf instanceof node_buffer.Buffer ? buf.toString("base64") : node_buffer.Buffer.from(buf.buffer).toString("base64");
         } else if (typeof btoa === "function") {
-          let s = "";
+          let s2 = "";
           for (let i = 0; i < buf.length; ++i)
-            s += String.fromCharCode(buf[i]);
-          str = btoa(s);
+            s2 += String.fromCharCode(buf[i]);
+          str = btoa(s2);
         } else {
           throw new Error("This environment does not support writing binary tags; either Buffer or btoa is required");
         }
@@ -3686,8 +3686,8 @@ var require_Document = __commonJS({
         if (this.errors.length > 0)
           throw new Error("Document with errors cannot be stringified");
         if ("indent" in options && (!Number.isInteger(options.indent) || Number(options.indent) <= 0)) {
-          const s = JSON.stringify(options.indent);
-          throw new Error(`"indent" option must be a positive integer, not ${s}`);
+          const s2 = JSON.stringify(options.indent);
+          throw new Error(`"indent" option must be a positive integer, not ${s2}`);
         }
         return stringifyDocument.stringifyDocument(this, options);
       }
@@ -5900,12 +5900,12 @@ var require_lexer = __commonJS({
         if (ch === "-" || ch === ".") {
           if (!this.atEnd && !this.hasChars(4))
             return this.setNext("line-start");
-          const s = this.peek(3);
-          if ((s === "---" || s === "...") && isEmpty(this.charAt(3))) {
+          const s2 = this.peek(3);
+          if ((s2 === "---" || s2 === "...") && isEmpty(this.charAt(3))) {
             yield* this.pushCount(3);
             this.indentValue = 0;
             this.indentNext = 0;
-            return s === "---" ? "doc" : "stream";
+            return s2 === "---" ? "doc" : "stream";
           }
         }
         this.indentValue = yield* this.pushSpaces(false);
@@ -6210,11 +6210,11 @@ var require_lexer = __commonJS({
         return 0;
       }
       *pushToIndex(i, allowEmpty) {
-        const s = this.buffer.slice(this.pos, i);
-        if (s) {
-          yield s;
-          this.pos += s.length;
-          return s.length;
+        const s2 = this.buffer.slice(this.pos, i);
+        if (s2) {
+          yield s2;
+          this.pos += s2.length;
+          return s2.length;
         } else if (allowEmpty)
           yield "";
         return 0;
@@ -8168,7 +8168,7 @@ var SERVER_MESSAGES = [
   // — Widget web (`agents embed`)
   ["s\xF3lo el due\xF1o del agente maneja su widget web", "only the agent's owner manages its web widget"],
   ["dominio no v\xE1lido: {} (usa ejemplo.com o *.ejemplo.com, sin https:// ni rutas)", "invalid domain: {} (use example.com or *.example.com, no https:// or paths)"],
-  ["el widget web s\xF3lo corre con motor claude (es el que a\xEDsla a cada visitante)", "the web widget only runs on the claude engine (it's the one that isolates each visitor)"],
+  ["el widget web s\xF3lo corre con Claude o MiniGhosty (ghosty-lite): son los que a\xEDslan a cada visitante", "the web widget only runs on Claude or MiniGhosty (ghosty-lite): they isolate each visitor"],
   ["pon al menos un dominio donde va a vivir el widget (--domains ejemplo.com)", "add at least one domain where the widget will live (--domains example.com)"]
 ];
 
@@ -8184,7 +8184,7 @@ function setLang(l) {
 var lang = () => current ?? (current = detectLang());
 var t = (en, es) => lang() === "es" ? es : en;
 var compiled = null;
-var escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var escape = (s2) => s2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function compile(es) {
   return new RegExp(`^${es.split("{}").map(escape).join("(.+?)")}$`, "s");
 }
@@ -8214,12 +8214,12 @@ var CliError = class extends Error {
 var usage = (message, hint) => new CliError(message, EXIT.USAGE, hint);
 var globals = { json: false };
 var color = process.stderr.isTTY && !process.env.NO_COLOR;
-var paint = (code) => (s) => color ? `\x1B[${code}m${s}\x1B[0m` : s;
+var paint = (code) => (s2) => color ? `\x1B[${code}m${s2}\x1B[0m` : s2;
 var dim = paint("2");
 var bold = paint("1");
 var lavender = paint("38;2;154;153;234");
 var red = paint("31");
-var info = (s) => process.stderr.write(s + "\n");
+var info = (s2) => process.stderr.write(s2 + "\n");
 function out(data, human) {
   if (globals.json || !human) process.stdout.write(JSON.stringify(data, null, globals.json ? 0 : 2) + "\n");
   else process.stdout.write(human() + "\n");
@@ -8468,7 +8468,7 @@ async function postLong(path, body, timeoutMs = 9e5) {
     const req = httpsRequest(`${base}${path}`, {
       method: "POST",
       timeout: timeoutMs,
-      headers: { authorization: `Bearer ${token}`, "user-agent": `ghosty-cli/${"0.52.0"}`, "content-type": "application/json", "content-length": Buffer.byteLength(data) }
+      headers: { authorization: `Bearer ${token}`, "user-agent": `ghosty-cli/${"0.53.0"}`, "content-type": "application/json", "content-length": Buffer.byteLength(data) }
     }, (res) => {
       let buf = "";
       res.on("data", (c) => buf += c);
@@ -8510,7 +8510,7 @@ async function request(path, opts = {}, retried = false) {
     method: opts.method ?? (opts.body !== void 0 || opts.raw !== void 0 ? "POST" : "GET"),
     headers: {
       authorization: `Bearer ${token}`,
-      "user-agent": `ghosty-cli/${"0.52.0"}`,
+      "user-agent": `ghosty-cli/${"0.53.0"}`,
       "accept-language": lang(),
       ...opts.body !== void 0 ? { "content-type": "application/json" } : {},
       ...opts.headers
@@ -8624,10 +8624,10 @@ async function uploadMedia(file) {
   const mime = MIME[ext] ?? "application/octet-stream";
   return { url: r.url, mime, filename: r.name, type: mime.startsWith("image/") ? "image" : mime.startsWith("audio/") ? "audio" : mime.startsWith("video/") ? "video" : "document" };
 }
-function richLine(s) {
-  const d = s.data ?? {};
+function richLine(s2) {
+  const d = s2.data ?? {};
   const str = (k) => typeof d[k] === "string" ? d[k] : "";
-  switch (s.rich) {
+  switch (s2.rich) {
     case "ubicacion":
       return `\u{1F4CD} ${str("nombre") || t("location", "ubicaci\xF3n")} \xB7 ${Number(d.latitud).toFixed(4)},${Number(d.longitud).toFixed(4)}${str("direccion") ? dim(` ${str("direccion")}`) : ""}`;
     case "boton":
@@ -8644,7 +8644,7 @@ function richLine(s) {
 }
 function sentText(sent) {
   return sent.map(
-    (s) => s.kind === "text" ? `${lavender("\u2192")} ${s.text}` : s.kind === "voice" ? `${lavender("\u{1F3A4}")} ${s.text}` : s.kind === "file" ? `${lavender(/^audio\//.test(s.mime ?? "") ? "\u{1F3A4}" : "\u{1F4C4}")} ${s.name} ${dim(s.url)}` : richLine(s)
+    (s2) => s2.kind === "text" ? `${lavender("\u2192")} ${s2.text}` : s2.kind === "voice" ? `${lavender("\u{1F3A4}")} ${s2.text}` : s2.kind === "file" ? `${lavender(/^audio\//.test(s2.mime ?? "") ? "\u{1F3A4}" : "\u{1F4C4}")} ${s2.name} ${dim(s2.url)}` : richLine(s2)
   ).join("\n\n");
 }
 async function tryWaba(id, text, v) {
@@ -8702,7 +8702,7 @@ async function tryReplay(id, v) {
         entry.steps.push({ user: p.user, original: p.original, reply: r.body.text ?? "", sent: r.body.sent ?? [], error: r.body.error ?? null, ms: Date.now() - t0, status: r.status });
         await save();
       }
-      const bad = entry.steps.filter((s) => s.status !== 200 || !s.reply).length;
+      const bad = entry.steps.filter((s2) => s2.status !== 200 || !s2.reply).length;
       info(`  ${bad ? red("!") : lavender("\u2713")} ${c.id}: ${t(`${entry.steps.length} turn(s)`, `${entry.steps.length} turno(s)`)}${bad ? t(`, ${bad} without an answer`, `, ${bad} sin respuesta`) : ""}`);
     }
   };
@@ -8711,8 +8711,8 @@ async function tryReplay(id, v) {
   report.finishedAt = (/* @__PURE__ */ new Date()).toISOString();
   await save();
   const steps = Object.values(report.results).flatMap((r) => r.steps);
-  const failed = steps.filter((s) => s.status !== 200 || !s.reply).length;
-  const summary = { file, conversations: Object.keys(report.results).length, turns: steps.length, failed, medianMs: steps.map((s) => s.ms).sort((a, b) => a - b)[Math.floor(steps.length / 2)] ?? 0 };
+  const failed = steps.filter((s2) => s2.status !== 200 || !s2.reply).length;
+  const summary = { file, conversations: Object.keys(report.results).length, turns: steps.length, failed, medianMs: steps.map((s2) => s2.ms).sort((a, b) => a - b)[Math.floor(steps.length / 2)] ?? 0 };
   out(summary, () => `${failed ? red("!") : lavender("\u2713")} ${t(`${summary.turns} turn(s) in ${summary.conversations} conversation(s), ${failed} without an answer, median ${Math.round(summary.medianMs / 1e3)}s`, `${summary.turns} turno(s) en ${summary.conversations} conversaci\xF3n(es), ${failed} sin respuesta, mediana ${Math.round(summary.medianMs / 1e3)}s`)}
 ${dim(t(`Report: ${file}   Failed turns: ghosty turns ls ${id} --errors --since 2h`, `Reporte: ${file}   Turnos fallidos: ghosty turns ls ${id} --errors --since 2h`))}`);
   if (failed) process.exitCode = 1;
@@ -8764,6 +8764,252 @@ function lineDiff(before, after, context = 2) {
   return lines.join("\n");
 }
 
+// src/embed-component.ts
+var DEFAULT_BASE = "https://www.ghosty.studio";
+function baseFromSnippet(snippet) {
+  const m = snippet?.match(/src="(https?:\/\/[^"]+?)\/widget\.js"/);
+  return m ? m[1] : DEFAULT_BASE;
+}
+function reactSnippet(token, baseUrl2) {
+  const base = baseUrl2 === DEFAULT_BASE ? "" : ` baseUrl="${baseUrl2}"`;
+  return {
+    install: "npm i @ghostystudio/widget",
+    code: `import { GhostyWidget } from "@ghostystudio/widget";
+
+<GhostyWidget token="${token}"${base} />`
+  };
+}
+var s = (v) => JSON.stringify(v ?? null);
+var hexOr = (v, def) => typeof v === "string" && /^#[0-9a-f]{6}$/i.test(v) ? v : def;
+function reactComponentSource(th, ts) {
+  const T = (x) => ts ? x : "";
+  const st = th.style ?? {};
+  const radius = typeof st.radius === "number" ? st.radius : 16;
+  const font = typeof st.fontFamily === "string" ? st.fontFamily : null;
+  return `// Chat de Ghosty Studio \u2014 generado por \`ghosty agents embed --out\`. Este archivo es TUYO:
+// c\xE1mbialo como quieras; no depende de ning\xFAn paquete, s\xF3lo de React.
+// Habla con tu agente por el contrato del widget web (/embed/w/<token>/v/<visitante>/\u2026).
+// \u26A0\uFE0F S\xF3lo funciona en los dominios que autorizaste en el widget (ficha \u2192 Canales \u2192 Widget web,
+// o \`ghosty agents embed <id> --domains tusitio.com\`). En localhost el servidor lo rechaza.
+import { useEffect, useRef, useState } from "react";
+
+// \u2500\u2500 Conexi\xF3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// El token del widget. Si lo rotas (\`--rotate\`), c\xE1mbialo aqu\xED.
+const TOKEN = ${s(th.token)};
+const BASE_URL = ${s(th.baseUrl)};
+
+// \u2500\u2500 Textos \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const TITLE = ${s(th.title)};
+const SUBTITLE = ${s(th.subtitle)}; // null = sin rengl\xF3n bajo el t\xEDtulo
+const WELCOME = ${s(th.welcome)}; // el primer mensaje que ve el visitante
+const PLACEHOLDER = ${s(th.placeholder ?? `Escr\xEDbele a ${th.title}`)};
+const STARTERS${T(": string[]")} = ${s(th.starters)}; // sugerencias (se ocultan al primer mensaje)
+
+// \u2500\u2500 Tema (tu tema actual del widget) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const THEME = {
+  font: ${s(font ? `"${font}", ui-sans-serif, system-ui, sans-serif` : "ui-sans-serif, system-ui, sans-serif")},
+  fontHref: ${s(font ? `https://fonts.googleapis.com/css2?family=${encodeURIComponent(font).replace(/%20/g, "+")}:wght@400;500;600;700&display=swap` : null)}, // null = no carga fuente
+  radius: ${radius}, // esquinas en px
+  headerBg: ${s(hexOr(st.headerBg, th.color))},
+  headerText: ${s(hexOr(st.headerText, th.textColor))},
+  panelBg: ${s(hexOr(st.panelBg, "#ffffff"))},
+  userBubbleBg: ${s(hexOr(st.userBubbleBg, th.color))},
+  userBubbleText: ${s(hexOr(st.userBubbleText, th.textColor))},
+  agentBubbleBg: ${s(hexOr(st.agentBubbleBg, "#f1f1f4"))},
+  agentBubbleText: ${s(hexOr(st.agentBubbleText, "#191a20"))},
+  inputBg: ${s(hexOr(st.inputBg, "#ffffff"))},
+  sendBg: ${s(hexOr(st.sendBg, th.color))},
+  sendIcon: ${s(hexOr(st.sendIcon, th.textColor))},
+  titleUppercase: ${st.titleUppercase === true},
+};
+
+${T(`type Msg = { id: string; role: "user" | "assistant"; text: string; pending?: boolean };
+type Status = "connecting" | "idle" | "thinking" | "streaming";
+
+`)}// El visitante: un uuid por navegador (misma llave que el widget). B\xF3rralo para empezar de cero.
+const VISITOR_KEY = "ghosty:widget:vid";
+function visitorId()${T(": string")} {
+  try {
+    const v = localStorage.getItem(VISITOR_KEY);
+    if (v && /^[0-9a-f-]{36}$/.test(v)) return v;
+    const fresh = crypto.randomUUID();
+    localStorage.setItem(VISITOR_KEY, fresh);
+    return fresh;
+  } catch {
+    return crypto.randomUUID();
+  }
+}
+
+// \u2500\u2500 La l\xF3gica del chat (puedes usarla sola con tu propia UI) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+export function useGhostyChat() {
+  const [messages, setMessages] = useState${T("<Msg[]>")}([]);
+  const [status, setStatus] = useState${T("<Status>")}("connecting");
+  const [error, setError] = useState${T("<string | null>")}(null);
+  const base = useRef${T("<string | null>")}(null);
+  const waiting = useRef(false);
+
+  useEffect(() => {
+    const url = \`\${BASE_URL}/embed/w/\${TOKEN}/v/\${visitorId()}\`;
+    base.current = url;
+    let es${T(": EventSource | null")} = null;
+    let closed = false;
+    // Texto del agente: se pega a la burbuja en curso o abre una nueva.
+    const put = (text${T(": string")}, replace${T(": boolean")}) =>
+      setMessages((ms) => {
+        const last = ms[ms.length - 1];
+        if (last && last.role === "assistant" && last.pending) return [...ms.slice(0, -1), { ...last, text: replace ? text : last.text + text }];
+        return [...ms, { id: crypto.randomUUID(), role: "assistant", text, pending: true }];
+      });
+    const settle = () => setMessages((ms) => ms.map((m) => (m.pending ? { ...m, pending: false } : m)).filter((m) => m.role === "user" || m.text));
+    const data = (e${T(": Event")}) => {
+      try {
+        return JSON.parse((e${T(" as MessageEvent")}).data || "{}");
+      } catch {
+        return {};
+      }
+    };
+
+    fetch(\`\${url}/history\`)
+      .then((r) => (r.ok ? r.json() : { messages: [] }))
+      .catch(() => ({ messages: [] }))
+      .then((j) => {
+        if (closed) return;
+        setMessages((j.messages ?? []).map((m${T(": { role: string; text: string }")}) => ({ id: crypto.randomUUID(), role: m.role === "user" ? "user" : "assistant", text: m.text })));
+        setStatus("idle");
+        es = new EventSource(\`\${url}/events\`);
+        // Reconexi\xF3n: el texto del turno vuelve a llegar entero, se vac\xEDa la burbuja en curso.
+        es.addEventListener("started", () => setMessages((ms) => ms.map((m) => (m.pending ? { ...m, text: "" } : m))));
+        es.addEventListener("chunk", (e) => {
+          const d = data(e);
+          if (d.text) { put(d.text, false); setStatus("streaming"); }
+        });
+        es.addEventListener("reemplazo", (e) => { const d = data(e); if (typeof d.text === "string") put(d.text, true); });
+        es.addEventListener("error", (e) => { const d = data(e); if (d.message) setError(d.message); });
+        es.addEventListener("done", (e) => {
+          const d = data(e);
+          // \`reposo\`: llega al conectar (no hab\xEDa turno). S\xF3lo cuenta si esper\xE1bamos respuesta.
+          if (d.reposo && !waiting.current) return;
+          if (d.reposo && d.ultimo?.text) put(d.ultimo.text, true);
+          if (d.interrumpido) setError(d.interrumpido.motivo ?? "la respuesta se cort\xF3");
+          waiting.current = false;
+          settle();
+          setStatus("idle");
+        });
+      });
+    return () => {
+      closed = true;
+      es?.close();
+    };
+  }, []);
+
+  async function send(text${T(": string")}) {
+    const content = text.trim();
+    if (!content || !base.current) return;
+    setError(null);
+    waiting.current = true;
+    setStatus("thinking");
+    setMessages((ms) => [...ms, { id: crypto.randomUUID(), role: "user", text: content }]);
+    const r = await fetch(\`\${base.current}/messages\`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content, turnId: crypto.randomUUID() }),
+    }).catch(() => null);
+    if (!r || !r.ok) {
+      // Los topes (mensajes por d\xEDa) y avisos llegan como texto listo para ense\xF1ar.
+      waiting.current = false;
+      setStatus("idle");
+      setError(r ? (await r.text().catch(() => "")) || \`error \${r.status}\` : "no se pudo enviar el mensaje");
+    }
+  }
+
+  async function stop() {
+    if (base.current) await fetch(\`\${base.current}/cancel\`, { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" }).catch(() => {});
+  }
+
+  return { messages, send, stop, status, error };
+}
+
+// \u2500\u2500 La UI: c\xE1mbiala a tu gusto \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+export default function GhostyChat() {
+  const { messages, send, stop, status, error } = useGhostyChat();
+  const [text, setText] = useState("");
+  const end = useRef${T("<HTMLDivElement>")}(null);
+  const busy = status === "thinking" || status === "streaming";
+
+  useEffect(() => {
+    end.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [messages]);
+  useEffect(() => {
+    if (!THEME.fontHref) return;
+    const l = document.createElement("link");
+    l.rel = "stylesheet";
+    l.href = THEME.fontHref;
+    document.head.appendChild(l);
+    return () => l.remove();
+  }, []);
+
+  const submit = (e${T("?: { preventDefault: () => void }")}) => {
+    e?.preventDefault();
+    if (busy || !text.trim()) return;
+    void send(text);
+    setText("");
+  };
+
+  const bubble = (role${T(': "user" | "assistant"')}) => ({
+    maxWidth: "85%",
+    padding: "8px 12px",
+    borderRadius: THEME.radius,
+    whiteSpace: "pre-wrap"${T(" as const")},
+    alignSelf: role === "user" ? "flex-end" : "flex-start",
+    background: role === "user" ? THEME.userBubbleBg : THEME.agentBubbleBg,
+    color: role === "user" ? THEME.userBubbleText : THEME.agentBubbleText,
+  });
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: 560, width: "100%", maxWidth: 400, overflow: "hidden", borderRadius: THEME.radius, background: THEME.panelBg, fontFamily: THEME.font, boxShadow: "0 12px 40px rgba(0,0,0,.18)" }}>
+      <header style={{ padding: "12px 16px", background: THEME.headerBg, color: THEME.headerText }}>
+        <div style={{ fontWeight: 600, fontSize: 14, textTransform: THEME.titleUppercase ? "uppercase" : "none", letterSpacing: THEME.titleUppercase ? "0.12em" : undefined }}>{TITLE}</div>
+        {SUBTITLE && <div style={{ fontSize: 12, opacity: 0.8 }}>{SUBTITLE}</div>}
+      </header>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 8, fontSize: 14, lineHeight: 1.45 }}>
+        <div style={bubble("assistant")}>{WELCOME}</div>
+        {messages.map((m) => (
+          <div key={m.id} style={bubble(m.role)}>{m.text}</div>
+        ))}
+        {status === "thinking" && <div style={{ ...bubble("assistant"), opacity: 0.6 }}>\u2026</div>}
+        {!messages.length && STARTERS.length > 0 && (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+            {STARTERS.map((s) => (
+              <button key={s} type="button" onClick={() => void send(s)} style={{ border: \`1px solid \${THEME.sendBg}\`, color: THEME.sendBg, background: "transparent", borderRadius: 999, padding: "4px 10px", fontSize: 13, cursor: "pointer" }}>
+                {s}
+              </button>
+            ))}
+          </div>
+        )}
+        {error && <div style={{ color: "#b42318", fontSize: 13 }}>{error}</div>}
+        <div ref={end} />
+      </div>
+
+      <form onSubmit={submit} style={{ display: "flex", gap: 8, padding: 12, borderTop: "1px solid rgba(0,0,0,.08)" }}>
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder={PLACEHOLDER}
+          style={{ flex: 1, padding: "10px 12px", borderRadius: THEME.radius, border: "1px solid rgba(0,0,0,.15)", background: THEME.inputBg, fontSize: 16, fontFamily: "inherit" }}
+        />
+        {busy ? (
+          <button type="button" onClick={() => void stop()} aria-label="Detener" style={{ width: 42, borderRadius: THEME.radius, border: 0, background: THEME.sendBg, color: THEME.sendIcon, cursor: "pointer" }}>\u25A0</button>
+        ) : (
+          <button type="submit" aria-label="Enviar" style={{ width: 42, borderRadius: THEME.radius, border: 0, background: THEME.sendBg, color: THEME.sendIcon, cursor: "pointer" }}>\u2191</button>
+        )}
+      </form>
+    </div>
+  );
+}
+`;
+}
+
 // src/commands/agents.ts
 var enc2 = encodeURIComponent;
 var agentPath = (id, rest = "") => `/api/v2/agents/${enc2(id)}${rest}`;
@@ -8775,9 +9021,9 @@ var need = (v, what, example) => {
 async function agentsLs(workspace, f = {}) {
   if (f.sponsor || f.owner) {
     const q = new URLSearchParams({ ...f.sponsor ? { sponsor: f.sponsor } : {}, ...f.owner ? { owner: f.owner } : {}, ...f.engine ? { engine: f.engine } : {}, ...workspace && !f.all ? { workspace } : {} });
-    const s = await api(`/api/v2/agents?${q}`);
-    if (f.ids) return void process.stdout.write(s.agents.map((a) => a.id).join("\n") + (s.agents.length ? "\n" : ""));
-    return out(s.agents, () => table(s.agents.map((a) => ({ id: a.id, name: a.name, engine: a.engine, model: a.model, owner: a.owner, sponsored: a.sponsored ? t("yes", "s\xED") : "" })), ["id", "name", "engine", "model", "owner", "sponsored"]));
+    const s2 = await api(`/api/v2/agents?${q}`);
+    if (f.ids) return void process.stdout.write(s2.agents.map((a) => a.id).join("\n") + (s2.agents.length ? "\n" : ""));
+    return out(s2.agents, () => table(s2.agents.map((a) => ({ id: a.id, name: a.name, engine: a.engine, model: a.model, owner: a.owner, sponsored: a.sponsored ? t("yes", "s\xED") : "" })), ["id", "name", "engine", "model", "owner", "sponsored"]));
   }
   const r = await api("/api/v2/me/agents?client=cli");
   const list = (workspace ? r.agentes.filter((a) => a.espacio?.nombre === workspace) : r.agentes).filter((a) => !f.engine || (a.motor ?? a.origen) === f.engine);
@@ -8985,8 +9231,8 @@ ${dim(t(`${r3.beforeChars} \u2192 ${r3.chars} chars. Dry run: nothing changed.`,
   const unset = (v["unset-env"] ?? "").split(",").map((k) => k.trim()).filter(Boolean);
   if (env || unset.length) body.env = { ...env ?? {}, ...Object.fromEntries(unset.map((k) => [k, ""])) };
   const connectors = {};
-  for (const c of (v.connect ?? "").split(",").map((s) => s.trim()).filter(Boolean)) connectors[c] = {};
-  for (const c of (v.disconnect ?? "").split(",").map((s) => s.trim()).filter(Boolean)) connectors[c] = null;
+  for (const c of (v.connect ?? "").split(",").map((s2) => s2.trim()).filter(Boolean)) connectors[c] = {};
+  for (const c of (v.disconnect ?? "").split(",").map((s2) => s2.trim()).filter(Boolean)) connectors[c] = null;
   if (Object.keys(connectors).length) body.connectors = connectors;
   const voice = {};
   if (v.voice) {
@@ -9212,8 +9458,8 @@ async function skillsCmd(sub, id, slug, v) {
       const r = await api(agentPath(id, "/skills"));
       const short3 = (d) => (d ?? "").replace(/\s+/g, " ").slice(0, 70);
       const rows = [
-        ...r.skills.map((s) => ({ slug: s.slug, source: "own", on: "on", description: short3(s.description) })),
-        ...(r.house ?? []).map((s) => ({ slug: s.slug, source: "ghosty", on: s.enabled ? "on" : "off", description: short3(s.description) }))
+        ...r.skills.map((s2) => ({ slug: s2.slug, source: "own", on: "on", description: short3(s2.description) })),
+        ...(r.house ?? []).map((s2) => ({ slug: s2.slug, source: "ghosty", on: s2.enabled ? "on" : "off", description: short3(s2.description) }))
       ];
       const more = r.community.filter((c) => !c.installed).length;
       out(r, () => `${table(rows, ["slug", "source", "on", "description"])}
@@ -9221,7 +9467,7 @@ ${dim(t(`${more} more in the community catalog: ghosty skills add <agent-id> <sl
       return;
     }
     case "house": {
-      const list = (x) => x ? x.split(",").map((s) => s.trim()).filter(Boolean) : void 0;
+      const list = (x) => x ? x.split(",").map((s2) => s2.trim()).filter(Boolean) : void 0;
       const only = list(v.only), on = list(v.enable), off = list(v.disable);
       if (!only && !on && !off) {
         const r2 = await api(agentPath(id, "/skills/house"));
@@ -9418,12 +9664,15 @@ async function agentsEmbed(id, v, action) {
   }
   if (v.rotate) body.rotate = true;
   const e = Object.keys(body).length ? await api(agentPath(id, "/embed"), { method: "PUT", body }) : await api(agentPath(id, "/embed"));
+  const baseUrl2 = baseFromSnippet(e.snippet);
+  const react = e.token ? reactSnippet(e.token, baseUrl2) : null;
+  const wrote = v.out ? await writeEmbedComponent(e, baseUrl2, v.out, v.force === true) : null;
   out(
-    e,
+    { ...e, react, ...wrote ? { wrote } : {} },
     () => [
       `${e.enabled ? lavender(t("\u25CF on", "\u25CF encendido")) : dim(t("\u25CB off", "\u25CB apagado"))}  ${t("web widget", "widget web")}`,
       e.domains.length ? `${t("domains", "dominios")}: ${e.domains.join(", ")}` : red(t("domains: (none \u2014 it loads nowhere; add --domains yoursite.com)", "dominios: (ninguno \u2014 no carga en ning\xFAn lado; agrega --domains tusitio.com)")),
-      ...e.engineOk ? [] : [red(t("engine: only claude isolates each visitor; switch with `ghosty agents set <id> --engine claude`", "motor: s\xF3lo claude a\xEDsla a cada visitante; c\xE1mbialo con `ghosty agents set <id> --engine claude`"))],
+      ...e.engineOk ? [] : [red(t("engine: only Claude or MiniGhosty (ghosty-lite) isolate each visitor; switch with `ghosty agents set <id> --engine claude`", "motor: s\xF3lo Claude o MiniGhosty (ghosty-lite) a\xEDslan a cada visitante; c\xE1mbialo con `ghosty agents set <id> --engine claude`"))],
       dim(t(`cap ${e.perVisitorDay} messages per visitor per day \xB7 ${e.perIpDay} per IP per day \xB7 color ${e.color}`, `tope ${e.perVisitorDay} mensajes por visitante al d\xEDa \xB7 ${e.perIpDay} por IP al d\xEDa \xB7 color ${e.color}`)),
       `${t("first message", "primer mensaje")}: ${e.welcome ?? dim(e.welcomeShown ?? t("(default greeting)", "(saludo por defecto)"))}`,
       `${t("header", "encabezado")}: ${e.title ?? e.agentName ?? ""}${e.subtitle ? ` \xB7 ${e.subtitle}` : ""}  ${dim(`${t("avatar", "avatar")} ${e.avatarUrl ?? t("ghost", "fantasma")} \xB7 ${t("icon", "\xEDcono")} ${e.icon ?? "chat"}`)}`,
@@ -9434,11 +9683,39 @@ async function agentsEmbed(id, v, action) {
       `${t("theme", "tema")}: ${e.themeSource ?? "custom"}${e.themeFrom ? dim(` \xB7 ${e.themeFrom}`) : ""}`,
       ...styleSummary(e.style) ? [dim(`${t("style", "estilo")}: ${styleSummary(e.style)}`)] : [],
       ...e.snippet ? ["", t("Paste before </body> on your site:", "Pega antes de </body> en tu sitio:"), e.snippet, ""] : [],
+      ...react ? [t("React:", "React:"), dim(`  ${react.install}`), ...react.code.split("\n").map((l) => `  ${l}`), ""] : [],
+      ...wrote ? [`${lavender("\u2713")} ${t(`Component written to ${wrote} (yours to edit: token and theme are at the top)`, `Componente escrito en ${wrote} (es tuyo: el token y el tema van arriba)`)}`, ""] : [],
       t(`visitors ${e.stats.visitantes} \xB7 messages ${e.stats.mensajes}`, `visitantes ${e.stats.visitantes} \xB7 mensajes ${e.stats.mensajes}`),
       ...e.lastError ? [red(`${t("last failure", "\xFAltima falla")} ${e.lastError.at}: ${serverText(e.lastError.message ?? e.lastError.error ?? "")}`)] : []
     ].join("\n")
   );
 }
+async function writeEmbedComponent(e, baseUrl2, file, force) {
+  if (!e.token) throw usage(t("Turn the widget on first: ghosty agents embed enable <id> --domains yoursite.com", "Prende primero el widget: ghosty agents embed enable <id> --domains tusitio.com"));
+  const ext = file.toLowerCase().match(/\.(tsx|jsx)$/)?.[1];
+  if (!ext) throw usage(t("--out must end in .tsx or .jsx", "--out debe terminar en .tsx o .jsx"));
+  const path = resolve(file);
+  const exists = await readFile3(path).then(() => true, () => false);
+  if (exists && !force) throw usage(t(`${file} already exists; add --force to overwrite it`, `${file} ya existe; agrega --force para pisarlo`));
+  const src = reactComponentSource(
+    {
+      token: e.token,
+      baseUrl: baseUrl2,
+      title: e.title ?? e.agentName ?? "Asistente",
+      subtitle: e.subtitle ?? null,
+      placeholder: e.placeholder ?? null,
+      welcome: e.welcome ?? e.welcomeShown ?? "\xA1Hola! \xBFEn qu\xE9 te ayudo?",
+      color: e.color,
+      textColor: e.textColor ?? "#ffffff",
+      starters: e.starters ?? [],
+      style: e.style ?? {}
+    },
+    ext === "tsx"
+  );
+  await mkdir3(dirname2(path), { recursive: true });
+  await writeFile3(path, src);
+  return relative(process.cwd(), path) || path;
+}
 async function agentsBox(id, v) {
   id = need(id, "agent id", "ghosty agents box <agent-id> [--check PATH] [--contains PATH=TEXT] [--recycle]");
   if (v.recycle) {
@@ -9647,9 +9924,9 @@ async function chat(agent, message, v) {
   rl.close();
 }
 async function readAll() {
-  let s = "";
-  for await (const c of process.stdin) s += c;
-  return s;
+  let s2 = "";
+  for await (const c of process.stdin) s2 += c;
+  return s2;
 }
 async function meMemories(sub, arg, text) {
   const ex = 'ghosty me memories ls | add "texto" | edit <id> "texto" | rm <id>';
@@ -9681,7 +9958,7 @@ async function meMemories(sub, arg, text) {
       throw usage(t(`Unknown memories subcommand: ${sub}.`, `Subcomando de memories desconocido: ${sub}.`), ex);
   }
 }
-var safeName = (s) => s.replace(/[\\/:*?"<>|\u0000-\u001f]+/g, "_").trim() || "archivo";
+var safeName = (s2) => s2.replace(/[\\/:*?"<>|\u0000-\u001f]+/g, "_").trim() || "archivo";
 async function meFilesExport(v) {
   const dir = v.out ?? "ghosty-archivos";
   const all = [];
@@ -9811,20 +10088,20 @@ async function meUsage() {
 
 // src/commands/schedule.ts
 var enc4 = encodeURIComponent;
-function minutesOf(s, flag) {
-  const m = /^(\d+(?:\.\d+)?)\s*(m|min|h|d)?$/i.exec(s.trim());
-  if (!m) throw usage(t(`Invalid ${flag}: ${s}.`, `${flag} inv\xE1lido: ${s}.`), t("Use minutes, hours or days: 30m, 12h, 1d", "Usa minutos, horas o d\xEDas: 30m, 12h, 1d"));
+function minutesOf(s2, flag) {
+  const m = /^(\d+(?:\.\d+)?)\s*(m|min|h|d)?$/i.exec(s2.trim());
+  if (!m) throw usage(t(`Invalid ${flag}: ${s2}.`, `${flag} inv\xE1lido: ${s2}.`), t("Use minutes, hours or days: 30m, 12h, 1d", "Usa minutos, horas o d\xEDas: 30m, 12h, 1d"));
   const n = Number(m[1]);
   const unit = (m[2] ?? "m").toLowerCase();
   return Math.round(unit === "d" ? n * 1440 : unit === "h" ? n * 60 : n);
 }
-function isoOf(s, flag) {
-  const d = new Date(s);
-  if (Number.isNaN(d.getTime())) throw usage(t(`Invalid ${flag}: ${s}.`, `${flag} inv\xE1lido: ${s}.`), t("Use an ISO date, e.g. 2026-10-01T09:00-06:00", "Usa una fecha ISO, p. ej. 2026-10-01T09:00-06:00"));
+function isoOf(s2, flag) {
+  const d = new Date(s2);
+  if (Number.isNaN(d.getTime())) throw usage(t(`Invalid ${flag}: ${s2}.`, `${flag} inv\xE1lido: ${s2}.`), t("Use an ISO date, e.g. 2026-10-01T09:00-06:00", "Usa una fecha ISO, p. ej. 2026-10-01T09:00-06:00"));
   return d.toISOString();
 }
 var every = (min) => min == null ? "once" : min % 1440 === 0 ? `${min / 1440}d` : min % 60 === 0 ? `${min / 60}h` : `${min}m`;
-var short = (s, n = 60) => s.length > n ? s.slice(0, n - 1) + "\u2026" : s;
+var short = (s2, n = 60) => s2.length > n ? s2.slice(0, n - 1) + "\u2026" : s2;
 async function agentSchedule(agent) {
   return api(`/api/v2/me/agents/${enc4(agent)}/schedule`);
 }
@@ -10050,7 +10327,7 @@ async function call(path, v, init = {}) {
         "x-ghosty-ts": ts,
         "x-ghosty-sig": sig,
         "content-type": "application/json",
-        "user-agent": `ghosty-cli/${"0.52.0"}`
+        "user-agent": `ghosty-cli/${"0.53.0"}`
       },
       body: method === "GET" ? void 0 : raw
     });
@@ -10311,10 +10588,10 @@ import { basename as basename3, join as join5 } from "node:path";
 // src/rows.ts
 var IDENT = /^[A-Za-z_][A-Za-z0-9_]*$/;
 function parseRowScope(raw) {
-  const s = raw.trim();
-  if (!s) return null;
+  const s2 = raw.trim();
+  if (!s2) return null;
   const out2 = {};
-  for (const part of s.split(",").map((x) => x.trim()).filter(Boolean)) {
+  for (const part of s2.split(",").map((x) => x.trim()).filter(Boolean)) {
     const [table2, cols = ""] = part.split(":").map((x) => x.trim());
     const list = cols.split("+").map((x) => x.trim()).filter(Boolean);
     if (!IDENT.test(table2 ?? "") || !list.length || !list.every((c) => IDENT.test(c))) {
@@ -10333,7 +10610,7 @@ var need2 = (v, what, example) => {
   if (!v) throw usage(t(`Missing ${what}.`, `Falta ${what}.`), `${t("Example", "Ejemplo")}: ${example}`);
   return v;
 };
-var csv = (s) => (s ?? "").split(",").map((x) => x.trim()).filter(Boolean);
+var csv = (s2) => (s2 ?? "").split(",").map((x) => x.trim()).filter(Boolean);
 function importWarnings(ws) {
   if (!ws?.length) return "";
   const flag = ws.map((w) => `${w.table}.${w.column}`).join(",");
@@ -10364,9 +10641,9 @@ function shrinking(plan) {
   return plan.filter((p) => p.action === "replace" && p.targetRows > 0 && (p.resultRows === 0 || p.resultRows < p.targetRows / 2));
 }
 function shrinkWarnings(plan) {
-  const s = shrinking(plan);
-  if (!s.length) return "";
-  const lines = s.map(
+  const s2 = shrinking(plan);
+  if (!s2.length) return "";
+  const lines = s2.map(
     (p) => red(p.resultRows === 0 ? t(`  ! ${p.table}: would be left EMPTY (${p.targetRows} \u2192 0)`, `  ! ${p.table}: quedar\xEDa VAC\xCDA (${p.targetRows} \u2192 0)`) : t(`  ! ${p.table}: loses ${p.targetRows - p.resultRows} of ${p.targetRows} rows`, `  ! ${p.table}: pierde ${p.targetRows - p.resultRows} de ${p.targetRows} filas`))
   );
   return `
@@ -10731,7 +11008,7 @@ async function turnsCmd(sub, id, turnId, v) {
   if (v.session) q.set("session", v.session);
   q.set("limit", v.limit ?? "20");
   const r = await api(agentPath2(id, `/turns?${q}`));
-  const when = (s) => s.slice(0, 16).replace("T", " ");
+  const when = (s2) => s2.slice(0, 16).replace("T", " ");
   const rows = r.turns.map((tu) => ({
     id: tu.id,
     started: when(tu.startedAt),
@@ -10770,7 +11047,7 @@ async function turnShow(id, turnId, full = false) {
   const r = await api(agentPath2(id, `/turns/${enc6(turnId ?? "last")}`));
   out(r, () => {
     const tu = r.turn;
-    const clip = (s) => full || s.length <= 600 ? s : `${s.slice(0, 600)}\u2026 ${dim(t(`(+${s.length - 600} chars, --full)`, `(+${s.length - 600} caracteres, --full)`))}`;
+    const clip = (s2) => full || s2.length <= 600 ? s2 : `${s2.slice(0, 600)}\u2026 ${dim(t(`(+${s2.length - 600} chars, --full)`, `(+${s2.length - 600} caracteres, --full)`))}`;
     const io = [
       `${lavender("in ")} ${r.input ? clip(r.input) : dim(t("(no copy of the message)", "(sin copia del mensaje)"))}`,
       `${lavender("out")} ${r.output ? clip(r.output) : dim(t("(no answer saved)", "(sin respuesta guardada)"))}`
@@ -10779,11 +11056,11 @@ async function turnShow(id, turnId, full = false) {
     const state = `${bold(tu.id)}  ${tu.state === "error" ? red(tu.state) : tu.state}  ${tu.secs ?? "?"} s${tu.session ? dim(`  ${tu.session}`) : ""}${sdk}`;
     if (!r.totals) return [state, ...io, dim(`${t("no timeline", "sin l\xEDnea de tiempo")}: ${r.why ? serverText(r.why) : t("no transcript", "sin transcript")}`)].join("\n");
     const head = `${state}  ${dim(t(`${r.totals.model ?? ""} \xB7 ${r.totals.modelCalls} model calls \xB7 ${r.totals.outputTokens} output tokens \xB7 ${r.totals.toolSecs} s in tools`, `${r.totals.model ?? ""} \xB7 ${r.totals.modelCalls} llamadas al modelo \xB7 ${r.totals.outputTokens} tokens de salida \xB7 ${r.totals.toolSecs} s en tools`))}`;
-    const line2 = (s) => {
-      const at = `+${s.at.toFixed(1)}s`.padStart(8);
-      if (s.kind === "tool") return `${at}  ${bold(s.tool ?? "?")} ${dim(s.input ?? "")}  ${s.secs === void 0 ? red(t("(no result)", "(sin resultado)")) : `${s.secs} s`}${s.error ? red(" error") : ""}`;
-      const tok = s.outTokens ? dim(` [${s.outTokens} out]`) : "";
-      return s.kind === "thinking" ? `${at}  ${dim(t("thinking", "pensando"))}${tok}` : `${at}  ${s.text}${tok}`;
+    const line2 = (s2) => {
+      const at = `+${s2.at.toFixed(1)}s`.padStart(8);
+      if (s2.kind === "tool") return `${at}  ${bold(s2.tool ?? "?")} ${dim(s2.input ?? "")}  ${s2.secs === void 0 ? red(t("(no result)", "(sin resultado)")) : `${s2.secs} s`}${s2.error ? red(" error") : ""}`;
+      const tok = s2.outTokens ? dim(` [${s2.outTokens} out]`) : "";
+      return s2.kind === "thinking" ? `${at}  ${dim(t("thinking", "pensando"))}${tok}` : `${at}  ${s2.text}${tok}`;
     };
     const top = r.byTool.slice(0, 5).map((b) => `${b.tool} ${b.secs} s (${b.calls})`).join(" \xB7 ");
     return [head, ...io, ...r.steps.map(line2), dim(`${t("slowest", "lo m\xE1s lento")}: ${top || "\u2014"}`)].join("\n");
@@ -10842,7 +11119,7 @@ async function dbsPhotosCmd(verb, id, db, v) {
     results.push(...r.items);
     if (!globals.json && files.length > 8) info(dim(`  ${Math.min(i + 8, files.length)}/${files.length}`));
   }
-  const by = (s) => results.filter((r) => r.status === s);
+  const by = (s2) => results.filter((r) => r.status === s2);
   const stored = by(v["dry-run"] ? "would_store" : "stored");
   const missing = by("missing_row");
   const bad = [...by("bad_type"), ...by("too_big"), ...by("failed")];
@@ -11102,7 +11379,7 @@ async function readMultiFileAuth(dir) {
 
 // src/commands/channels.ts
 var enc7 = encodeURIComponent;
-var digits = (s) => s.replace(/\D/g, "");
+var digits = (s2) => s2.replace(/\D/g, "");
 function find2(nums, ref) {
   const d = digits(ref);
   const hit = nums.find((n) => n.id === ref) ?? nums.find((n) => n.label.toLowerCase() === ref.toLowerCase()) ?? (d.length >= 6 ? nums.find((n) => digits(n.label).endsWith(d)) : void 0);
@@ -11239,9 +11516,9 @@ async function waCmd2(sub, id, v) {
   if (!id) throw usage(t("Missing agent id.", "Falta el id del agente."), t("Example", "Ejemplo") + `: ghosty channels wa ${sub} <agent-id>`);
   const base = `/api/v2/agents/${enc7(id)}/wa`;
   if (sub === "status") {
-    const s = await api(base);
-    return out(s, () => `${s.status === "connected" ? lavender(t("\u25CF connected", "\u25CF conectado")) : dim(`\u25CB ${s.status}`)}  ${s.phone ? `+${s.phone}` : dim(t("(no number)", "(sin n\xFAmero)"))}${s.live ? "" : dim(t("  \xB7 no socket in gs", "  \xB7 sin socket en gs"))}${s.hasCreds ? "" : dim(t("  \xB7 no saved session", "  \xB7 sin sesi\xF3n guardada"))}${s.reason ? `
-${dim(serverText(s.reason))}` : ""}`);
+    const s2 = await api(base);
+    return out(s2, () => `${s2.status === "connected" ? lavender(t("\u25CF connected", "\u25CF conectado")) : dim(`\u25CB ${s2.status}`)}  ${s2.phone ? `+${s2.phone}` : dim(t("(no number)", "(sin n\xFAmero)"))}${s2.live ? "" : dim(t("  \xB7 no socket in gs", "  \xB7 sin socket en gs"))}${s2.hasCreds ? "" : dim(t("  \xB7 no saved session", "  \xB7 sin sesi\xF3n guardada"))}${s2.reason ? `
+${dim(serverText(s2.reason))}` : ""}`);
   }
   if (sub === "pair") {
     const phone = (v.phone ?? "").replace(/\D/g, "");
@@ -11251,13 +11528,13 @@ ${dim(serverText(s.reason))}` : ""}`);
       if (!globals.json) info(dim(t(`Mexico: +${phone} and +${other} are different WhatsApp accounts. Use the one shown in WhatsApp \u2192 Settings \u2192 your profile (newer numbers have no 1). If the code doesn't match, run: ghosty channels wa pause ${id} and pair again with --phone ${other}.`, `M\xE9xico: +${phone} y +${other} son cuentas distintas de WhatsApp. Usa el que sale en WhatsApp \u2192 Ajustes \u2192 tu perfil (los n\xFAmeros nuevos no llevan el 1). Si el c\xF3digo no empata: ghosty channels wa pause ${id} y vuelve a parear con --phone ${other}.`)));
     }
     await api(base, { method: "POST", body: { phone } });
-    let s = { status: "connecting", phone: null, live: false, hasCreds: false };
-    for (let i = 0; i < 15 && !s.pairingCode && s.status !== "connected"; i++) {
+    let s2 = { status: "connecting", phone: null, live: false, hasCreds: false };
+    for (let i = 0; i < 15 && !s2.pairingCode && s2.status !== "connected"; i++) {
       await new Promise((r2) => setTimeout(r2, 1e3));
-      s = await api(base);
+      s2 = await api(base);
     }
-    return out(s, () => s.status === "connected" ? `${lavender("\u2713")} ${t("Already connected", "Ya est\xE1 conectado")} (+${s.phone}).` : s.pairingCode ? `${t("Code", "C\xF3digo")}: ${bold(s.pairingCode)}
-${dim(t("On the phone: WhatsApp \u2192 Linked devices \u2192 Link with phone number \u2192 type it. Then: ghosty channels wa status ", "En el tel\xE9fono: WhatsApp \u2192 Dispositivos vinculados \u2192 Vincular con n\xFAmero de tel\xE9fono \u2192 escr\xEDbelo. Luego: ghosty channels wa status ") + id)}` : dim(t(`No code yet (status: ${s.status}${s.reason ? `, ${serverText(s.reason)}` : ""}). Try again in a minute.`, `Todav\xEDa no hay c\xF3digo (estado: ${s.status}${s.reason ? `, ${s.reason}` : ""}). Intenta de nuevo en un minuto.`)));
+    return out(s2, () => s2.status === "connected" ? `${lavender("\u2713")} ${t("Already connected", "Ya est\xE1 conectado")} (+${s2.phone}).` : s2.pairingCode ? `${t("Code", "C\xF3digo")}: ${bold(s2.pairingCode)}
+${dim(t("On the phone: WhatsApp \u2192 Linked devices \u2192 Link with phone number \u2192 type it. Then: ghosty channels wa status ", "En el tel\xE9fono: WhatsApp \u2192 Dispositivos vinculados \u2192 Vincular con n\xFAmero de tel\xE9fono \u2192 escr\xEDbelo. Luego: ghosty channels wa status ") + id)}` : dim(t(`No code yet (status: ${s2.status}${s2.reason ? `, ${serverText(s2.reason)}` : ""}). Try again in a minute.`, `Todav\xEDa no hay c\xF3digo (estado: ${s2.status}${s2.reason ? `, ${s2.reason}` : ""}). Intenta de nuevo en un minuto.`)));
   }
   if (sub === "pause") {
     await api(base, { method: "DELETE" });
@@ -11327,11 +11604,11 @@ function bareMediaFlag(argv) {
   if (argv[0] !== "channels" || !argv.includes("history")) return argv;
   return argv.map((a, i) => a === "--media" && (argv[i + 1] === void 0 || argv[i + 1].startsWith("-")) ? "--media=" : a);
 }
-function pausedLine(s, id) {
-  if (!s.paused && !s.manual) return "";
+function pausedLine(s2, id) {
+  if (!s2.paused && !s2.manual) return "";
   const txt = t(
-    `${s.paused} paused by Formmy${s.pausedForever ? ` (${s.pausedForever} indefinitely)` : ""}, ${s.manual} in manual mode: the agent doesn't answer them`,
-    `${s.paused} pausada(s) por Formmy${s.pausedForever ? ` (${s.pausedForever} sin fecha)` : ""}, ${s.manual} en modo manual: el agente no las contesta`
+    `${s2.paused} paused by Formmy${s2.pausedForever ? ` (${s2.pausedForever} indefinitely)` : ""}, ${s2.manual} in manual mode: the agent doesn't answer them`,
+    `${s2.paused} pausada(s) por Formmy${s2.pausedForever ? ` (${s2.pausedForever} sin fecha)` : ""}, ${s2.manual} en modo manual: el agente no las contesta`
   );
   return `
 ${lavender(txt)}
@@ -11724,10 +12001,11 @@ var HELPS_ES = {
       ["--auto-open S|off", "embed: se abre solo a los S segundos (1-120), una vez por visita, nunca en el tel\xE9fono"],
       ['--starters "a|b|c"', 'embed: hasta 4 sugerencias TUYAS ("" las quita; nunca salen las de Ghosty)'],
       ["--style '{json}'|none", "embed: estilo fino, s\xF3lo llaves conocidas: fontFamily, radius, headerBg, headerText, titleUppercase, statusDot, headerAvatar, panelBg, userBubbleBg/Text, agentBubbleBg/Text, inputBg, sendBg, sendIcon, sendArrow (up|right), launcherBg, launcherIcon. PATCH por llave (null resetea una); none resetea todo"],
-      ["--font NOMBRE / --radius 0-24", "embed: atajos de style.fontFamily (lista de Google Fonts: Barlow, Inter, Poppins\u2026) y style.radius"],
+      ["--font NAME / --radius 0-24", "embed: atajos de style.fontFamily (lista de Google Fonts: Barlow, Inter, Poppins\u2026) y style.radius"],
       ["--theme-source custom|teams|site", "embed: importa el tema de la marca de tu espacio de Ghosty Teams (--workspace SLUG para elegir) o de tu sitio (--site-url); queda editable"],
       ["--site-url URL", "embed: el sitio del que se sacan los colores (implica --theme-source site)"],
-      ["--style-file ARCHIVO", "embed: aplica un tema exportado con `agents embed <id> theme` (o s\xF3lo el objeto style)"],
+      ["--style-file FILE", "embed: aplica un tema exportado con `agents embed <id> theme` (o s\xF3lo el objeto style)"],
+      ["--out FILE.tsx|.jsx [--force]", "embed: escribe en tu proyecto un componente de React COMPLETO y editable (sin depender de ning\xFAn paquete) con tu token y tu tema horneados arriba; no pisa un archivo que ya existe sin --force"],
       ["--check PATH", "box: este archivo debe existir en la m\xE1quina (repetible), p. ej. un archivo que trae la imagen nueva"],
       ["--contains PATH=TEXT", "box: ese archivo debe contener TEXT (un cambio que no agrega archivos)"],
       ["--recycle", "box: reemplaza sus m\xE1quinas (nunca a media respuesta); pool: la nueva nace en el siguiente turno; ACP (goose, lite): su caja se recrea ya con la imagen actual"],
@@ -12192,6 +12470,7 @@ var HELPS = {
       'ghosty agents embed <agent-id> [--title T] [--subtitle T] [--avatar URL] [--icon chat|avatar|ghost] [--placeholder T] [--position right|left] [--offset X,Y] [--theme light|dark|auto] [--bubble-text T] [--auto-open S] [--starters "a|b"]   # its look',
       "ghosty agents embed <agent-id> [--theme-source custom|teams|site] [--site-url URL] [--style '{json}'] [--style-file theme.json] [--font NAME] [--radius 0-24]   # its theme",
       "ghosty agents embed <agent-id> theme   # export the theme as JSON (edit it, apply it back with --style-file)",
+      "ghosty agents embed <agent-id> --out src/components/GhostyChat.tsx [--force]   # your own React component, token and theme baked in",
       "ghosty agents rm <agent-id> [--from-workspace] [--yes]"
     ],
     flags: [
@@ -12251,6 +12530,7 @@ var HELPS = {
       ["--theme-source custom|teams|site", "embed: import the theme from the brand of your Ghosty Teams workspace (--workspace SLUG to pick one) or from your site (--site-url); it stays editable"],
       ["--site-url URL", "embed: the site to take colors from (implies --theme-source site)"],
       ["--style-file FILE", "embed: apply a theme exported with `agents embed <id> theme` (or a plain style object)"],
+      ["--out FILE.tsx|.jsx [--force]", "embed: write a COMPLETE, editable React component into your project (no package needed) with your token and theme baked in at the top; won't overwrite an existing file without --force"],
       ["--check PATH", "box: this file must exist in the machine (repeatable), e.g. a file the new image brings"],
       ["--contains PATH=TEXT", "box: that file must contain TEXT (a change that adds no files)"],
       ["--recycle", "box: replace its machines (not mid-turn); pool: the new one starts on the next turn; ACP (goose, lite): its box is recreated now with the current image"],
@@ -12954,7 +13234,7 @@ async function updateNotice(current2) {
 }
 
 // src/resolve.ts
-var looksLikeId = (s) => /^c[a-z0-9]{20,}$/.test(s) || /^[0-9a-f]{24}$/.test(s);
+var looksLikeId = (s2) => /^c[a-z0-9]{20,}$/.test(s2) || /^[0-9a-f]{24}$/.test(s2);
 function pickAgent(list, ref, workspace) {
   const want = ref.trim().toLowerCase();
   let hits = list.filter((a) => a.nombre.trim().toLowerCase() === want);
@@ -13028,7 +13308,7 @@ function subcommandsOf(cmd) {
   for (const u of HELPS[cmd]?.usage ?? []) {
     const m = new RegExp(`^ghosty ${cmd} ([a-z][a-z|-]*)`).exec(u);
     if (m) {
-      for (const s of m[1].split("|")) if (!s.includes("-") || /^[a-z]+-[a-z]+$/.test(s)) subs.add(s);
+      for (const s2 of m[1].split("|")) if (!s2.includes("-") || /^[a-z]+-[a-z]+$/.test(s2)) subs.add(s2);
     }
   }
   return [...subs];
@@ -13184,7 +13464,7 @@ function fillSecrets(file) {
   };
   const x = file["x-ghosty"];
   fill(x?.env);
-  for (const s of x?.mcp ?? []) fill(s.env), fill(s.headers);
+  for (const s2 of x?.mcp ?? []) fill(s2.env), fill(s2.headers);
   return missing;
 }
 async function readSkills(dir) {
@@ -13267,7 +13547,7 @@ async function boxesUsage(slug) {
   const r = await api(`/api/v2/workspaces/${encodeURIComponent(slug)}/boxes`);
   const rows = r.agents.map((a) => ({ agent: a.name ?? a.id, engine: a.engine, "per box": a.conversationsPerBox ?? "", boxes: a.boxes ?? "", on: a.boxesOn ?? "", spares: a.spares ?? "", "running now": a.activeTurns ?? "", ...a.error ? { note: a.error } : {} }));
   const head = `${bold(r.workspace)} ${dim(t(`plan: ${r.plan.parallel} in parallel \xB7 up to ${r.plan.maxBoxes} box(es) \xB7 ${r.plan.hotBoxes} always-on spare(s)`, `plan: ${r.plan.parallel} en paralelo \xB7 hasta ${r.plan.maxBoxes} caja(s) \xB7 ${r.plan.hotBoxes} spare(s) siempre encendido(s)`))}`;
-  const space = r.space ? (r.space.used > r.space.limit ? (s) => s : dim)(
+  const space = r.space ? (r.space.used > r.space.limit ? (s2) => s2 : dim)(
     t(
       `${r.space.used} of ${r.space.limit} box(es) in use \xB7 ${r.space.spares} spare \xB7 ${r.space.asleep} asleep${r.space.used > r.space.limit ? " \xB7 OVER the limit" : ""}`,
       `${r.space.used} de ${r.space.limit} caja(s) \xB7 ${r.space.spares} spare \xB7 ${r.space.asleep} dormida(s)${r.space.used > r.space.limit ? " \xB7 SOBRE el tope" : ""}`
@@ -13538,7 +13818,7 @@ async function history(agent, v) {
       lines.push("", bold(`${c.sessionId}`) + dim(` \xB7 ${hora(c.createdAt)} \u2192 ${hora(c.updatedAt)}`));
       for (const tu of c.turns) lines.push(`  ${t("turn", "turno")} ${hora(tu.startedAt)} \xB7 ${tu.state === "error" ? red(tu.state) : tu.state} \xB7 ${tu.secs != null ? `${tu.secs} s` : t("not closed", "sin cerrar")}${tu.error ? red(` \xB7 ${serverText(tu.error)}`) : ""}`);
       for (const m of c.messages) lines.push(`  ${m.role === "user" ? "\u{1F464}" : "\u{1F916}"} ${m.text}${m.attachments.length ? dim(` [${t("attached", "adjuntos")}: ${m.attachments.join(", ")}]`) : ""}${m.delivered.length ? dim(` [${t("delivered", "entreg\xF3")}: ${m.delivered.join(", ")}]`) : ""}`);
-      for (const s of c.timeline ?? []) lines.push(dim(s.kind === "turn" ? `    \u2500\u2500 ${t("turn", "turno")} ${hora(s.at)}` : `    ${String(s.secs).padStart(4)}s  ${s.kind === "tool" ? `${s.tool}: ${s.input} (out ${s.outTokens ?? "?"})` : `\xAB${s.text}\xBB`}`));
+      for (const s2 of c.timeline ?? []) lines.push(dim(s2.kind === "turn" ? `    \u2500\u2500 ${t("turn", "turno")} ${hora(s2.at)}` : `    ${String(s2.secs).padStart(4)}s  ${s2.kind === "tool" ? `${s2.tool}: ${s2.input} (out ${s2.outTokens ?? "?"})` : `\xAB${s2.text}\xBB`}`));
     }
     if (!r.conversations.length) lines.push("", dim(t("No visitors in that range.", "Sin visitantes en ese rango.")));
     return lines.join("\n");
@@ -13670,8 +13950,8 @@ async function collectSiteFiles(target) {
 }
 function titleOf(html) {
   const m = html.match(/<title[^>]*>([^<]*)<\/title>/i);
-  const s = m?.[1]?.replace(/\s+/g, " ").trim();
-  return s || null;
+  const s2 = m?.[1]?.replace(/\s+/g, " ").trim();
+  return s2 || null;
 }
 var kb = (n) => n ? `${Math.max(1, Math.round(n / 1024))} KB` : "";
 var day = (iso) => iso ? iso.slice(0, 10) : "";
@@ -13681,7 +13961,7 @@ async function sitesCmd(sub, a1, a2, v) {
     case "ls":
     case "list": {
       const r = await api(`/api/v2/sites?scope=${v.house ? "house" : "mine"}`);
-      const rows = r.sites.map((s) => ({ slug: s.slug, title: (s.title ?? "").slice(0, 40), url: s.url, files: s.files ?? "", size: kb(s.bytes), published: day(s.publishedAt), expires: s.expiresAt ? day(s.expiresAt) : t("never", "nunca") }));
+      const rows = r.sites.map((s2) => ({ slug: s2.slug, title: (s2.title ?? "").slice(0, 40), url: s2.url, files: s2.files ?? "", size: kb(s2.bytes), published: day(s2.publishedAt), expires: s2.expiresAt ? day(s2.expiresAt) : t("never", "nunca") }));
       return out(r, () => `${bold(v.house ? t("House sites", "Sitios de la casa") : t("Your sites", "Tus sitios"))}
 ${table(rows, ["slug", "title", "url", "files", "size", "published", "expires"])}`);
     }
@@ -13717,8 +13997,8 @@ function detailLine(d, max = 90) {
   if (d === null || d === void 0) return "";
   if (typeof d !== "object") return String(d).slice(0, max);
   const parts = Object.entries(d).filter(([k]) => k !== "via").map(([k, v]) => `${k}=${v !== null && typeof v === "object" ? JSON.stringify(v) : String(v)}`);
-  const s = parts.join(" ");
-  return s.length > max ? `${s.slice(0, max - 1)}\u2026` : s;
+  const s2 = parts.join(" ");
+  return s2.length > max ? `${s2.slice(0, max - 1)}\u2026` : s2;
 }
 async function auditCmd(sub, v, context) {
   if (sub && sub !== "ls" && sub !== "list") throw usage(t(`Unknown audit subcommand: ${sub}.`, `Subcomando de audit desconocido: ${sub}.`), "ghosty audit ls [--workspace SLUG] [--agent ID] [--actor EMAIL] [--action A] [--since 24h] [--limit N]");
@@ -13745,7 +14025,7 @@ ${dim(t("Times in UTC. --full for the whole detail; --json for everything.", "Ho
 
 // src/commands/factory.ts
 var enc12 = encodeURIComponent;
-var short2 = (s) => (s ?? "").slice(0, 16).replace("T", " ");
+var short2 = (s2) => (s2 ?? "").slice(0, 16).replace("T", " ");
 async function factoryCmd(sub, verb, ref, title, v, context) {
   if (sub !== "runs") throw usage(t(`Unknown factory subcommand: ${sub ?? "(none)"}.`, `Subcomando de factory desconocido: ${sub ?? "(ninguno)"}.`), "ghosty factory runs ls|show|rename \u2026");
   const ws = v.workspace ?? context;
@@ -13863,7 +14143,7 @@ async function supportThread(agent, sid, v) {
       const lines = [
         `${bold(r.agent.name ?? r.agent.id)} \xB7 ${r.title ?? sid} ${dim(`(${t("from", "de")} ${x.source})`)}`,
         ...x.note ? [dim(`  ${serverText(x.note)}`)] : [],
-        ...x.tools.map((s) => `${dim(s.at ? cdmx(s.at) : "     \xB7     ")} ${bold(s.tool)} ${s.input.replace(/\s+/g, " ").slice(0, 300)}${s.status && s.status !== "completed" ? dim(` [${s.status}]`) : ""}`),
+        ...x.tools.map((s2) => `${dim(s2.at ? cdmx(s2.at) : "     \xB7     ")} ${bold(s2.tool)} ${s2.input.replace(/\s+/g, " ").slice(0, 300)}${s2.status && s2.status !== "completed" ? dim(` [${s2.status}]`) : ""}`),
         "",
         x.domains.length ? `${t("External domains", "Dominios externos")}: ${x.domains.map((d) => `${d.host} (${d.n})`).join(", ")}` : dim(t("No external domains named in tool inputs.", "Ninguna tool nombr\xF3 dominios externos."))
       ];
@@ -14121,6 +14401,7 @@ ${bold("Agents")}
                             [--theme light|dark|auto] [--bubble-text T] [--auto-open SECONDS|off] [--starters "a|b|c"] [--font NAME] [--radius 0-24] [--style '{json}'|none]
                             theme: [--theme-source custom|teams|site] [--workspace SLUG] [--site-url URL] [--style-file theme.json]
   agents embed <id> theme   Export the widget theme as JSON (edit it and apply it back with --style-file)
+  agents embed <id> --out F.tsx   Write your own React chat component (token + theme baked in; --force to overwrite) \xB7 the output also prints the React snippet
   agents embed <id>         Its state and the snippet to paste (claude engine only: it isolates each visitor)
                             [--slug NAME] [--expires "YYYY-MM-DDTHH:MM"|no] [--turns N] [--per-ip N] [--welcome TEXT] [--chips "a|b|c"] [--starter TEXT] [--sponsor on|off] [--rotate]
 
@@ -14283,7 +14564,8 @@ ${bold("Agentes")}
                             [--theme light|dark|auto] [--bubble-text T] [--auto-open SEGUNDOS|off] [--starters "a|b|c"] [--font NOMBRE] [--radius 0-24] [--style '{json}'|none]
                             tema: [--theme-source custom|teams|site] [--workspace SLUG] [--site-url URL] [--style-file tema.json]
   agents embed <id> theme   Exporta el tema del widget en JSON (ed\xEDtalo y vuelve a aplicarlo con --style-file)
-  agents embed <id>         Su estado y el snippet para pegar (s\xF3lo motor claude: a\xEDsla a cada visitante)
+  agents embed <id> --out F.tsx   Escribe tu propio componente de chat en React (token y tema horneados; --force para pisar) \xB7 la salida tambi\xE9n trae el snippet de React
+  agents embed <id>         Su estado y el snippet para pegar (Claude o MiniGhosty: a\xEDslan a cada visitante)
                             [--slug NOMBRE] [--expires "AAAA-MM-DDTHH:MM"|no] [--turns N] [--per-ip N] [--welcome TEXTO] [--chips "a|b|c"] [--starter TEXTO] [--sponsor on|off] [--rotate]
 
 ${bold("Configurar un agente")}
@@ -14379,8 +14661,8 @@ ${dim("Documentaci\xF3n: https://www.ghosty.studio/docs/cli")}`;
 var COMMANDS = ["login", "logout", "whoami", "usage", "use", "apply", "plan", "engines", "bags", "spaces", "workspaces", "staff", "audit", "factory", "demos", "sites", "push", "novedades", "completion", "cards", "agents", "files", "skills", "mcp", "dbs", "turns", "try", "chat", "conversations", "schedule", "partner", "me", "channels", "board", "boards", "credentials", "connectors", "browser", "docs", "help"];
 var AGENTS_SUBS = ["ls", "create", "get", "set", "export", "doctor", "docs", "share", "unshare", "shares", "teams", "rm", "restart", "demo", "embed", "box"];
 function unknown(what, input, known, helpCmd) {
-  const s = suggest(input, known);
-  return usage(t(`Unknown command: ${what}.`, `Comando desconocido: ${what}.`), s ? t(`Did you mean "${s}"? Run: ${helpCmd}`, `\xBFQuisiste decir "${s}"? Corre: ${helpCmd}`) : t(`Run: ${helpCmd}`, `Corre: ${helpCmd}`));
+  const s2 = suggest(input, known);
+  return usage(t(`Unknown command: ${what}.`, `Comando desconocido: ${what}.`), s2 ? t(`Did you mean "${s2}"? Run: ${helpCmd}`, `\xBFQuisiste decir "${s2}"? Corre: ${helpCmd}`) : t(`Run: ${helpCmd}`, `Corre: ${helpCmd}`));
 }
 function showHelp() {
   if (process.stdout.isTTY && !process.env.NO_COLOR && !globals.json) process.stdout.write(BANNER + "\n\n");
@@ -14633,7 +14915,7 @@ async function main() {
   const tokens = splitTokens(pos, v);
   globals.token = tokens.session;
   globals.profile = v.profile;
-  if (v.version) return out({ version: "0.52.0" }, () => "0.52.0");
+  if (v.version) return out({ version: "0.53.0" }, () => "0.53.0");
   for (const n of normalizeArgs(pos, v)) if (!globals.json) info(dim(n));
   const context = (await readConfig()).workspace;
   if (!explicitToken()?.startsWith("gat_")) {
@@ -14799,7 +15081,7 @@ async function main() {
       throw unknown(cmd, cmd, COMMANDS, "ghosty --help");
   }
 }
-var notice = updateNotice("0.52.0").catch(() => null);
+var notice = updateNotice("0.53.0").catch(() => null);
 main().then(
   async () => {
     const n = await notice;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghostystudio/cli",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Official Ghosty Studio CLI — configure, test and chat with your agents from the terminal. Built for humans and coding agents.",
   "type": "module",
   "bin": {