ghostykit 0.7.0 → 0.7.2

package/README.md

@@ -106,7 +106,8 @@ ref.current?.send("Why did this fail?");                     // ask on the user'
 ```
 
 Other props: `features` (`attachments`, `retry`, `copy`, `usage`, `replyOptions`, `duration`,
-`steer`), `references` / `onReferencesChange`, `placeholder`, `avatar`, `initialTurns`, `loadOlder`
+`steer`, `narration`: `false` keeps the text written before each tool as part of the answer instead of
+checked progress lines), `references` / `onReferencesChange`, `placeholder`, `avatar`, `initialTurns`, `loadOlder`
 (earlier pages of a long thread), `forwardedProps` (extra keys for every run, e.g.
 `{permissions: "ask"}`), and the callbacks `onTurnStart`, `onTitle`, `onState`, `onEvent` (every raw
 AG-UI event), `onSend`. The agent's shared state (`STATE_SNAPSHOT` + `STATE_DELTA`) is
@@ -152,6 +153,7 @@ const PLUGINS = [crm, modelPicker({ onChange: (model) => api.setModel(model) }),
 | `strings` | Texts over the locale's. | `{ stop: "Para" }` |
 | `markdown.transform` | Rewrites the answer's markdown, with the turn at hand (chained). | `(md, turn) => md.replace(/#(\d+)/g, "[#$1](#folio-$1)")` |
 | `markdown.onLinkClick` | A click on a link; `true` if handled (asked in order). | open in-app |
+| `markdown.components` | How a markdown element is drawn, by tag (gets its props and `ctx`): e.g. a link that is a CTA as a button. | `{ a: ({ href, children, ctx }) => … }` |
 | `markdown.blocks` | Fenced blocks by name (```` ```eb-file ````) taken out of the text and drawn as cards under the answer; one still being written comes with `complete: false`. | `{ "eb-file": FileCard }` |
 | `vars`, `className` | Branding on the root: `--piloto-*` tokens and classes. | `{ "--piloto-radius-bubble": "6px" }` |
 | `tools.verbs` | How each tool is named in the steps. | `{ run_cron: { one, many, running } }` |
@@ -163,17 +165,21 @@ const PLUGINS = [crm, modelPicker({ onChange: (model) => api.setModel(model) }),
 | `message.assistantBefore` | Before each answer's text, under its steps. | live page progress, "Creating image…" |
 | `message.user` / `message.assistant` | Extras under each user message / answer. | `({ turn, live }) => …` |
 | `message.formatUserText` | How the user's text is shown (chained). | strip app plumbing |
+| `message.beforeSend` | Rewrites the text that goes out (chained). | prepend what was pointed at |
+| `message.avatar` | The agent's avatar next to each answer. | `() => <img src={logo} />` |
 | `composer.actions` | Buttons in the composer bar, between the image button and the clip. | "My files", "Point" |
 | `composer.actionsEnd` | Buttons after the clip. | model picker |
 | `composer.above` | Above the message box. | `<Subagents pilot={ctx.pilot} />` |
 | `composer.below` | Under the message box. | suggestion chips |
-| `composer.attachments` | `upload`, `transcribe`, `voiceNoteText`. | `{ upload: async (f) => ({ url }) }` |
+| `composer.attachments` | `upload`, `transcribe`, `voiceNoteText`, and the limits `accept`, `maxFiles`, `maxBytes`. A voice note keeps its audio attached when there is `upload`. | `{ upload, accept: "image/*", maxFiles: 4, maxBytes: 4_000_000 }` |
+| `composer.replace` | `{ when(ctx), view }`: drawn instead of the message box while `when` is true. | trial over (403 + `x-needs-login`) → "Create your account" |
 | `header` | Top right, over the thread. | share button |
 | `sidePanel` | Next to the chat. | live page, subagents |
 | `aboveThread` | Above the messages. | a banner |
 | `empty` | The empty thread (instead of the greeting). | onboarding |
 | `waiting` | While the agent hasn't answered (instead of the waiting phrase). Gets `step`, `since`. | "Creating your image…" |
 | `wrap` | A provider around the whole chat (`{ctx, children}`); the first plugin is outermost. | artifacts panel |
+| `onHttpError` | The server refused a message before answering (`{status, code, message, headers}`; also in `pilot.state.httpError` until the next send). | 429 → upgrade banner |
 | `onTurnStart` / `onTurnDone` | This client started / finished a turn. | open the last delivery |
 
 Every view gets `ctx`: `{pilot, agentState, strings, send, addReference, addAttachments, setDraft, focus, plugins}`.
@@ -186,9 +192,9 @@ in the URL).
 
 **Order and precedence**, in the order of the `plugins` list:
 
-- **Maps** (`strings`, `tools.verbs`, `tools.icons`, `vars`) are merged, and later plugins win. `markdown` and `formatUserText` are chained.
+- **Maps** (`strings`, `tools.verbs`, `tools.icons`, `vars`) are merged, and later plugins win. `markdown.transform`, `formatUserText` and `beforeSend` are chained.
 - **`events` and `state`** call every handler, in order.
-- **Keyed or single views** (`tools.render`, `message.custom`, `markdown.blocks`, `empty`, `waiting`, `composer.attachments`): the first plugin that declares one wins. A clash is a development warning.
+- **Keyed or single views** (`tools.render`, `message.custom`, `markdown.blocks`, `markdown.components`, `message.avatar`, `empty`, `waiting`, `composer.attachments`, `composer.replace`): the first plugin that declares one wins. A clash is a development warning.
 - **Lists** (`header`, `sidePanel`, `aboveThread`, `composer.actions`/`actionsEnd`/`above`/`below`, `message.user`/`assistant`/`assistantBefore`, `wrap`, `onTurnStart`/`onTurnDone`) all apply, in order.
 
 In development, ghostykit also warns once about a `CUSTOM` event that nothing handles.

package/dist/chunks/{chunk-FWBUIGTC.js → chunk-7M2B7VKH.js}

@@ -439,7 +439,7 @@ function finish(s0, e, now, failed = false) {
 }
 function beginSend(prev, text, attachments = [], now = Date.now()) {
   const turns = text || attachments.length ? [...prev.turns, { role: "user", text, ...attachments.length ? { attachments } : {} }] : prev.turns;
-  return { ...prev, turns, busy: true, error: null, notice: null, cutRun: null, turnStartedAt: now, effects: [{ type: "turn-start" }] };
+  return { ...prev, turns, busy: true, error: null, notice: null, cutRun: null, httpError: null, turnStartedAt: now, effects: [{ type: "turn-start" }] };
 }
 function beginSteer(prev, text) {
   return { ...prev, turns: [...prev.turns, { role: "user", text }], notice: null, openText: null, effects: [] };

package/dist/chunks/{chunk-TMEHQZWL.js → chunk-KG23PQI2.js}

@@ -1,11 +1,12 @@
 // src/transport/index.ts
 var PilotHttpError = class extends Error {
-  constructor(message, status, code, retryAfter) {
+  constructor(message, status, code, retryAfter, headers) {
     super(message);
     this.name = "PilotHttpError";
     this.status = status;
     this.code = code;
     this.retryAfter = retryAfter;
+    this.headers = headers;
   }
 };
 async function readSse(body, onMessage) {
@@ -62,7 +63,9 @@ function createAgUiTransport(opts) {
         }
         if (!res.ok) {
           const json = await res.json().catch(() => null);
-          throw new PilotHttpError(json?.message ?? json?.error ?? `Error ${res.status}`, res.status, json?.error, retryAfter);
+          const headers = {};
+          res.headers?.forEach?.((v, k) => void (headers[k.toLowerCase()] = v));
+          throw new PilotHttpError(json?.message ?? json?.error ?? `Error ${res.status}`, res.status, json?.error, retryAfter, headers);
         }
         if (!res.body) return;
         const serverDate = Date.parse(res.headers.get("date") ?? "");

package/dist/chunks/{chunk-ZIUOXG7B.js → chunk-PNU3LKWG.js}

@@ -942,8 +942,25 @@ var __iconData37 = {
 __iconData37.node;
 var UsersRound = createLucideIcon(__iconData37);
 
-// ../../node_modules/lucide-react/dist/esm/icons/x.mjs
+// ../../node_modules/lucide-react/dist/esm/icons/wrench.mjs
 var __iconData38 = {
+  name: "wrench",
+  size: 24,
+  node: [
+    [
+      "path",
+      {
+        d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+        key: "1ngwbx"
+      }
+    ]
+  ]
+};
+__iconData38.node;
+var Wrench = createLucideIcon(__iconData38);
+
+// ../../node_modules/lucide-react/dist/esm/icons/x.mjs
+var __iconData39 = {
   name: "x",
   size: 24,
   node: [
@@ -951,8 +968,8 @@ var __iconData38 = {
     ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
   ]
 };
-__iconData38.node;
-var X = createLucideIcon(__iconData38);
+__iconData39.node;
+var X = createLucideIcon(__iconData39);
 
 // src/react/Chips.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1033,6 +1050,9 @@ function mimeOf(file) {
   const ext = (file.name.match(/\.([A-Za-z0-9]+)$/)?.[1] || "").toLowerCase();
   return BY_EXTENSION[ext] ?? "application/octet-stream";
 }
+function accepts(accept, name, mime) {
+  return accept.split(",").map((x) => x.trim().toLowerCase()).filter(Boolean).some((rule) => rule.startsWith(".") ? name.toLowerCase().endsWith(rule) : rule.endsWith("/*") ? mime.startsWith(rule.slice(0, -1)) : mime === rule);
+}
 var isText = (mime) => mime.startsWith("text/") || mime === "application/json" || mime.endsWith("+json") || mime.endsWith("+xml");
 function shortSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -1073,6 +1093,7 @@ function Composer({
   extras,
   extrasEnd,
   handleRef,
+  accept,
   maxFiles = 8,
   maxFileMb = 25
 }) {
@@ -1129,6 +1150,10 @@ function Composer({
             rejected.push(t.tooBig(file.name, maxFileMb));
             continue;
           }
+          if (accept && !accepts(accept, file.name, mime)) {
+            rejected.push(t.cantUpload(file.name));
+            continue;
+          }
           if (next.length >= maxFiles) {
             rejected.push(t.tooMany(maxFiles));
             break;
@@ -1150,7 +1175,7 @@ function Composer({
       setNotice(rejected.length ? rejected.join(" \xB7 ") : null);
       ref.current?.focus({ preventScroll: true });
     },
-    [busy, canSeeImages, upload, maxFiles, maxFileMb, t]
+    [busy, canSeeImages, upload, maxFiles, maxFileMb, accept, t]
   );
   useEffect(() => {
     if (!withFiles) return;
@@ -1434,7 +1459,7 @@ function Composer({
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs2("div", { className: "@container flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: [
         withFiles && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx2(
+          (!accept || accepts(accept, "x.png", "image/png")) && /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -1451,13 +1476,13 @@ function Composer({
             }
           ),
           extras,
-          /* @__PURE__ */ jsx2(
+          (!accept || !/^\s*image\/\*\s*$/.test(accept)) && /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
               onClick: () => {
                 if (!fileRef.current) return;
-                fileRef.current.accept = "";
+                fileRef.current.accept = accept ?? "";
                 fileRef.current.click();
               },
               disabled: busy || files.length >= maxFiles,
@@ -1583,6 +1608,11 @@ function pluginPoints(p) {
   add(p.message?.assistant, "message.assistant");
   for (const k of Object.keys(p.message?.custom ?? {})) out.push(`message.custom[${k}]`);
   add(p.message?.formatUserText, "message.formatUserText");
+  add(p.message?.beforeSend, "message.beforeSend");
+  add(p.message?.avatar, "message.avatar");
+  for (const k of Object.keys(p.markdown?.components ?? {})) out.push(`markdown.components[${k}]`);
+  add(p.composer?.replace, "composer.replace");
+  add(p.onHttpError, "onHttpError");
   add(p.composer?.actions, "composer.actions");
   add(p.composer?.actionsEnd, "composer.actionsEnd");
   add(p.composer?.above, "composer.above");
@@ -1611,6 +1641,9 @@ function resolvePlugins(list = []) {
     toolRenders: {},
     customRenders: {},
     blockRenders: {},
+    components: {},
+    replacers: [],
+    httpError: [],
     attachments: {},
     header: [],
     sidePanel: [],
@@ -1633,6 +1666,7 @@ function resolvePlugins(list = []) {
   const transforms = [];
   const linkHandlers = [];
   const formatters = [];
+  const beforeSends = [];
   const names = /* @__PURE__ */ new Set();
   const first = (slot, key, plugin, value, point) => {
     if (slot[key]) r.warnings.push(`\xAB${plugin}\xBB y \xAB${slot[key].plugin}\xBB dibujan ${point}[${key}]: gana \xAB${slot[key].plugin}\xBB (va antes).`);
@@ -1654,13 +1688,18 @@ function resolvePlugins(list = []) {
     for (const [k, v] of Object.entries(p.message?.custom ?? {})) first(r.customRenders, k, p.name, v, "message.custom");
     for (const [k, v] of Object.entries(p.markdown?.blocks ?? {})) first(r.blockRenders, k, p.name, v, "markdown.blocks");
     if (p.styles === "ghostykit") r.ghostykitStyled.add(p.name);
+    for (const [k, v] of Object.entries(p.markdown?.components ?? {})) first(r.components, k, p.name, v, "markdown.components");
+    if (p.message?.avatar) r.avatar ? r.warnings.push(`\xAB${p.name}\xBB tambi\xE9n da message.avatar: gana \xAB${r.avatar.plugin}\xBB.`) : r.avatar = own(p.message.avatar);
+    if (p.message?.beforeSend) beforeSends.push(p.message.beforeSend);
+    if (p.composer?.replace) r.replacers.push(own(p.composer.replace));
+    if (p.onHttpError) r.httpError.push(own(p.onHttpError));
     if (p.composer?.actionsEnd) r.composerActionsEnd.push(own(p.composer.actionsEnd));
     if (p.composer?.below) r.composerBelow.push(own(p.composer.below));
     if (p.message?.assistantBefore) r.messageBefore.push(own(p.message.assistantBefore));
     if (p.wrap) r.wraps.push(own(p.wrap));
     if (p.onTurnStart) r.turnStart.push(own(p.onTurnStart));
     if (p.onTurnDone) r.turnDone.push(own(p.onTurnDone));
-    for (const key of ["upload", "transcribe", "voiceNoteText"]) {
+    for (const key of ["upload", "transcribe", "voiceNoteText", "accept", "maxFiles", "maxBytes"]) {
       const v = p.composer?.attachments?.[key];
       if (!v) continue;
       if (r.attachments[key]) r.warnings.push(`\xAB${p.name}\xBB tambi\xE9n da composer.attachments.${key}: gana el primero.`);
@@ -1685,6 +1724,7 @@ function resolvePlugins(list = []) {
   }
   if (transforms.length) r.markdown.transform = (md, turn) => transforms.reduce((acc, f) => f(acc, turn), md);
   if (linkHandlers.length) r.markdown.onLinkClick = (href, ev) => linkHandlers.some((f) => f(href, ev));
+  if (beforeSends.length) r.beforeSend = (t, ctx) => beforeSends.reduce((acc, f) => f(acc, ctx), t);
   if (formatters.length) r.formatUserText = (t) => formatters.reduce((acc, f) => f(acc), t);
   return r;
 }
@@ -1736,6 +1776,7 @@ export {
   Send,
   ShieldAlert,
   UsersRound,
+  Wrench,
   X,
   STRINGS_ES,
   STRINGS_EN,

package/dist/core/index.js

@@ -24,7 +24,7 @@ import {
   subagentsOf,
   takeQueued,
   toPermission
-} from "../chunks/chunk-FWBUIGTC.js";
+} from "../chunks/chunk-7M2B7VKH.js";
 import {
   TOOL_VERBS_EN,
   TOOL_VERBS_ES,

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.js

@@ -3,7 +3,7 @@ import {
   definePlugin,
   pluginPoints,
   pluginRequires
-} from "../chunks/chunk-ZIUOXG7B.js";
+} from "../chunks/chunk-PNU3LKWG.js";
 import "../chunks/chunk-UUH37KXA.js";
 import "../chunks/chunk-6U545WJG.js";
 

package/dist/react/Bubble.d.ts

@@ -40,10 +40,14 @@ export interface AgentBubbleProps {
     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, renderTools, renderBefore, blocks }: AgentBubbleProps): import("react").JSX.Element;
+export declare function AgentBubble(props: AgentBubbleProps): import("react").JSX.Element;

package/dist/react/Composer.d.ts

@@ -16,6 +16,8 @@ export interface ComposerHandle {
 }
 /** 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;
@@ -46,10 +48,12 @@ export interface ComposerProps {
     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, extrasEnd, handleRef, 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

@@ -19,6 +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;
+    /**
+     * 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;

package/dist/react/context.d.ts

@@ -11,6 +11,8 @@ export type PilotTheme = "light" | "dark" | "auto";
 export interface MarkdownOptions {
     /** Reescribe el markdown antes de pintarlo (p. ej. `#12` → `[#12](#folio-12)`). */
     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;
 }

package/dist/react/index.js

@@ -24,12 +24,12 @@ import {
   subagentsOf,
   takeQueued,
   toPermission
-} from "../chunks/chunk-FWBUIGTC.js";
+} from "../chunks/chunk-7M2B7VKH.js";
 import {
   PilotHttpError,
   createAgUiTransport,
   readSse
-} from "../chunks/chunk-TMEHQZWL.js";
+} from "../chunks/chunk-KG23PQI2.js";
 import {
   Activity,
   AppWindow,
@@ -70,6 +70,7 @@ import {
   Suggestions,
   TurnContext,
   UsersRound,
+  Wrench,
   X,
   definePlugin,
   isDev,
@@ -79,7 +80,7 @@ import {
   resolvePlugins,
   rootProps,
   usePiloto
-} from "../chunks/chunk-ZIUOXG7B.js";
+} from "../chunks/chunk-PNU3LKWG.js";
 import {
   TOOL_VERBS_EN,
   TOOL_VERBS_ES,
@@ -441,7 +442,7 @@ function Markdown({ children, animate = false, className }) {
       {
         onClickCapture: onClick,
         className: `ghosty-md min-w-0 max-w-full break-words ${className ?? "text-text-primary"} [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_table]:block [&_table]:max-w-full [&_table]:overflow-x-auto`,
-        children: animate ? /* @__PURE__ */ jsx3(ChunksContext.Provider, { value: { registry, part: 0 }, children: /* @__PURE__ */ jsx3(Streamdown, { BlockComponent: ChunkedBlock, linkSafety, children: text }) }) : /* @__PURE__ */ jsx3(Streamdown, { linkSafety, children: text })
+        children: animate ? /* @__PURE__ */ jsx3(ChunksContext.Provider, { value: { registry, part: 0 }, children: /* @__PURE__ */ jsx3(Streamdown, { BlockComponent: ChunkedBlock, linkSafety, components: markdown.components, children: text }) }) : /* @__PURE__ */ jsx3(Streamdown, { linkSafety, components: markdown.components, children: text })
       }
     )
   );
@@ -544,7 +545,7 @@ var DEFAULT_TOOL_ICONS = {
 };
 function iconFor(t, icons) {
   for (const name of toolNames(t)) if (icons[name]) return icons[name];
-  return t.kind && (icons[t.kind] ?? DEFAULT_TOOL_ICONS[t.kind]) || ClawIcon;
+  return t.kind && (icons[t.kind] ?? DEFAULT_TOOL_ICONS[t.kind]) || icons["*"] || Wrench;
 }
 var VISIBLE = 5;
 function AgentSteps({ tools, live }) {
@@ -777,14 +778,22 @@ function TurnFooter({ text, seconds, onRetry, showCopy = true, showDuration = tr
     ] })
   ] });
 }
