@workerdeck/ui 0.9.0 → 0.12.0

package/build/index.d.mts

@@ -1,22 +1,28 @@
+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 { _ as permissionModeChoices, a as SessionVitals, c as TranscriptVariant, d as useTranscriptVariant, f as PERMISSION_MODES, g as PermissionModeSelectProps, h as PermissionModeSelect, i as SessionSurfacePanel, l as TranscriptVariantProvider, m as PermissionModeMeta, n as SessionPanel, o as TranscriptDensity, p as PermissionModeChoice, r as SessionPanelProps, s as TranscriptDensityProvider, t as SessionControls, u as useTranscriptDensity, v as permissionModeMeta } from "./SessionPanel-Dy9lQrOV.mjs";
 import * as _$react from "react";
-import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, RefObject, TextareaHTMLAttributes } from "react";
 import { VariantProps } from "class-variance-authority";
 import { ClassValue } from "clsx";
 import * as _$_base_ui_react_select0 from "@base-ui/react/select";
 import { Select as Select$1 } from "@base-ui/react/select";
+import { LucideIcon } from "lucide-react";
 import * as _$_base_ui_react_alert_dialog0 from "@base-ui/react/alert-dialog";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+import * as _$_base_ui_react_dialog0 from "@base-ui/react/dialog";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import * as _$_base_ui_react_tooltip0 from "@base-ui/react/tooltip";
 import { Tooltip } from "@base-ui/react/tooltip";
 import { toast } from "sonner";
-import { ModelOption, PermissionMode, PermissionRequest, QuestionBehavior, SessionInfo, SessionStatus, SlashCommandInfo, UserQuestion } from "@workerdeck/protocol";
-import { TranscriptItem, TranscriptState } from "@workerdeck/react";
+import { ContextUsage, ModelOption, PermissionRequest, ProfileEngine, QuestionBehavior, RateLimitInfo, SessionInfo, SessionRow, SessionStatus, SkillInfo, SlashCommandInfo, UserQuestion, ViewConfig, WorkspaceScope } from "@workerdeck/protocol";
+import { ConnectionState, TranscriptItem, TranscriptState, UseAttachmentsResult } from "@workerdeck/react";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 import { WorkerDeckClient } from "@workerdeck/client";
 
 //#region src/components/ui/Button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+  variant?: "default" | "link" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
   size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
@@ -80,16 +86,65 @@ declare const AlertDialogContent: FunctionComponent<AlertDialog$1.Popup.Props>;
 declare const AlertDialogTitle: FunctionComponent<AlertDialog$1.Title.Props>;
 declare const AlertDialogDescription: FunctionComponent<AlertDialog$1.Description.Props>;
 //#endregion
+//#region src/components/ui/Menu.d.ts
+declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => _$react.JSX.Element;
+declare const MenuTrigger: Menu$1.Trigger;
+declare const MenuContent: FunctionComponent<Menu$1.Popup.Props & Pick<Menu$1.Positioner.Props, 'align' | 'side' | 'sideOffset'>>;
+declare const MenuItem: FunctionComponent<Menu$1.Item.Props & {
+  destructive?: boolean;
+}>;
+declare const MenuSeparator: FunctionComponent<Menu$1.Separator.Props>;
+//#endregion
+//#region src/components/ui/Dialog.d.ts
+declare const Dialog: typeof Dialog$1.Root;
+declare const DialogTrigger: Dialog$1.Trigger;
+declare const DialogClose: _$react.ForwardRefExoticComponent<Omit<_$_base_ui_react_dialog0.DialogCloseProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+/**
+ * A dismissible panel, sized for reading rather than confirming — the web
+ * counterpart of the iOS app's detail sheets (context, usage, session info, MCP).
+ *
+ * Taller than {@link AlertDialogContent} and scrollable inside, because these
+ * carry lists whose length is the engine's business, not the layout's.
+ */
+declare const DialogContent: FunctionComponent<Dialog$1.Popup.Props & {
+  size?: 'sm' | 'md' | 'lg';
+}>;
+/** Title row with the close button, pinned above the scrolling body. */
+declare const DialogHeader: FunctionComponent<{
+  title: string;
+  description?: string; /** Rendered between the title and the close button. */
+  actions?: React.ReactNode;
+}>;
+/** The scrolling region under the header. */
+declare const DialogBody: FunctionComponent<React.HTMLAttributes<HTMLDivElement>>;
+/** A label/value row — the shape every one of these panels is mostly made of. */
+declare const DialogRow: FunctionComponent<{
+  label: string;
+  children: React.ReactNode;
+  mono?: boolean;
+}>;
+//#endregion
 //#region src/components/ui/Tooltip.d.ts
 declare const TooltipProvider: _$react.FC<_$_base_ui_react_tooltip0.TooltipProviderProps>;
 declare const TooltipContent: FunctionComponent<Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, 'side' | 'sideOffset'>>;
-/** Convenience wrapper: <Tip content="..."><Button/></Tip> */
+/**
+ * Convenience wrapper: `<Tip content="..."><Button/></Tip>`.
+ *
+ * Pass `render` when the trigger must *be* an element you already have — a tab, a
+ * row — rather than something wrapped in a span. The default span is fine beside
+ * a button but would break any layout that styles its own children (a flex tab
+ * strip gets an extra box between the container and its items).
+ */
 declare function Tip({
   content,
+  render,
+  side,
   children
 }: {
   content: ReactNode;
-  children: ReactNode;
+  render?: ReactElement;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  children?: ReactNode;
 }): _$react.JSX.Element;
 //#endregion
 //#region src/components/ui/Sonner.d.ts
