ghostykit 0.6.4 → 0.7.1

package/dist/chunks/chunk-UUH37KXA.js

@@ -0,0 +1,144 @@
+// src/core/steps.ts
+var isRunning = (t) => t.status !== "completed" && t.status !== "failed" && t.status !== "cancelled";
+function toolNames(t) {
+  const title = t.title ?? "";
+  if (!title) return [];
+  const out = [title];
+  const double = /^mcp__.+?__(.+)$/i.exec(title);
+  if (double) out.push(double[1]);
+  else if (/^mcp_/i.test(title)) {
+    const parts = title.slice(4).split("_");
+    for (let i = 0; i < parts.length; i++) out.push(parts.slice(i).join("_"));
+  }
+  return [...new Set(out)];
+}
+function toolName(t) {
+  const names = toolNames(t);
+  return /^mcp__/i.test(names[0] ?? "") ? names[1] ?? names[0] : names[0] ?? null;
+}
+function namedVerb(t, verbs) {
+  for (const name of toolNames(t)) if (verbs[name]) return { key: name, verb: verbs[name] };
+  return null;
+}
+function stepLabel(t, verbs, fallback = "Paso") {
+  if (t.label) return t.label;
+  const named = namedVerb(t, verbs);
+  if (named) return isRunning(t) && named.verb.running ? named.verb.running : named.verb.one;
+  return t.title ?? t.kind ?? fallback;
+}
+function summarizeTools(tools, verbs) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const t of tools) {
+    const named = namedVerb(t, verbs);
+    const key = named?.key ?? t.kind ?? "other";
+    const g = groups.get(key) ?? { n: 0, verb: named?.verb ?? verbs[key] };
+    g.n++;
+    groups.set(key, g);
+  }
+  const parts = [];
+  for (const [key, { n, verb }] of groups) {
+    if (verb) parts.push(n === 1 ? verb.one : verb.many.replace("%n", String(n)));
+    else parts.push(`${n} \xD7 ${key.replace(/[_-]/g, " ")}`);
+  }
+  return parts.join(" \xB7 ");
+}
+function groupSteps(tools, label) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const t of tools) {
+    const k = `${label(t)}\0${t.detail ?? ""}`;
+    const g = groups.get(k);
+    if (!g) {
+      groups.set(k, { tool: t, times: 1 });
+      continue;
+    }
+    g.times++;
+    const wins = isRunning(t) || t.status === "failed" || !(isRunning(g.tool) || g.tool.status === "failed");
+    if (wins) g.tool = { ...t, id: g.tool.id };
+  }
+  return [...groups.values()];
+}
+var TOOL_VERBS_ES = {
+  read: { one: "Le\xED un archivo", many: "Le\xED %n archivos" },
+  read_file: { one: "Le\xED un archivo", many: "Le\xED %n archivos" },
+  write: { one: "Escrib\xED un archivo", many: "Escrib\xED %n archivos" },
+  write_file: { one: "Escrib\xED un archivo", many: "Escrib\xED %n archivos" },
+  edit: { one: "Edit\xE9 un archivo", many: "Edit\xE9 %n archivos" },
+  edit_file: { one: "Edit\xE9 un archivo", many: "Edit\xE9 %n archivos" },
+  bash: { one: "Corr\xED un comando", many: "Corr\xED %n comandos" },
+  shell: { one: "Corr\xED un comando", many: "Corr\xED %n comandos" },
+  terminal: { one: "Corr\xED un comando", many: "Corr\xED %n comandos" },
+  execute: { one: "Corr\xED un comando", many: "Corr\xED %n comandos" },
+  grep: { one: "Busqu\xE9 en el c\xF3digo", many: "Busqu\xE9 en el c\xF3digo" },
+  glob: { one: "Busqu\xE9 archivos", many: "Busqu\xE9 archivos" },
+  search: { one: "Busqu\xE9", many: "Busqu\xE9 %n veces" },
+  tool_search: { one: "Busqu\xE9 una herramienta", many: "Busqu\xE9 %n herramientas" },
+  web_search: { one: "Busqu\xE9 en la web", many: "Busqu\xE9 en la web" },
+  web_fetch: { one: "Abr\xED una p\xE1gina", many: "Abr\xED %n p\xE1ginas" },
+  fetch: { one: "Abr\xED una p\xE1gina", many: "Abr\xED %n p\xE1ginas" },
+  site_publish: { one: "Publiqu\xE9 una p\xE1gina", many: "Publiqu\xE9 %n p\xE1ginas" },
+  pdf: { one: "Gener\xE9 un PDF", many: "Gener\xE9 %n PDF" },
+  connector: { one: "Us\xE9 tu sistema", many: "Us\xE9 tu sistema %n veces" },
+  mcp: { one: "Us\xE9 una herramienta", many: "Us\xE9 %n herramientas" },
+  browser: { one: "Us\xE9 el navegador", many: "Us\xE9 el navegador" },
+  todo: { one: "Anot\xE9 el plan", many: "Anot\xE9 el plan" },
+  delete: { one: "Borr\xE9 un archivo", many: "Borr\xE9 %n archivos" },
+  move: { one: "Mov\xED un archivo", many: "Mov\xED %n archivos" },
+  think: { one: "Lo pens\xE9", many: "Lo pens\xE9" },
+  image: { one: "Cre\xE9 una imagen", many: "Cre\xE9 %n im\xE1genes" },
+  delegate: { one: "Delegu\xE9 una tarea", many: "Delegu\xE9 %n tareas" },
+  collect: { one: "Recog\xED un resultado", many: "Recog\xED %n resultados" },
+  status: { one: "Pregunt\xE9 c\xF3mo iba", many: "Pregunt\xE9 %n veces c\xF3mo iba" },
+  stop: { one: "Detuve una tarea", many: "Detuve %n tareas" },
+  guide: { one: "Le\xED una gu\xEDa", many: "Le\xED %n gu\xEDas" },
+  deliver: { one: "Entregu\xE9 un archivo", many: "Entregu\xE9 %n archivos" },
+  sheet: { one: "Consult\xE9 una hoja", many: "Consult\xE9 %n hojas" },
+  view: { one: "Arm\xE9 una vista", many: "Arm\xE9 %n vistas" }
+};
+var TOOL_VERBS_EN = {
+  read: { one: "Read a file", many: "Read %n files" },
+  read_file: { one: "Read a file", many: "Read %n files" },
+  write: { one: "Wrote a file", many: "Wrote %n files" },
+  write_file: { one: "Wrote a file", many: "Wrote %n files" },
+  edit: { one: "Edited a file", many: "Edited %n files" },
+  edit_file: { one: "Edited a file", many: "Edited %n files" },
+  bash: { one: "Ran a command", many: "Ran %n commands" },
+  shell: { one: "Ran a command", many: "Ran %n commands" },
+  terminal: { one: "Ran a command", many: "Ran %n commands" },
+  execute: { one: "Ran a command", many: "Ran %n commands" },
+  grep: { one: "Searched the code", many: "Searched the code" },
+  glob: { one: "Searched for files", many: "Searched for files" },
+  search: { one: "Searched", many: "Searched %n times" },
+  tool_search: { one: "Looked for a tool", many: "Looked for %n tools" },
+  web_search: { one: "Searched the web", many: "Searched the web" },
+  web_fetch: { one: "Opened a page", many: "Opened %n pages" },
+  fetch: { one: "Opened a page", many: "Opened %n pages" },
+  site_publish: { one: "Published a page", many: "Published %n pages" },
+  pdf: { one: "Generated a PDF", many: "Generated %n PDFs" },
+  connector: { one: "Used your system", many: "Used your system %n times" },
+  mcp: { one: "Used a tool", many: "Used %n tools" },
+  browser: { one: "Used the browser", many: "Used the browser" },
+  todo: { one: "Wrote down the plan", many: "Wrote down the plan" },
+  delete: { one: "Deleted a file", many: "Deleted %n files" },
+  move: { one: "Moved a file", many: "Moved %n files" },
+  think: { one: "Thought it through", many: "Thought it through" },
+  image: { one: "Created an image", many: "Created %n images" },
+  delegate: { one: "Delegated a task", many: "Delegated %n tasks" },
+  collect: { one: "Collected a result", many: "Collected %n results" },
+  status: { one: "Checked how it was going", many: "Checked %n times how it was going" },
+  stop: { one: "Stopped a task", many: "Stopped %n tasks" },
+  guide: { one: "Read a guide", many: "Read %n guides" },
+  deliver: { one: "Delivered a file", many: "Delivered %n files" },
+  sheet: { one: "Checked a sheet", many: "Checked %n sheets" },
+  view: { one: "Built a view", many: "Built %n views" }
+};
+
+export {
+  isRunning,
+  toolNames,
+  toolName,
+  stepLabel,
+  summarizeTools,
+  groupSteps,
+  TOOL_VERBS_ES,
+  TOOL_VERBS_EN
+};