-function AgentBubble({ turn, live, onRetry, onOption, showUsage = true, showCopy = true, showDuration = true, renderDeliveries, renderTools, renderBefore, blocks }) {
+function AgentBubble(props) {
+  const { turn, avatar } = props;
+  const body = /* @__PURE__ */ jsx6(AgentBody, { ...props, showUsage: props.showUsage ?? true, showCopy: props.showCopy ?? true, showDuration: props.showDuration ?? true });
+  return /* @__PURE__ */ jsx6(TurnContext.Provider, { value: turn, children: avatar ? /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx6("div", { className: "mt-0.5 shrink-0", children: avatar }),
+    body
+  ] }) : body });
+}
+function AgentBody({ turn, live, onRetry, onOption, showUsage, showCopy, showDuration, renderDeliveries, renderTools, renderBefore, blocks, narration = true }) {
   const { strings: t } = usePiloto();
   const extracted = blocks ? extractBlocks(turn.text ?? "", blocks.langs, turn.cuts) : { text: turn.text ?? "", cuts: turn.cuts, blocks: [] };
   const closed = !live && !turn.tools?.some((x) => x.status === "pending");
-  const narrated = splitNarration(extracted.text, extracted.cuts, closed);
+  const narrated = narration ? splitNarration(extracted.text, extracted.cuts, closed) : { steps: [], rest: extracted.text };
   const visible = narrated.rest;
   const options = onOption && !live && visible ? extractReplyOptions(visible) : null;
-  return /* @__PURE__ */ jsx6(TurnContext.Provider, { value: turn, children: /* @__PURE__ */ jsxs4("div", { className: "gc-msg-agent min-w-0 max-w-[90%]", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "gc-msg-agent min-w-0 max-w-[90%]", children: [
     turn.thought && /* @__PURE__ */ jsxs4("details", { className: "mb-3 text-xs text-text-secondary", children: [
       /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer select-none", children: t.thinking }),
       /* @__PURE__ */ jsx6("p", { className: "mt-2 whitespace-pre-wrap border-l-2 border-border-secondary pl-3", children: turn.thought })
@@ -805,7 +814,7 @@ function AgentBubble({ turn, live, onRetry, onOption, showUsage = true, showCopy
     turn.decisions?.length ? /* @__PURE__ */ jsx6(DecisionLines, { decisions: turn.decisions }) : null,
     showUsage && turn.usage && /* @__PURE__ */ jsx6(UsageStats, { ...turn.usage }),
     turn.text && !live && /* @__PURE__ */ jsx6(TurnFooter, { text: turn.text, seconds: turn.seconds, onRetry, showCopy, showDuration })
-  ] }) });
+  ] });
 }
 
 // src/react/Status.tsx
@@ -948,11 +957,13 @@ function usePilot(transport, opts = {}) {
       if (!steering && (input.messages.length || input.resume?.length || input.forwardedProps?.continueRun)) liveRun.current = input.runId;
       optsRef.current.onSend?.(input);
       let ended = false;
+      let gotEvent = false;
       try {
         await t.run(
           input,
           (e) => {
             if (c.signal.aborted) return;
+            gotEvent = true;
             optsRef.current.onEvent?.(e);
             for (const fn of listeners.current) fn(e);
             if (e.type === "RUN_FINISHED" || e.type === "RUN_ERROR") {
@@ -965,6 +976,11 @@ function usePilot(transport, opts = {}) {
         );
       } catch (err) {
         if (c.signal.aborted) return;
+        if (gotEvent && !(err instanceof PilotHttpError)) {
+          if (!reopening) return runNow({ messages: [] }, true);
+          commit(sendFailed(ref.current, "Se cort\xF3 la conexi\xF3n con el agente."));
+          return;
+        }
         const code = err instanceof PilotHttpError ? err.code : void 0;
         if (code === "run_not_live" && steering && userMsg) {
           const { text } = fromUserMessage(userMsg.content);
@@ -1002,7 +1018,8 @@ function usePilot(transport, opts = {}) {
           commit({ ...ref.current, notice: err instanceof Error && err.message ? err.message : null, effects: [] });
           return runNow({ messages: [] }, true);
         }
-        commit(sendFailed(ref.current, err instanceof Error && err.message ? err.message : "No se pudo hablar con el agente."));
+        const failed = sendFailed(ref.current, err instanceof Error && err.message ? err.message : "No se pudo hablar con el agente.");
+        commit(err instanceof PilotHttpError ? { ...failed, httpError: { status: err.status, ...err.code ? { code: err.code } : {}, message: err.message, ...err.headers ? { headers: err.headers } : {} } } : failed);
         return;
       }
       if (c.signal.aborted) return;
@@ -1189,6 +1206,18 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
   useEffect5(() => {
     if (isDev()) for (const w of plugins.warnings) warnOnce(w);
   }, [plugins]);
+  const ctxForComponents = useRef4(null);
+  const boundComponents = useMemo3(() => {
+    const entries = Object.entries(plugins.components);
+    if (!entries.length) return void 0;
+    return Object.fromEntries(
+      entries.map(([tag, { plugin, value: C }]) => [
+        tag,
+        // Como toda vista de plugin: marcada con su nombre y, si es de la app, aislada de las utilidades.
+        (p) => /* @__PURE__ */ jsx8("span", { ...pluginAttrs(plugin, plugins.ghostykitStyled), style: { display: "contents" }, children: /* @__PURE__ */ jsx8(C, { ...p, ctx: ctxForComponents.current }) })
+      ])
+    );
+  }, [plugins]);
   const strings = useMemo3(() => ({ ...locale === "en" ? STRINGS_EN : STRINGS_ES, ...plugins.strings }), [locale, plugins]);
   const config = useMemo3(
     () => ({
@@ -1198,9 +1227,9 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
       formatUserText: plugins.formatUserText ? (x) => plugins.formatUserText(cleanUserText(x)) : cleanUserText,
       theme,
       skin: props.skin ?? "ghosty",
-      markdown: plugins.markdown
+      markdown: { ...plugins.markdown, ...boundComponents ? { components: boundComponents } : {} }
     }),
-    [strings, locale, plugins, theme, props.skin]
+    [strings, locale, plugins, theme, props.skin, boundComponents]
   );
   const t = strings;
   const [ownRefs, setOwnRefs] = useState8([]);
@@ -1235,12 +1264,16 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
   const send = useCallback2(
     (text, attachments = []) => {
       const current = refsRef.current;
-      const full = applyReferences(text, current);
+      const before = pluginsRef.current.beforeSend;
+      const full = applyReferences(before && ctxRef.current ? before(text, ctxRef.current) : text, current);
       if (current.length) setRefs([]);
       void pilot.send(full, attachments, current.length ? { references: current } : {});
     },
     [pilot, setRefs]
   );
+  const pluginsRef = useRef4(plugins);
+  pluginsRef.current = plugins;
+  const ctxRef = useRef4(null);
   const composerHandle = useRef4(null);
   const focus = useCallback2(() => composerBox.current?.querySelector("textarea")?.focus({ preventScroll: true }), []);
   const addReference = useCallback2(
@@ -1256,10 +1289,9 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
   const actions = { pilot, send, addReference, addAttachments, setDraft, focus };
   useImperativeHandle(handle, () => actions, [pilot, send, addReference, addAttachments, setDraft, focus]);
   const ctx = { ...actions, agentState: state.agentState, strings, plugins: plugins.list };
-  const ctxRef = useRef4(ctx);
+  ctxForComponents.current = ctx;
+  const mark = (plugin) => pluginAttrs(plugin, plugins.ghostykitStyled);
   ctxRef.current = ctx;
-  const pluginsRef = useRef4(plugins);
-  pluginsRef.current = plugins;
   const unattended = useRef4(/* @__PURE__ */ new Set());
   useEffect5(
     () => pilot.subscribe?.((event) => {
@@ -1315,6 +1347,17 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
     }),
     [pilot.onTurn]
   );
+  useEffect5(() => {
+    const err = state.httpError;
+    if (!err) return;
+    for (const h of pluginsRef.current.httpError) {
+      try {
+        h.value(err, ctxRef.current);
+      } catch (e) {
+        console.error(`[ghostykit] el plugin \xAB${h.plugin}\xBB fall\xF3 con onHttpError`, e);
+      }
+    }
+  }, [state.httpError]);
   const [held, setHeld] = useState8({});
   const heldRef = useRef4(held);
   heldRef.current = held;
@@ -1428,12 +1471,20 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
   const toolRunning = busy && last?.role === "assistant" && (last.tools ?? []).some(isRunning);
   const empty = turns.length === 0 && !busy;
   const placeholder = props.placeholder ?? (props.agentName ? t.placeholder(props.agentName) : t.placeholderDefault);
-  const { upload, transcribe, voiceNoteText } = plugins.attachments;
+  const { upload, transcribe, voiceNoteText, accept, maxFiles, maxBytes } = plugins.attachments;
   const showFiles = features.attachments ?? Boolean(upload);
   const pointedRefs = refs.filter((r) => r.prompt);
   const plainRefs = refs.filter((r) => !r.prompt);
   const removeRef = (id) => setRefs(refsRef.current.filter((r) => r.id !== id));
-  const composer = /* @__PURE__ */ jsxs6("div", { ref: composerBox, children: [
+  const replacer = plugins.replacers.find((r) => {
+    try {
+      return r.value.when(ctx);
+    } catch {
+      return false;
+    }
+  });
+  const Replacement = replacer?.value.view;
+  const composer = Replacement ? /* @__PURE__ */ jsx8("div", { ...mark(replacer.plugin), children: /* @__PURE__ */ jsx8(Replacement, { ctx }) }) : /* @__PURE__ */ jsxs6("div", { ref: composerBox, children: [
     /* @__PURE__ */ jsx8(ReferenceChips, { references: pointedRefs, onRemove: removeRef, onActivate: props.onReferenceClick }),
     /* @__PURE__ */ jsx8(
       Composer,
@@ -1453,7 +1504,10 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
         onActivateReference: props.onReferenceClick,
         extras: plugins.composerActions.length ? /* @__PURE__ */ jsx8(Views, { items: plugins.composerActions, ctx, styled: plugins.ghostykitStyled, inline: true }) : void 0,
         extrasEnd: plugins.composerActionsEnd.length ? /* @__PURE__ */ jsx8(Views, { items: plugins.composerActionsEnd, ctx, styled: plugins.ghostykitStyled, inline: true }) : void 0,
-        handleRef: composerHandle
+        handleRef: composerHandle,
+        accept,
+        ...maxFiles ? { maxFiles } : {},
+        ...maxBytes ? { maxFileMb: maxBytes / (1024 * 1024) } : {}
       },
       draft.n
     )
@@ -1465,7 +1519,6 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
   const aboveComposer = plugins.composerAbove.length ? /* @__PURE__ */ jsx8(Views, { items: plugins.composerAbove, ctx, styled: plugins.ghostykitStyled }) : null;
   const belowComposer = plugins.composerBelow.length ? /* @__PURE__ */ jsx8(Views, { items: plugins.composerBelow, ctx, styled: plugins.ghostykitStyled }) : null;
   const header = plugins.header.length ? /* @__PURE__ */ jsx8(Views, { items: plugins.header, ctx, styled: plugins.ghostykitStyled, inline: true }) : null;
-  const mark = (plugin) => pluginAttrs(plugin, plugins.ghostykitStyled);
   const Empty = plugins.empty?.value;
   const Waiting = plugins.waiting?.value;
   const renderDeliveries = (turn, live) => {
@@ -1585,7 +1638,9 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
                           renderDeliveries,
                           renderTools,
                           renderBefore,
-                          blocks
+                          blocks,
+                          narration: features.narration !== false,
+                          avatar: plugins.avatar ? /* @__PURE__ */ jsx8("span", { ...mark(plugins.avatar.plugin), children: /* @__PURE__ */ jsx8(plugins.avatar.value, { ctx, turn }) }) : void 0
                         }
                       ),
                       turn.role === "assistant" && /* @__PURE__ */ jsx8(TurnNotes, { turn })

package/dist/react/plugins.d.ts

@@ -2,7 +2,7 @@ import type { ComponentType, ReactNode } from "react";
 import type { BaseEvent } from "@ag-ui/core";
 import type { TextBlock } from "../core/narration";
 import type { ToolVerbs } from "../core/steps";
-import type { Attachment, CustomEntry, Reference, ToolEntry, Turn } from "../core/types";
+import type { Attachment, CustomEntry, PilotState, Reference, ToolEntry, Turn } from "../core/types";
 import type { UploadResult } from "./Composer";
 import type { MarkdownOptions, PilotIcon } from "./context";
 import type { PilotStrings } from "./strings";
@@ -52,7 +52,17 @@ export interface PluginMarkdown {
         turn: Turn;
         live: boolean;
     }>>;
+    /**
+     * Cómo se pinta un elemento del markdown, por etiqueta (`a`, `code`, `img`…): p. ej. un enlace que
+     * es un CTA como botón. Recibe las props del elemento y `ctx`. Por etiqueta, gana el primer plugin.
+     */
+    components?: Record<string, ComponentType<Record<string, unknown> & {
+        ctx: PluginCtx;
+        children?: ReactNode;
+    }>>;
 }
+/** Un rechazo HTTP del servidor antes del stream (403 con `x-needs-login`, 429…). */
+export type PluginHttpError = NonNullable<PilotState["httpError"]>;
 export interface PilotoPlugin {
     /** Único: aparece en `data-plugin`, en los avisos y en `pilotDevtools()`. */
     name: string;
@@ -115,6 +125,12 @@ export interface PilotoPlugin {
         }>>;
         /** El texto del usuario como se pinta (se encadena en orden). */
         formatUserText?: (text: string) => string;
+        /** El texto que sale, antes de mandarlo (p. ej. anteponer lo señalado). Se encadena en orden. */
+        beforeSend?: (text: string, ctx: PluginCtx) => string;
+        /** El avatar del agente junto a cada respuesta. Gana el primer plugin. */
+        avatar?: PluginView<{
+            turn: Turn;
+        }>;
     };
     composer?: {
         /** Botones en la barra del composer, entre la imagen y el clip («Mis archivos», «Señalar»). */
@@ -130,6 +146,20 @@ export interface PilotoPlugin {
             upload?: (file: File) => Promise<UploadResult>;
             transcribe?: (audio: Blob) => Promise<string>;
             voiceNoteText?: (transcript: string) => string;
+            /** Qué se puede adjuntar (como el `accept` de un input): `"image/*"` = sólo fotos. */
+            accept?: string;
+            /** Cuántos archivos a la vez (default 8). */
+            maxFiles?: number;
+            /** Tamaño máximo por archivo, en bytes (default 25 MB). */
+            maxBytes?: number;
+        };
+        /**
+         * En lugar de la caja, cuando `when(ctx)` es verdad (p. ej. la prueba se acabó: 403 con
+         * `x-needs-login` → «Crea tu cuenta»). Gana el primer plugin cuyo `when` es verdad.
+         */
+        replace?: {
+            when: (ctx: PluginCtx) => boolean;
+            view: PluginView;
         };
     };
     /** Arriba a la derecha, sobre el hilo. */
@@ -150,6 +180,8 @@ export interface PilotoPlugin {
         ctx: PluginCtx;
         children: ReactNode;
     }>;
+    /** El servidor rechazó un mensaje antes de contestar (`ctx.pilot.state.httpError` también lo guarda). */
+    onHttpError?: (error: PluginHttpError, ctx: PluginCtx) => void;
     /** Este cliente mandó un turno. */
     onTurnStart?: (ctx: PluginCtx) => void;
     /** Terminó un turno de este cliente (abrir la última entrega, re-leer datos). */
@@ -174,6 +206,11 @@ export interface ResolvedPlugins {
     toolRenders: Record<string, Owned<NonNullable<NonNullable<PilotoPlugin["tools"]>["render"]>[string]>>;
     customRenders: Record<string, Owned<NonNullable<NonNullable<PilotoPlugin["message"]>["custom"]>[string]>>;
     blockRenders: Record<string, Owned<NonNullable<PluginMarkdown["blocks"]>[string]>>;
+    components: Record<string, Owned<NonNullable<PluginMarkdown["components"]>[string]>>;
+    avatar?: Owned<NonNullable<NonNullable<PilotoPlugin["message"]>["avatar"]>>;
+    beforeSend?: (text: string, ctx: PluginCtx) => string;
+    replacers: Owned<NonNullable<NonNullable<PilotoPlugin["composer"]>["replace"]>>[];
+    httpError: Owned<NonNullable<PilotoPlugin["onHttpError"]>>[];
     attachments: NonNullable<NonNullable<PilotoPlugin["composer"]>["attachments"]>;
     empty?: Owned<PluginView>;
     waiting?: Owned<NonNullable<PilotoPlugin["waiting"]>>;

package/dist/transport/index.d.ts

@@ -13,7 +13,9 @@ export declare class PilotHttpError extends Error {
     code?: string;
     /** Segundos de `Retry-After` (429/503). */
     retryAfter?: number;
-    constructor(message: string, status: number, code?: string, retryAfter?: number);
+    /** Las cabeceras de la respuesta (minúsculas), p. ej. `x-needs-login`. */
+    headers?: Record<string, string>;
+    constructor(message: string, status: number, code?: string, retryAfter?: number, headers?: Record<string, string>);
 }
 export interface AgUiTransportOptions {
     /** El endpoint del agente: `POST <url>`. */

package/dist/transport/index.js

@@ -2,7 +2,7 @@ import {
   PilotHttpError,
   createAgUiTransport,
   readSse
-} from "../chunks/chunk-TMEHQZWL.js";
+} from "../chunks/chunk-KG23PQI2.js";
 export {
   PilotHttpError,
   createAgUiTransport,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghostykit",
-  "version": "0.7.0",
-  "description": "Ghosty Autopilot \u2014 the autopilot chat for your React app, on AG-UI: works with LangGraph, Mastra, CrewAI or any AG-UI agent. Streaming text, agent steps, human approval cards (interrupt/resume), attachments and voice.",
+  "version": "0.7.2",
+  "description": "Ghosty Autopilot — the autopilot chat for your React app, on AG-UI: works with LangGraph, Mastra, CrewAI or any AG-UI agent. Streaming text, agent steps, human approval cards (interrupt/resume), attachments and voice.",
   "type": "module",
   "main": "./dist/core/index.js",
   "types": "./dist/core/index.d.ts",