@workerdeck/ui 2.0.0 → 2.2.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

@@ -50,7 +50,6 @@ import { BookmarkProvider, type BookmarkHandle, type TerminalAffordances } from
 import { SessionInfoDialog } from './SessionInfoDialog.tsx'
 import { StatusBar } from './StatusBar.tsx'
 import { Transcript } from './Transcript.tsx'
-import { HeldSendsBar, useHeldSends } from './held-sends.tsx'
 import { ToolResultFetchProvider } from './tool-result-fetch.tsx'
 import { ToolTitleProvider } from './tool-titles.tsx'
 import { ToolResultImageProvider, useToolResultImages } from './tool-result-image.tsx'
@@ -116,9 +115,6 @@ export interface SessionPanelProps {
   stickyPrompt?: boolean
   transcriptDensity?: TranscriptDensity
   transcriptFont?: TranscriptFont
-  // 'fold' sends a mid-turn message straight through, and the engine folds it into the running
-  // turn (catch-up mode). 'hold' keeps it here until the turn ends.
-  midTurnSend?: 'fold' | 'hold'
   controlsSurface?: 'internal' | 'external' | 'status'
   onControls?: (controls: SessionControls | undefined) => void
   focusComposerOnClick?: boolean
@@ -194,7 +190,6 @@ export function SessionPanel({
   transcriptVariant = 'cards',
   transcriptDensity = 'comfortable',
   transcriptFont = 'sans',
-  midTurnSend = 'fold',
   affordances,
   terminalMetrics,
   scrubber = false,
@@ -234,10 +229,12 @@ export function SessionPanel({
     connection,
     replaying,
     protocolMismatch,
+    shell,
     models,
     effectiveModel,
     handle,
     send,
+    runShell,
     approve,
     deny,
     interrupt,
@@ -416,8 +413,6 @@ export function SessionPanel({
     return [{ name: 'model', description: 'Switch the model for this session', argumentHint: '<model>' }, ...state.commands]
   }, [state.commands])
 
-  const heldSends = useHeldSends({ hold: midTurnSend === 'hold', busy: busy && !ended, send })
-
   const handleSend = (text: string, attachmentIds: string[]) => {
     if (attachmentIds.length === 0) {
       const modelCommand = /^\/model\s+(\S+)$/.exec(text)
@@ -432,7 +427,7 @@ export function SessionPanel({
     }
     setCaughtUp(true)
     repinTranscript.current?.()
-    heldSends.submit(text, attachmentIds)
+    send(text, attachmentIds)
   }
 
   const actionsMenu = (
@@ -691,7 +686,6 @@ export function SessionPanel({
                 ) : null}
                 {readOnly || subagentId !== undefined ? null : (
                   <>
-                    <HeldSendsBar held={heldSends.held} onSendNow={heldSends.flush} />
                     <Composer
                       ref={composerRef}
                       onSend={handleSend}
@@ -703,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/agent/SessionWorkspace.tsx

@@ -19,7 +19,6 @@ export interface SessionWorkspaceProps {
   transcriptVariant?: SessionPanelProps['transcriptVariant']
   transcriptDensity?: SessionPanelProps['transcriptDensity']
   transcriptFont?: SessionPanelProps['transcriptFont']
-  midTurnSend?: SessionPanelProps['midTurnSend']
   scrubber?: SessionPanelProps['scrubber']
   bookmarks?: SessionPanelProps['bookmarks']
   onToggleBookmark?: SessionPanelProps['onToggleBookmark']
@@ -53,7 +52,6 @@ export function SessionWorkspace({
   transcriptVariant,
   transcriptDensity,
   transcriptFont,
-  midTurnSend,
   scrubber,
   bookmarks,
   onToggleBookmark,
@@ -213,7 +211,6 @@ export function SessionWorkspace({
             transcriptVariant={transcriptVariant}
             transcriptDensity={transcriptDensity}
             transcriptFont={transcriptFont}
-            midTurnSend={midTurnSend}
             scrubber={scrubber}
             bookmarks={bookmarks}
             onToggleBookmark={onToggleBookmark}

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,
@@ -75,7 +76,6 @@ export { Reasoning, type ReasoningProps } from './components/agent/Reasoning.tsx
 export { Loader } from './components/agent/Loader.tsx'
 export { ToolCallCard, type ToolCallCardProps, type ToolCallItem } from './components/agent/ToolCallCard.tsx'
 export { ToolTitleProvider, useToolTitle } from './components/agent/tool-titles.tsx'
-export { HeldSendsBar, useHeldSends, type HeldSend, type HeldSends } from './components/agent/held-sends.tsx'
 export { FileCard, type FileCardProps, type FileDeliveredItem } from './components/agent/FileCard.tsx'
 export { PermissionPrompt, type PermissionPromptProps } from './components/agent/PermissionPrompt.tsx'
 export {

package/src/styles/terminal.css

@@ -643,6 +643,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);