@workerdeck/ui 2.1.0 → 2.2.1

package/build/index.d.mts

@@ -15,7 +15,7 @@ import { ConnectionState, TranscriptItem, TranscriptState, UseAttachmentsResult
 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;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
@@ -623,6 +623,18 @@ type HashtagTriggerOptions = TriggerPresetOptions & {
  * `resolveOnSpace: true`, accessible label `"tag"`.
  */
 declare function hashtagTrigger(opts?: HashtagTriggerOptions): TriggerConfig;
+type LaunchTriggerOptions = Omit<Partial<TriggerConfig>, 'mode'> & {
+  /** The trigger character. Required. */
+  char: string;
+};
+/**
+ * Creates a **launch** trigger: `onActivate` fires on keydown and the character
+ * never enters the editor. For flipping the composer into another mode, or
+ * opening a surface outside it.
+ *
+ * Defaults: `position: 'start'`, `mode: 'launch'`.
+ */
+declare function launchTrigger(opts: LaunchTriggerOptions): TriggerConfig;
 //#endregion
 //#region src/components/prompt-area/prompt-area-engine.d.ts
 /**
@@ -888,6 +900,7 @@ interface ComposerProps {
   onSearchFiles?: (query: string, options: {
     signal: AbortSignal;
   }) => Promise<ComposerFileMatch[]>;
+  onShellCommand?: (command: string) => void;
   attachments?: UseAttachmentsResult;
   toolbar?: ReactNode;
   layout?: 'stacked' | 'inline';
@@ -903,7 +916,7 @@ interface ComposerProps {
   ref?: Ref<ComposerHandle>;
 }
 declare function skillPrompt(skill: SkillInfo): string;
-declare function Composer({ onSend, onInterrupt, busy, disabled, placeholder, commands, skills, onSearchFiles, attachments, toolbar, layout, fontSize, lineHeight, affordances, draft, className, ref }: ComposerProps): import("react").JSX.Element;
+declare function Composer({ onSend, onInterrupt, busy, disabled, placeholder, commands, skills, onSearchFiles, onShellCommand, attachments, toolbar, layout, fontSize, lineHeight, affordances, draft, className, ref }: ComposerProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/agent/ModelSelect.d.ts
 interface ModelSelectProps {
@@ -1190,5 +1203,5 @@ declare function copyText(value: string): Promise<boolean>;
 declare function toolIcon(toolName: string): LucideIcon;
 declare function isMutatingTool(toolName: string): boolean;
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Band, Blank, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, Composer, type ComposerFileMatch, type ComposerHandle, type ComposerProps, ContextDialog, type ContextDialogProps, ContextRing, Conversation, ConversationContent, type ConversationProps, ConversationScrollButton, CopyAction, CopyButton, type CopyButtonProps, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, type FileCardProps, type FileDeliveredItem, HostFilesDialog, type HostFilesDialogProps, Ink, 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, ProjectIcon, PromptArea, type PromptAreaHandle, type PromptAreaProps, PromptTokenText, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, Row, type RowProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, type SessionBrowserProps, type SessionControls, SessionEmptyState, type SessionEmptyStateProps, SessionInfoDialog, type SessionInfoDialogProps, SessionItem, type SessionItemProps, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, SessionStatusIcon, type SessionSurfacePanel, type SessionVitals, SkillsDialog, type SkillsDialogProps, Spinner, Splitter, type SplitterProps, StatusBar, type StatusBarProps, type Step, StepRow, StepToggle, SubagentStrip, TaskList, type TaskListProps, TasksDialog, type TasksDialogProps, type TerminalAffordances, TerminalDiff, TerminalItemView, TerminalMarkdown, type TerminalMarkdownProps, type TerminalMetrics, TerminalPermissionPrompt, type TerminalPermissionPromptProps, TerminalQuestionPrompt, type TerminalQuestionPromptProps, TerminalStatusLine, type TerminalStatusLineProps, TerminalSurface, type TerminalSurfaceProps, TerminalTranscript, type TerminalTranscriptProps, type TextSegment, Textarea, Tip, Toaster, type Tone, ToolCallCard, type ToolCallCardProps, type ToolCallItem, ToolTitleProvider, TooltipContent, TooltipProvider, Transcript, type TranscriptDensity, TranscriptDensityProvider, type TranscriptFont, type TranscriptProps, type TranscriptVariant, TranscriptVariantProvider, type TriggerConfig, type TriggerSuggestion, UsageDialog, type UsageDialogProps, UsageMeters, WithActions, badgeVariants, buttonVariants, cn, commandTrigger, copyText, engineMark, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, previewPatch, rateLimitWindowSeconds, rowShapeClass, runningSteps, segmentsToPlainText, sessionSteps, skillPrompt, toast, toolIcon, toolInputPreview, useAffordances, useMinuteClock, usePromptAreaState, useToolTitle, useTranscriptDensity, useTranscriptVariant, vendorMarkClass, vendorTextClass };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Band, Blank, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, Composer, type ComposerFileMatch, type ComposerHandle, type ComposerProps, ContextDialog, type ContextDialogProps, ContextRing, Conversation, ConversationContent, type ConversationProps, ConversationScrollButton, CopyAction, CopyButton, type CopyButtonProps, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, type FileCardProps, type FileDeliveredItem, HostFilesDialog, type HostFilesDialogProps, Ink, 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, ProjectIcon, PromptArea, type PromptAreaHandle, type PromptAreaProps, PromptTokenText, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, Row, type RowProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, type SessionBrowserProps, type SessionControls, SessionEmptyState, type SessionEmptyStateProps, SessionInfoDialog, type SessionInfoDialogProps, SessionItem, type SessionItemProps, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, SessionStatusIcon, type SessionSurfacePanel, type SessionVitals, SkillsDialog, type SkillsDialogProps, Spinner, Splitter, type SplitterProps, StatusBar, type StatusBarProps, type Step, StepRow, StepToggle, SubagentStrip, TaskList, type TaskListProps, TasksDialog, type TasksDialogProps, type TerminalAffordances, TerminalDiff, TerminalItemView, TerminalMarkdown, type TerminalMarkdownProps, type TerminalMetrics, TerminalPermissionPrompt, type TerminalPermissionPromptProps, TerminalQuestionPrompt, type TerminalQuestionPromptProps, TerminalStatusLine, type TerminalStatusLineProps, TerminalSurface, type TerminalSurfaceProps, TerminalTranscript, type TerminalTranscriptProps, type TextSegment, Textarea, Tip, Toaster, type Tone, ToolCallCard, type ToolCallCardProps, type ToolCallItem, ToolTitleProvider, TooltipContent, TooltipProvider, Transcript, type TranscriptDensity, TranscriptDensityProvider, type TranscriptFont, type TranscriptProps, type TranscriptVariant, TranscriptVariantProvider, type TriggerConfig, type TriggerSuggestion, UsageDialog, type UsageDialogProps, UsageMeters, WithActions, badgeVariants, buttonVariants, cn, commandTrigger, copyText, engineMark, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, launchTrigger, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, previewPatch, rateLimitWindowSeconds, rowShapeClass, runningSteps, segmentsToPlainText, sessionSteps, skillPrompt, toast, toolIcon, toolInputPreview, useAffordances, useMinuteClock, usePromptAreaState, useToolTitle, useTranscriptDensity, useTranscriptVariant, vendorMarkClass, vendorTextClass };
 //# sourceMappingURL=index.d.mts.map

package/build/index.mjs

@@ -1,4 +1,4 @@
-import { $ as Ink, A as PERMISSION_MODES, At as DialogHeader, B as TaskList, Bt as SelectItem, C as TerminalPermissionPrompt, Ct as Tip, D as SubagentStrip, Dt as DialogBody, E as parseUserQuestions, Et as Dialog, F as SkillsDialog, Ft as MenuItem, G as TerminalSurface, Gt as Input, H as contextNote, Ht as SelectTrigger, I as McpDialog, It as MenuSeparator, J as TerminalMarkdown, Jt as Button, K as ToolTitleProvider, Kt as Badge, L as HostFilesDialog, Lt as MenuTrigger, M as permissionModeChoices, Mt as DialogTrigger, N as permissionModeMeta, Nt as Menu, O as PermissionPrompt, Ot as DialogClose, P as ModelSelect, Pt as MenuContent, Q as Blank, Rt as Select, S as TerminalQuestionPrompt, St as copyText, T as QuestionPrompt, Tt as TooltipProvider, U as Composer, Ut as SelectValue, V as ContextDialog, Vt as SelectItemText, W as skillPrompt, Wt as PortalScope, X as previewPatch, Xt as cn, Y as TerminalDiff, Yt as buttonVariants, Z as Band, _ as ConversationContent, _t as ProgressRing, a as Transcript, at as toolIcon, b as STATUS_META, bt as Spinner, c as PromptTokenText, ct as useTranscriptDensity, d as FileCard, dt as hashtagTrigger, et as Row, f as TerminalItemView, ft as mentionTrigger, g as Conversation, gt as segmentsToPlainText, h as Loader, ht as plainTextToSegments, i as useMinuteClock, it as isMutatingTool, j as PermissionModeSelect, jt as DialogRow, k as Response, kt as DialogContent, l as Message, lt as useTranscriptVariant, m as SessionEmptyState, mt as PromptArea, n as UsageDialog, nt as WithActions, o as ToolCallCard, ot as TranscriptDensityProvider, p as TerminalTranscript, pt as usePromptAreaState, q as useToolTitle, qt as badgeVariants, r as UsageMeters, rt as useAffordances, s as Reasoning, st as TranscriptVariantProvider, t as SessionPanel, tt as CopyAction, u as MessageContent, ut as commandTrigger, v as ConversationScrollButton, vt as Splitter, w as QUESTION_BEHAVIORS, wt as TooltipContent, x as SessionInfoDialog, xt as CopyButton, y as StatusBar, yt as CodeBlock, z as TasksDialog, zt as SelectContent } from "./SessionPanel-DrMj8Yv0.mjs";
+import { $ as Ink, A as PERMISSION_MODES, At as DialogContent, B as TaskList, Bt as SelectContent, C as TerminalPermissionPrompt, Ct as copyText, D as SubagentStrip, Dt as Dialog, E as parseUserQuestions, Et as TooltipProvider, F as SkillsDialog, Ft as MenuContent, G as TerminalSurface, Gt as PortalScope, H as contextNote, Ht as SelectItemText, I as McpDialog, It as MenuItem, J as TerminalMarkdown, Jt as badgeVariants, K as ToolTitleProvider, Kt as Input, L as HostFilesDialog, Lt as MenuSeparator, M as permissionModeChoices, Mt as DialogRow, N as permissionModeMeta, Nt as DialogTrigger, O as PermissionPrompt, Ot as DialogBody, P as ModelSelect, Pt as Menu, Q as Blank, Rt as MenuTrigger, S as TerminalQuestionPrompt, St as CopyButton, T as QuestionPrompt, Tt as TooltipContent, U as Composer, Ut as SelectTrigger, V as ContextDialog, Vt as SelectItem, W as skillPrompt, Wt as SelectValue, X as previewPatch, Xt as buttonVariants, Y as TerminalDiff, Yt as Button, Z as Band, Zt as cn, _ as ConversationContent, _t as segmentsToPlainText, a as Transcript, at as toolIcon, b as STATUS_META, bt as CodeBlock, c as PromptTokenText, ct as useTranscriptDensity, d as FileCard, dt as hashtagTrigger, et as Row, f as TerminalItemView, ft as launchTrigger, g as Conversation, gt as plainTextToSegments, h as Loader, ht as PromptArea, i as useMinuteClock, it as isMutatingTool, j as PermissionModeSelect, jt as DialogHeader, k as Response, kt as DialogClose, l as Message, lt as useTranscriptVariant, m as SessionEmptyState, mt as usePromptAreaState, n as UsageDialog, nt as WithActions, o as ToolCallCard, ot as TranscriptDensityProvider, p as TerminalTranscript, pt as mentionTrigger, q as useToolTitle, qt as Badge, r as UsageMeters, rt as useAffordances, s as Reasoning, st as TranscriptVariantProvider, t as SessionPanel, tt as CopyAction, u as MessageContent, ut as commandTrigger, v as ConversationScrollButton, vt as ProgressRing, w as QUESTION_BEHAVIORS, wt as Tip, x as SessionInfoDialog, xt as Spinner, y as StatusBar, yt as Splitter, z as TasksDialog, zt as Select } from "./SessionPanel-ErvQUyHe.mjs";
 import { C as toolInputPreview, S as rateLimitWindowSeconds, _ as formatRateLimitWindow, b as formatTokens, c as tightestWindow, f as formatAgoPrecise, g as formatDuration, h as formatCountdown, i as meterSeverity, m as formatCost, o as modelLabel, p as formatBytes, r as meterColorClass, s as statusPresentation, t as contextSeverity, u as windowLabel, v as formatRateLimitWindowLong, x as friendlyModel, y as formatRelativeTime } from "./status-C4TAgVSc.mjs";
 import { Fragment, forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -1089,6 +1089,6 @@ function OneOfSelect({ label, value, options, onChange }) {
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Band, Blank, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, Composer, ContextDialog, ContextRing, Conversation, ConversationContent, ConversationScrollButton, CopyAction, CopyButton, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, HostFilesDialog, Ink, Input, Loader, McpDialog, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, ProjectIcon, PromptArea, PromptTokenText, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, Row, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, SessionEmptyState, SessionInfoDialog, SessionItem, SessionList, SessionListItem, SessionPanel, SessionStatusIcon, SkillsDialog, Spinner, Splitter, StatusBar, StepRow, StepToggle, SubagentStrip, TaskList, TasksDialog, TerminalDiff, TerminalItemView, TerminalMarkdown, TerminalPermissionPrompt, TerminalQuestionPrompt, TerminalStatusLine, TerminalSurface, TerminalTranscript, Textarea, Tip, Toaster, ToolCallCard, ToolTitleProvider, TooltipContent, TooltipProvider, Transcript, TranscriptDensityProvider, TranscriptVariantProvider, UsageDialog, UsageMeters, WithActions, badgeVariants, buttonVariants, cn, commandTrigger, copyText, engineMark, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, previewPatch, rateLimitWindowSeconds, rowShapeClass, runningSteps, segmentsToPlainText, sessionSteps, skillPrompt, toast, toolIcon, toolInputPreview, useAffordances, useMinuteClock, usePromptAreaState, useToolTitle, useTranscriptDensity, useTranscriptVariant, vendorMarkClass, vendorTextClass };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Band, Blank, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, Composer, ContextDialog, ContextRing, Conversation, ConversationContent, ConversationScrollButton, CopyAction, CopyButton, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, HostFilesDialog, Ink, Input, Loader, McpDialog, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, ProjectIcon, PromptArea, PromptTokenText, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, Row, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, SessionEmptyState, SessionInfoDialog, SessionItem, SessionList, SessionListItem, SessionPanel, SessionStatusIcon, SkillsDialog, Spinner, Splitter, StatusBar, StepRow, StepToggle, SubagentStrip, TaskList, TasksDialog, TerminalDiff, TerminalItemView, TerminalMarkdown, TerminalPermissionPrompt, TerminalQuestionPrompt, TerminalStatusLine, TerminalSurface, TerminalTranscript, Textarea, Tip, Toaster, ToolCallCard, ToolTitleProvider, TooltipContent, TooltipProvider, Transcript, TranscriptDensityProvider, TranscriptVariantProvider, UsageDialog, UsageMeters, WithActions, badgeVariants, buttonVariants, cn, commandTrigger, copyText, engineMark, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, launchTrigger, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, previewPatch, rateLimitWindowSeconds, rowShapeClass, runningSteps, segmentsToPlainText, sessionSteps, skillPrompt, toast, toolIcon, toolInputPreview, useAffordances, useMinuteClock, usePromptAreaState, useToolTitle, useTranscriptDensity, useTranscriptVariant, vendorMarkClass, vendorTextClass };
 
 //# sourceMappingURL=index.mjs.map

package/build/scoped.css

@@ -980,6 +980,9 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
   }
+  .wd-root .border-\[var\(--wd-shell-accent\)\] {
+    border-color: var(--wd-shell-accent);
+  }
   .wd-root .border-border {
     border-color: var(--border);
   }
@@ -1536,6 +1539,9 @@
   .wd-root .text-\[var\(--sdm-c\,inherit\)\] {
     color: var(--sdm-c,inherit);
   }
+  .wd-root .text-\[var\(--wd-shell-accent\)\] {
+    color: var(--wd-shell-accent);
+  }
   .wd-root .text-accent {
     color: var(--accent);
   }
@@ -1855,6 +1861,9 @@
     content: var(--tw-content);
     counter-increment: line;
   }
+  .wd-root .focus-within\:border-\[var\(--wd-shell-accent\)\]:focus-within {
+    border-color: var(--wd-shell-accent);
+  }
   .wd-root .focus-within\:border-ring:focus-within {
     border-color: var(--ring);
   }
@@ -1862,6 +1871,12 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .wd-root .focus-within\:ring-\[var\(--wd-shell-accent\)\]\/30:focus-within {
+    --tw-ring-color: var(--wd-shell-accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--wd-shell-accent) 30%, transparent);
+    }
+  }
   .wd-root .focus-within\:ring-ring\/30:focus-within {
     --tw-ring-color: var(--ring);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2381,6 +2396,8 @@
   background: var(--term-user-bg);
   margin-inline: calc(-1 * var(--term-bleed, 0px));
   padding-inline: var(--term-bleed, 0px);
+  user-select: text;
+  cursor: text;
 }
 .wd-root [data-terminal] .term-link {
   text-decoration: underline;
@@ -2497,6 +2514,12 @@
 .wd-root [data-terminal].term-composer:focus-within, .wd-root [data-terminal].term-composer[data-dragging] {
   border-color: var(--term-blue);
 }
+.wd-root [data-terminal].term-composer-shell, .wd-root [data-terminal].term-composer-shell:focus-within {
+  border-color: var(--term-magenta);
+}
+.wd-root [data-terminal] .term-composer-shell-hint {
+  color: var(--term-dim);
+}
 .wd-root [data-terminal] .term-composer-field {
   font: inherit;
   color: var(--term-fg);
@@ -2834,6 +2857,7 @@
   --shine: #dcdcdc;
   --frame-shadow: var(--shadow-xs);
   --wd-scrub-bookmark: #8b3a8b;
+  --wd-shell-accent: #8b3a8b;
   --surface: var(--bg-surface);
   --sidebar: #f4f4f4;
   --text: var(--fg-1);
@@ -2886,6 +2910,7 @@
   --shine: #303030;
   --frame-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
   --wd-scrub-bookmark: #c586c0;
+  --wd-shell-accent: #c586c0;
   --surface: var(--bg-surface);
   --sidebar: #131313;
   --text: var(--fg-1);

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { Ct as Tip, Gt as Input, Jt as Button, R as EntryIcon, Tt as TooltipProvider, Xt as cn, bt as Spinner, t as SessionPanel, vt as Splitter } from "./SessionPanel-DrMj8Yv0.mjs";
+import { Et as TooltipProvider, Kt as Input, R as EntryIcon, Yt as Button, Zt as cn, t as SessionPanel, wt as Tip, xt as Spinner, yt as Splitter } from "./SessionPanel-ErvQUyHe.mjs";
 import { p as formatBytes } from "./status-C4TAgVSc.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workerdeck/ui",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "type": "module",
   "description": "Styled agent-control component library for WorkerDeck: session panel, transcript with streaming, tool-call cards, permission prompts, session list, composer. Tailwind v4 + Base UI + cva. Pairs with the headless @workerdeck/react layer.",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "streamdown": "^2.6.0",
     "tailwind-merge": "^3.6.0",
     "use-stick-to-bottom": "^1.1.6",
-    "@workerdeck/protocol": "2.1.0",
-    "@workerdeck/react": "2.1.0",
-    "@workerdeck/client": "2.1.0"
+    "@workerdeck/client": "2.2.1",
+    "@workerdeck/protocol": "2.2.1",
+    "@workerdeck/react": "2.2.1"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

package/src/components/agent/Composer.tsx

@@ -1,4 +1,14 @@
-import { useEffect, useImperativeHandle, useMemo, useRef, useState, type DragEvent, type ReactNode, type Ref } from 'react'
+import {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type DragEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  type Ref,
+} from 'react'
 import type { SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
 import type { StagedAttachment, UseAttachmentsResult } from '@workerdeck/react'
 import { ArrowUp, FileText, Paperclip, RotateCw, Sparkles, Square, TriangleAlert, X } from 'lucide-react'
@@ -7,7 +17,7 @@ import { Spinner } from '../ui/Spinner.tsx'
 import { PromptArea } from '../prompt-area/prompt-area.tsx'
 import { usePromptAreaState } from '../prompt-area/use-prompt-area-state.ts'
 import { plainTextToSegments } from '../prompt-area/prompt-area-engine.ts'
-import { commandTrigger, mentionTrigger } from '../prompt-area/trigger-presets.ts'
+import { commandTrigger, launchTrigger, mentionTrigger } from '../prompt-area/trigger-presets.ts'
 import { useTranscriptVariant } from './transcript-variant.tsx'
 import type { TerminalAffordances } from '../terminal/affordances.tsx'
 import { PROMPT_GLYPH } from '../terminal/items.tsx'
@@ -18,6 +28,9 @@ import { formatBytes } from '../../lib/format.ts'
 
 export type ComposerFileMatch = { path: string; relative: string }
 
+const SHELL_PLACEHOLDER = 'Run a command on the host…'
+const SHELL_HINT = '! shell mode · esc to exit'
+
 export type ComposerHandle = {
   insertText: (text: string) => void
   focus: () => void
@@ -32,6 +45,9 @@ export interface ComposerProps {
   commands?: SlashCommandInfo[]
   skills?: SkillInfo[]
   onSearchFiles?: (query: string, options: { signal: AbortSignal }) => Promise<ComposerFileMatch[]>
+  // Shell mode: `!` as the first character turns the composer into a host shell prompt. Omit to leave the
+  // mode off entirely — the gateway only offers it to an operator on a session whose engine reaches a host cwd.
+  onShellCommand?: (command: string) => void
   attachments?: UseAttachmentsResult
   toolbar?: ReactNode
   layout?: 'stacked' | 'inline'
@@ -72,6 +88,7 @@ export function Composer({
   commands,
   skills,
   onSearchFiles,
+  onShellCommand,
   attachments,
   toolbar,
   layout = 'stacked',
@@ -91,6 +108,7 @@ export function Composer({
   )
   const fileInput = useRef<HTMLInputElement>(null)
   const [dragging, setDragging] = useState(false)
+  const [shellMode, setShellMode] = useState(false)
 
   useImperativeHandle(
     ref,
@@ -196,8 +214,17 @@ export function Composer({
         }),
       )
     }
+    if (onShellCommand) {
+      configured.push(
+        launchTrigger({
+          char: '!',
+          accessibilityLabel: 'shell mode',
+          onActivate: () => setShellMode(true),
+        }),
+      )
+    }
     return configured.length > 0 ? configured : undefined
-  }, [commands, skills, onSearchFiles])
+  }, [commands, skills, onSearchFiles, onShellCommand])
 
   const saveDraft = draft?.save
   useEffect(() => {
@@ -211,6 +238,18 @@ export function Composer({
     if (!canSend) {
       return
     }
+    if (shellMode) {
+      const command = plainText.trim()
+      if (command === '') {
+        return
+      }
+      onShellCommand?.(command)
+      setShellMode(false)
+      draft?.clear()
+      clear()
+      focus()
+      return
+    }
     onSend(plainText.trim(), attachments?.readyIds ?? [])
     attachments?.clear()
     draft?.clear()
@@ -218,6 +257,24 @@ export function Composer({
     focus()
   }
 
+  const leaveShellMode = () => {
+    setShellMode(false)
+    focus()
+  }
+  // Escape and backspace-on-empty both leave, because both are what a person reaches for when the
+  // pink frame was not what they meant. Backspace only when there is nothing left to delete.
+  const shellKeys = shellMode
+    ? {
+        onEscape: leaveShellMode,
+        onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+          if (e.key === 'Backspace' && isEmpty) {
+            e.preventDefault()
+            leaveShellMode()
+          }
+        },
+      }
+    : {}
+
   const pick = (files: FileList | null) => {
     if (files && files.length > 0) {
       attachments?.add(files)
@@ -250,7 +307,11 @@ export function Composer({
     </>
   ) : null
 
-  const gutter = busy ? (
+  const gutter = shellMode ? (
+    <GlyphButton gutter label="Leave shell mode" tone="magenta" onClick={leaveShellMode}>
+      !
+    </GlyphButton>
+  ) : busy ? (
     <GlyphButton gutter label="Interrupt" tone="yellow" onClick={onInterrupt}>
       ✕
     </GlyphButton>
@@ -318,12 +379,12 @@ export function Composer({
           affordances={affordances}
           bleed="1ch"
           data-dragging={dragging || undefined}
-          className={cn('term-composer', disabled && 'opacity-60')}
+          className={cn('term-composer', shellMode && 'term-composer-shell', disabled && 'opacity-60')}
         >
           <div className="term-composer-body">
             {staged.length > 0 && attachments ? <AttachmentStrip attachments={attachments} /> : null}
             <div className="term-row">
-              {canAttach ? fileField : null}
+              {canAttach && !shellMode ? fileField : null}
               {gutter}
               <div className="flex min-w-0 items-start">
                 <PromptArea
@@ -333,17 +394,23 @@ export function Composer({
                   normalizeBullets={false}
                   onSubmit={submit}
                   disabled={disabled}
-                  placeholder={disabled ? 'Session ended' : placeholder}
+                  placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
                   minHeight={line}
                   maxHeight={line * 10}
-                  aria-label="Message the agent"
+                  aria-label={shellMode ? 'Run a shell command' : 'Message the agent'}
                   className="term-composer-field min-w-0 flex-1"
                   onImagePaste={(file) => attachments?.add([file])}
+                  {...shellKeys}
                 />
                 {submitButton}
               </div>
             </div>
-            {toolbar ? (
+            {shellMode ? (
+              <div className="term-row">
+                <span aria-hidden className="term-gutter" />
+                <span className="term-composer-shell-hint">{SHELL_HINT}</span>
+              </div>
+            ) : toolbar ? (
               <div className="term-row">
                 <span aria-hidden className="term-gutter" />
                 <div className="flex min-w-0 items-center gap-[1ch]">{toolbar}</div>
@@ -365,13 +432,15 @@ export function Composer({
           'transition-colors rounded-lg shadow-(--shadow-xs)',
           'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30',
           dragging && 'border-ring ring-2 ring-ring/30',
+          shellMode &&
+            'border-[var(--wd-shell-accent)] focus-within:border-[var(--wd-shell-accent)] focus-within:ring-[var(--wd-shell-accent)]/30',
           disabled && 'opacity-60',
         )}
       >
         {staged.length > 0 && attachments ? <AttachmentStrip attachments={attachments} /> : null}
         {inline ? (
           <div className="flex items-end gap-1 p-1">
-            {attach}
+            {shellMode ? <ShellBadge onLeave={leaveShellMode} /> : attach}
             <PromptArea
               {...bind}
               triggers={triggers}
@@ -379,12 +448,13 @@ export function Composer({
               normalizeBullets={false}
               onSubmit={submit}
               disabled={disabled}
-              placeholder={disabled ? 'Session ended' : placeholder}
+              placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
               minHeight={20}
               maxHeight={192}
-              aria-label="Message the agent"
+              aria-label={shellMode ? 'Run a shell command' : 'Message the agent'}
               className="min-w-0 flex-1 py-1 text-body-sm text-text"
               onImagePaste={(file) => attachments?.add([file])}
+              {...shellKeys}
             />
             {submitButton}
           </div>
@@ -397,17 +467,18 @@ export function Composer({
               normalizeBullets={false}
               onSubmit={submit}
               disabled={disabled}
-              placeholder={disabled ? 'Session ended' : placeholder}
+              placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
               minHeight={28}
               maxHeight={192}
-              aria-label="Message the agent"
+              aria-label={shellMode ? 'Run a shell command' : 'Message the agent'}
               className="px-3 pt-2.5 pb-0 text-body-sm text-text"
               onImagePaste={(file) => attachments?.add([file])}
+              {...shellKeys}
             />
             <div className="flex items-center justify-between gap-2 px-2 pb-2">
               <div className="flex min-w-0 items-center gap-1">
-                {attach}
-                {toolbar}
+                {shellMode ? <ShellBadge onLeave={leaveShellMode} /> : attach}
+                {shellMode ? <span className="text-label text-text-muted">{SHELL_HINT}</span> : toolbar}
               </div>
               {submitButton}
             </div>
@@ -428,7 +499,7 @@ function GlyphButton({
   className,
   children,
 }: {
-  tone?: 'blue' | 'yellow'
+  tone?: 'blue' | 'yellow' | 'magenta'
   label: string
   disabled?: boolean
   onClick: () => void
@@ -526,3 +597,17 @@ function extensionOf(name: string) {
   const dot = name.lastIndexOf('.')
   return dot > 0 ? name.slice(dot + 1).toUpperCase() : 'FILE'
 }
+
+function ShellBadge({ onLeave }: { onLeave: () => void }) {
+  return (
+    <button
+      type="button"
+      aria-label="Leave shell mode"
+      title="Leave shell mode"
+      onClick={onLeave}
+      className="shrink-0 rounded px-1.5 py-0.5 font-mono text-label font-semibold text-[var(--wd-shell-accent)]"
+    >
+      !
+    </button>
+  )
+}

package/src/components/agent/SessionPanel.tsx

@@ -229,10 +229,12 @@ export function SessionPanel({
     connection,
     replaying,
     protocolMismatch,
+    shell,
     models,
     effectiveModel,
     handle,
     send,
+    runShell,
     approve,
     deny,
     interrupt,
@@ -695,6 +697,7 @@ export function SessionPanel({
                       attachments={attachments}
                       draft={draft}
                       onSearchFiles={hostFiles.available ? searchComposerFiles : undefined}
+                      onShellCommand={shell ? runShell : undefined}
                       layout={controlsExternal ? 'inline' : 'stacked'}
                       toolbar={controlsExternal ? undefined : sessionControls}
                       fontSize={effectiveTermFontSize}

package/src/components/prompt-area/index.ts

@@ -5,6 +5,6 @@
  */
 export { PromptArea } from './prompt-area.tsx'
 export { usePromptAreaState } from './use-prompt-area-state.ts'
-export { commandTrigger, mentionTrigger, hashtagTrigger } from './trigger-presets.ts'
+export { commandTrigger, mentionTrigger, hashtagTrigger, launchTrigger } from './trigger-presets.ts'
 export { segmentsToPlainText, plainTextToSegments, isSegmentsEmpty, getChipsByTrigger } from './segment-helpers.ts'
 export type { PromptAreaHandle, PromptAreaProps, Segment, ChipSegment, TextSegment, TriggerConfig, TriggerSuggestion } from './types.ts'

package/src/components/prompt-area/trigger-presets.ts

@@ -131,3 +131,27 @@ export function callbackTrigger(opts: CallbackTriggerOptions): TriggerConfig {
     ...rest,
   }
 }
+
+// Launch trigger — fires onActivate and swallows the character
+
+export type LaunchTriggerOptions = Omit<Partial<TriggerConfig>, 'mode'> & {
+  /** The trigger character. Required. */
+  char: string
+}
+
+/**
+ * Creates a **launch** trigger: `onActivate` fires on keydown and the character
+ * never enters the editor. For flipping the composer into another mode, or
+ * opening a surface outside it.
+ *
+ * Defaults: `position: 'start'`, `mode: 'launch'`.
+ */
+export function launchTrigger(opts: LaunchTriggerOptions): TriggerConfig {
+  const { char, ...rest } = opts
+  return {
+    char,
+    position: 'start',
+    mode: 'launch',
+    ...rest,
+  }
+}

package/src/index.ts

@@ -28,6 +28,7 @@ export {
   commandTrigger,
   mentionTrigger,
   hashtagTrigger,
+  launchTrigger,
   segmentsToPlainText,
   plainTextToSegments,
   isSegmentsEmpty,

package/src/styles/terminal.css

@@ -401,6 +401,14 @@
   background: var(--term-user-bg);
   margin-inline: calc(-1 * var(--term-bleed, 0px));
   padding-inline: var(--term-bleed, 0px);
+  /* Declared, never inherited. This band is the one transcript block that is
+     neither a `.term-press` nor plain flow text, so without saying so it takes
+     whatever the host gives it — which differs between the browser and the VS
+     Code webview, and a block that cannot host a selection endpoint does not
+     merely refuse the drag: the selection jumps to the next valid position
+     above it, swallowing everything in between. */
+  user-select: text;
+  cursor: text;
 }
 
 [data-terminal] .term-link {
@@ -643,6 +651,17 @@
   border-color: var(--term-blue);
 }
 
+/* Shell mode. The frame and the gutter glyph move together and both go magenta, because the thing
+   the mode changes is where the text goes — a subtle cue would be the wrong kind of quiet. Listed
+   after the focus rule so it wins while the field is focused, which is the whole time it is on. */
+[data-terminal].term-composer-shell,
+[data-terminal].term-composer-shell:focus-within {
+  border-color: var(--term-magenta);
+}
+[data-terminal] .term-composer-shell-hint {
+  color: var(--term-dim);
+}
+
 /* The contentEditable field. `font: inherit` is what makes it the cell — the
    surface above already carries the size and the line height, and anything that
    restates them here can disagree with the rows. */

package/src/styles/theme.css

@@ -155,6 +155,10 @@
      and every other colour on the rail is already spoken for. */
   --wd-scrub-bookmark: #8b3a8b;
 
+  /* Shell mode's frame and glyph. The same magenta as the bookmark rail, for the same reason: the app
+     palette has no magenta, and shell mode must not read as focus (blue) or as an error (red). */
+  --wd-shell-accent: #8b3a8b;
+
   /* ---------- aliases (bridge for the @theme utilities) ---------- */
   --surface: var(--bg-surface);
   --sidebar: #f4f4f4;
@@ -238,6 +242,7 @@
 
   /* See the light block — lifted for the dark ground. */
   --wd-scrub-bookmark: #c586c0;
+  --wd-shell-accent: #c586c0;
 
   /* ---------- aliases ---------- */
   --surface: var(--bg-surface);