ghostykit 0.2.0 → 0.3.0

package/README.md

@@ -1,7 +1,8 @@
 # Piloto UI · `ghostykit`
 
 **An in-app copilot for React.** Piloto UI is the agent chat from
-[Ghosty Studio](https://www.ghosty.studio), packaged as a library. You drop it into an app you already
+[Ghosty Studio](https://www.ghosty.studio) (`/c`), packaged as a library: same components, same
+markup, same look ([side by side](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/parity/desktop-done-gs-vs-ghostykit.png)). You drop it into an app you already
 have. It sees what the user has on screen, streams what the agent says and does, and **stops to ask
 before anything risky** (human in the loop).
 
@@ -107,6 +108,7 @@ const ref = useRef<PilotoHandle>(null);
   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
   context={() => ({ screen: "crons", selected })}            // sent with EVERY turn
   toolVerbs={{ run_cron: { one: "Ran a cron", many: "Ran %n crons", running: "Running the cron…" } }}
   upload={async (file) => ({ url: await myUpload(file) })}
@@ -130,9 +132,11 @@ your own layout.
 ### Skins and theming
 
 `ghostykit/styles.css` is self-contained and scoped under `.piloto`. It works the same with
-**Tailwind 3, Tailwind 4 or no Tailwind** (verified in a Tailwind 3 app: its utilities compute
-identically with and without Piloto's CSS). Every color, radius, border width and shadow is a
-variable:
+**Tailwind 3, Tailwind 4 or no Tailwind**, and it shields its fields from the host's CSS (verified
+in a Tailwind 3 app **with `@tailwindcss/forms`**: Piloto's textarea gets no border or focus ring, and
+the app's own utilities compute identically with and without Piloto's CSS). Sizes don't depend on
+the host's `html` font size either: `1rem` inside Piloto is `--piloto-rem` (18 px in the Ghosty skin,
+like ghosty.studio; 16 px in the others). Every color, radius, border width and shadow is a variable:
 
 ```css
 .my-app .piloto {
@@ -141,6 +145,7 @@ variable:
   --piloto-radius-card: 6px;
   --piloto-border-width: 3px;
   --piloto-shadow-hero: 6px 6px 0 #0f766e;
+  --piloto-rem: 16px;
   --piloto-font: "Your Sans", sans-serif;
 }
 ```

package/dist/chunks/{chunk-KZOMMG2D.js → chunk-D6JXJWYM.js}

@@ -52,8 +52,16 @@ function parse(raw) {
   }
 }
 function defaultHistory(json) {
-  const msgs = json?.messages ?? [];
-  return msgs.filter((m) => typeof m.text === "string").map((m) => ({ role: m.role === "user" ? "user" : "assistant", text: m.text }));
+  const j = json;
+  const turns = (j?.messages ?? []).filter((m) => typeof m.text === "string").map((m) => ({ role: m.role === "user" ? "user" : "assistant", text: m.text }));
+  const permissions = (j?.pending ?? []).filter((p) => typeof p === "object" && p !== null && typeof p.id === "string").map((p) => ({
+    id: p.id,
+    title: String(p.title ?? ""),
+    ...typeof p.tool === "string" ? { tool: p.tool } : {},
+    options: Array.isArray(p.options) ? p.options : [],
+    ...p.expiresAt != null ? { expiresAt: p.expiresAt } : {}
+  }));
+  return { turns, permissions };
 }
 function uuid() {
   const c = globalThis.crypto;
@@ -146,9 +154,9 @@ function createPostStreamTransport(target, options = {}) {
       };
     },
     async history() {
-      if (!historyUrl) return [];
+      if (!historyUrl) return { turns: [] };
       const res = await doFetch(historyUrl, { credentials, headers: { accept: "application/json" } });
-      if (!res.ok) return [];
+      if (!res.ok) return { turns: [] };
       return (opts.parseHistory ?? defaultHistory)(await res.json().catch(() => null));
     },
     async send(input) {

package/dist/chunks/{chunk-XWOGK2HN.js → chunk-O6FCE4CS.js}

@@ -411,6 +411,13 @@ function resolvePermission(prev, id, optionId, resolved, detail, asked) {
   s = { ...s, turns };
   return s;
 }
+function applyHistory(prev, turns, permissions = []) {
+  let s = { ...prev, effects: [] };
+  if (turns.length && !prev.turns.length) s.turns = turns;
+  const fresh = permissions.filter((p) => !prev.permissions.some((q) => q.id === p.id));
+  if (fresh.length) s.permissions = [...prev.permissions, ...fresh];
+  return s.turns === prev.turns && !fresh.length ? prev : s;
+}
 function appendAgentMessages(prev, texts) {
   if (!texts.length) return prev;
   return { ...prev, effects: [], turns: [...prev.turns, ...texts.map((text) => ({ role: "assistant", text, arrived: true }))] };
@@ -643,6 +650,7 @@ export {
   stopTurn,
   dropLastExchange,
   resolvePermission,
+  applyHistory,
   appendAgentMessages,
   reconcileWith,
   lastUserTurn,

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./types";
-export { RESTART_NOTICE, RESUME_TEXT, appendAgentMessages, beginSend, createPilotState, dropLastExchange, expiryMs, lastUserTurn, reconcileWith, reducePilotEvent, resolvePermission, resumeMode, sendAccepted, sendFailed, sendRejectedBusy, stopTurn, } from "./reducer";
+export { RESTART_NOTICE, RESUME_TEXT, appendAgentMessages, applyHistory, beginSend, createPilotState, dropLastExchange, expiryMs, lastUserTurn, reconcileWith, reducePilotEvent, resolvePermission, resumeMode, sendAccepted, sendFailed, sendRejectedBusy, stopTurn, } from "./reducer";
 export { reconcileTurns } from "./reconcile";
 export { isNarration, narrationToMarkdown, splitNarration } from "./narration";
 export { cleanReplyOption, extractReplyOptions, type ReplyOptions } from "./options";

package/dist/core/index.js

@@ -4,6 +4,7 @@ import {
   TOOL_VERBS_EN,
   TOOL_VERBS_ES,
   appendAgentMessages,
+  applyHistory,
   beginSend,
   cleanReplyOption,
   createPilotState,
@@ -28,7 +29,7 @@ import {
   stopTurn,
   summarizeTools,
   toolName
-} from "../chunks/chunk-XWOGK2HN.js";
+} from "../chunks/chunk-O6FCE4CS.js";
 import {
   applyReferences,
   cleanUserText,
@@ -41,6 +42,7 @@ export {
   TOOL_VERBS_EN,
   TOOL_VERBS_ES,
   appendAgentMessages,
+  applyHistory,
   applyReferences,
   beginSend,
   cleanReplyOption,

package/dist/core/reducer.d.ts

@@ -36,6 +36,11 @@ export declare function dropLastExchange(prev: PilotState): PilotState;
 export declare function resolvePermission(prev: PilotState, id: string, optionId: string, resolved: boolean, detail?: string, 
 /** La tarjeta como estaba al contestarla (el stream pudo retirarla mientras tanto). */
 asked?: PermissionRequest): PilotState;
+/**
+ * El historial guardado (al montar): el hilo, si la pantalla sigue vacía, y las tarjetas de permiso
+ * que siguen abiertas (sin duplicar las que el stream ya trajo).
+ */
+export declare function applyHistory(prev: PilotState, turns: Turn[], permissions?: PermissionRequest[]): PilotState;
 /** Un mensaje del agente que entró fuera de un turno (el remate de los subagentes). */
 export declare function appendAgentMessages(prev: PilotState, texts: string[]): PilotState;
 /** La copia del hilo cambió: trae los mensajes que el usuario mandó desde OTRO cliente. Sólo en reposo. */

package/dist/fonts.css

@@ -1,3 +1,3 @@
-/* Opcional: las fuentes de las pieles de casa (Schibsted Grotesk para leer, Big Shoulders Stencil
-   para el reloj y el sello del pase). Sin esto, Piloto cae a las fuentes del sistema. */
-@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700;800;900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap");
+/* Opcional: las fuentes de las pieles de casa — Inter (la de Ghosty) y Big Shoulders Stencil (el
+   reloj y el sello del pase de permiso). Sin esto, Piloto cae a las fuentes del sistema. */
+@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@800;900&family=Inter:opsz,wght@14..32,400..800&display=swap");

package/dist/react/Bubble.d.ts

@@ -16,11 +16,12 @@ export declare function ReplyOptionButtons({ options, onPick }: {
 /** Tokens del turno, qué tanto del contexto se llevó y cuánto costó. */
 export declare function UsageStats({ used, size, cost }: Usage): import("react").JSX.Element | null;
 /** El pie de una respuesta terminada: cuánto tardó, copiar y reintentar. */
-export declare function TurnFooter({ text, seconds, onRetry, showCopy }: {
+export declare function TurnFooter({ text, seconds, onRetry, showCopy, showDuration }: {
     text: string;
     seconds?: number;
     onRetry?: () => void;
     showCopy?: boolean;
+    showDuration?: boolean;
 }): import("react").JSX.Element;
 /** Las entregas por defecto: una ficha por archivo (las apps pintan las suyas con `renderDeliveries`). */
 export declare function DeliveryChips({ deliveries }: {
@@ -35,7 +36,8 @@ export interface AgentBubbleProps {
     onOption?: (text: string) => void;
     showUsage?: boolean;
     showCopy?: boolean;
+    showDuration?: boolean;
     /** Las entregas (y lo que la app quiera bajo la respuesta). Sin esto, fichas simples. */
     renderDeliveries?: (turn: Turn, live: boolean) => ReactNode;
 }
-export declare function AgentBubble({ turn, live, onRetry, onOption, showUsage, showCopy, renderDeliveries }: AgentBubbleProps): import("react").JSX.Element;
+export declare function AgentBubble({ turn, live, onRetry, onOption, showUsage, showCopy, showDuration, renderDeliveries }: AgentBubbleProps): import("react").JSX.Element;

package/dist/react/Chips.d.ts

@@ -1,13 +1,17 @@
 import type { Reference } from "../core/types";
-/** Las referencias del mensaje: chips atómicos con ×. Clic en el chip = `onActivate` (resaltar en la app). */
-export declare function ReferenceChips({ references, onRemove, onActivate, }: {
+/**
+ * Las referencias del mensaje: chips atómicos con ×. Una con `prompt` (un elemento señalado) se pinta
+ * con la mira, como en Ghosty; las demás (tarjetas del tablero), con su etiqueta. Clic = `onActivate`.
+ */
+export declare function ReferenceChips({ references, onRemove, onActivate }: {
     references: Reference[];
     onRemove: (id: string) => void;
     onActivate?: (ref: Reference) => void;
 }): import("react").JSX.Element | null;
 /** Sugerencias para arrancar. Una que termina en «: » se escribe en la caja en vez de mandarse. */
-export declare function Suggestions({ items, onPick, onPrefill }: {
+export declare function Suggestions({ items, onPick, onPrefill, disabled }: {
     items: string[];
     onPick: (text: string) => void;
     onPrefill?: (text: string) => void;
+    disabled?: boolean;
 }): import("react").JSX.Element | null;

package/dist/react/Composer.d.ts

@@ -37,7 +37,10 @@ export interface ComposerProps {
     maxFileMb?: number;
 }
 export declare function Composer({ onSubmit, onStop, busy, canSteer, placeholder, initialValue, autoFocus, canSeeImages, attachments: withFiles, upload, transcribe, voiceNoteText, models, currentModel, onModelChange, references, onRemoveReference, onActivateReference, extras, maxFiles, maxFileMb, }: ComposerProps): import("react").JSX.Element;
-/** El selector de modelo: un menú corto hacia arriba, sin Radix. Cierra con clic fuera y Escape. */
+/**
+ * El selector de modelo. PORTADO de Ghosty (`ModelPicker.tsx`): dropdown discreto hacia arriba, sin
+ * Radix; cierra con clic fuera y con Escape.
+ */
 export declare function ModelPicker({ models, current, onChange }: {
     models: ModelOption[];
     current: string | null;

package/dist/react/InlineMarkdown.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+export declare function renderInline(text: string): ReactNode[];
+export declare function InlineMarkdown({ children }: {
+    children: string;
+}): import("react").JSX.Element;

package/dist/react/Piloto.d.ts

@@ -65,6 +65,14 @@ export interface PilotoProps extends UsePilotOptions {
      * `transport.respondPermission`. Devuelve `{resolved:false}` si ya no estaba abierto.
      */
     onPermission?: PermissionHandler;
+    /**
+     * Una pregunta lista en la caja (sin mandarla) y el foco en ella: al abrir el copiloto desde una
+     * fila («Pídeselo»). Cambiar el texto —o `key`, para repetir el mismo— la vuelve a poner.
+     */
+    draft?: string | {
+        text: string;
+        key?: string | 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,6 @@
 import { type ReactNode } from "react";
 import type { ConnectPhase } from "../core/types";
-/** Los tres puntos de «escribiendo». Color y animación por CSS (`.piloto-typing`). */
+/** 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({ phase, since, elsewhere, onLost, showDuration, }: {
     phase: ConnectPhase;

package/dist/react/Steps.d.ts

@@ -1,22 +1,27 @@
-import { type ReactNode } from "react";
 import type { ToolEntry } from "../core/types";
 import { type PilotIcon } from "./context";
-/** La garra de máquina de peluches: el ícono de «usó una herramienta» que no tiene clase propia. */
+/** La garra de máquina de peluches: el ícono de «usó una herramienta» (baja, cierra y sube en bucle). */
 export declare function ClawIcon({ className }: {
     className?: string;
 }): import("react").JSX.Element;
-/** Íconos de casa por `kind`. Lo desconocido cae en la garra. */
+/** Brazo robot agarrando — «Robot grab» de Delapouite (game-icons.net, CC BY 3.0): los pasos técnicos. */
+export declare function RobotArmIcon({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Máquina arcade (Iconoir «arcade», MIT): las herramientas de un MCP conectado. */
+export declare function ArcadeIcon({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Un ícono por tipo de herramienta (los de Ghosty); lo desconocido cae en la garra. */
 export declare const DEFAULT_TOOL_ICONS: Record<string, PilotIcon>;
 export declare function AgentSteps({ tools, live }: {
     tools: ToolEntry[];
     live: boolean;
 }): import("react").JSX.Element;
-/** El detalle de un paso (lista desplegada): rótulo, detalle y ruta. */
 export declare function ToolRow({ tool }: {
     tool: ToolEntry;
 }): import("react").JSX.Element;
 /** La narración del agente como avance: una palomita por lo que ya dijo que hacía. */
-export declare function Narration({ steps, children }: {
+export declare function Narration({ steps }: {
     steps: string[];
-    children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/react/index.d.ts

@@ -3,6 +3,7 @@ export { usePilot, useSseTransport, type PermissionAnswer, type PermissionHandle
 export { AgentBubble, CopyUserMessage, DeliveryChips, ReplyOptionButtons, TurnFooter, UsageStats, UserBubble, type AgentBubbleProps } from "./Bubble";
 export { AgentSteps, ClawIcon, DEFAULT_TOOL_ICONS, Narration, ToolRow } from "./Steps";
 export { LinkSafetyModal, Markdown } from "./Markdown";
+export { InlineMarkdown, renderInline } from "./InlineMarkdown";
 export { useTextAtPace } from "./TextAtPace";
 export { Composer, ModelPicker, mimeOf, type ComposerProps, type UploadResult } from "./Composer";
 export { ConfirmCard, DecisionLines } from "./ConfirmCard";
@@ -11,4 +12,4 @@ export { ConnectingState, TypingDots, WaitLabel } from "./Status";
 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";
-export { PilotHttpError, createPostStreamTransport, createSseTransport, readSse, type PilotListener, type PilotTransport, type PostStreamTransportOptions, type SseTransportOptions, type SubscribeOptions, } from "../transport";
+export { PilotHttpError, createPostStreamTransport, createSseTransport, readSse, type PilotHistory, type PilotListener, type PilotTransport, type PostStreamTransportOptions, type SseTransportOptions, type SubscribeOptions, } from "../transport";