ghostykit 0.5.2 → 0.6.0

package/README.md

@@ -111,10 +111,17 @@ ref.current?.send("Why did this fail?");                     // ask on the user'
 Other options: `strings`, `toolIcons`, `formatUserText`, `markdown`, `features`
 (`attachments`, `retry`, `copy`, `usage`, `replyOptions`, `duration`, `steer`), `references` /
 `onReferencesChange`, `voiceNoteText`, `placeholder`, `avatar`, `initialTurns`, `loadOlder` (earlier
-pages of a long thread), the slot `sidePanel`, and the callbacks `onTurnStart`, `onTitle`, `onState`,
-`onEvent` (every raw AG-UI event), `onSend`. The agent's shared state (`STATE_SNAPSHOT` +
-`STATE_DELTA`) is `pilot.state.agentState`, and each turn's `CUSTOM` events are `turn.custom` (what
-`renderDeliveries` draws). To read the state outside the chat, call `usePilot(transport)` yourself
+pages of a long thread), `forwardedProps` (extra keys for every run, e.g. `{permissions: "ask"}`), the
+slots `sidePanel` and `aboveComposer` (both may take the `pilot`), and the callbacks `onTurnStart`,
+`onTitle`, `onState`, `onEvent` (every raw AG-UI event), `onSend`. The agent's shared state
+(`STATE_SNAPSHOT` + `STATE_DELTA`) is `pilot.state.agentState`, and each turn's `CUSTOM` events are
+`turn.custom` (what `renderDeliveries` draws).
+
+Subagents (`state.subagents.tasks`) are `pilot.subagents`; `pilot.stopSubagent(id)` stops one, and
+`<Subagents pilot={pilot} />` is a ready-made bar ("2 agents working", one row each, *Stop*):
+`slots={{ aboveComposer: (pilot) => <Subagents pilot={pilot} /> }}`. A message the server can't take
+while a run is live (`409 run_active`) waits in `pilot.state.queued` and is sent when that run ends.
+`pilot.refresh()` asks for the thread again (when your own event bus says something changed). To read the state outside the chat, call `usePilot(transport)` yourself
 and pass the result as `pilot`. Every piece is
 exported (`AgentBubble`, `AgentSteps`, `Composer`, `ConfirmCard`, `Markdown`, …) if you want to build
 your own layout.

package/dist/chunks/{chunk-3XDAYARB.js → chunk-4XKQ6XAJ.js}

@@ -111,6 +111,8 @@ function createPilotState(turns = []) {
     step: null,
     history: null,
     olderCount: 0,
+    queued: [],
+    openText: null,
     effects: []
   };
 }