@@ -99,9 +154,13 @@ declare function Toaster(): _$react.JSX.Element;
 //#region src/components/ui/CopyButton.d.ts
 interface CopyButtonProps extends Omit<ButtonProps, 'onClick' | 'children'> {
   value: string;
+  /** Draw the state as characters (`⧉` / `✓`) rather than line-art icons — for
+   * terminal-styled surfaces, where an SVG reads as another app's button. */
+  glyph?: boolean;
 }
 declare function CopyButton({
   value,
+  glyph,
   className,
   variant,
   size,
@@ -121,6 +180,17 @@ interface CodeBlockProps {
   /** Header label, e.g. a language or "Parameters". */
   label?: ReactNode;
   copyable?: boolean;
+  /**
+   * `'panel'` (default) is the framed card: border, header strip, rounded.
+   * `'plain'` is the terminal treatment — the label is a dim line, the code a
+   * flat band, and copy is a character. For surfaces where a box around every
+   * payload is more chrome than content (the transcript's `lines` variant).
+   *
+   * A prop rather than a read of the transcript's variant context: this is a
+   * `ui/` primitive and has no business knowing what a transcript is. The agent
+   * component that renders it does.
+   */
+  variant?: 'panel' | 'plain';
   className?: string;
 }
 /** Plain (unhighlighted) code panel for structured data like tool inputs. Markdown code
@@ -129,9 +199,61 @@ declare function CodeBlock({
   code,
   label,
   copyable,
+  variant,
   className
 }: CodeBlockProps): _$react.JSX.Element;
 //#endregion
+//#region src/components/ui/Splitter.d.ts
+interface SplitterProps {
+  /**
+   * ARIA's sense of the word: a `vertical` splitter is a vertical bar between
+   * two side-by-side panes, and it resizes a **width**. A `horizontal` one sits
+   * between stacked panes and resizes a **height**.
+   */
+  orientation: 'vertical' | 'horizontal';
+  /** Current size of the pane this splitter controls, in pixels. */
+  value: number;
+  onValueChange: (value: number) => void;
+  min: number;
+  max: number;
+  /** Keyboard step. */
+  step?: number;
+  /** Set when dragging the splitter *away* from the origin should shrink the
+   * controlled pane — i.e. the pane is on the right or the bottom. */
+  inverted?: boolean;
+  /** Required: "Resize" alone does not say which of two splitters this is. */
+  'aria-label': string;
+  className?: string;
+}
+/**
+ * A draggable pane divider.
+ *
+ * Hand-rolled rather than depended on: `@base-ui/react` ships no splitter, the
+ * behaviour is a hundred lines of pointer events, and this repo's instinct at
+ * this layer is to own it (the composer is vendored for the same reason).
+ *
+ * Pointer capture is what makes it survive a fast drag — without it the pointer
+ * leaves the 5px bar within a frame and the moves go to whatever is underneath,
+ * which for this layout is an iframe-free but still selection-happy code pane.
+ * The drag origin is captured on pointerdown and every move is measured against
+ * it, so the pane cannot drift relative to the cursor over a long drag the way
+ * per-move deltas do once clamping is involved.
+ *
+ * Keyboard-operable and announced as a separator, because a pane you can only
+ * size by dragging is a pane some people cannot size.
+ */
+declare function Splitter({
+  orientation,
+  value,
+  onValueChange,
+  min,
+  max,
+  step,
+  inverted,
+  'aria-label': label,
+  className
+}: SplitterProps): _$react.JSX.Element;
+//#endregion
 //#region src/components/ui/ProgressRing.d.ts
 interface ProgressRingProps {
   /** Filled share, 0–100 (clamped). */
@@ -235,6 +357,21 @@ type TriggerConfig = {
    * Return the display text for the chip, or void to use `suggestion.label`.
    */
   onSelect?: (suggestion: TriggerSuggestion) => string | void;
+  /**
+   * For 'dropdown' mode: opt a suggestion out of becoming a chip.
+   *
+   * Return a string and the trigger's range is replaced with that **plain,
+   * editable text** — the trigger character included — with the caret left at
+   * its end. Return undefined and the suggestion resolves to a chip as usual,
+   * so one dropdown can mix both kinds.
+   *
+   * For suggestions that are a typing aid rather than a token: something the
+   * user is meant to finish and edit, where a chip would falsely promise the
+   * host parses it back out. Takes precedence over `onSelect`, which is not
+   * called for a text-resolved suggestion (there is no chip to label), and
+   * `onChipAdd` does not fire either.
+   */
+  insertAsText?: (suggestion: TriggerSuggestion) => string | undefined;
   /**
    * For 'callback' and 'launch' modes: called when the trigger is activated.
    * Receives the full input text and cursor position. For 'launch' it fires on
@@ -577,26 +714,6 @@ declare function isSegmentsEmpty(segments: Segment[]): boolean;
 /** Extracts chips matching a specific trigger character. */
 declare function getChipsByTrigger(segments: Segment[], trigger: string): ChipSegment[];
 //#endregion
-//#region src/components/agent/SessionPanel.d.ts
-interface SessionPanelProps {
-  client: WorkerDeckClient;
-  sessionId: string | undefined;
-  /** Optional slot rendered at the top, above the status bar. */
-  header?: ReactNode;
-  className?: string;
-}
-/**
- * The all-in-one embeddable session surface: status bar, streaming transcript,
- * permission prompts, composer. Attaches via useClaudeSession; remount (key) to switch
- * sessions.
- */
-declare function SessionPanel({
-  client,
-  sessionId,
-  header,
-  className
-}: SessionPanelProps): _$react.JSX.Element;
-//#endregion
 //#region src/components/agent/Transcript.d.ts
 interface TranscriptProps {
   state: TranscriptState;
@@ -607,24 +724,75 @@ interface TranscriptProps {
    * `(id) => client.attachmentUrl(sessionId, id)`. Same-origin and
    * cookie-authenticated, which is what lets an `<img src>` render one. */
   attachmentUrl?: (attachmentId: string) => string;
+  /** Whether this gateway serves `@file` search here — the empty state must not
+   * advertise an affordance the composer doesn't have. */
+  canBrowseFiles?: boolean;
+  /** Reads a host file as a data URL, for tool calls whose output is a picture
+   * on the host (codex's `image_gen`). Omit and those cards name the path. */
+  hostImage?: (path: string) => Promise<string | undefined>;
+  /**
+   * How a turn is drawn: `cards` (default, the chat convention) or `lines` —
+   * full-width transparent line items with a gutter glyph, for hosts where
+   * vertical space is scarce. See {@link TranscriptVariant}.
+   */
+  variant?: TranscriptVariant;
+  /**
+   * How much air each row gets: `comfortable` (default — a blank line between
+   * messages, as the Claude Code CLI does) or `compact`. Independent of
+   * {@link TranscriptVariant}. See {@link TranscriptDensity}.
+   */
+  density?: TranscriptDensity;
+  /**
+   * Catch-up: `from` is how many items had been seen last time, `since` when
+   * that was. A recap row is drawn at that boundary and everything above it is
+   * dimmed. Omit (or pass a boundary at/after the end) and the transcript
+   * renders exactly as before.
+   */
+  catchUp?: {
+    from: number;
+    since?: number;
+  };
+  /**
+   * Filled with a closure that scrolls the recap row into view — the seam the
+   * panel's catch-up strip presses. A ref rather than a DOM query because the
+   * rows are virtualized: when the recap row isn't mounted, only the
+   * virtualizer knows where it would be. Optional; embedders without a
+   * catch-up strip never touch it. `null` while no transcript is mounted.
+   */
+  jumpToRecapRef?: RefObject<(() => void) | null>;
   className?: string;
 }
 declare function Transcript({
   state,
   fileUrl,
   attachmentUrl,
+  canBrowseFiles,
+  hostImage,
+  variant,
+  density,
+  catchUp,
+  jumpToRecapRef,
   className
 }: TranscriptProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/Conversation.d.ts
 interface ConversationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: ReactNode;
+  /**
+   * How the view follows content that grows. `'smooth'` is right for a live
+   * turn — the text scrolls as it is written. `'instant'` is right while a
+   * transcript is *filling* (an attach replaying a whole session), where
+   * animating each arrival makes opening a session a several-second journey
+   * from its first row to its last.
+   */
+  resize?: 'smooth' | 'instant';
 }
 /** Scroll container that stays pinned to the bottom while streaming, unless the user
  * scrolls up — plus a floating scroll-to-bottom button. */
 declare function Conversation({
   className,
   children,
+  resize,
   ...props
 }: ConversationProps): _$react.JSX.Element;
 declare function ConversationContent({
@@ -644,11 +812,22 @@ declare function ConversationScrollButton({
 interface MessageProps extends HTMLAttributes<HTMLDivElement> {
   from: 'user' | 'assistant';
 }
-/** One chat turn row. User messages sit right in a bubble; assistant content is flat,
- * full-width (the AI-chat convention — assistant output is the page, user input is quoted). */
+/**
+ * One chat turn row.
+ *
+ * `cards`: user messages sit right in a bubble; assistant content is flat,
+ * full-width (the AI-chat convention — assistant output is the page, user input
+ * is quoted).
+ *
+ * `lines`: both are left-aligned full-width line items behind a gutter glyph —
+ * `❯` for what was typed, `●` for what the model said. No bubble: a prompt is
+ * already distinguishable by its marker, and the bubble's padding is vertical
+ * space the terminal treatment refuses to spend.
+ */
 declare function Message({
   from,
   className,
+  children,
   ...props
 }: MessageProps): _$react.JSX.Element;
 declare function MessageContent({
@@ -689,14 +868,30 @@ declare function Reasoning({
 }: ReasoningProps): _$react.JSX.Element | null;
 //#endregion
 //#region src/components/agent/Loader.d.ts
-/** Three-dot pulse shown while the assistant hasn't produced output yet. */
+interface LoaderProps {
+  /** Overrides the cycling verb — for a state that has one true name
+   * ("Starting session…"). */
+  label?: string;
+  /** When the current run began, for the elapsed clock. Absent = no clock. */
+  startedAt?: number;
+  /** Context tokens in play, shown beside the clock. */
+  tokens?: number;
+  className?: string;
+}
+/**
+ * "The agent is working and hasn't produced output yet."
+ *
+ * `lines`: a terminal working line — the mark's own pulse in the gutter (see
+ * `pulse.tsx`), a verb, and the readings that answer "should I still be
+ * waiting?" in one parenthesis. `cards`: the three-dot pulse, unchanged — the
+ * dashboard's loader is not a gutter glyph and has no column to pulse in.
+ */
 declare function Loader({
   label,
+  startedAt,
+  tokens,
   className
-}: {
-  label?: string;
-  className?: string;
-}): _$react.JSX.Element;
+}: LoaderProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/ToolCallCard.d.ts
 type ToolCallItem = Extract<TranscriptItem, {
@@ -704,10 +899,19 @@ type ToolCallItem = Extract<TranscriptItem, {
 }>;
 interface ToolCallCardProps {
   item: ToolCallItem;
+  /**
+   * Reads a host file as a data URL, for tools whose output is a picture on the
+   * host. Resolves `undefined` when the gateway won't serve that path — a
+   * generated image saved outside the allowed roots (codex's default
+   * `$CODEX_HOME/generated_images/`) is one, and the card then names the path
+   * instead of showing it.
+   */
+  hostImage?: (path: string) => Promise<string | undefined>;
   className?: string;
 }
 declare function ToolCallCard({
   item,
+  hostImage,
   className
 }: ToolCallCardProps): _$react.JSX.Element;
 //#endregion
@@ -735,9 +939,23 @@ declare function FileCard({
 interface PermissionPromptProps {
   request: PermissionRequest;
   onApprove: (requestId: string) => void;
-  onDeny: (requestId: string, message?: string) => void;
+  /** `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;
 }
+/**
+ * Generic allow/deny prompt for a pending permission request.
+ *
+ * Three outcomes, not two: denying usually means "not that, try something else",
+ * so plain Deny lets the turn continue (with an optional reason the agent reads)
+ * while "Deny & stop" also interrupts.
+ *
+ * The heading is whatever the engine authored — `title`, else `displayName`.
+ * Composing "wants to use {tool}" instead would be wrong for codex, where an
+ * approval is usually an *escalation after a sandbox refusal* and the runner has
+ * already written the sentence that says so.
+ */
 declare function PermissionPrompt({
   request,
   onApprove,
@@ -776,8 +994,23 @@ declare function QuestionPrompt({
 }: QuestionPromptProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/Composer.d.ts
+/** Files matching an `@` query, for the composer's file trigger. Structural so
+ * the ui package doesn't have to reach for the protocol's `HostFileMatch`. */
+type ComposerFileMatch = {
+  path: string;
+  relative: string;
+};
+/** Imperative surface for panels that draft a message the user then finishes —
+ * the skills dialog's "Use this skill". Nothing here sends. */
+type ComposerHandle = {
+  /** Append plain text at the caret's end and focus, separating it from
+   * whatever is already there. */
+  insertText: (text: string) => void; /** Put the caret in the field, changing nothing. */
+  focus: () => void;
+};
 interface ComposerProps {
-  onSend: (text: string) => void;
+  /** `attachmentIds` are the staged uploads, in the order they were picked. */
+  onSend: (text: string, attachmentIds: string[]) => void;
   onInterrupt: () => void;
   busy: boolean;
   /** Disable input entirely (session failed/closed). */
@@ -785,14 +1018,70 @@ interface ComposerProps {
   placeholder?: string;
   /** Slash commands offered as autocomplete; picked ones render as chips. */
   commands?: SlashCommandInfo[];
-  /** Left side of the toolbar row (mode selects, attachments, …). */
+  /**
+   * Skills offered under a **`$`** popover of their own — codex's sigil, kept
+   * separate from `/` because the two behave differently. A skill is a typing
+   * aid, not a command: picking one inserts editable text (the skill's own
+   * `defaultPrompt` where it has one, else `$name`) and nothing is sent. No
+   * engine parses `$skillname` as syntax, which is exactly why these can never
+   * resolve to a chip the way `commands` do.
+   */
+  skills?: SkillInfo[];
+  /** Host-file search behind the `@` trigger. Omit to leave `@` inert — a
+   * gateway without host files has nothing to complete. */
+  onSearchFiles?: (query: string, options: {
+    signal: AbortSignal;
+  }) => Promise<ComposerFileMatch[]>;
+  /** Attachment staging (see `useAttachments`). Omit for a text-only composer. */
+  attachments?: UseAttachmentsResult;
+  /** Left side of the toolbar row (mode selects, …). */
   toolbar?: ReactNode;
+  /**
+   * `'stacked'` (default) gives the buttons a row of their own under the field —
+   * right where a toolbar belongs. `'inline'` puts the field and the buttons on
+   * ONE line, growing from a single row as the message does: for a host whose
+   * session controls live in its own chrome (VS Code's status bar), where the
+   * empty composer would otherwise spend two rows saying nothing.
+   */
+  layout?: 'stacked' | 'inline';
   className?: string;
+  ref?: Ref<ComposerHandle>;
 }
-/** Framed prompt input built on prompt-area's contentEditable: typing "/" — at the
- * start or after whitespace — opens a suggestion dropdown fed by `commands`, and a
- * picked command becomes an inline chip. Submit button flips to stop while a turn
- * is running (messages still queue while busy). */
+/**
+ * What a picked skill types into the composer.
+ *
+ * The engine's own `defaultPrompt` when it declared one — it knows what its
+ * skill wants to be asked — and otherwise `$name`, which is codex's native way
+ * of referring to a skill in prompt text: its `skill-creator` documents the form
+ * (`Use $skill-x at /path/to/skill-x to solve problem y`) and its own bundled
+ * prompts are written that way ("Use $pdf to …"). Spelling it the way the engine
+ * spells it beats paraphrasing into "Use the X skill to".
+ *
+ * Either way it ends in a space so the caret lands ready for the rest of the
+ * sentence, and either way it is ordinary text: nothing here is submitted, and
+ * nothing is parsed back out.
+ */
+declare function skillPrompt(skill: SkillInfo): string;
+/**
+ * Framed prompt input built on prompt-area's contentEditable.
+ *
+ * Three completions ride the same field and behave nothing alike. `/` is the
+ * CLI's command list and `$` is the engine's skill list — both local, so they
+ * filter completely and instantly; `@` is a search against the host filesystem,
+ * debounced and abortable so a fast typist makes one request rather than eight.
+ *
+ * `/` and `$` are separate keys rather than one merged menu, and that mirrors
+ * the engines themselves: codex completes skills on `$` and reserves `/` for
+ * commands. The behaviours differ too — a command resolves to a **chip**,
+ * because the CLI really does parse `/name` out of the message, while a skill
+ * resolves to plain editable **text**, because no engine parses `$name` as
+ * syntax; it is prose the model reads. Rendering them alike would promise
+ * something that does not happen.
+ *
+ * Files can arrive three ways — the paperclip, a drop, or a paste — because on a
+ * desktop all three are things people already do, and the upload starts the
+ * moment one lands rather than at send time.
+ */
 declare function Composer({
   onSend,
   onInterrupt,
@@ -800,8 +1089,13 @@ declare function Composer({
   disabled,
   placeholder,
   commands,
+  skills,
+  onSearchFiles,
+  attachments,
   toolbar,
-  className
+  layout,
+  className,
+  ref
 }: ComposerProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/ModelSelect.d.ts
@@ -831,51 +1125,208 @@ declare function ModelSelect({
   className
 }: ModelSelectProps): _$react.JSX.Element;
 //#endregion
-//#region src/components/agent/PermissionModeSelect.d.ts
-type PermissionModeMeta = {
-  value: PermissionMode;
-  label: string;
-  description: string;
-  dangerous?: boolean;
-};
-/** The modes surfaced across UI surfaces (session creation, in-session switcher). */
-declare const PERMISSION_MODES: PermissionModeMeta[];
-interface PermissionModeSelectProps {
-  /** The session's current mode (TranscriptState.permissionMode). */
-  mode?: PermissionMode;
-  onModeChange: (mode: PermissionMode) => void;
-  /** Restrict what is offered — most of {@link PERMISSION_MODES} is Claude Code
-   * vocabulary the provider engine has no meaning for. Defaults to all of them;
-   * pass `PROVIDER_PERMISSION_MODES` for a provider session. */
-  modes?: readonly PermissionMode[];
-  /** 'toolbar' (default) is the composer's compact borderless trigger;
-   * 'form' is a standard field-sized Select for create/settings forms. */
-  variant?: 'toolbar' | 'form';
-  disabled?: boolean;
-  className?: string;
-}
-/** Permission-mode switcher: compact in the composer toolbar, field-sized in forms. */
-declare function PermissionModeSelect({
-  mode,
-  onModeChange,
-  modes,
-  variant,
-  disabled,
-  className
-}: PermissionModeSelectProps): _$react.JSX.Element;
-//#endregion
 //#region src/components/agent/StatusBar.d.ts
 interface StatusBarProps {
   state: TranscriptState;
-  connected: boolean;
+  /** @deprecated Pass {@link StatusBarProps.connection}; kept so an embedder
+   * still handing over a boolean keeps working. */
+  connected?: boolean;
+  /** How the client is doing at reaching the gateway. A dropped socket wins the
+   * status slot: the session status held over a dead socket is a stale reading,
+   * and presenting it as a live one is the thing worth avoiding. */
+  connection?: ConnectionState;
+  /**
+   * Where the gauges lead. Each one opens the panel that answers *its* question
+   * — the two meters measure different things, so sending both to one "details"
+   * list would be a detour every time. Omit a handler and that gauge stays a
+   * read-only tooltip.
+   */
+  onOpenStatus?: () => void;
+  onOpenContext?: () => void;
+  onOpenUsage?: () => void;
+  /** Trailing slot — the session-actions menu, in the panel's top-right. */
+  actions?: ReactNode;
   className?: string;
 }
 declare function StatusBar({
   state,
   connected,
+  connection,
+  onOpenStatus,
+  onOpenContext,
+  onOpenUsage,
+  actions,
   className
 }: StatusBarProps): _$react.JSX.Element;
 //#endregion
+//#region src/components/agent/ContextDialog.d.ts
+interface ContextDialogProps {
+  usage?: ContextUsage;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+/**
+ * What is in the model's context window right now, category by category.
+ *
+ * One of the three panels the status bar opens. Context, usage and session info
+ * are different questions asked at different moments, so they are different
+ * screens rather than one "details" list you scroll past two answers to reach.
+ */
+declare function ContextDialog({
+  usage,
+  open,
+  onOpenChange
+}: ContextDialogProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/UsageDialog.d.ts
+interface UsageDialogProps {
+  /** Windows in reading order — session, weekly, then per-model weeklies. */
+  rateLimits: Array<{
+    key: string;
+    info: RateLimitInfo;
+  }>;
+  /** claude.ai plan behind the windows ('max', 'pro', …), when there is one. */
+  subscriptionType?: string;
+  engine: ProfileEngine;
+  totalCostUsd: number;
+  /** Local receipt time of the last window update. `rate_limit` events are one
+   * per turn at best, so a stale reading is normal and worth saying out loud. */
+  updatedAt?: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+/**
+ * The plan's rate-limit windows, spelled out: how much of each is used, how that
+ * compares to the pace that would spend the window exactly, and when it resets.
+ *
+ * The pace marker is the point. A bar alone says "17% used", which is only
+ * alarming or reassuring once you know how far into the week you are — so every
+ * window draws a tick at the elapsed share of its duration. Left of the tick is
+ * under budget, right of it is ahead of it. The duration comes from the window
+ * key (5h, 7d) because the CLI reports a reset time and a percentage and never a
+ * duration; a window whose key doesn't say gets no marker rather than a guessed one.
+ */
+declare function UsageDialog({
+  rateLimits,
+  subscriptionType,
+  engine,
+  totalCostUsd,
+  updatedAt,
+  open,
+  onOpenChange
+}: UsageDialogProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/SessionInfoDialog.d.ts
+interface SessionInfoDialogProps {
+  state: TranscriptState;
+  client: WorkerDeckClient;
+  sessionId: string | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+/**
+ * What this session *is*: engine, profile, model, mode, where it runs, which
+ * credentials it found, and the files it has handed over.
+ *
+ * The identity half of the session's facts. Context and usage have their own
+ * panels — they change every turn and are consulted mid-run, while everything
+ * here is fixed at creation and looked up once.
+ */
+declare function SessionInfoDialog({
+  state,
+  client,
+  sessionId,
+  open,
+  onOpenChange
+}: SessionInfoDialogProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/McpDialog.d.ts
+interface McpDialogProps {
+  client: WorkerDeckClient;
+  sessionId: string | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Whether this engine can reconnect/enable/disable a server
+   * (`EngineCapabilities.mcpServerActions`). False renders the panel read-only:
+   * codex reports rich status but exposes no per-server action, and buttons
+   * that 501 are worse than buttons that aren't there.
+   */
+  canManageServers?: boolean;
+}
+/**
+ * The session's MCP servers, at the CLI's own `/mcp` depth: servers → one server
+ * → its tools → one tool, with Reconnect / Enable / Disable where they apply.
+ *
+ * Two things vary by engine rather than being fixed here. **The actions** exist
+ * only where the engine has them (`canManageServers`): codex reports rich status
+ * but has no per-server reconnect or toggle, so its panel is read-only. And
+ * **tool parameters** appear only where the engine reports a schema — codex
+ * returns each tool's full JSON Schema, the Agent SDK returns none at all, so
+ * the tool view either renders it or says why it can't, rather than leaving a
+ * silent gap or claiming the absence is universal.
+ */
+declare function McpDialog({
+  client,
+  sessionId,
+  open,
+  onOpenChange,
+  canManageServers
+}: McpDialogProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/SkillsDialog.d.ts
+interface SkillsDialogProps {
+  skills: SkillInfo[] | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 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;
+}
+/**
+ * What this session's engine can do beyond its own tools: the skills it found,
+ * grouped by where they came from, with one drilled-down view each.
+ *
+ * The framing matters more here than in most panels. A skill is **not** a
+ * command — the model decides to use one by reading its description, and there
+ * is no wire syntax that invokes it. So this screen is a *discovery* surface,
+ * and the one action it offers ("Use this skill") is honest about being a
+ * drafting aid: it types a message for the operator to edit and send.
+ *
+ * Fed from the session's `skills` event rather than a REST route, because that
+ * is the channel the engine refreshes on its own when a skill changes on disk.
+ */
+declare function SkillsDialog({
+  skills,
+  open,
+  onOpenChange,
+  onUse
+}: SkillsDialogProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/HostFilesDialog.d.ts
+interface HostFilesDialogProps {
+  client: WorkerDeckClient;
+  /** The session's working directory — the browser is rooted here. */
+  cwd: string | undefined;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+/**
+ * Browse the project the session is working in.
+ *
+ * Deliberately rooted at the session's cwd rather than at the server's
+ * `hostFiles.roots`: the roots are the *security* boundary (the server enforces
+ * them on every request), but what someone wants while watching an agent is this
+ * project's tree. Read-only — writing is a separate server opt-in and not
+ * something a session viewer should be doing behind the agent's back.
+ */
+declare function HostFilesDialog({
+  client,
+  cwd,
+  open,
+  onOpenChange
+}: HostFilesDialogProps): _$react.JSX.Element;
+//#endregion
 //#region src/components/agent/SessionList.d.ts
 interface SessionListItemProps {
   session: SessionInfo;
@@ -906,6 +1357,111 @@ declare function SessionList({
   className
 }: SessionListProps): _$react.JSX.Element;
 //#endregion
+//#region src/components/agent/SessionBrowser.d.ts
+/**
+ * A sessions list with the affordances a list of thirty needs: search, facets,
+ * grouping, sorting, unread counts, and one honest line about what is hidden.
+ *
+ * The *rules* are `@workerdeck/protocol`'s (`filterRows`/`groupRows`/
+ * `subsetSummary`), not this component's — the VS Code sidebar renders the same
+ * model with workbench chrome, its activity-bar badge counts the same rows this
+ * would show, and iOS mirrors them in Swift. What lives here is the styled
+ * rendering of that model, so a host that wants the dashboard's look gets it
+ * without reimplementing the model behind it.
+ *
+ * `SessionList` remains beside this for the plain case (a fixed set of rows, no
+ * controls); this is what you reach for when the list is the screen.
+ */
+interface SessionBrowserProps {
+  rows: SessionRow[];
+  config: ViewConfig;
+  onConfigChange: (config: ViewConfig) => void;
+  /** The host's own folders, if it has such a notion. Absent — a dashboard, a
+   * phone — makes the scope filter genuinely inert rather than empty. */
+  scope?: WorkspaceScope;
+  activeId?: string;
+  onSelect?: (row: SessionRow) => void;
+  onDelete?: (row: SessionRow) => void;
+  /**
+   * Rename, from the row's pencil. Empty string restores the derived title. A
+   * gateway edit (`PATCH /sessions/:id`), never a local override — every client
+   * should see the same name. Omit to make titles read-only.
+   *
+   * A hover affordance rather than the extension's double-click-the-title,
+   * because here a single click on the row navigates: the *first* click of a
+   * double-click would have already left the page.
+   */
+  onRename?: (row: SessionRow, title: string) => void;
+  /** Rendered when nothing at all exists (as opposed to nothing matching). */
+  emptyState?: React.ReactNode;
+  className?: string;
+}
+declare function SessionBrowser({
+  rows,
+  config,
+  onConfigChange,
+  scope,
+  activeId,
+  onSelect,
+  onDelete,
+  onRename,
+  emptyState,
+  className
+}: SessionBrowserProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/SessionEmptyState.d.ts
+interface SessionEmptyStateProps {
+  cwd?: string;
+  /** Whether `/command` completion is live yet — the CLI reports its commands a
+   * beat after the session starts, and promising a feature that isn't wired up
+   * yet is worse than not mentioning it. */
+  hasCommands?: boolean;
+  /** Whether the engine has reported skills the `/` popover can offer. Its own
+   * flag, not a variant of `hasCommands`: what `/` does differs — a command is
+   * submitted, a skill is typed for you to edit — and an engine can have one
+   * without the other. */
+  hasSkills?: boolean;
+  /** Whether this gateway serves `@file` search for the session's directory. */
+  canBrowseFiles?: boolean;
+  className?: string;
+}
+/**
+ * What a session shows before it has said anything: where the agent is sitting,
+ * and what the composer accepts beyond prose.
+ *
+ * Every hint is conditional on the affordance actually existing — an engine
+ * without slash commands, or a gateway without host files, is not told about
+ * them. Deliberately no project name (the header already carries it) and no
+ * brand mark (its geometry is inlined in several places already and they are
+ * meant to stay identical).
+ */
+declare function SessionEmptyState({
+  cwd,
+  hasCommands,
+  hasSkills,
+  canBrowseFiles,
+  className
+}: SessionEmptyStateProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/PromptTokenText.d.ts
+/**
+ * A sent message, with its `@file` and `/command` tokens styled the way the CLI
+ * writes them: monospace and tinted, no background — the bubble already has one,
+ * and a second fill inside it reads as a button.
+ *
+ * Literal text, never markdown: what was typed is what was sent. The one pass
+ * over it is this, so a message reads the same after sending as it did in the
+ * composer. Two tokens, two meanings — a file is a reference, a command is an
+ * action — so they are told apart by hue rather than by shape alone.
+ */
+declare function PromptTokenText({
+  text,
+  className
+}: {
+  text: string;
+  className?: string;
+}): _$react.JSX.Element;
+//#endregion
 //#region src/components/agent/status.d.ts
 declare const STATUS_META: Record<SessionStatus, {
   label: string;
@@ -916,17 +1472,44 @@ declare const STATUS_META: Record<SessionStatus, {
 //#region src/lib/utils.d.ts
 declare function cn(...inputs: ClassValue[]): string;
 //#endregion
-//#region src/lib/format.d.ts
-declare function formatCost(usd: number | undefined): string;
-declare function formatDuration(ms: number): string;
-/** Compact token count, Claude Code-style: 850 → "850", 359_000 → "359.0k", 1_200_000 → "1.2M". */
-declare function formatTokens(tokens: number): string;
-declare function formatBytes(bytes: number): string;
-/** Countdown to an epoch-ms deadline: "2h 18m", "12m", "<1m"; "now" once passed. */
-declare function formatCountdown(untilEpochMs: number, now?: number): string;
-declare function formatRelativeTime(epochMs: number | undefined, now?: number): string;
-/** Compact one-line preview of a tool input for card headers. */
-declare function toolInputPreview(input: unknown, max?: number): string;
-//#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, Composer, type ComposerProps, Conversation, ConversationContent, type ConversationProps, ConversationScrollButton, CopyButton, type CopyButtonProps, FileCard, type FileCardProps, type FileDeliveredItem, Input, Loader, Message, MessageContent, type MessageProps, ModelSelect, type ModelSelectProps, PERMISSION_MODES, type PermissionModeMeta, PermissionModeSelect, type PermissionModeSelectProps, PermissionPrompt, type PermissionPromptProps, ProgressRing, type ProgressRingProps, PromptArea, type PromptAreaHandle, type PromptAreaProps, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, Spinner, StatusBar, type StatusBarProps, type TextSegment, Textarea, Tip, Toaster, ToolCallCard, type ToolCallCardProps, type ToolCallItem, TooltipContent, TooltipProvider, Transcript, type TranscriptProps, type TriggerConfig, type TriggerSuggestion, badgeVariants, buttonVariants, cn, commandTrigger, formatBytes, formatCost, formatCountdown, formatDuration, formatRelativeTime, formatTokens, getChipsByTrigger, hashtagTrigger, isSegmentsEmpty, mentionTrigger, parseUserQuestions, plainTextToSegments, segmentsToPlainText, toast, toolInputPreview, usePromptAreaState };
+//#region src/lib/clipboard.d.ts
+/**
+ * Copy text to the clipboard, on origins where the modern API does not exist.
+ *
+ * `navigator.clipboard` is gated on a **secure context**: HTTPS, or localhost.
+ * A WorkerDeck dashboard reached the way it is meant to be reached — plain HTTP
+ * on a LAN address, from a laptop or a phone — is neither, so `navigator.clipboard`
+ * is `undefined` there and touching `.writeText` throws outright. That is the
+ * normal deployment, not an edge case, which is why this falls back rather than
+ * feature-detecting into a disabled button.
+ *
+ * The fallback is `document.execCommand('copy')` over an off-screen textarea.
+ * It is deprecated and it is also the only thing that works here; every browser
+ * still implements it. Returns whether the text actually landed, so a caller can
+ * avoid claiming success it did not have.
+ */
+declare function copyText(value: string): Promise<boolean>;
+//#endregion
+//#region src/lib/tool-icon.d.ts
+/**
+ * An icon per tool, so a transcript can be skimmed by shape rather than read.
+ *
+ * The same mapping the iOS app makes, in lucide's vocabulary rather than SF
+ * Symbols — the two clients should be recognisably showing the same thing. An
+ * unknown tool falls back to a wrench, and an MCP tool (`mcp__server__name`) to
+ * the puzzle piece the MCP screens use, because "which server is this from" is
+ * the useful thing to see at a glance.
+ */
+declare function toolIcon(toolName: string): LucideIcon;
+/**
+ * Does this tool *change* the workspace?
+ *
+ * Worth its own colour in a transcript: skimming a run, "what did it edit" is a
+ * different question from "what did it look at", and a write is the one you
+ * might need to undo. Names from both first-party engines; an MCP tool is
+ * unknowable from its name, so it reads as neutral rather than guessed.
+ */
+declare function isMutatingTool(toolName: string): boolean;
+//#endregion
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, Composer, type ComposerFileMatch, type ComposerHandle, type ComposerProps, ContextDialog, type ContextDialogProps, Conversation, ConversationContent, type ConversationProps, ConversationScrollButton, CopyButton, type CopyButtonProps, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, FileCard, type FileCardProps, type FileDeliveredItem, HostFilesDialog, type HostFilesDialogProps, Input, Loader, McpDialog, type McpDialogProps, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, type MessageProps, ModelSelect, type ModelSelectProps, PERMISSION_MODES, type PermissionModeChoice, type PermissionModeMeta, PermissionModeSelect, type PermissionModeSelectProps, PermissionPrompt, type PermissionPromptProps, ProgressRing, type ProgressRingProps, PromptArea, type PromptAreaHandle, type PromptAreaProps, PromptTokenText, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, type SessionBrowserProps, type SessionControls, SessionEmptyState, type SessionEmptyStateProps, SessionInfoDialog, type SessionInfoDialogProps, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, type SessionSurfacePanel, type SessionVitals, SkillsDialog, type SkillsDialogProps, Spinner, Splitter, type SplitterProps, StatusBar, type StatusBarProps, type TextSegment, Textarea, Tip, Toaster, ToolCallCard, type ToolCallCardProps, type ToolCallItem, TooltipContent, TooltipProvider, Transcript, type TranscriptDensity, TranscriptDensityProvider, type TranscriptProps, type TranscriptVariant, TranscriptVariantProvider, type TriggerConfig, type TriggerSuggestion, UsageDialog, type UsageDialogProps, badgeVariants, buttonVariants, cn, commandTrigger, copyText, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, rateLimitWindowSeconds, segmentsToPlainText, skillPrompt, toast, toolIcon, toolInputPreview, usePromptAreaState, useTranscriptDensity, useTranscriptVariant };
 //# sourceMappingURL=index.d.mts.map