ghostykit 0.7.1 → 0.8.1

package/README.md

@@ -88,13 +88,14 @@ 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"
   welcome="How can I help with your crons?"
   suggestions={["Why did the monitor fail?"]}
   draft={{ text: "Why did the monitor fail?", key: row.id }} // prefilled + focused, not sent
+  background={running.length ? { label: "2 helpers working", since: oldestStart } : null} // work after the run closed
   threadId={conversationId}                                   // reopen a stored thread
   context={() => ({ screen: "crons", selected })}            // AG-UI `context`, every run
   onTurnDone={({ text }) => refreshMyData()}
@@ -107,7 +108,8 @@ ref.current?.send("Why did this fail?");                     // ask on the user'
 
 Other props: `features` (`attachments`, `retry`, `copy`, `usage`, `replyOptions`, `duration`,
 `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`
+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
@@ -173,7 +175,7 @@ const PLUGINS = [crm, modelPicker({ onChange: (model) => api.setModel(model) }),
 | `composer.below` | Under the message box. | suggestion chips |
 | `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 |
+| `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 |
@@ -195,7 +197,7 @@ in the URL).
 - **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`, `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.
+- **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.
 
@@ -228,6 +230,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-PNU3LKWG.js → chunk-VFCROLFF.js}

@@ -1095,8 +1095,11 @@ function Composer({
   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([]);
@@ -1431,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
           }
         )
       ] })
@@ -1517,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
           }
         )
       ] })
@@ -1580,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;
 }
@@ -1618,7 +1625,13 @@ function pluginPoints(p) {
   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");
@@ -1646,6 +1659,7 @@ function resolvePlugins(list = []) {
     httpError: [],
     attachments: {},
     header: [],
+    headerStart: [],
     sidePanel: [],
     aboveThread: [],
     composerActions: [],
@@ -1707,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));

package/dist/plugins/index.js

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

package/dist/react/Composer.d.ts

@@ -52,8 +52,15 @@ export interface ComposerProps {
     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, accept, 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";
@@ -40,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;
     /**
@@ -50,6 +53,15 @@ export interface PilotoProps extends UsePilotOptions {
         text: string;
         key?: string | number;
     } | null;
+    /**
+     * Trabajo que sigue FUERA del run (ayudantes en segundo plano, una tarea larga): con el run ya
+     * cerrado, el hilo enseña `label` y cuenta desde `since` (ms) para que no parezca terminado.
+     * Con un run vivo manda su propia espera. `null` = nada pendiente.
+     */
+    background?: {
+        label: string;
+        since: number;
+    } | null;
     /** Referencias controladas (si no, Piloto las guarda; agrégalas con `ref.addReference`). */
     references?: Reference[];
     onReferencesChange?: (refs: Reference[]) => void;

package/dist/react/Status.d.ts

@@ -1,6 +1,8 @@
 /** Los tres puntitos de «escribiendo» (color y animación en CSS: `gc-typing`). */
 export declare function TypingDots(): import("react").JSX.Element;
-export declare function WaitLabel({ since, showDuration, step, }: {
+export declare function WaitLabel({ since, showDuration, step, text, }: {
+    /** Frase fija que gana a las del turno (p. ej. «2 ayudantes trabajando» con el run ya cerrado). */
+    text?: string | null;
     /** El paso con nombre en curso (`STEP_STARTED`): si `strings.steps` lo nombra, esa es la frase. */
     step?: string | null;
     /** Desde que se MANDÓ el mensaje (no desde que se montó la etiqueta). */

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

@@ -80,7 +80,7 @@ import {
   resolvePlugins,
   rootProps,
   usePiloto
-} from "../chunks/chunk-PNU3LKWG.js";
+} from "../chunks/chunk-VFCROLFF.js";
 import {
   TOOL_VERBS_EN,
   TOOL_VERBS_ES,
@@ -679,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)
       ) }),
@@ -828,7 +828,8 @@ function TypingDots() {
 function WaitLabel({
   since,
   showDuration = true,
-  step
+  step,
+  text
 }) {
   const { strings: t } = usePiloto();
   const [mounted] = useState6(() => Date.now());
@@ -840,7 +841,7 @@ function WaitLabel({
   const seconds = Math.max(0, Math.floor((now - (since || mounted)) / 1e3));
   const phrases = t.thinkingPhrases;
   const stepText = step ? t.steps?.[step] : void 0;
-  const what = stepText ? stepText : phrases?.length ? seconds >= STILL_WORKING_S ? t.stillWorking : phrases[Math.floor(seconds / 4) % phrases.length] : t.howItGoes(seconds);
+  const what = text ? text : stepText ? stepText : phrases?.length ? seconds >= STILL_WORKING_S ? t.stillWorking : phrases[Math.floor(seconds / 4) % phrases.length] : t.howItGoes(seconds);
   return /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-0.5 text-sm text-text-secondary", children: /* @__PURE__ */ jsxs5("p", { className: "flex items-center", children: [
     /* @__PURE__ */ jsx7(AnimatePresence2, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx7(
       motion2.span,
@@ -1498,6 +1499,7 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
         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,
+        icons: props.icons,
         accept,
         ...maxFiles ? { maxFiles } : {},
         ...maxBytes ? { maxFileMb: maxBytes / (1024 * 1024) } : {}
@@ -1511,7 +1513,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 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) => {
@@ -1562,7 +1569,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.
@@ -1582,7 +1589,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",
             {
@@ -1652,6 +1659,10 @@ var Piloto = forwardRef(function Piloto2(props, handle) {
                     /* @__PURE__ */ jsx8(TypingDots, {}),
                     /* @__PURE__ */ jsx8(WaitLabel, { since: state.turnStartedAt, step: state.step, showDuration: features.duration !== false })
                   ] })),
+                  !busy && props.background && /* @__PURE__ */ jsxs6("div", { "data-background": true, className: "flex flex-col gap-1.5", children: [
+                    /* @__PURE__ */ jsx8(TypingDots, {}),
+                    /* @__PURE__ */ jsx8(WaitLabel, { text: props.background.label, since: props.background.since, showDuration: features.duration !== false })
+                  ] }),
                   notice && /* @__PURE__ */ jsx8("p", { className: "text-sm text-text-tertiary", children: notice }),
                   error && /* @__PURE__ */ jsx8("p", { className: "text-sm text-text-danger", children: error })
                 ] }),

package/dist/react/plugins.d.ts

@@ -162,8 +162,11 @@ export interface PilotoPlugin {
             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. */
@@ -187,6 +190,13 @@ export interface PilotoPlugin {
     /** 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> = {
@@ -214,7 +224,10 @@ export interface ResolvedPlugins {
     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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghostykit",
-  "version": "0.7.1",
-  "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.1",
+  "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",