@workerdeck/ui 0.21.0 → 0.22.0

package/build/index.d.mts

@@ -1,5 +1,5 @@
 import { a as formatDuration, c as formatRelativeTime, d as rateLimitWindowSeconds, f as toolInputPreview, i as formatCountdown, l as formatTokens, n as formatBytes, o as formatRateLimitWindow, r as formatCost, s as formatRateLimitWindowLong, t as formatAgoPrecise, u as friendlyModel } from "./format-ljc3lKpA.mjs";
-import { C as permissionModeChoices, S as PermissionModeSelectProps, _ as useAffordances, a as SessionVitals, b as PermissionModeMeta, c as TranscriptDensityProvider, d as TranscriptVariantProvider, f as useTranscriptDensity, g as WithActions, h as TerminalAffordances, i as SessionSurfacePanel, l as TranscriptFont, m as CopyAction, n as SessionPanel, o as TerminalMetrics, p as useTranscriptVariant, r as SessionPanelProps, s as TranscriptDensity, t as SessionControls, u as TranscriptVariant, v as PERMISSION_MODES, w as permissionModeMeta, x as PermissionModeSelect, y as PermissionModeChoice } from "./SessionPanel-BjNAnWMF.mjs";
+import { C as permissionModeChoices, S as PermissionModeSelectProps, _ as useAffordances, a as SessionVitals, b as PermissionModeMeta, c as TranscriptDensityProvider, d as TranscriptVariantProvider, f as useTranscriptDensity, g as WithActions, h as TerminalAffordances, i as SessionSurfacePanel, l as TranscriptFont, m as CopyAction, n as SessionPanel, o as TerminalMetrics, p as useTranscriptVariant, r as SessionPanelProps, s as TranscriptDensity, t as SessionControls, u as TranscriptVariant, v as PERMISSION_MODES, w as permissionModeMeta, x as PermissionModeSelect, y as PermissionModeChoice } from "./SessionPanel-13l25ubU.mjs";
 import * as _$react from "react";
 import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, RefObject, TextareaHTMLAttributes } from "react";
 import { VariantProps } from "class-variance-authority";
