ghostykit 0.7.0 → 0.8.0

package/README.md

@@ -88,7 +88,7 @@ const ref = useRef<PilotoHandle>(null);
 <Piloto
   ref={ref}
   transport={transport}
-  skin="easybits"            // "ghosty" (default) | "easybits" | "neutral" | your own
+  skin="easybits"            // "ghosty" (default) | "easybits" | "neutral" | "denik" | your own
   theme="auto"               // "light" | "dark" | "auto"
   locale="en"                // Spanish by default
   agentName="Admin assistant"
@@ -106,7 +106,9 @@ 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), `icons` (`{ send?, stop? }`: your own nodes for the composer's round button;
+default arrow and square), `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 +154,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 +166,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 }) }` |
-| `header` | Top right, over the thread. | share button |
+| `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` | The top bar, over the thread. A single view goes on the right; `{ start, end }` puts `start` on the left (who the agent is) and `end` on the right. | `{ start: avatar + name, end: new chat · close }` |
 | `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,10 +193,10 @@ 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.
-- **Lists** (`header`, `sidePanel`, `aboveThread`, `composer.actions`/`actionsEnd`/`above`/`below`, `message.user`/`assistant`/`assistantBefore`, `wrap`, `onTurnStart`/`onTurnDone`) all apply, in order.
+- **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` and its `start`/`end`, `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.
 
@@ -222,6 +229,30 @@ like ghosty.studio; 16 px in the others). Every color, radius, border width and
 }
 ```
 
+The variables a host (or a widget owner, inside an iframe) usually overrides:
+
+| Variable | What it paints |
+|---|---|
+| `--piloto-font`, `--piloto-font-prose`, `--piloto-font-mono` | UI text, the answers' prose, code |
+| `--piloto-rem` | The size unit inside the chat (`1rem`) |
+| `--piloto-bg`, `--piloto-surface`, `--piloto-surface-2` | Background, cards and fields, hover/secondary |
+| `--piloto-text`, `--piloto-text-2`, `--piloto-text-3` | Text, secondary text, hints |
+| `--piloto-accent`, `--piloto-accent-strong`, `--piloto-accent-soft`, `--piloto-on-accent` | Brand color (buttons, focus, links), its pressed and soft tones, text on it |
+| `--piloto-user-bubble`, `--piloto-user-text` | The user's bubble |
+| `--piloto-composer-bg`, `--piloto-shadow-input` | The message box |
+| `--piloto-border`, `--piloto-border-width` | Borders |
+| `--piloto-radius-bubble`, `--piloto-radius-input`, `--piloto-radius-card`, `--piloto-radius-button` | Corners |
+| `--piloto-radius-bubble-tail` | The bottom-right corner of the user's bubble (its "tail"); defaults to `--piloto-radius-bubble` |
+| `--piloto-success`, `--piloto-danger`, `--piloto-warning`, `--piloto-warning-ink` | States, and the approval pass |
+
+Set them in your CSS on `.piloto`, or from a plugin with `vars` (e.g. the owner's theme of an
+embedded widget): `definePlugin({ name: "theme", vars: { "--piloto-accent": owner.color, "--piloto-radius-input": "8px" } })`.
+
+The `denik` skin is Deník's Nik: blue `#5158F6`, ink `#11151A`, Satoshi (the host loads the font), a
+dark user bubble with an 8 px tail, the answer without a bubble (add the avatar with
+`message.avatar`), and a 36 px round send button that turns into an ink circle while stopping. Pair it
+with `icons={{ send: <PaperPlane /> }}` and a plugin `header: { start, end }`.
+
 | Ghosty | EasyBits | Neutral |
 |---|---|---|
 | ![Ghosty skin](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/ghosty-light-mobile-2-permission.png) | ![EasyBits skin, dark](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/easybits-dark-mobile-2-permission.png) | ![Neutral skin](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/neutral-light-mobile-2-permission.png) |

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-VFCROLFF.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,9 +1093,13 @@ function Composer({
   extras,
   extrasEnd,
   handleRef,
+  accept,
   maxFiles = 8,
-  maxFileMb = 25
+  maxFileMb = 25,
+  icons
 }) {
+  const sendIcon = icons?.send ?? /* @__PURE__ */ jsx2(ArrowUp, { className: "h-4 w-4" });
+  const stopIcon = icons?.stop ?? /* @__PURE__ */ jsx2(Square, { className: "h-3 w-3 fill-current" });
   const { strings: t } = usePiloto();
   const [value, setValue] = useState(initialValue);
   const [files, setFiles] = useState([]);
@@ -1129,6 +1153,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 +1178,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;
@@ -1406,8 +1434,8 @@ function Composer({
             onClick: toggleRecording,
             "aria-label": t.stopAndSendVoice,
             title: t.send,
-            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500 text-white hover:bg-brand-600",
-            children: /* @__PURE__ */ jsx2(ArrowUp, { className: "h-4 w-4" })
+            className: "gc-send-voice flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500 text-white hover:bg-brand-600",
+            children: sendIcon
           }
         )
       ] })