@@ -255,7 +257,9 @@ function applySnapshot(s, messages) {
     turns: [...prefix, ...turns],
     olderCount: prefix.length,
     history: keepOlder ? s.history : s.historyNext ?? null,
-    historyNext: void 0
+    historyNext: void 0,
+    // Lo abierto no viene en el snapshot: si sigue, el servidor lo re-emite enseguida.
+    openText: null
   };
 }
 function reduceAgUiEvent(prev, e, now = Date.now()) {
@@ -263,20 +267,30 @@ function reduceAgUiEvent(prev, e, now = Date.now()) {
   switch (e.type) {
     case "RUN_STARTED":
       return { ...s, busy: true, error: null, step: null, runId: e.runId ?? s.runId };
-    case "TEXT_MESSAGE_START":
+    case "TEXT_MESSAGE_START": {
       if (e.role && e.role !== "assistant") return s;
-      return patchAssistant(s, (t) => ({ ...t, text: t.text && !t.text.endsWith("\n") ? `${t.text}
+      const id = typeof e.messageId === "string" ? e.messageId : null;
+      const last = s.turns[s.turns.length - 1];
+      if (id && s.openText?.id === id && last?.role === "assistant" && last.text.length >= s.openText.start) {
+        const start = s.openText.start;
+        return patchAssistant(s, (t) => ({ ...t, text: t.text.slice(0, start) }));
+      }
+      const next = patchAssistant(s, (t) => ({ ...t, text: t.text && !t.text.endsWith("\n") ? `${t.text}
 
 ` : t.text }));
+      return { ...next, openText: id ? { id, start: next.turns[next.turns.length - 1].text.length } : null };
+    }
     case "TEXT_MESSAGE_CONTENT":
     case "TEXT_MESSAGE_CHUNK":
       if (e.role && e.role !== "assistant") return s;
       if (typeof e.delta !== "string" || !e.delta) return s;
       return patchAssistant(s, (t) => ({ ...t, text: t.text + e.delta }));
     case "TEXT_MESSAGE_END":
-      return s;
-    case "TOOL_CALL_START":
-      return upsertTool(s, e.toolCallId, { title: e.toolCallName, status: "in_progress" });
+      return s.openText && s.openText.id === e.messageId ? { ...s, openText: null } : s;
+    case "TOOL_CALL_START": {
+      const known = s.turns[s.turns.length - 1]?.tools?.some((x) => x.id === e.toolCallId);
+      return upsertTool(s, e.toolCallId, { title: e.toolCallName, status: "in_progress", ...known ? { args: "" } : {} });
+    }
     case "TOOL_CALL_CHUNK": {
       const known = s.turns[s.turns.length - 1]?.tools?.find((x) => x.id === e.toolCallId);
       let next = known ? s : upsertTool(s, e.toolCallId, { title: e.toolCallName, status: "in_progress" });
@@ -355,7 +369,7 @@ function toHistory(v) {
   return { hasMoreBefore: h.hasMoreBefore === true, ...typeof h.before === "string" ? { before: h.before } : {} };
 }
 function finish(s0, e, now, failed = false) {
-  let s = { ...s0, busy: false, step: null };
+  let s = { ...s0, busy: false, step: null, openText: null };
   const outcome = e.outcome;
   const interrupted = outcome?.type === "interrupt" && Array.isArray(outcome.interrupts) && outcome.interrupts.length > 0;
   const clockOffset = typeof e.timestamp === "number" ? now - e.timestamp : 0;
@@ -395,7 +409,32 @@ function beginSend(prev, text, attachments = [], now = Date.now()) {
   return { ...prev, turns, busy: true, error: null, notice: null, turnStartedAt: now, effects: [{ type: "turn-start" }] };
 }
 function beginSteer(prev, text) {
-  return { ...prev, turns: [...prev.turns, { role: "user", text }], notice: null, effects: [] };
+  return { ...prev, turns: [...prev.turns, { role: "user", text }], notice: null, openText: null, effects: [] };
+}
+function queueMessage(prev, text, attachments = [], tries = 1) {
+  const turns = [...prev.turns];
+  for (let i = turns.length - 1; i >= 0; i--) {
+    if (turns[i].role === "user" && turns[i].text === text) {
+      turns.splice(i, 1);
+      break;
+    }
+  }
+  return { ...prev, turns, queued: [...prev.queued, { text, ...attachments.length ? { attachments } : {}, tries }], effects: [] };
+}
+function takeQueued(prev) {
+  return { state: { ...prev, queued: [], effects: [] }, queued: prev.queued };
+}
+function subagentsOf(agentState) {
+  const tasks = agentState.subagents?.tasks;
+  if (!Array.isArray(tasks)) return [];
+  return tasks.filter((t) => Boolean(t) && typeof t === "object" && typeof t.id === "string");
+}
+function markSubagent(prev, taskId, status) {
+  const tasks = subagentsOf(prev.agentState);
+  if (!tasks.some((t) => t.id === taskId)) return prev;
+  const subagents = { ...prev.agentState.subagents, tasks: tasks.map((t) => t.id === taskId ? { ...t, status } : t) };
+  const agentState = { ...prev.agentState, subagents };
+  return { ...prev, agentState, effects: [{ type: "state", state: agentState }] };
 }
 function prependHistory(prev, messages, page) {
   const have = new Set(prev.turns.map((t) => t.id).filter(Boolean));
@@ -406,7 +445,10 @@ function sendFailed(prev, message) {
   return { ...prev, busy: false, turnStartedAt: 0, error: message, effects: [] };
 }
 function stopTurn(prev) {
-  return { ...prev, busy: false, step: null, turnStartedAt: 0, turns: closeOpenTools(prev.turns, "cancelled"), effects: [] };
+  const text = prev.queued.map((q) => q.text).filter(Boolean).join("\n\n");
+  const attachments = prev.queued.flatMap((q) => q.attachments ?? []);
+  const returnedDraft = prev.queued.length ? { text, ...attachments.length ? { attachments } : {}, n: (prev.returnedDraft?.n ?? 0) + 1 } : prev.returnedDraft;
+  return { ...prev, busy: false, step: null, queued: [], returnedDraft, turnStartedAt: 0, turns: closeOpenTools(prev.turns, "cancelled"), effects: [] };
 }
 function dropLastExchange(prev) {
   const turns = [...prev.turns];
@@ -648,6 +690,10 @@ export {
   reduceAgUiEvent,
   beginSend,
   beginSteer,
+  queueMessage,
+  takeQueued,
+  subagentsOf,
+  markSubagent,
   prependHistory,
   sendFailed,
   stopTurn,

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./types";
-export { argsDetail, beginSend, beginSteer, createPilotState, dropLastExchange, expiryMs, lastUserTurn, messagesToTurns, prependHistory, reduceAgUiEvent, resolvePermission, sendFailed, stopTurn, toPermission, } from "./reducer";
+export { argsDetail, beginSend, beginSteer, createPilotState, dropLastExchange, expiryMs, lastUserTurn, markSubagent, messagesToTurns, prependHistory, queueMessage, reduceAgUiEvent, resolvePermission, sendFailed, stopTurn, subagentsOf, takeQueued, toPermission, } from "./reducer";
 export { applyJsonPatch, type PatchOp } from "./jsonPatch";
 export { isNarration, narrationToMarkdown, splitNarration } from "./narration";
 export { cleanReplyOption, extractReplyOptions, type ReplyOptions } from "./options";

package/dist/core/index.js

@@ -14,20 +14,24 @@ import {
   isNarration,
   isRunning,
   lastUserTurn,
+  markSubagent,
   messagesToTurns,
   narrationToMarkdown,
   prependHistory,
+  queueMessage,
   reduceAgUiEvent,
   resolvePermission,
   sendFailed,
   splitNarration,
   stepLabel,
   stopTurn,
+  subagentsOf,
   summarizeTools,
+  takeQueued,
   toPermission,
   toolName,
   toolNames
-} from "../chunks/chunk-3XDAYARB.js";
+} from "../chunks/chunk-4XKQ6XAJ.js";
 import {
   applyReferences,
   cleanUserText,
@@ -53,17 +57,21 @@ export {
   isNarration,
   isRunning,
   lastUserTurn,
+  markSubagent,
   messagesToTurns,
   narrationToMarkdown,
   prependHistory,
+  queueMessage,
   reduceAgUiEvent,
   resolvePermission,
   sendFailed,
   splitNarration,
   stepLabel,
   stopTurn,
+  subagentsOf,
   summarizeTools,
   systemNoteOf,
+  takeQueued,
   toPermission,
   toolName,
   toolNames

package/dist/core/reducer.d.ts

@@ -1,5 +1,5 @@
 import type { Interrupt, Message } from "@ag-ui/core";
-import type { Attachment, Decision, HistoryPage, PermissionRequest, PilotState, Turn } from "./types";
+import type { Attachment, Decision, HistoryPage, PermissionRequest, PilotState, SubagentTask, Turn } from "./types";
 export declare function createPilotState(turns?: Turn[]): PilotState;
 type Ev = {
     type: string;
@@ -23,6 +23,20 @@ export declare function beginSend(prev: PilotState, text: string, attachments?:
  * diga después va en una respuesta nueva debajo; el run (y su reloj) siguen siendo los mismos.
  */
 export declare function beginSteer(prev: PilotState, text: string): PilotState;
+/**
+ * El servidor no dejó entrar el mensaje (409 `run_active` / `interrupt_pending`): su burbuja sale del
+ * hilo y queda en espera; se manda solo cuando termine el run vivo (gs-agui 1 §0.7b-6).
+ */
+export declare function queueMessage(prev: PilotState, text: string, attachments?: Attachment[], tries?: number): PilotState;
+/** Saca los mensajes en espera (para mandarlos juntos en un run). */
+export declare function takeQueued(prev: PilotState): {
+    state: PilotState;
+    queued: PilotState["queued"];
+};
+/** Los subagentes del estado del agente (`state.subagents.tasks`); lo que no tiene `id` se descarta. */
+export declare function subagentsOf(agentState: Record<string, unknown>): SubagentTask[];
+/** Marca un subagente (p. ej. `stopped` al pedir detenerlo); el siguiente STATE_* manda. */
+export declare function markSubagent(prev: PilotState, taskId: string, status: SubagentTask["status"]): PilotState;
 /**
  * Mensajes más viejos (`loadOlder`) delante del hilo. Las páginas empiezan en un mensaje del usuario;
  * lo que ya se tenía (mismo id) no se repite.

package/dist/core/types.d.ts

@@ -46,6 +46,34 @@ export interface CustomEntry {
     value: unknown;
     timestamp?: number;
 }
+/** Un subagente del agente (`state.subagents.tasks[]`, gs-agui 1 §0.5). */
+export interface SubagentTask {
+    id: string;
+    title?: string;
+    status: "running" | "completed" | "failed" | "stopped" | (string & {});
+    /** Epoch ms. */
+    startedAt?: number;
+    endedAt?: number;
+    usage?: {
+        tokens?: number;
+        toolUses?: number;
+    };
+    /** La última herramienta que usó (para el renglón «Leyendo…»). */
+    lastTool?: string;
+    /** Lo que dijo al terminar. */
+    summary?: string;
+    model?: string;
+    effort?: string;
+    /** Su resultado ya entró al hilo. */
+    delivered?: boolean;
+}
+/** Un mensaje que no pudo entrar al run vivo (409 `run_active`): sale solo al terminar el run. */
+export interface QueuedMessage {
+    text: string;
+    attachments?: Attachment[];
+    /** Cuántas veces el servidor lo rechazó (se rinde a la tercera). */
+    tries: number;
+}
 /** Hay mensajes más viejos que los del snapshot (`CUSTOM ghosty.history`). */
 export interface HistoryPage {
     hasMoreBefore: boolean;
@@ -135,6 +163,20 @@ export interface PilotState {
     olderCount: number;
     /** El `ghosty.history` que acompaña al snapshot que viene. */
     historyNext?: HistoryPage | null;
+    /** Mensajes en espera de que termine el run vivo (steer rechazado). */
+    queued: QueuedMessage[];
+    /** Lo que estaba en espera cuando la persona detuvo: regresa a la caja (`n` cambia en cada vez). */
+    returnedDraft?: {
+        text: string;
+        attachments?: Attachment[];
+        n: number;
+    } | null;
+    /** El `TEXT_MESSAGE` abierto y dónde empieza en el texto del último turno: si el servidor lo
+     *  re-emite (reconexión, §0.7b-4) con el mismo `messageId`, se reescribe en vez de duplicarse. */
+    openText?: {
+        id: string;
+        start: number;
+    } | null;
     /** Efectos de la ÚLTIMA transición. El hook los ejecuta y los descarta. */
     effects: PilotEffect[];
 }

package/dist/react/Piloto.d.ts

@@ -31,10 +31,10 @@ export interface PilotoSlots {
     emptyState?: ReactNode;
     /** Arriba a la derecha, sobre el hilo (compartir, abrir en grande…). */
     headerActions?: ReactNode;
-    /** Pegado arriba del composer (un aviso, un banner). */
-    aboveComposer?: ReactNode;
-    /** Un panel junto al chat (subagentes, vista previa), con el estado del agente. */
-    sidePanel?: (agentState: Record<string, unknown>) => ReactNode;
+    /** Pegado arriba del composer (un aviso, un banner, `<Subagents pilot={pilot} />`). */
+    aboveComposer?: ReactNode | ((pilot: Pilot) => ReactNode);
+    /** Un panel junto al chat (subagentes, vista previa), con el estado del agente y el piloto. */
+    sidePanel?: (agentState: Record<string, unknown>, pilot: Pilot) => ReactNode;
 }
 export interface PilotoProps extends UsePilotOptions {
     transport: PilotTransport | null;

package/dist/react/Subagents.d.ts

@@ -0,0 +1,10 @@
+import type { Pilot } from "./usePilot";
+export interface SubagentsProps {
+    pilot: Pick<Pilot, "subagents" | "stopSubagent">;
+    /** Abierta de entrada. Default: no. */
+    defaultOpen?: boolean;
+    /** Los que ya entregaron también se listan. Default: sí. */
+    showFinished?: boolean;
+    className?: string;
+}
+export declare function Subagents({ pilot, defaultOpen, showFinished, className }: SubagentsProps): import("react").JSX.Element | null;

package/dist/react/index.d.ts

@@ -9,6 +9,7 @@ export { Composer, ModelPicker, mimeOf, type ComposerProps, type ModelOption, ty
 export { ConfirmCard, DecisionLines } from "./ConfirmCard";
 export { ReferenceChips, Suggestions } from "./Chips";
 export { TypingDots, WaitLabel } from "./Status";
+export { Subagents, type SubagentsProps } from "./Subagents";
 export { PilotoContext, usePiloto, type MarkdownOptions, type PilotIcon, type PilotoConfig, type PilotTheme } from "./context";
 export { STRINGS_EN, STRINGS_ES, type PilotStrings } from "./strings";
 export * from "../core";

package/dist/react/index.js

@@ -14,20 +14,24 @@ import {
   isNarration,
   isRunning,
   lastUserTurn,
+  markSubagent,
   messagesToTurns,
   narrationToMarkdown,
   prependHistory,
+  queueMessage,
   reduceAgUiEvent,
   resolvePermission,
   sendFailed,
   splitNarration,
   stepLabel,
   stopTurn,
+  subagentsOf,
   summarizeTools,
+  takeQueued,
   toPermission,
   toolName,
   toolNames
-} from "../chunks/chunk-3XDAYARB.js";
+} from "../chunks/chunk-4XKQ6XAJ.js";
 import {
   PilotHttpError,
   createAgUiTransport,
@@ -821,7 +825,7 @@ import {
   useEffect as useEffect6,
   useImperativeHandle,
   useLayoutEffect,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useRef as useRef5,
   useState as useState9
 } from "react";
@@ -890,6 +894,11 @@ var STRINGS_ES = {
   steps: { waking: "Despertando al agente\u2026", session: "Preparando la sesi\xF3n\u2026", compacting: "Resumiendo la conversaci\xF3n\u2026" },
   loadOlder: "Cargar mensajes anteriores",
   loadingOlder: "Cargando\u2026",
+  queued: "Se manda cuando termine",
+  subagentsWorking: (n) => n === 1 ? "1 agente trabajando" : `${n} agentes trabajando`,
+  subagentsDone: (n) => n === 1 ? "1 agente termin\xF3" : `${n} agentes terminaron`,
+  subagentStop: "Detener",
+  subagentStatus: { running: "Trabajando", completed: "Termin\xF3", failed: "Fall\xF3", stopped: "Detenido" },
   confirmTitle: "Necesito tu permiso para",
   approve: "Aprobar",
   reject: "Rechazar",
@@ -958,6 +967,11 @@ var STRINGS_EN = {
   steps: { waking: "Waking the agent\u2026", session: "Starting the session\u2026", compacting: "Compacting the conversation\u2026" },
   loadOlder: "Load earlier messages",
   loadingOlder: "Loading\u2026",
+  queued: "Sends when this finishes",
+  subagentsWorking: (n) => n === 1 ? "1 agent working" : `${n} agents working`,
+  subagentsDone: (n) => n === 1 ? "1 agent finished" : `${n} agents finished`,
+  subagentStop: "Stop",
+  subagentStatus: { running: "Working", completed: "Done", failed: "Failed", stopped: "Stopped" },
   confirmTitle: "I need your permission to",
   approve: "Approve",
   reject: "Reject",
@@ -2295,7 +2309,8 @@ function WaitLabel({
 }
 
 // src/react/usePilot.ts
-import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4, useState as useState8 } from "react";
+var MAX_QUEUE_TRIES = 3;
 var uuid = () => {
   const c = globalThis.crypto;
   if (c?.randomUUID) return c.randomUUID();
@@ -2320,6 +2335,13 @@ function userMessage(text, attachments) {
   }
   return { id: uuid(), role: "user", content: parts };
 }
+function fromUserMessage(content) {
+  if (typeof content === "string") return { text: content, attachments: [] };
+  const parts = Array.isArray(content) ? content : [];
+  const text = parts.filter((p) => p?.type === "text").map((p) => p.text ?? "").join("");
+  const attachments = parts.filter((p) => p && p.type !== "text" && p.source).map((p) => ({ mimeType: p.mimeType ?? "application/octet-stream", ...p.filename ? { name: p.filename } : {}, ...p.source.type === "url" ? { url: p.source.value } : { data: p.source.value } }));
+  return { text, attachments };
+}
 function usePilot(transport, opts = {}) {
   const [state, setState] = useState8(() => createPilotState(opts.initialTurns ?? []));
   const ref = useRef4(state);
@@ -2331,6 +2353,17 @@ function usePilot(transport, opts = {}) {
   const ctrl = useRef4(null);
   const liveRun = useRef4(null);
   const answers = useRef4(/* @__PURE__ */ new Map());
+  const queuedTries = useRef4(/* @__PURE__ */ new Map());
+  const flushRef = useRef4(() => {
+  });
+  const baseInput = () => {
+    const ctx = optsRef.current.context;
+    return { threadId, runId: uuid(), messages: [], tools: [], context: toAgUiContext(typeof ctx === "function" ? ctx() : ctx), state: {}, forwardedProps: extraProps() };
+  };
+  const extraProps = () => {
+    const f = optsRef.current.forwardedProps;
+    return (typeof f === "function" ? f() : f) ?? {};
+  };
   const commit = useCallback2((next) => {
     if (next === ref.current) return;
     ref.current = next;
@@ -2347,20 +2380,12 @@ function usePilot(transport, opts = {}) {
     async (partial, reopening = false) => {
       const t = transportRef.current;
       if (!t) return;
-      const ctx = optsRef.current.context;
-      const input = {
-        threadId,
-        runId: uuid(),
-        tools: [],
-        context: toAgUiContext(typeof ctx === "function" ? ctx() : ctx),
-        state: {},
-        forwardedProps: {},
-        ...partial
-      };
+      const input = { ...baseInput(), ...partial, forwardedProps: { ...extraProps(), ...partial.forwardedProps } };
       ctrl.current?.abort();
       const c = new AbortController();
       ctrl.current = c;
       const steering = typeof input.forwardedProps?.steer === "string";
+      const userMsg = input.messages[0];
       if (!steering && (input.messages.length || input.resume?.length)) liveRun.current = input.runId;
       optsRef.current.onSend?.(input);
       let ended = false;
@@ -2382,7 +2407,18 @@ function usePilot(transport, opts = {}) {
         if (c.signal.aborted) return;
         const code = err instanceof PilotHttpError ? err.code : void 0;
         if ((code === "run_active" || code === "interrupt_pending") && !reopening) {
-          commit({ ...ref.current, notice: err instanceof Error ? err.message : null, effects: [] });
+          if (userMsg) {
+            const { text, attachments } = fromUserMessage(userMsg.content);
+            const tries = (queuedTries.current.get(input.messages[0].id) ?? 0) + 1;
+            if (tries < MAX_QUEUE_TRIES) {
+              let s = queueMessage(ref.current, text, attachments, tries);
+              if (!steering) s = { ...s, busy: false, turnStartedAt: 0 };
+              commit({ ...s, notice: null });
+            } else {
+              commit(sendFailed(ref.current, err instanceof Error && err.message ? err.message : "No se pudo mandar el mensaje."));
+              return;
+            }
+          } else commit({ ...ref.current, notice: err instanceof Error ? err.message : null, effects: [] });
           return runNow({ messages: [] }, true);
         }
         if (steering && !reopening) {
@@ -2392,7 +2428,11 @@ function usePilot(transport, opts = {}) {
         commit(sendFailed(ref.current, err instanceof Error && err.message ? err.message : "No se pudo hablar con el agente."));
         return;
       }
-      if (ended || c.signal.aborted) return;
+      if (c.signal.aborted) return;
+      if (ended) {
+        if (ref.current.queued.length) setTimeout(() => flushRef.current(), 0);
+        return;
+      }
       if (!reopening) return runNow({ messages: [] }, true);
       commit(sendFailed(ref.current, "Se cort\xF3 la conexi\xF3n con el agente."));
     },
@@ -2418,16 +2458,38 @@ function usePilot(transport, opts = {}) {
         await runNow({ messages: [userMessage(text, [])], forwardedProps: { steer: live } });
         return;
       }
+      await sendNew(text, attachments);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [commit, runNow]
+  );
+  const sendNew = useCallback2(
+    async (text, attachments, tries = 0) => {
       const resume = pendingResume();
       answers.current.clear();
       let s = ref.current;
       for (const p of s.permissions) s = resolvePermission(s, p.id, "cancelled");
       commit(beginSend(s, text, attachments));
-      await runNow({ messages: [userMessage(text, attachments)], ...resume.length ? { resume } : {} });
+      const msg = userMessage(text, attachments);
+      if (tries) queuedTries.current.set(msg.id, tries);
+      try {
+        await runNow({ messages: [msg], ...resume.length ? { resume } : {} });
+      } finally {
+        queuedTries.current.delete(msg.id);
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [commit, runNow]
   );
+  flushRef.current = () => {
+    const s = ref.current;
+    if (!s.queued.length || s.busy || s.permissions.length || !transportRef.current) return;
+    const { state: next, queued } = takeQueued(s);
+    commit(next);
+    const text = queued.map((q) => q.text).filter(Boolean).join("\n\n");
+    const attachments = queued.flatMap((q) => q.attachments ?? []);
+    void sendNew(text, attachments, Math.max(...queued.map((q) => q.tries)));
+  };
   const stop = useCallback2(() => {
     const run = liveRun.current ?? (ref.current.busy ? ref.current.runId : null);
     liveRun.current = null;
@@ -2436,12 +2498,9 @@ function usePilot(transport, opts = {}) {
     commit(stopTurn(ref.current));
     const t = transportRef.current;
     if (!t || !run) return;
-    const ctx = optsRef.current.context;
-    void t.run(
-      { threadId, runId: uuid(), messages: [], tools: [], context: toAgUiContext(typeof ctx === "function" ? ctx() : ctx), state: {}, forwardedProps: { cancel: run } },
-      () => {
-      }
-    ).catch(() => {
+    const input = baseInput();
+    void t.run({ ...input, forwardedProps: { ...input.forwardedProps, cancel: run } }, () => {
+    }).catch(() => {
     });
   }, [commit, threadId]);
   const retry = useCallback2(() => {
@@ -2498,8 +2557,24 @@ function usePilot(transport, opts = {}) {
       setLoadingOlder(false);
     }
   }, [commit]);
+  const stopSubagent = useCallback2(
+    async (taskId) => {
+      const t = transportRef.current;
+      if (!t) return;
+      commit(markSubagent(ref.current, taskId, "stopped"));
+      const input = baseInput();
+      await t.run({ ...input, forwardedProps: { ...input.forwardedProps, stopSubagent: taskId } }, () => {
+      }).catch(() => {
+      });
+      if (!ref.current.busy) await runNow({ messages: [] }, true);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [commit, runNow]
+  );
+  const refresh = useCallback2(() => runNow({ messages: [] }, true), [runNow]);
   const canSteer = Boolean(transport) && (opts.steer ?? state.agentState.caps?.steer === true);
-  return { state, threadId, send, stop, retry, respondPermission, recordDecision, expirePermission, canSteer, loadOlder, loadingOlder };
+  const subagents = useMemo3(() => subagentsOf(state.agentState), [state.agentState]);
+  return { state, threadId, send, stop, retry, respondPermission, recordDecision, expirePermission, canSteer, loadOlder, loadingOlder, subagents, stopSubagent, refresh };
 }
 
 // src/react/Piloto.tsx
@@ -2512,8 +2587,8 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
   const pilot = external ?? own;
   const { state } = pilot;
   const { turns, busy, error, notice, permissions, olderCount } = state;
-  const strings = useMemo3(() => ({ ...locale === "en" ? STRINGS_EN : STRINGS_ES, ...props.strings }), [locale, props.strings]);
-  const config = useMemo3(
+  const strings = useMemo4(() => ({ ...locale === "en" ? STRINGS_EN : STRINGS_ES, ...props.strings }), [locale, props.strings]);
+  const config = useMemo4(
     () => ({
       strings,
       toolVerbs: { ...locale === "en" ? TOOL_VERBS_EN : TOOL_VERBS_ES, ...props.toolVerbs },
@@ -2548,6 +2623,13 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
     draftSeen.current = id;
     setDraftState((d) => ({ text: draftText, n: d.n + 1 }));
   }, [draftText, draftKey]);
+  const returned = state.returnedDraft;
+  useEffect6(() => {
+    if (!returned) return;
+    const typed = composerBox.current?.querySelector("textarea")?.value ?? "";
+    const text = [returned.text, typed].filter((x) => x.trim()).join("\n\n");
+    setDraftState((d) => ({ text, n: d.n + 1 }));
+  }, [returned?.n]);
   const send = useCallback3(
     (text, attachments = []) => {
       const current = refsRef.current;
@@ -2709,8 +2791,9 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
   ] });
   const withPanel = (chat) => slots.sidePanel ? /* @__PURE__ */ jsxs8("div", { className: "flex min-h-0 flex-1 flex-row", children: [
     /* @__PURE__ */ jsx10("div", { className: "relative flex min-h-0 min-w-0 flex-1 flex-col", children: chat }),
-    slots.sidePanel(state.agentState)
+    slots.sidePanel(state.agentState, pilot)
   ] }) : chat;
+  const aboveComposer = typeof slots.aboveComposer === "function" ? slots.aboveComposer(pilot) : slots.aboveComposer;
   const permissionCards = cards.map((p) => /* @__PURE__ */ jsx10(ConfirmCard, { request: p, onRespond: respond, onSettled: settle, onExpire: pilot.expirePermission }, p.id));
   return /* @__PURE__ */ jsx10(PilotoContext.Provider, { value: config, children: /* @__PURE__ */ jsx10("div", { ...rootProps(theme, props.skin), "data-busy": busy || void 0, className: `piloto ${props.className ?? ""}`, style: props.style, children: withPanel(empty ? (
     // Un hilo vacío enseña lo mismo que la portada: la cara, el saludo, la caja y por dónde
@@ -2729,7 +2812,7 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
         )
       ] }),
       /* @__PURE__ */ jsxs8("div", { className: "w-full max-w-3xl", children: [
-        slots.aboveComposer,
+        aboveComposer,
         composer,
         props.suggestions && /* @__PURE__ */ jsx10(Suggestions, { items: props.suggestions, onPick: (s) => send(s), onPrefill: (s) => setDraftState((d) => ({ text: s, n: d.n + 1 })) })
       ] })
@@ -2780,6 +2863,13 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
                 }
               ) }, i - olderCount);
             }),
+            state.queued.map((q, i) => (
+              // Esperan a que termine el run vivo (el servidor no los dejó entrar): salen solos.
+              /* @__PURE__ */ jsxs8("div", { "data-queued": true, className: "flex flex-col items-end gap-1 opacity-60", children: [
+                /* @__PURE__ */ jsx10(UserBubble, { turn: { role: "user", text: q.text, ...q.attachments ? { attachments: q.attachments } : {} } }),
+                /* @__PURE__ */ jsx10("span", { className: "text-xs text-text-tertiary", children: t.queued })
+              ] }, `q${i}`)
+            )),
             permissionCards,
             busy && !toolRunning && !cards.length && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ jsx10(TypingDots, {}),
@@ -2803,11 +2893,52 @@ var Piloto = forwardRef3(function Piloto2(props, handle) {
           children: /* @__PURE__ */ jsx10(ArrowDown, { className: "h-4 w-4" })
         }
       ),
-      slots.aboveComposer,
+      aboveComposer,
       composer
     ] })
   ] })) }) });
 });
+
+// src/react/Subagents.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var DOT = {
+  running: "bg-brand-500 animate-pulse",
+  completed: "bg-text-tertiary",
+  failed: "bg-text-danger",
+  stopped: "bg-text-disabled"
+};
+function Subagents({ pilot, defaultOpen = false, showFinished = true, className = "" }) {
+  const { strings: t } = usePiloto();
+  const [open, setOpen] = useState10(defaultOpen);
+  const all = pilot.subagents;
+  const tasks = showFinished ? all : all.filter((x) => x.status === "running");
+  if (!tasks.length) return null;
+  const running = all.filter((x) => x.status === "running").length;
+  return /* @__PURE__ */ jsxs9("div", { "data-subagents": true, className: `mb-2 rounded-2xl border border-border-primary bg-background-secondary text-sm ${className}`, children: [
+    /* @__PURE__ */ jsxs9("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, className: "flex w-full items-center gap-2 px-3 py-2 text-left text-text-secondary", children: [
+      /* @__PURE__ */ jsx11("span", { className: `h-2 w-2 shrink-0 rounded-full ${running ? DOT.running : DOT.completed}` }),
+      /* @__PURE__ */ jsx11("span", { className: "flex-1 truncate", children: running ? t.subagentsWorking(running) : t.subagentsDone(tasks.length) }),
+      /* @__PURE__ */ jsx11("span", { "aria-hidden": true, className: `text-text-tertiary transition-transform ${open ? "rotate-180" : ""}`, children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsx11("ul", { className: "flex flex-col border-t border-border-primary", children: tasks.map((task) => /* @__PURE__ */ jsx11(SubagentRow, { task, onStop: () => void pilot.stopSubagent(task.id) }, task.id)) })
+  ] });
+}
+function SubagentRow({ task, onStop }) {
+  const { strings: t } = usePiloto();
+  const line = task.status === "running" ? task.lastTool : task.summary ?? task.lastTool;
+  return /* @__PURE__ */ jsxs9("li", { "data-subagent": task.id, "data-status": task.status, className: "flex items-center gap-2 px-3 py-2", children: [
+    /* @__PURE__ */ jsx11("span", { className: `h-2 w-2 shrink-0 rounded-full ${DOT[task.status] ?? DOT.completed}` }),
+    /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx11("div", { className: "truncate text-text-primary", children: task.title ?? task.id }),
+      /* @__PURE__ */ jsxs9("div", { className: "truncate text-xs text-text-tertiary", children: [
+        t.subagentStatus[task.status] ?? task.status,
+        line ? ` \xB7 ${line}` : ""
+      ] })
+    ] }),
+    task.status === "running" && /* @__PURE__ */ jsx11("button", { type: "button", onClick: onStop, className: "shrink-0 rounded-full border border-border-primary px-2.5 py-0.5 text-xs text-text-secondary transition hover:text-text-danger", children: t.subagentStop })
+  ] });
+}
 export {
   AgentBubble,
   AgentSteps,
@@ -2831,6 +2962,7 @@ export {
   RobotArmIcon,
   STRINGS_EN,
   STRINGS_ES,
+  Subagents,
   Suggestions,
   TOOL_VERBS_EN,
   TOOL_VERBS_ES,
@@ -2858,10 +2990,12 @@ export {
   isNarration,
   isRunning,
   lastUserTurn,
+  markSubagent,
   messagesToTurns,
   mimeOf,
   narrationToMarkdown,
   prependHistory,
+  queueMessage,
   readSse,
   reduceAgUiEvent,
   renderInline,
@@ -2870,8 +3004,10 @@ export {
   splitNarration,
   stepLabel,
   stopTurn,
+  subagentsOf,
   summarizeTools,
   systemNoteOf,
+  takeQueued,
   toAgUiContext,
   toPermission,
   toolName,

package/dist/react/strings.d.ts

@@ -58,6 +58,14 @@ export interface PilotStrings {
     steps: Record<string, string>;
     loadOlder: string;
     loadingOlder: string;
+    /** Bajo un mensaje que espera a que termine el run vivo. */
+    queued: string;
+    /** «2 agentes trabajando». */
+    subagentsWorking: (n: number) => string;
+    /** Sin ninguno corriendo. */
+    subagentsDone: (n: number) => string;
+    subagentStop: string;
+    subagentStatus: Record<string, string>;
     confirmTitle: string;
     approve: string;
     reject: string;

package/dist/react/usePilot.d.ts

@@ -1,5 +1,5 @@
 import type { BaseEvent, Message, RunAgentInput } from "@ag-ui/core";
-import type { Attachment, Decision, HistoryPage, PermissionRequest, PilotState, Reference, Turn } from "../core/types";
+import type { Attachment, Decision, HistoryPage, PermissionRequest, PilotState, Reference, SubagentTask, Turn } from "../core/types";
 import { type PilotTransport } from "../transport";
 export interface TurnDoneInfo {
     /** El texto final de la respuesta. */
@@ -45,6 +45,11 @@ export interface UsePilotOptions {
     loadOlder?: (before: string | undefined) => Promise<{
         messages: Message[];
     } & HistoryPage>;
+    /**
+     * Lo que viaja en `forwardedProps` de cada run, además de lo del protocolo (`cancel`, `steer`,
+     * `stopSubagent`), p. ej. `{permissions: "ask"}` en gs. Una función se evalúa al mandar.
+     */
+    forwardedProps?: Record<string, unknown> | (() => Record<string, unknown>);
 }
 export interface SendOptions {
     references?: Reference[];
@@ -68,6 +73,15 @@ export interface Pilot {
     /** Antepone la página anterior del hilo (si hay `loadOlder` y `state.history.hasMoreBefore`). */
     loadOlder: () => Promise<void>;
     loadingOlder: boolean;
+    /** Los subagentes del agente (`state.subagents.tasks`), al día con cada STATE_SNAPSHOT/DELTA. */
+    subagents: SubagentTask[];
+    /** Detiene un subagente (`forwardedProps.stopSubagent`). No toca el run vivo. */
+    stopSubagent: (taskId: string) => Promise<void>;
+    /**
+     * Vuelve a pedir el hilo (POST sin mensaje → snapshot + estado + run vivo). Para cuando la app sabe
+     * por fuera que algo cambió (p. ej. el bus `/me/events` avisa que un subagente terminó).
+     */
+    refresh: () => Promise<void>;
 }
 /** El contexto de la app como `context` de AG-UI: `[{description, value}]`, `value` siempre texto. */
 export declare function toAgUiContext(ctx: unknown): RunAgentInput["context"];

package/dist/styles.css

@@ -478,6 +478,9 @@
 .piloto .rotate-90 {
   rotate: 90deg;
 }
+.piloto .rotate-180 {
+  rotate: 180deg;
+}
 .piloto .transform {
   transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
 }
@@ -653,6 +656,10 @@
   border-style: var(--tw-border-style);
   border-width: 2px;
 }
+.piloto .border-t {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+}
 .piloto .border-b-2 {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 2px;
@@ -843,6 +850,12 @@
     background-color: color-mix(in oklab, var(--color-sidebar) 80%, transparent);
   }
 }
+.piloto .bg-text-danger {
+  background-color: var(--color-text-danger);
+}
+.piloto .bg-text-disabled {
+  background-color: var(--color-text-disabled);
+}
 .piloto .bg-text-primary {
   background-color: var(--color-text-primary);
 }
@@ -852,6 +865,9 @@
     background-color: color-mix(in oklab, var(--color-text-secondary) 70%, transparent);
   }
 }
+.piloto .bg-text-tertiary {
+  background-color: var(--color-text-tertiary);
+}
 .piloto .bg-transparent {
   background-color: transparent;
 }
@@ -1131,6 +1147,9 @@
 .piloto .opacity-0 {
   opacity: 0%;
 }
+.piloto .opacity-60 {
+  opacity: 60%;
+}
 .piloto .opacity-70 {
   opacity: 70%;
 }
@@ -1375,6 +1394,9 @@
   .piloto .hover\:text-foreground:hover {
     color: var(--color-foreground);
   }
+  .piloto .hover\:text-text-danger:hover {
+    color: var(--color-text-danger);
+  }
   .piloto .hover\:text-text-primary:hover {
     color: var(--color-text-primary);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostykit",
-  "version": "0.5.2",
+  "version": "0.6.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.",
   "type": "module",
   "main": "./dist/core/index.js",