@@ -883,17 +883,21 @@ interface TranscriptProps {
   /** Terminal theme only: the pointer affordances a real terminal cannot offer.
    * `false` for none. See {@link TerminalAffordances}. */
   affordances?: TerminalAffordances | boolean;
-  /** Terminal theme only: hold the prompt of the turn being read at the top of
-   * the scroller. The *real* row is pinned, not a copy — see `TranscriptRows`. */
+  /** Hold the prompt of the turn being read at the top of the scroller. Works
+   * in both variants: the terminal clips to one line, cards shows a frosted
+   * bar. The *real* row is pinned, not a copy — see `TranscriptRows`. */
   stickyPrompt?: boolean;
   /**
-   * Terminal theme only: mount the overview-ruler scrubber — a 2ch rail of
-   * marks (your prompts, each turn's response and result as one mark, errors,
-   * the pending approval, the catch-up boundary) that replaces the native
-   * scrollbar. Ignored under `cards`: the rail's positions ride the height
-   * calculator, which has no claim there. With `affordances={false}` the rail
-   * degrades to passive paint — no drag, peek or click — and the native
-   * scrollbar stays. See {@link TerminalScrubber}.
+   * Mount the overview scrubber — a 12px rail of marks (your prompts, each
+   * turn's response and result as one mark, errors, the pending approval, the
+   * catch-up boundary) over the scroller's right edge. Two rails behind one
+   * prop: under `terminal` it is the pixel-exact ruler that replaces the
+   * native scrollbar (positions ride the height calculator; drag scrubs), and
+   * under `cards` it is the **proportional annotation rail** — positioned by
+   * `itemIndex / items.length`, because proportional text gives the
+   * calculator no claim there — where the native scrollbar stays and the rail
+   * only peeks and jumps. With `affordances={false}` either rail degrades to
+   * passive paint — no drag, peek or click.
    */
   scrubber?: boolean;
   /**
@@ -989,6 +993,12 @@ interface TranscriptProps {
    * sessions list instead.
    */
   onOpenSubagent?: (toolUseId: string) => void;
+  /**
+   * Replaces the default empty state when the transcript has no items. Pass a
+   * `ReactNode` to show your product's own onboarding instead of WorkerDeck's
+   * generic "`>_` Tell the agent what to do." placeholder.
+   */
+  emptyState?: ReactNode;
   className?: string;
 }
 declare function Transcript({
@@ -1012,6 +1022,7 @@ declare function Transcript({
   reveal,
   frame,
   onOpenSubagent,
+  emptyState,
   className
 }: TranscriptProps): _$react.JSX.Element;
 //#endregion
@@ -1115,6 +1126,7 @@ declare function TerminalTranscript({
 //#endregion
 //#region src/components/terminal/StatusLine.d.ts
 interface TerminalStatusLineProps {
+  className?: string;
   state: TranscriptState;
   /** Plan windows to read from, when they should not be the session's own — the
    * gateway's per-profile state merged over this transcript's. See
@@ -1130,6 +1142,7 @@ interface TerminalStatusLineProps {
   onOpenUsage?: () => void;
 }
 declare function TerminalStatusLine({
+  className,
   state,
   rateLimits,
   connection,
@@ -1161,11 +1174,13 @@ interface TerminalPermissionPromptProps {
   /** `message` is fed back to the agent, which can then try something else;
    * `interrupt` also stops the turn. */
   onDeny: (requestId: string, message?: string, interrupt?: boolean) => void;
+  className?: string;
 }
 declare function TerminalPermissionPrompt({
   request,
   onApprove,
-  onDeny
+  onDeny,
+  className
 }: TerminalPermissionPromptProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/terminal/QuestionPrompt.d.ts
@@ -1176,11 +1191,13 @@ interface TerminalQuestionPromptProps {
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void;
   /** Deny the tool — the model proceeds without an answer. */
   onDismiss: (requestId: string, message?: string) => void;
+  className?: string;
 }
 declare function TerminalQuestionPrompt({
   request,
   onAnswer,
-  onDismiss
+  onDismiss,
+  className
 }: TerminalQuestionPromptProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/terminal/diff.d.ts
@@ -1641,6 +1658,7 @@ interface ContextDialogProps {
   usage?: ContextUsage;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  className?: string;
 }
 /**
  * What is in the model's context window right now, category by category.
@@ -1652,7 +1670,8 @@ interface ContextDialogProps {
 declare function ContextDialog({
   usage,
   open,
-  onOpenChange
+  onOpenChange,
+  className
 }: ContextDialogProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/UsageDialog.d.ts
@@ -1678,6 +1697,7 @@ interface UsageDialogProps {
   updatedAt?: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  className?: string;
 }
 /**
  * The session's view of the plan: every window as a meter (see
@@ -1690,7 +1710,8 @@ declare function UsageDialog({
   totalCostUsd,
   updatedAt,
   open,
-  onOpenChange
+  onOpenChange,
+  className
 }: UsageDialogProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/UsageMeters.d.ts
@@ -1768,6 +1789,7 @@ interface McpDialogProps {
    * that 501 are worse than buttons that aren't there.
    */
   canManageServers?: boolean;
+  className?: string;
 }
 /**
  * The session's MCP servers, at the CLI's own `/mcp` depth: servers → one server
@@ -1786,7 +1808,8 @@ declare function McpDialog({
   sessionId,
   open,
   onOpenChange,
-  canManageServers
+  canManageServers,
+  className
 }: McpDialogProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/SkillsDialog.d.ts
@@ -1797,6 +1820,7 @@ interface SkillsDialogProps {
   /** Insert a skill's opening message into the composer, if the host offers
    * that. Omit and the dialog is read-only. */
   onUse?: (skill: SkillInfo) => void;
+  className?: string;
 }
 /**
  * What this session's engine can do beyond its own tools: the skills it found,
@@ -1815,7 +1839,8 @@ declare function SkillsDialog({
   skills,
   open,
   onOpenChange,
-  onUse
+  onUse,
+  className
 }: SkillsDialogProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/HostFilesDialog.d.ts
@@ -1848,12 +1873,14 @@ interface SessionListItemProps {
   active?: boolean;
   onSelect?: (id: string) => void;
   onDelete?: (id: string) => void;
+  className?: string;
 }
 declare function SessionListItem({
   session,
   active,
   onSelect,
-  onDelete
+  onDelete,
+  className
 }: SessionListItemProps): _$react.JSX.Element;
 interface SessionListProps {
   sessions: SessionInfo[];
@@ -2237,10 +2264,16 @@ type Step = {
   label: string; /** What one of these is called, for the disclosure's count. */
   noun: string;
   /**
-   * An **agent** has an identity and work of its own, so it is pressable and
-   * wears the sub-agent colour. A **task** is something the model described with
-   * no agent behind it (`isAgentRecord`), so it is inert: there is no frame to
-   * open, and a row that offered one would show an empty screen.
+   * Both kinds press. The kind decides **where the press goes**, which is the
+   * whole of the distinction.
+   *
+   * An **agent** has an identity and work of its own, so it wears the sub-agent
+   * colour and opens that agent's own frame. A **task** is something the model
+   * described with no agent behind it (`isAgentRecord`), so there is no frame:
+   * framing its id selects no items and draws an empty screen. What it has
+   * instead is a *place* — the spawning call's row in the transcript — so it is
+   * muted, never selected, and travels there. See `StepRow` for why an inert
+   * row was the worse answer.
    *
    * Two values and not a boolean because the checklist source this shape was
    * drawn for (see above) produces the second kind natively — a to-do is a task

package/build/index.mjs

@@ -1,4 +1,4 @@
-import { $ as toolIcon, A as PERMISSION_MODES, At as MenuSeparator, B as skillPrompt, Bt as badgeVariants, C as TerminalQuestionPrompt, Ct as DialogContent, D as parseUserQuestions, Dt as Menu, E as QuestionPrompt, Et as DialogTrigger, F as SkillsDialog, Ft as SelectItemText, G as Band, H as TerminalMarkdown, Ht as buttonVariants, I as McpDialog, It as SelectTrigger, J as Row, K as Blank, L as HostFilesDialog, Lt as SelectValue, M as permissionModeChoices, Mt as Select, N as permissionModeMeta, Nt as SelectContent, O as SubagentStrip, Ot as MenuContent, P as ModelSelect, Pt as SelectItem, Q as isMutatingTool, R as ContextDialog, Rt as Input, S as SessionInfoDialog, St as DialogClose, T as QUESTION_BEHAVIORS, Tt as DialogRow, U as TerminalDiff, Ut as cn, V as TerminalSurface, Vt as Button, W as previewPatch, X as WithActions, Y as CopyAction, Z as useAffordances, _ as Conversation, _t as Tip, a as Transcript, at as hashtagTrigger, b as StatusBar, bt as Dialog, c as ToolCallCard, ct as PromptArea, d as Response, dt as ProgressRing, et as TranscriptDensityProvider, f as PromptTokenText, ft as Splitter, g as FileCard, gt as copyText, h as Loader, ht as CopyButton, i as useMinuteClock, it as commandTrigger, j as PermissionModeSelect, jt as MenuTrigger, k as PermissionPrompt, kt as MenuItem, l as SessionEmptyState, lt as plainTextToSegments, m as MessageContent, mt as Spinner, n as UsageDialog, nt as useTranscriptDensity, o as TerminalItemView, ot as mentionTrigger, p as Message, pt as CodeBlock, q as Ink, r as UsageMeters, rt as useTranscriptVariant, s as TerminalTranscript, st as usePromptAreaState, t as SessionPanel, tt as TranscriptVariantProvider, u as Reasoning, ut as segmentsToPlainText, v as ConversationContent, vt as TooltipContent, w as TerminalPermissionPrompt, wt as DialogHeader, x as STATUS_META, xt as DialogBody, y as ConversationScrollButton, yt as TooltipProvider, z as Composer, zt as Badge } from "./SessionPanel-DNuPKg5c.mjs";
+import { $ as toolIcon, A as PERMISSION_MODES, At as MenuSeparator, B as skillPrompt, Bt as Badge, C as TerminalQuestionPrompt, Ct as DialogContent, D as parseUserQuestions, Dt as Menu, E as QuestionPrompt, Et as DialogTrigger, F as SkillsDialog, Ft as SelectItemText, G as Band, H as TerminalMarkdown, Ht as Button, I as McpDialog, It as SelectTrigger, J as Row, K as Blank, L as HostFilesDialog, Lt as SelectValue, M as permissionModeChoices, Mt as Select, N as permissionModeMeta, Nt as SelectContent, O as SubagentStrip, Ot as MenuContent, P as ModelSelect, Pt as SelectItem, Q as isMutatingTool, R as ContextDialog, Rt as PortalScope, S as SessionInfoDialog, St as DialogClose, T as QUESTION_BEHAVIORS, Tt as DialogRow, U as TerminalDiff, Ut as buttonVariants, V as TerminalSurface, Vt as badgeVariants, W as previewPatch, Wt as cn, X as WithActions, Y as CopyAction, Z as useAffordances, _ as Conversation, _t as Tip, a as Transcript, at as hashtagTrigger, b as StatusBar, bt as Dialog, c as ToolCallCard, ct as PromptArea, d as Response, dt as ProgressRing, et as TranscriptDensityProvider, f as PromptTokenText, ft as Splitter, g as FileCard, gt as copyText, h as Loader, ht as CopyButton, i as useMinuteClock, it as commandTrigger, j as PermissionModeSelect, jt as MenuTrigger, k as PermissionPrompt, kt as MenuItem, l as SessionEmptyState, lt as plainTextToSegments, m as MessageContent, mt as Spinner, n as UsageDialog, nt as useTranscriptDensity, o as TerminalItemView, ot as mentionTrigger, p as Message, pt as CodeBlock, q as Ink, r as UsageMeters, rt as useTranscriptVariant, s as TerminalTranscript, st as usePromptAreaState, t as SessionPanel, tt as TranscriptVariantProvider, u as Reasoning, ut as segmentsToPlainText, v as ConversationContent, vt as TooltipContent, w as TerminalPermissionPrompt, wt as DialogHeader, x as STATUS_META, xt as DialogBody, y as ConversationScrollButton, yt as TooltipProvider, z as Composer, zt as Input } from "./SessionPanel-DgwjH4Ve.mjs";
 import { _ as formatRelativeTime, a as modelLabel, b as rateLimitWindowSeconds, d as formatBytes, f as formatCost, g as formatRateLimitWindowLong, h as formatRateLimitWindow, i as meterSeverity, l as windowLabel, m as formatDuration, o as statusPresentation, p as formatCountdown, r as meterColorClass, s as tightestWindow, t as contextSeverity, u as formatAgoPrecise, v as formatTokens, x as toolInputPreview, y as friendlyModel } from "./status-BE-zg88x.mjs";
 import { Fragment, forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -46,12 +46,12 @@ Textarea.displayName = "Textarea";
 const AlertDialog = AlertDialog$1.Root;
 const AlertDialogTrigger = AlertDialog$1.Trigger;
 const AlertDialogClose = AlertDialog$1.Close;
-const AlertDialogContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, { className: cn("fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-(--motion-base)", "data-starting-style:opacity-0 data-ending-style:opacity-0") }), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+const AlertDialogContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Portal, { children: /* @__PURE__ */ jsxs(PortalScope, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, { className: cn("fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-(--motion-base)", "data-starting-style:opacity-0 data-ending-style:opacity-0") }), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
 	"data-slot": "alert-dialog-content",
 	className: cn("fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2", "rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none", "transition-[opacity,transform] duration-(--motion-base)", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
 	...props,
 	children
-})] });
+})] }) });
 const AlertDialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Title, {
 	className: cn("text-heading-3 font-semibold text-text", className),
 	...props
@@ -181,7 +181,7 @@ function Reading({ tone, onPress, label, children }) {
 		})
 	});
 }