@@ -1434,7 +1462,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 +1479,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,
@@ -1492,8 +1520,9 @@ function Composer({
             onClick: busy ? onStop : () => void submit(),
             disabled: !busy && !canSend || uploading,
             "aria-label": busy ? t.stop : uploading ? t.uploading : t.send,
+            "data-state": busy ? "stop" : "send",
             className: `gc-send flex h-8 w-8 items-center justify-center rounded-full transition-colors ${busy || canSend || uploading ? "bg-brand-500 text-white hover:bg-brand-600" : "bg-background-disabled text-text-disabled"}`,
-            children: busy ? /* @__PURE__ */ jsx2(Square, { className: "h-3 w-3 fill-current" }) : uploading ? /* @__PURE__ */ jsx2(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx2(ArrowUp, { className: "h-4 w-4" })
+            children: busy ? stopIcon : uploading ? /* @__PURE__ */ jsx2(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : sendIcon
           }
         )
       ] })
@@ -1555,6 +1584,9 @@ function ModelPicker({ models, current, onChange }) {
 }
 
 // src/react/plugins.ts
+function isView(x) {
+  return typeof x === "function" || typeof x === "object" && x !== null && "$$typeof" in x;
+}
 function definePlugin(plugin) {
   return plugin;
 }
@@ -1583,12 +1615,23 @@ 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");
   add(p.composer?.below, "composer.below");
   add(p.composer?.attachments, "composer.attachments");
-  add(p.header, "header");
+  if (p.header) {
+    if (isView(p.header)) out.push("header");
+    else {
+      add(p.header.start, "header.start");
+      add(p.header.end, "header.end");
+    }
+  }
   add(p.sidePanel, "sidePanel");
   add(p.aboveThread, "aboveThread");
   add(p.empty, "empty");