package/dist/core/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./types";
 export { argsDetail, beginSend, beginSteer, createPilotState, dropLastExchange, expiryMs, lastUserTurn, markSubagent, messagesToTurns, prependHistory, queueMessage, reduceAgUiEvent, resolvePermission, sendFailed, stopTurn, subagentsOf, takeQueued, toPermission, } from "./reducer";
 export { applyJsonPatch, type PatchOp } from "./jsonPatch";
-export { isNarration, narrationToMarkdown, splitNarration } from "./narration";
+export { extractBlocks, isNarration, narrationToMarkdown, splitNarration, type TextBlock } from "./narration";
 export { cleanReplyOption, extractReplyOptions, type ReplyOptions } from "./options";
 export { TOOL_VERBS_EN, TOOL_VERBS_ES, groupSteps, isRunning, stepLabel, summarizeTools, toolName, toolNames, type ToolVerb, type ToolVerbs, } from "./steps";
 export { applyReferences, cleanUserText, formatDuration, systemNoteOf } from "./text";

package/dist/core/index.js

@@ -1,6 +1,4 @@
 import {
-  TOOL_VERBS_EN,
-  TOOL_VERBS_ES,
   applyJsonPatch,
   argsDetail,
   beginSend,
@@ -9,10 +7,9 @@ import {
   createPilotState,
   dropLastExchange,
   expiryMs,
+  extractBlocks,
   extractReplyOptions,
-  groupSteps,
   isNarration,
-  isRunning,
   lastUserTurn,
   markSubagent,
   messagesToTurns,
@@ -23,15 +20,21 @@ import {
   resolvePermission,
   sendFailed,
   splitNarration,
-  stepLabel,
   stopTurn,
   subagentsOf,
-  summarizeTools,
   takeQueued,
-  toPermission,
+  toPermission
+} from "../chunks/chunk-7M2B7VKH.js";
+import {
+  TOOL_VERBS_EN,
+  TOOL_VERBS_ES,
+  groupSteps,
+  isRunning,
+  stepLabel,
+  summarizeTools,
   toolName,
   toolNames
-} from "../chunks/chunk-LPPND5ME.js";
+} from "../chunks/chunk-UUH37KXA.js";
 import {
   applyReferences,
   cleanUserText,
@@ -51,6 +54,7 @@ export {
   createPilotState,
   dropLastExchange,
   expiryMs,
+  extractBlocks,
   extractReplyOptions,
   formatDuration,
   groupSteps,

package/dist/core/narration.d.ts

@@ -9,9 +9,26 @@
  */
 /** Un tramo es «narración» si es corto y de un solo párrafo; si no, es texto normal. */
 export declare function isNarration(chunk: string): boolean;
-export declare function splitNarration(text: string, cuts?: number[]): {
+export declare function splitNarration(text: string, cuts?: number[], closed?: boolean): {
     steps: string[];
     rest: string;
 };
 /** La copia que se guarda: narración como `- ✓ …` y luego la respuesta. */
 export declare function narrationToMarkdown(chunks: string[], answer: string): string;
+/** Un bloque con nombre del texto (```eb-file …```) que una app pinta como tarjeta. */
+export interface TextBlock {
+    lang: string;
+    body: string;
+    /** El bloque ya cerró (en vivo, uno a medio escribir llega sin cerrar). */
+    complete: boolean;
+}
+/**
+ * Saca del texto los bloques ```<lang>``` cuyos nombres se piden (sólo los que abren al inicio de un
+ * renglón) y recorre los cortes de la narración para que sigan cayendo donde caían. Uno sin cerrar
+ * (todavía se escribe) se saca hasta el final.
+ */
+export declare function extractBlocks(text: string, langs: readonly string[], cuts?: number[]): {
+    text: string;
+    cuts?: number[];
+    blocks: TextBlock[];
+};

package/dist/core/types.d.ts

@@ -159,6 +159,13 @@ export interface PilotState {
     /** Cuándo empezó el turno que ESTE cliente encargó (0 = ninguno). */
     turnStartedAt: number;
     runId: string | null;
+    /** El último rechazo HTTP del servidor (antes del stream): para avisos propios (p. ej. 403 + `x-needs-login`). Se limpia al mandar. */
+    httpError?: {
+        status: number;
+        code?: string;
+        message: string;
+        headers?: Record<string, string>;
+    } | null;
     /** El estado compartido del agente (`STATE_SNAPSHOT`, con `STATE_DELTA` aplicado encima). */
     agentState: Record<string, unknown>;
     /** El paso con nombre en curso (`STEP_STARTED`), p. ej. `waking`. */

package/dist/plugins/index.d.ts

@@ -0,0 +1,39 @@
+import { type PilotoPlugin, type PluginCtx } from "../react/plugins";
+export interface ModelPickerOptions {
+    /** La llave de `agentState` con `{current, options: [{value, name}]}`. Default: `model`. */
+    stateKey?: string;
+    /** Cambiar de modelo es API de la app (no un run): aquí la llamas. */
+    onChange: (value: string, ctx: PluginCtx) => void | Promise<void>;
+}
+/**
+ * El selector de modelo en la barra del composer, con lo que el agente anuncia en
+ * `agentState.model = {current, options}`.
+ */
+export declare function modelPicker({ stateKey, onChange }: ModelPickerOptions): PilotoPlugin;
+/** Una página que el agente arma en vivo (`CUSTOM ghosty.page`). */
+export interface LivePage {
+    pageId: string;
+    title: string;
+    sections: {
+        id: string;
+        title?: string;
+        status: "pending" | "building" | "done" | "failed";
+    }[];
+    url: string | null;
+    error?: string;
+}
+export interface LivePageOptions {
+    /** Ancho del panel. Default: 320 px. */
+    width?: number;
+}
+/**
+ * El panel de la página en vivo: escucha `ghosty.page` (plan, secciones, lista, error) y pinta el
+ * avance a un lado del chat, con el enlace al terminar.
+ */
+export declare function livePage({ width }?: LivePageOptions): PilotoPlugin;
+export interface DevtoolsOptions {
+    /** Además de la lista de plugins, cada evento con quién lo atiende. Default: no. */
+    events?: boolean;
+}
+/** Imprime en consola los plugins montados, sus puntos y lo que atienden (y, si quieres, cada evento). */
+export declare function pilotDevtools({ events }?: DevtoolsOptions): PilotoPlugin;

package/dist/plugins/index.js

@@ -0,0 +1,129 @@
+import {
+  ModelPicker,
+  definePlugin,
+  pluginPoints,
+  pluginRequires
+} from "../chunks/chunk-PNU3LKWG.js";
+import "../chunks/chunk-UUH37KXA.js";
+import "../chunks/chunk-6U545WJG.js";
+
+// src/plugins/index.tsx
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function modelPicker({ stateKey = "model", onChange }) {
+  function Picker({ ctx }) {
+    const model = ctx.agentState[stateKey];
+    const [chosen, setChosen] = useState(null);
+    useEffect(() => setChosen(null), [model?.current]);
+    if (!model?.options?.length) return null;
+    return /* @__PURE__ */ jsx(
+      ModelPicker,
+      {
+        models: model.options,
+        current: chosen ?? model.current ?? null,
+        onChange: (value) => {
+          setChosen(value);
+          void onChange(value, ctx);
+        }
+      }
+    );
+  }
+  return definePlugin({ name: "modelPicker", styles: "ghostykit", requires: { state: [stateKey] }, composer: { actionsEnd: Picker } });
+}
+function livePage({ width = 320 } = {}) {
+  let page = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const set = (next) => {
+    page = next;
+    for (const l of listeners) l();
+  };
+  const store = {
+    subscribe: (l) => {
+      listeners.add(l);
+      return () => void listeners.delete(l);
+    },
+    get: () => page
+  };
+  const status = (id, s) => page && set({ ...page, sections: page.sections.map((x) => x.id === id ? { ...x, status: s } : x) });
+  function onPage(e) {
+    const v = e.value ?? {};
+    switch (v.event) {
+      case "page-plan":
+        return set({ pageId: v.pageId, title: v.title, url: null, sections: (v.sections ?? []).map((x) => ({ id: x.id, title: x.title, status: "pending" })) });
+      case "section-building":
+        return status(v.id, "building");
+      case "section":
+        return status(v.id, v.ok === false ? "failed" : "done");
+      case "page-ready":
+        return page && set({ ...page, title: v.title ?? page.title, url: v.url ?? null });
+      case "page-error":
+        return page && set({ ...page, error: v.message });
+      case "page-drop":
+        return page?.pageId === v.pageId && set(null);
+    }
+  }
+  function Panel({ ctx }) {
+    const p = useSyncExternalStore(store.subscribe, store.get, store.get);
+    if (!p) return null;
+    const done = p.sections.filter((x) => x.status === "done").length;
+    return /* @__PURE__ */ jsxs("aside", { style: { width }, className: "hidden shrink-0 flex-col gap-3 overflow-y-auto border-l border-border-primary bg-background-secondary p-4 text-sm md:flex", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium text-text-primary", children: p.title }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-tertiary", children: [
+          done,
+          "/",
+          p.sections.length,
+          " ",
+          ctx.strings.numberLocale.startsWith("en") ? "sections" : "secciones"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: p.sections.map((x) => /* @__PURE__ */ jsxs("li", { "data-status": x.status, className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `h-2 w-2 shrink-0 rounded-full ${x.status === "done" ? "bg-text-success" : x.status === "failed" ? "bg-text-danger" : x.status === "building" ? "animate-pulse bg-brand-500" : "bg-border-primary"}`
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-text-secondary", children: x.title ?? x.id })
+      ] }, x.id)) }),
+      p.error && /* @__PURE__ */ jsx("p", { className: "text-xs text-text-danger", children: p.error }),
+      p.url && /* @__PURE__ */ jsx("a", { href: p.url, target: "_blank", rel: "noopener noreferrer", className: "self-start rounded-full bg-brand-500 px-3 py-1 text-white hover:bg-brand-600", children: ctx.strings.linkOpen })
+    ] });
+  }
+  return definePlugin({ name: "livePage", styles: "ghostykit", requires: { events: ["ghosty.page"] }, events: { "ghosty.page": onPage }, sidePanel: Panel });
+}
+function pilotDevtools({ events = false } = {}) {
+  function Devtools({ ctx }) {
+    const names = ctx.plugins.map((p) => p.name).join(",");
+    useEffect(() => {
+      console.groupCollapsed(`[ghostykit] ${ctx.plugins.length} plugins`);
+      console.table(
+        ctx.plugins.map((p) => {
+          const req = pluginRequires(p);
+          return { plugin: p.name, points: pluginPoints(p).join(" "), events: req.events.join(" "), state: req.state.join(" ") };
+        })
+      );
+      console.groupEnd();
+    }, [names]);
+    return null;
+  }
+  return definePlugin({
+    name: "pilotDevtools",
+    styles: "ghostykit",
+    aboveThread: Devtools,
+    ...events ? {
+      events: {
+        "*": (e, ctx) => {
+          const key = e.type === "CUSTOM" ? e.name : e.type;
+          const who = ctx.plugins.filter((p) => p.name !== "pilotDevtools" && (p.events?.[e.type] || key && (p.events?.[key] || p.message?.custom?.[key]))).map((p) => p.name);
+          console.debug(`[ghostykit] ${e.type}${e.type === "CUSTOM" ? ` ${e.name}` : ""}`, who.length ? `\u2192 ${who.join(", ")}` : "", e);
+        }
+      }
+    } : {}
+  });
+}
+export {
+  livePage,
+  modelPicker,
+  pilotDevtools
+};

package/dist/react/Bubble.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { type TextBlock } from "../core/narration";
 import { type ReplyOptions } from "../core/options";
 import type { Turn, Usage } from "../core/types";
 export declare function UserBubble({ turn }: {
@@ -35,5 +36,18 @@ export interface AgentBubbleProps {
     showDuration?: boolean;
     /** Lo que la app quiera pintar bajo la respuesta (archivos, tarjetas propias). */
     renderDeliveries?: (turn: Turn, live: boolean) => ReactNode;
+    /** Vistas propias de las herramientas, justo bajo los pasos. */
+    renderTools?: (turn: Turn, live: boolean) => ReactNode;
+    /** Antes del texto de la respuesta, bajo sus pasos. */
+    renderBefore?: (turn: Turn, live: boolean) => ReactNode;
+    /** `false`: el texto antes de cada herramienta NO se vuelve paso con palomita (todo es respuesta). */
+    narration?: boolean;
+    /** El avatar del agente a la izquierda de la respuesta. */
+    avatar?: ReactNode;
+    /** Bloques con nombre (```eb-file```) que salen del texto y se pintan como tarjetas bajo la respuesta. */
+    blocks?: {
+        langs: string[];
+        render: (blocks: TextBlock[], turn: Turn, live: boolean) => ReactNode;
+    };
 }
-export declare function AgentBubble({ turn, live, onRetry, onOption, showUsage, showCopy, showDuration, renderDeliveries }: AgentBubbleProps): import("react").JSX.Element;
+export declare function AgentBubble(props: AgentBubbleProps): import("react").JSX.Element;

package/dist/react/Composer.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactNode, type Ref } from "react";
 import type { Attachment, Reference } from "../core/types";
 /** Un modelo que la app ofrece elegir (AG-UI no lo define: la app lo manda en `forwardedProps`). */
 export interface ModelOption {
@@ -10,8 +10,14 @@ export interface UploadResult {
     url: string;
     id?: string;
 }
+/** Lo que se puede hacer con la caja desde afuera (`ctx.addAttachments`). */
+export interface ComposerHandle {
+    addAttachments: (items: (File | Attachment)[]) => void;
+}
 /** El tipo del archivo, deducido del nombre cuando el navegador no lo dice (pasa más de lo que parece). */
 export declare function mimeOf(file: File): string;
+/** ¿Cabe en un `accept` («image/*,.pdf,application/json»)? */
+export declare function accepts(accept: string, name: string, mime: string): boolean;
 export interface ComposerProps {
     onSubmit: (text: string, attachments: Attachment[]) => void;
     onStop?: () => void;
@@ -36,12 +42,18 @@ export interface ComposerProps {
     references?: Reference[];
     onRemoveReference?: (id: string) => void;
     onActivateReference?: (ref: Reference) => void;
-    /** Botones propios junto a adjuntar (slot `composerExtras`). */
+    /** Botones propios entre la imagen y el clip. */
     extras?: ReactNode;
+    /** Botones propios después del clip. */
+    extrasEnd?: ReactNode;
+    /** Para agregar adjuntos desde afuera. */
+    handleRef?: Ref<ComposerHandle>;
+    /** Qué se puede adjuntar (como el `accept` de un input). Default: todo. */
+    accept?: string;
     maxFiles?: number;
     maxFileMb?: number;
 }
-export declare function Composer({ onSubmit, onStop, busy, canSteer, placeholder, initialValue, autoFocus, canSeeImages, attachments: withFiles, upload, transcribe, voiceNoteText, models, currentModel, onModelChange, references, onRemoveReference, onActivateReference, extras, maxFiles, maxFileMb, }: ComposerProps): import("react").JSX.Element;
+export declare function Composer({ onSubmit, onStop, busy, canSteer, placeholder, initialValue, autoFocus, canSeeImages, attachments: withFiles, upload, transcribe, voiceNoteText, models, currentModel, onModelChange, references, onRemoveReference, onActivateReference, extras, extrasEnd, handleRef, accept, maxFiles, maxFileMb, }: ComposerProps): import("react").JSX.Element;
 /**
  * El selector de modelo. PORTADO de Ghosty (`ModelPicker.tsx`): dropdown discreto hacia arriba, sin
  * Radix; cierra con clic fuera y con Escape.

package/dist/react/Piloto.d.ts

@@ -1,10 +1,8 @@
 import { type CSSProperties, type ReactNode } from "react";
-import { type ToolVerbs } from "../core/steps";
-import type { Attachment, Reference, Turn } from "../core/types";
+import type { Reference } from "../core/types";
 import type { PilotTransport } from "../transport";
-import { type UploadResult } from "./Composer";
-import { type MarkdownOptions, type PilotIcon, type PilotTheme } from "./context";
-import { type PilotStrings } from "./strings";
+import { type PilotTheme } from "./context";
+import { type PilotoPlugin, type PluginCtx } from "./plugins";
 import { type Pilot, type UsePilotOptions } from "./usePilot";
 export interface PilotoFeatures {
     /** Botones de adjuntar. Default: sí si hay `upload`. */
@@ -21,20 +19,11 @@ export interface PilotoFeatures {
     duration?: boolean;
     /** Mandar con el run vivo (steer). Default: lo que diga el agente en `state.caps.steer`. */
     steer?: boolean;
-}
-export interface PilotoSlots {
-    /** Lo que la app pinte bajo cada respuesta (archivos, tarjetas propias). */
-    renderDeliveries?: (turn: Turn, live: boolean) => ReactNode;
-    /** Botones propios en la barra del composer. */
-    composerExtras?: ReactNode;
-    /** Lo que se ve con el hilo vacío (en lugar del saludo de casa). */
-    emptyState?: ReactNode;
-    /** Arriba a la derecha, sobre el hilo (compartir, abrir en grande…). */
-    headerActions?: ReactNode;
-    /** Pegado arriba del composer (un aviso, un banner, `<Subagents pilot={pilot} />`). */
-    aboveComposer?: ReactNode | ((pilot: Pilot) => ReactNode);
-    /** Un panel junto al chat (subagentes, vista previa), con el estado del agente y el piloto. */
-    sidePanel?: (agentState: Record<string, unknown>, pilot: Pilot) => ReactNode;
+    /**
+     * Lo que el agente dice ANTES de cada herramienta como pasos con palomita («Reviso tus crons.»).
+     * Default: sí. `false`: todo el texto es respuesta (los pasos siguen en su caja).
+     */
+    narration?: boolean;
 }
 export interface PilotoProps extends UsePilotOptions {
     transport: PilotTransport | null;
@@ -42,25 +31,16 @@ export interface PilotoProps extends UsePilotOptions {
     pilot?: Pilot;
     agentName?: string;
     locale?: "es" | "en";
-    strings?: Partial<PilotStrings>;
     theme?: PilotTheme;
     /** La piel: `ghosty` (default), `easybits`, `neutral`, o el nombre de una propia (`[data-skin]`). */
     skin?: string;
     className?: string;
     style?: CSSProperties;
-    toolVerbs?: ToolVerbs;
-    toolIcons?: Record<string, PilotIcon>;
-    /** El texto del usuario como se pinta (quita la fontanería que la app pega al prompt). */
-    formatUserText?: (text: string) => string;
-    markdown?: MarkdownOptions;
     /** Saludo del hilo vacío. */
     welcome?: ReactNode;
     avatar?: ReactNode;
     placeholder?: string;
     suggestions?: string[];
-    upload?: (file: File) => Promise<UploadResult>;
-    transcribe?: (audio: Blob) => Promise<string>;
-    voiceNoteText?: (transcript: string) => string;
     features?: PilotoFeatures;
     /**
      * Una pregunta lista en la caja (sin mandarla) y el foco en ella: al abrir el piloto desde una
@@ -75,15 +55,16 @@ export interface PilotoProps extends UsePilotOptions {
     onReferencesChange?: (refs: Reference[]) => void;
     /** Clic en un chip de referencia (resaltar la tarjeta en la app). */
     onReferenceClick?: (ref: Reference) => void;
-    slots?: PilotoSlots;
-}
-/** Lo que la app puede hacer desde afuera (`<Piloto ref={…} />`). */
-export interface PilotoHandle {
-    send: (text: string, attachments?: Attachment[]) => void;
-    addReference: (ref: Reference) => void;
-    /** Escribe en la caja sin mandar. */
-    setDraft: (text: string) => void;
-    focus: () => void;
+    /**
+     * La ÚNICA forma de personalizar: textos, pasos, eventos, entregas, composer y paneles (ver
+     * `PilotoPlugin`). Créalos una vez (fuera del render o con `useMemo`).
+     */
+    plugins?: readonly PilotoPlugin[];
 }
+/**
+ * Lo que la app puede hacer desde afuera (`<Piloto ref={…} />`): lo MISMO que recibe un plugin en
+ * `ctx`. Con `pilot` (estado, `reconnect`, `stop`, `continueRun`…) nadie necesita `usePilot` aparte.
+ */
+export type PilotoHandle = Omit<PluginCtx, "plugins" | "strings" | "agentState">;
 export declare const Piloto: import("react").ForwardRefExoticComponent<PilotoProps & import("react").RefAttributes<PilotoHandle>>;
 export default Piloto;

package/dist/react/context.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentType } from "react";
 import { type ToolVerbs } from "../core/steps";
+import type { Turn } from "../core/types";
 import { type PilotStrings } from "./strings";
 /** Un ícono: cualquier componente que acepte `className` (los de lucide-react sirven tal cual). */
 export type PilotIcon = ComponentType<{
@@ -9,7 +10,9 @@ export type PilotTheme = "light" | "dark" | "auto";
 /** Ajustes del markdown de las respuestas. */
 export interface MarkdownOptions {
     /** Reescribe el markdown antes de pintarlo (p. ej. `#12` → `[#12](#folio-12)`). */
-    transform?: (md: string) => string;
+    transform?: (md: string, turn?: Turn) => string;
+    /** Cómo se pinta un elemento del markdown, por etiqueta (`a`, `code`…). */
+    components?: Record<string, ComponentType<any>>;
     /** Un clic en un enlace. Devuelve `true` si la app lo manejó (no se abre el aviso de salida). */
     onLinkClick?: (href: string, event: MouseEvent) => boolean;
 }
@@ -26,6 +29,8 @@ export interface PilotoConfig {
 }
 export declare const PilotoContext: import("react").Context<PilotoConfig>;
 export declare const usePiloto: () => PilotoConfig;
+/** La respuesta que se está pintando (para `markdown.transform(md, turn)`). */
+export declare const TurnContext: import("react").Context<Turn | undefined>;
 /** Las clases de la raíz: el alcance de los estilos y el tema. Lo usan también los portales. */
 export declare function rootProps(theme: PilotTheme, skin?: string): {
     className: string;

package/dist/react/index.d.ts

@@ -1,11 +1,12 @@
-export { Piloto, Piloto as default, type PilotoFeatures, type PilotoHandle, type PilotoProps, type PilotoSlots } from "./Piloto";
-export { toAgUiContext, usePilot, type Pilot, type SendOptions, type TurnDoneInfo, type UsePilotOptions } from "./usePilot";
+export { Piloto, Piloto as default, type PilotoFeatures, type PilotoHandle, type PilotoProps } from "./Piloto";
+export { definePlugin, pluginPoints, pluginRequires, resolvePlugins, type PilotoPlugin, type PluginCtx, type PluginEvent, type PluginView, type ResolvedPlugins, } from "./plugins";
+export { toAgUiContext, usePilot, type Pilot, type SendOptions, type TurnDoneInfo, type TurnEvent, type UsePilotOptions } from "./usePilot";
 export { AgentBubble, CopyUserMessage, ReplyOptionButtons, TurnFooter, UsageStats, UserBubble, type AgentBubbleProps } from "./Bubble";
 export { AgentSteps, ArcadeIcon, ClawIcon, DEFAULT_TOOL_ICONS, Narration, RobotArmIcon, ToolRow } from "./Steps";
 export { LinkSafetyModal, Markdown } from "./Markdown";
 export { InlineMarkdown, renderInline } from "./InlineMarkdown";
 export { useTextAtPace } from "./TextAtPace";
-export { Composer, ModelPicker, mimeOf, type ComposerProps, type ModelOption, type UploadResult } from "./Composer";
+export { Composer, ModelPicker, mimeOf, type ComposerHandle, type ComposerProps, type ModelOption, type UploadResult } from "./Composer";
 export { ConfirmCard, DecisionLines } from "./ConfirmCard";
 export { ReferenceChips, Suggestions } from "./Chips";
 export { TypingDots, WaitLabel } from "./Status";