-function TerminalStatusLine({ state, rateLimits, connection, onOpenStatus, onOpenContext, onOpenUsage }) {
+function TerminalStatusLine({ className, state, rateLimits, connection, onOpenStatus, onOpenContext, onOpenUsage }) {
 	const presentation = statusPresentation({
 		status: state.status,
 		connection
@@ -234,6 +234,7 @@ function TerminalStatusLine({ state, rateLimits, connection, onOpenStatus, onOpe
 	return /* @__PURE__ */ jsx(Row, {
 		"data-slot": "status-line",
 		tone: "dim",
+		className,
 		children: parts.map((part, index) => /* @__PURE__ */ jsxs("span", { children: [index > 0 ? /* @__PURE__ */ jsx(Ink, {
 			tone: "faint",
 			children: " · "
@@ -242,12 +243,12 @@ function TerminalStatusLine({ state, rateLimits, connection, onOpenStatus, onOpe
 }
 //#endregion
 //#region src/components/agent/SessionList.tsx
-function SessionListItem({ session, active, onSelect, onDelete }) {
+function SessionListItem({ session, active, onSelect, onDelete, className }) {
 	const meta = STATUS_META[session.status];
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "session-list-item",
 		"data-active": active || void 0,
-		className: cn("group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors", active ? "border-border bg-surface" : "hover:bg-surface-hover"),
+		className: cn("group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors", active ? "border-border bg-surface" : "hover:bg-surface-hover", className),
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => onSelect?.(session.id),