@@ -1611,8 +1654,12 @@ function resolvePlugins(list = []) {
     toolRenders: {},
     customRenders: {},
     blockRenders: {},
+    components: {},
+    replacers: [],
+    httpError: [],
     attachments: {},
     header: [],
+    headerStart: [],
     sidePanel: [],
     aboveThread: [],
     composerActions: [],
@@ -1633,6 +1680,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 +1702,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.`);
@@ -1668,7 +1721,13 @@ function resolvePlugins(list = []) {
     }
     if (p.empty) r.empty ? r.warnings.push(`\xAB${p.name}\xBB tambi\xE9n dibuja empty: gana \xAB${r.empty.plugin}\xBB.`) : r.empty = own(p.empty);
     if (p.waiting) r.waiting ? r.warnings.push(`\xAB${p.name}\xBB tambi\xE9n dibuja waiting: gana \xAB${r.waiting.plugin}\xBB.`) : r.waiting = own(p.waiting);
-    if (p.header) r.header.push(own(p.header));
+    if (p.header) {
+      if (isView(p.header)) r.header.push(own(p.header));
+      else {
+        if (p.header.start) r.headerStart.push(own(p.header.start));
+        if (p.header.end) r.header.push(own(p.header.end));
+      }
+    }
     if (p.sidePanel) r.sidePanel.push(own(p.sidePanel));
     if (p.aboveThread) r.aboveThread.push(own(p.aboveThread));
     if (p.composer?.actions) r.composerActions.push(own(p.composer.actions));
@@ -1685,6 +1744,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 +1796,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-VFCROLFF.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,19 @@ 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;
+    /** Íconos del botón de mandar y de detener. Default: flecha hacia arriba y cuadrito. */
+    icons?: ComposerIcons;
 }
-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;
+/** Los íconos propios del botón redondo del composer (`<Piloto icons={…} />`). */
+export interface ComposerIcons {
+    send?: ReactNode;
+    stop?: ReactNode;
+}
+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, icons, }: 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,6 +1,7 @@
 import { type CSSProperties, type ReactNode } from "react";
 import type { Reference } from "../core/types";
 import type { PilotTransport } from "../transport";
+import { type ComposerIcons } from "./Composer";
 import { type PilotTheme } from "./context";
 import { type PilotoPlugin, type PluginCtx } from "./plugins";
 import { type Pilot, type UsePilotOptions } from "./usePilot";
@@ -19,6 +20,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;
@@ -35,6 +41,8 @@ export interface PilotoProps extends UsePilotOptions {
     welcome?: ReactNode;
     avatar?: ReactNode;
     placeholder?: string;
+    /** Íconos del botón redondo del composer: `send` (mandar) y `stop` (detener). Default: flecha y cuadrito. */
+    icons?: ComposerIcons;
     suggestions?: string[];
     features?: PilotoFeatures;
     /**

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.d.ts

@@ -1,12 +1,12 @@
 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 { definePlugin, pluginPoints, pluginRequires, resolvePlugins, type PilotoPlugin, type PluginCtx, type PluginEvent, type PluginHeader, 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 ComposerHandle, type ComposerProps, type ModelOption, type UploadResult } from "./Composer";
+export { Composer, ModelPicker, mimeOf, type ComposerHandle, type ComposerIcons, type ComposerProps, type ModelOption, type UploadResult } from "./Composer";
 export { ConfirmCard, DecisionLines } from "./ConfirmCard";
 export { ReferenceChips, Suggestions } from "./Chips";
 export { TypingDots, WaitLabel } from "./Status";

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-VFCROLFF.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 }) {
@@ -678,7 +679,7 @@ function UserBubble({ turn }) {
       },
       i
     )) }),
-    (inBubble.length > 0 || visible.trim()) && /* @__PURE__ */ jsxs4("div", { className: "gc-msg-user max-w-[75%] whitespace-pre-wrap break-words rounded-(--piloto-radius-bubble) bg-(--piloto-user-bubble) px-4 py-3 font-sans text-base leading-[22px] text-(--piloto-user-text)", children: [
+    (inBubble.length > 0 || visible.trim()) && /* @__PURE__ */ jsxs4("div", { className: "gc-msg-user max-w-[75%] whitespace-pre-wrap break-words rounded-(--piloto-radius-bubble) rounded-br-[var(--piloto-radius-bubble-tail,var(--piloto-radius-bubble))] bg-(--piloto-user-bubble) px-4 py-3 font-sans text-base leading-[22px] text-(--piloto-user-text)", children: [
       inBubble.length > 0 && /* @__PURE__ */ jsx6("div", { className: `flex flex-wrap justify-end gap-1.5 ${visible.trim() ? "mb-2" : ""}`, children: inBubble.map(
         (a, i) => a.mimeType.startsWith("image/") ? /* @__PURE__ */ jsx6("img", { src: a.data ? `data:${a.mimeType};base64,${a.data}` : a.url, alt: "", className: "h-20 w-20 rounded-lg object-cover" }, i) : /* @__PURE__ */ jsx6("audio", { src: a.url, controls: true, preload: "metadata", className: "h-9 max-w-[16rem]" }, i)
       ) }),
@@ -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
@@ -1002,7 +1011,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 +1199,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 +1220,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 +1257,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 +1282,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 +1340,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 +1464,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 +1497,11 @@ 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,
+        icons: props.icons,
+        accept,
+        ...maxFiles ? { maxFiles } : {},
+        ...maxBytes ? { maxFileMb: maxBytes / (1024 * 1024) } : {}
       },
       draft.n
     )
@@ -1464,8 +1512,12 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
   ] }) : chat;
   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 headerStart = plugins.headerStart.length ? /* @__PURE__ */ jsx8(Views, { items: plugins.headerStart, ctx, styled: plugins.ghostykitStyled, inline: true }) : null;
+  const headerEnd = plugins.header.length ? /* @__PURE__ */ jsx8(Views, { items: plugins.header, ctx, styled: plugins.ghostykitStyled, inline: true }) : null;
+  const headerSides = (headerStart || headerEnd) && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    headerStart && /* @__PURE__ */ jsx8("div", { className: "piloto-header-start flex min-w-0 items-center gap-2", children: headerStart }),
+    headerEnd && /* @__PURE__ */ jsx8("div", { className: "piloto-header-end ml-auto flex items-center gap-2", children: headerEnd })
+  ] });
   const Empty = plugins.empty?.value;
   const Waiting = plugins.waiting?.value;
   const renderDeliveries = (turn, live) => {
@@ -1516,7 +1568,7 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
           // Un hilo vacío enseña lo mismo que la portada: la cara, el saludo, la caja y por dónde
           // empezar. Si no cabe (panel bajo), se desplaza: `safe center` nunca empuja nada fuera.
           /* @__PURE__ */ jsxs6("div", { className: "gs-scroll flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-4 pb-[10vh] [justify-content:safe_center]", children: [
-            header && /* @__PURE__ */ jsx8("div", { className: "absolute right-4 top-3 flex gap-2", children: header }),
+            headerSides && /* @__PURE__ */ jsx8("div", { className: "piloto-header absolute inset-x-0 top-0 z-10 flex items-center gap-2 px-4 pt-3", children: headerSides }),
             Empty ? /* @__PURE__ */ jsx8("div", { ...mark(plugins.empty.plugin), children: /* @__PURE__ */ jsx8(Empty, { ctx }) }) : /* @__PURE__ */ jsxs6("div", { className: "mb-6 flex flex-col items-center", children: [
               props.avatar && /* @__PURE__ */ jsx8("div", { className: "mb-3", children: props.avatar }),
               props.welcome && // Un saludo largo (una explicación del piloto) baja a letra de lectura.
@@ -1536,7 +1588,7 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
             ] })
           ] })
         ) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
-          header && /* @__PURE__ */ jsx8("div", { className: "flex shrink-0 justify-end gap-2 px-4 pt-3 sm:px-6", children: header }),
+          headerSides && /* @__PURE__ */ jsx8("div", { className: "piloto-header flex shrink-0 items-center gap-2 px-4 pt-3 sm:px-6", children: headerSides }),
           /* @__PURE__ */ jsxs6(
             "div",
             {
@@ -1585,7 +1637,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,10 +146,27 @@ 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. */
-    header?: PluginView;
+    /**
+     * La barra de arriba, sobre el hilo. Una vista sola va a la DERECHA (acciones); con
+     * `{ start, end }`, `start` va a la izquierda (avatar y nombre del agente) y `end` a la derecha.
+     */
+    header?: PluginView | PluginHeader;
     /** Junto al chat. */
     sidePanel?: PluginView;
     /** Arriba de los mensajes, dentro del hilo. */
@@ -150,11 +183,20 @@ 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). */
     onTurnDone?: (info: TurnDoneInfo, ctx: PluginCtx) => void;
 }
+/** Los dos lados de la barra de arriba. */
+export interface PluginHeader {
+    /** A la izquierda: quién es (avatar, nombre). */
+    start?: PluginView;
+    /** A la derecha: acciones (nueva conversación, cerrar). */
+    end?: PluginView;
+}
 /** Ayuda de tipos: `definePlugin({ name: "crm", … })`. */
 export declare function definePlugin<T extends PilotoPlugin>(plugin: T): T;
 type Owned<T> = {
@@ -174,10 +216,18 @@ 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"]>>;
+    /** La barra de arriba, a la derecha (`header` o `header.end`). */
     header: Owned<PluginView>[];
+    /** La barra de arriba, a la izquierda (`header.start`). */
+    headerStart: Owned<PluginView>[];
     sidePanel: Owned<PluginView>[];
     aboveThread: Owned<PluginView>[];
     composerActions: Owned<PluginView>[];

package/dist/styles.css

@@ -119,18 +119,21 @@
 .piloto .inset-0:not([data-piloto-isolate] *) {
   inset: 0px;
 }
+.piloto .inset-x-0:not([data-piloto-isolate] *) {
+  inset-inline: 0px;
+}
 .piloto .-top-12:not([data-piloto-isolate] *) {
   top: calc(var(--spacing) * -12);
 }
+.piloto .top-0:not([data-piloto-isolate] *) {
+  top: 0px;
+}
 .piloto .top-0\.5:not([data-piloto-isolate] *) {
   top: calc(var(--spacing) * 0.5);
 }
 .piloto .top-2:not([data-piloto-isolate] *) {
   top: calc(var(--spacing) * 2);
 }
-.piloto .top-3:not([data-piloto-isolate] *) {
-  top: calc(var(--spacing) * 3);
-}
 .piloto .top-4:not([data-piloto-isolate] *) {
   top: calc(var(--spacing) * 4);
 }
@@ -254,6 +257,9 @@
 .piloto .ml-1:not([data-piloto-isolate] *) {
   margin-left: var(--spacing);
 }
+.piloto .ml-auto:not([data-piloto-isolate] *) {
+  margin-left: auto;
+}
 .piloto .block:not([data-piloto-isolate] *) {
   display: block;
 }
@@ -653,6 +659,9 @@
 .piloto .rounded-xl:not([data-piloto-isolate] *) {
   border-radius: var(--radius-xl);
 }
+.piloto .rounded-br-\[var\(--piloto-radius-bubble-tail\,var\(--piloto-radius-bubble\)\)\]:not([data-piloto-isolate] *) {
+  border-bottom-right-radius: var(--piloto-radius-bubble-tail,var(--piloto-radius-bubble));
+}
 .piloto .border:not([data-piloto-isolate] *) {
   border-style: var(--tw-border-style);
   border-width: 1px;
@@ -1853,7 +1862,7 @@
    `.gs-prosa`, la garra, los puntitos), (3) el blindaje contra el CSS de la app
    anfitriona y (4) la pieza nueva: el pase de permiso.
 
-   Pieles por `data-skin`: ghosty (default), easybits y neutral; cada una con su
+   Pieles por `data-skin`: ghosty (default), easybits, neutral y denik; cada una con su
    oscuro (`data-theme="dark"`, o `auto` siguiendo al sistema).
    ───────────────────────────────────────────────────────────────────────────── */
 
@@ -1897,6 +1906,9 @@
 
   /* Forma (los valores de gs). */
   --piloto-radius-bubble: 12px;
+  /* La esquina inferior derecha de TU burbuja (la «cola»). Si no se define, vale lo mismo que
+     `--piloto-radius-bubble` (el componente usa ese respaldo). */
+  /* --piloto-radius-bubble-tail: 12px; */
   --piloto-radius-input: 24px;
   --piloto-radius-card: 16px;
   --piloto-radius-button: 12px;
@@ -2055,6 +2067,80 @@
   --piloto-shadow-hero: 4px 4px 0 #000000;
 }
 
+/* ── Deník: azul #5158F6, tinta #11151A, Satoshi; tu burbuja oscura con cola, la respuesta sin
+   burbuja (el avatar a la izquierda va por `message.avatar`). La app anfitriona carga Satoshi. ── */
+.piloto[data-skin="denik"] {
+  --piloto-rem: 16px;
+  --piloto-font: "Satoshi", "Satoshi ", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  /* La respuesta va en la misma Satoshi, no en serif. */
+  --piloto-font-prose: "Satoshi", "Satoshi ", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --piloto-bg: #ffffff;
+  --piloto-surface: #f8f8fa;
+  --piloto-surface-2: #f2f2f2;
+  --piloto-surface-hover: #fafafa;
+  --piloto-text: #11151a;
+  --piloto-text-2: #4b5563;
+  --piloto-text-3: #8391a1;
+  --piloto-text-disabled: #c4cad2;
+  --piloto-text-inverse: #ffffff;
+  --piloto-inverse: #11151a;
+  --piloto-border: #f2f2f2;
+  --piloto-border-2: #f2f2f2;
+  --piloto-accent-100: #eeeffe;
+  --piloto-accent-soft: #a8abfa;
+  --piloto-accent: #5158f6;
+  --piloto-accent-strong: #3f46e0;
+  --piloto-on-accent: #ffffff;
+  --piloto-success: #10b981;
+  --piloto-danger: #ca5757;
+  --piloto-focus: #5158f6;
+  --piloto-user-bubble: #11151a;
+  --piloto-user-text: #ffffff;
+  --piloto-composer-bg: #ffffff;
+  --piloto-radius-bubble: 24px;
+  --piloto-radius-bubble-tail: 8px;
+  --piloto-radius-input: 24px;
+  --piloto-radius-card: 16px;
+  --piloto-radius-button: 12px;
+  --piloto-border-width: 1px;
+  --piloto-shadow-input: 0 4px 24px rgb(0 0 0 / 0.06);
+  --piloto-shadow-color: #11151a;
+  --piloto-shadow-hero: 5px 5px 0 #11151a;
+}
+.piloto[data-skin="denik"][data-theme="dark"] {
+  --piloto-bg: #11151a;
+  --piloto-surface: #1a1f26;
+  --piloto-surface-2: #242a33;
+  --piloto-surface-hover: #161b21;
+  --piloto-text: #f2f4f7;
+  --piloto-text-2: #c2c8d0;
+  --piloto-text-3: #8391a1;
+  --piloto-text-disabled: #4b5563;
+  --piloto-text-inverse: #11151a;
+  --piloto-inverse: #f2f4f7;
+  --piloto-border: #242a33;
+  --piloto-border-2: #1a1f26;
+  --piloto-accent-100: #1c2140;
+  --piloto-accent-soft: #3d43b8;
+  --piloto-accent: #6b71f8;
+  --piloto-accent-strong: #8a8ffa;
+  --piloto-user-bubble: #2a303a;
+  --piloto-user-text: #f2f4f7;
+  --piloto-composer-bg: #161b21;
+  --piloto-shadow-input: 0 4px 24px rgb(0 0 0 / 0.4);
+  --piloto-shadow-color: #5158f6;
+  --piloto-shadow-hero: 5px 5px 0 #5158f6;
+}
+/* Las piezas de Deník que no son sólo color. */
+.piloto[data-skin="denik"] .piloto-header:not([data-piloto-isolate] *) { padding: 12px 16px; border-bottom: 1px solid var(--piloto-border); background: var(--piloto-bg); }
+.piloto[data-skin="denik"] .gc-msg-user:not([data-piloto-isolate] *) { max-width: 85%; padding: 10px 16px; font-size: 14px; line-height: 20px; }
+.piloto[data-skin="denik"] .gc-input:focus-within:not([data-piloto-isolate] *) { border-color: var(--piloto-accent); }
+/* El botón redondo: 36 px; apagado sigue azul (más tenue); al responder, círculo de tinta. */
+.piloto[data-skin="denik"] .gc-send:not([data-piloto-isolate] *),
+.piloto[data-skin="denik"] .gc-send-voice:not([data-piloto-isolate] *) { width: 36px; height: 36px; }
+.piloto[data-skin="denik"] .gc-send[data-state="send"]:disabled:not([data-piloto-isolate] *) { background: var(--piloto-accent); color: var(--piloto-on-accent); opacity: 0.4; }
+.piloto[data-skin="denik"] .gc-send[data-state="stop"]:not([data-piloto-isolate] *) { background: var(--piloto-inverse); color: var(--piloto-text-inverse); }
+
 @media (prefers-color-scheme: dark) {
 .piloto[data-theme="auto"] {
   color-scheme: dark;
@@ -2123,6 +2209,30 @@
   --piloto-shadow-color: #000000;
   --piloto-shadow-hero: 4px 4px 0 #000000;
 }
+.piloto[data-skin="denik"][data-theme="auto"] {
+  --piloto-bg: #11151a;
+  --piloto-surface: #1a1f26;
+  --piloto-surface-2: #242a33;
+  --piloto-surface-hover: #161b21;
+  --piloto-text: #f2f4f7;
+  --piloto-text-2: #c2c8d0;
+  --piloto-text-3: #8391a1;
+  --piloto-text-disabled: #4b5563;
+  --piloto-text-inverse: #11151a;
+  --piloto-inverse: #f2f4f7;
+  --piloto-border: #242a33;
+  --piloto-border-2: #1a1f26;
+  --piloto-accent-100: #1c2140;
+  --piloto-accent-soft: #3d43b8;
+  --piloto-accent: #6b71f8;
+  --piloto-accent-strong: #8a8ffa;
+  --piloto-user-bubble: #2a303a;
+  --piloto-user-text: #f2f4f7;
+  --piloto-composer-bg: #161b21;
+  --piloto-shadow-input: 0 4px 24px rgb(0 0 0 / 0.4);
+  --piloto-shadow-color: #5158f6;
+  --piloto-shadow-hero: 5px 5px 0 #5158f6;
+}
 }
 
 /* ── Reset con alcance y BLINDAJE contra el CSS de la app anfitriona ──────────

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.8.0",
+  "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",