@workerdeck/ui 0.7.0 → 0.10.0

package/build/index.d.mts

@@ -1,16 +1,20 @@
 import * as _$react from "react";
-import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, CSSProperties, FunctionComponent, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, 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, PermissionMode, PermissionRequest, ProfileEngine, QuestionBehavior, RateLimitInfo, SessionInfo, SessionStatus, SkillInfo, SlashCommandInfo, UserQuestion } from "@workerdeck/protocol";
+import { ConnectionState, OpenFile, TranscriptItem, TranscriptState, UseAttachmentsResult, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 import { WorkerDeckClient } from "@workerdeck/client";
 
@@ -80,16 +84,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
@@ -132,6 +185,57 @@ declare function CodeBlock({
   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 +339,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
@@ -581,14 +700,33 @@ declare function getChipsByTrigger(segments: Segment[], trigger: string): ChipSe
 interface SessionPanelProps {
   client: WorkerDeckClient;
   sessionId: string | undefined;
-  /** Optional slot rendered at the top, above the status bar. */
-  header?: ReactNode;
+  /**
+   * Optional slot rendered at the top, above the status bar.
+   *
+   * Pass a **function** to take the session-actions (`⋯`) menu into your own
+   * chrome: it is called with the menu element, and wherever you put it is
+   * where it lives — the status bar then renders without it, so it never
+   * appears twice. Pass a plain node (or nothing) and the menu stays in the
+   * status bar's trailing slot.
+   *
+   * The seam exists because the menu can only be *built* here — it needs the
+   * capability record, the host-file verdict and the panel's own dialog state —
+   * but an embedder with a real header usually wants it up there with the rest
+   * of the session's controls, not stranded on the status line.
+   */
+  header?: ReactNode | ((slots: {
+    actions: ReactNode;
+  }) => 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.
+ *
+ * Every affordance is gated on the session's **capability record** rather than on
+ * the engine name — an absent capability hides the control instead of offering
+ * one that can only fail.
  */
 declare function SessionPanel({
   client,
@@ -597,17 +735,221 @@ declare function SessionPanel({
   className
 }: SessionPanelProps): _$react.JSX.Element;
 //#endregion
+//#region src/components/agent/SessionWorkspace.d.ts
+interface SessionWorkspaceProps {
+  client: WorkerDeckClient;
+  sessionId: string | undefined;
+  /** Passed straight through to {@link SessionPanel} — including the render-prop
+   * form that claims the session-actions menu. */
+  header?: SessionPanelProps['header'];
+  /** Rail width in pixels on first render. */
+  defaultRailWidth?: number;
+  /** Start with the file rail collapsed even on a wide viewport. */
+  defaultRailCollapsed?: boolean;
+  className?: string;
+}
+/**
+ * A VS Code-shaped workspace around a live session: file tree on the left, open
+ * files above, the agent below.
+ *
+ * **Strictly additive.** {@link SessionPanel} is untouched and still the whole
+ * session surface on its own — an embedder picks one or the other, and one that
+ * has its own file tree keeps using the panel.
+ *
+ * Two things here are load-bearing and easy to break:
+ *
+ * 1. **The editor region is absent from the layout when nothing is open**, not
+ *    collapsed to zero height. A zero-height pane leaves a draggable splitter and
+ *    parks the composer at an odd offset; absence is what makes the agent's
+ *    "claims the full column" state actually look like the panel alone.
+ * 2. **`SessionPanel` keeps its position in the tree across that transition.** It
+ *    holds the WebSocket attach and the entire transcript, so moving it between
+ *    parents — or wrapping it conditionally — would remount it and drop the
+ *    session's rendered history on the floor the first time someone opens a file.
+ *    The conditional children before it are `? :` expressions that leave a null in
+ *    their slot, which is exactly what keeps its index stable.
+ */
+declare function SessionWorkspace({
+  client,
+  sessionId,
+  header,
+  defaultRailWidth,
+  defaultRailCollapsed,
+  className
+}: SessionWorkspaceProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/FileTree.d.ts
+interface FileTreeProps {
+  /** Tree state from `useHostFileTree` — this component holds none of its own. */
+  tree: UseHostFileTreeResult;
+  /** Optional search from `useHostFileSearch`; omit and the box is not offered. */
+  search?: UseHostFileSearchResult;
+  /** Path of the focused file, highlighted in the tree. */
+  activePath?: string;
+  onOpenFile: (path: string) => void;
+  /** Offered as a button in the header when given. */
+  onCollapse?: () => void;
+  style?: CSSProperties;
+  className?: string;
+}
+/**
+ * The workspace's left rail: an expandable tree of the session's project,
+ * with a search box over the same fuzzy route `@file` completion uses.
+ *
+ * Presentational by construction — every piece of state it renders comes from
+ * the hooks in `@workerdeck/react`, and the only thing it owns is the search
+ * query, which is the text in its own input.
+ *
+ * Searching replaces the tree with matches rather than filtering it: the route
+ * answers with paths from all over the project, and threading those back into
+ * tree positions would mean expanding a dozen directories to show six results.
+ */
+declare function FileTree({
+  tree,
+  search,
+  activePath,
+  onOpenFile,
+  onCollapse,
+  style,
+  className
+}: FileTreeProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/EditorTabs.d.ts
+interface EditorTabsProps {
+  files: OpenFile[];
+  activePath?: string;
+  onActivate: (path: string) => void;
+  onClose: (path: string) => void;
+  className?: string;
+}
+/**
+ * The open-file tab strip.
+ *
+ * Hand-rolled rather than built on `@base-ui/react`'s `Tabs`: a VS Code tab
+ * carries a close button, and a `<button>` inside a `<button>` is invalid HTML —
+ * getting the primitive to render something else costs more than the roving
+ * tabindex it would have provided. So that part is here, explicitly, along with
+ * the two affordances that actually make a tab strip feel right: middle-click to
+ * close, and the active tab scrolling itself into view.
+ *
+ * Deliberately state-free. Which files are open, which is focused and what
+ * closing does are all decided by `useOpenFiles`.
+ */
+declare function EditorTabs({
+  files,
+  activePath,
+  onActivate,
+  onClose,
+  className
+}: EditorTabsProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/FileViewer.d.ts
+interface FileViewerProps {
+  file: OpenFile | undefined;
+  /** From `/fs/roots`. False renders the editor read-only rather than letting
+   * someone type into a file this gateway will refuse to write. */
+  canWrite?: boolean;
+  onChange?: (path: string, content: string) => void;
+  onSave?: (path: string) => void;
+  /** Discard this tab's edits — local only, no re-read. */
+  onRevert?: (path: string) => void;
+  /** Take the version on disk, discarding this tab's edits. */
+  onReload?: (path: string) => void;
+  /** Take this tab's version, over whatever is on disk now. */
+  onOverwrite?: (path: string) => void;
+  onDismissConflict?: (path: string) => void;
+  className?: string;
+}
+/**
+ * The focused file: Monaco, plus the states a file can be in that are not
+ * "here is some text".
+ *
+ * No path row — the tab's tooltip carries the path and the size, and a line of
+ * monospace above every file is chrome that never earns its height.
+ */
+declare function FileViewer({
+  file,
+  canWrite,
+  onChange,
+  onSave,
+  onRevert,
+  onReload,
+  onOverwrite,
+  onDismissConflict,
+  className
+}: FileViewerProps): _$react.JSX.Element | null;
+//#endregion
+//#region src/components/agent/CodeEditor.d.ts
+interface CodeEditorProps {
+  /** Absolute path — decides the language and identifies the model. */
+  path: string;
+  /** Text to show. Applied to the model when it differs from what is on screen,
+   * so an external reload lands without fighting the user's cursor. */
+  value: string;
+  onChange?: (value: string) => void;
+  /** Ctrl/Cmd+S. Wired inside Monaco because the editor swallows keydown. */
+  onSave?: () => void;
+  readOnly?: boolean;
+  className?: string;
+}
+/**
+ * Monaco — VS Code's own editor — behind a small React surface.
+ *
+ * Two deliberate choices, both about `@workerdeck/ui` being a **published
+ * library** rather than an app:
+ *
+ * 1. **Loaded on demand.** The `import()` is inside an effect, so Monaco is a
+ *    separate chunk that arrives when someone first opens a file. A dashboard
+ *    that never opens one never pays for it, and Monaco's ~90 language grammars
+ *    are themselves lazy (each `registerLanguage` carries an `import()` loader),
+ *    so opening a `.ts` file fetches the TypeScript grammar and nothing else.
+ * 2. **No `MonacoEnvironment` is configured here, and none is needed.** Workers
+ *    in a library become every embedder's bootstrapping problem, and
+ *    `packages/web` ships prebuilt static files at a domain root, which is
+ *    exactly where hardcoded worker URLs break. The editor is configured so it
+ *    never asks for one: `wordBasedSuggestions` and `quickSuggestions` off,
+ *    no diff editor. A host that wants the worker-backed language services
+ *    (TypeScript IntelliSense, JSON schema validation) sets `MonacoEnvironment`
+ *    itself before the first file is opened — Monaco is a singleton and nothing
+ *    here fights that.
+ *
+ * One model per path, kept across tab switches, so undo history and view state
+ * survive clicking away and back — which is most of what makes tabs feel like
+ * tabs rather than like re-opening a file.
+ */
+declare function CodeEditor({
+  path,
+  value,
+  onChange,
+  onSave,
+  readOnly,
+  className
+}: CodeEditorProps): _$react.JSX.Element;
+//#endregion
 //#region src/components/agent/Transcript.d.ts
 interface TranscriptProps {
   state: TranscriptState;
   /** Builds the download URL for a delivered file (see FileCard). Typically
    * `(path) => client.sessionFileUrl(sessionId, path)`. */
   fileUrl?: (path: string) => string;
+  /** Builds the URL for an uploaded attachment. Typically
+   * `(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>;
   className?: string;
 }
 declare function Transcript({
   state,
   fileUrl,
+  attachmentUrl,
+  canBrowseFiles,
+  hostImage,
   className
 }: TranscriptProps): _$react.JSX.Element;
 //#endregion
@@ -699,10 +1041,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
@@ -730,9 +1081,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,
@@ -771,8 +1136,22 @@ 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;
+};
 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). */
@@ -780,14 +1159,62 @@ 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;
   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,
@@ -795,8 +1222,12 @@ declare function Composer({
   disabled,
   placeholder,
   commands,
+  skills,
+  onSearchFiles,
+  attachments,
   toolbar,
-  className
+  className,
+  ref
 }: ComposerProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/agent/ModelSelect.d.ts
@@ -828,21 +1259,43 @@ declare function ModelSelect({
 //#endregion
 //#region src/components/agent/PermissionModeSelect.d.ts
 type PermissionModeMeta = {
-  value: PermissionMode;
+  value: PermissionMode; /** The name Claude Code itself uses. */
   label: string;
+  /** The chip form, for bars where the label shares a line with three other
+   * things and "Bypass permissions" would eat half of it. */
+  shortLabel: string; /** What the mode actually does — the CLI's own one-liners. */
   description: string;
+  icon: LucideIcon;
   dangerous?: boolean;
 };
-/** The modes surfaced across UI surfaces (session creation, in-session switcher). */
+/**
+ * The modes surfaced across UI surfaces (session creation, in-session switcher),
+ * ordered by how much of the approval gate they give away.
+ *
+ * Notably `default` is **"Manual"**: the wire value is `default`, but calling it
+ * that in the UI conflates a real mode (ask me every time) with "whatever the
+ * server picked", which is the one confusion a mode chip exists to avoid. The
+ * naming, the icons and the summaries are shared with the iOS app on purpose —
+ * the two surfaces should read as the same list.
+ */
 declare const PERMISSION_MODES: PermissionModeMeta[];
+declare const permissionModeMeta: (mode: PermissionMode) => PermissionModeMeta | undefined;
 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. */
+   * vocabulary the other engines have no meaning for. Defaults to all of them;
+   * pass the session's `capabilities.permissionModes`. */
   modes?: readonly PermissionMode[];
+  /**
+   * Whether this session may be switched into `bypassPermissions` at all. The
+   * CLI refuses unless the process was spawned for it, so a session that didn't
+   * ask up front can never gain it. The row is shown disabled rather than hidden
+   * — "you can't have this here" is a more useful answer than a row that
+   * silently isn't there. `undefined` (an older server) offers it.
+   */
+  canBypass?: boolean;
   /** 'toolbar' (default) is the composer's compact borderless trigger;
    * 'form' is a standard field-sized Select for create/settings forms. */
   variant?: 'toolbar' | 'form';
@@ -854,6 +1307,7 @@ declare function PermissionModeSelect({
   mode,
   onModeChange,
   modes,
+  canBypass,
   variant,
   disabled,
   className
@@ -862,15 +1316,205 @@ declare function PermissionModeSelect({
 //#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;
@@ -901,6 +1545,59 @@ declare function SessionList({
   className
 }: SessionListProps): _$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;
@@ -911,6 +1608,36 @@ declare const STATUS_META: Record<SessionStatus, {
 //#region src/lib/utils.d.ts
 declare function cn(...inputs: ClassValue[]): string;
 //#endregion
+//#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;
+//#endregion
 //#region src/lib/format.d.ts
 declare function formatCost(usd: number | undefined): string;
 declare function formatDuration(ms: number): string;
@@ -920,8 +1647,27 @@ 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;
+/**
+ * Human label for a rate-limit window key, compact: 'five_hour' → "5h",
+ * 'seven_day_opus' → "7d opus". The per-model suffix is an open set — the CLI
+ * adds buckets as plans gain them — so it is rewritten rather than enumerated.
+ */
+declare function formatRateLimitWindow(key: string): string;
+/** The same key spelled out, where there is room: 'five_hour' → "5-hour
+ * session", 'seven_day_fable' → "Weekly · Fable". */
+declare function formatRateLimitWindowLong(key: string): string;
+/**
+ * How long a rate-limit window is, in seconds — the denominator behind the pace
+ * marker. Derived from the key rather than reported: the CLI sends a reset time
+ * and a percentage, never a duration. `undefined` for a window whose key doesn't
+ * say, and the marker is then simply not drawn rather than guessed.
+ */
+declare function rateLimitWindowSeconds(key: string): number | undefined;
+/** "8 secs ago" / "3 mins ago" — a freshness line finer-grained than
+ * {@link formatRelativeTime}, because a poll that just landed should say so. */
+declare function formatAgoPrecise(epochMs: number, 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 };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, CodeEditor, type CodeEditorProps, 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, EditorTabs, type EditorTabsProps, FileCard, type FileCardProps, type FileDeliveredItem, FileTree, type FileTreeProps, FileViewer, type FileViewerProps, HostFilesDialog, type HostFilesDialogProps, Input, Loader, McpDialog, type McpDialogProps, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, 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, PromptTokenText, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionEmptyState, type SessionEmptyStateProps, SessionInfoDialog, type SessionInfoDialogProps, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, SessionWorkspace, type SessionWorkspaceProps, SkillsDialog, type SkillsDialogProps, Spinner, Splitter, type SplitterProps, StatusBar, type StatusBarProps, type TextSegment, Textarea, Tip, Toaster, ToolCallCard, type ToolCallCardProps, type ToolCallItem, TooltipContent, TooltipProvider, Transcript, type TranscriptProps, type TriggerConfig, type TriggerSuggestion, UsageDialog, type UsageDialogProps, badgeVariants, buttonVariants, cn, commandTrigger, copyText, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, getChipsByTrigger, hashtagTrigger, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeMeta, plainTextToSegments, rateLimitWindowSeconds, segmentsToPlainText, skillPrompt, toast, toolIcon, toolInputPreview, usePromptAreaState };
 //# sourceMappingURL=index.d.mts.map