@workerdeck/ui 3.0.1 → 3.2.0

package/build/workspace.d.mts

@@ -1,4 +1,4 @@
-import { i as SessionPanelProps } from "./SessionPanel-C1bU4yTM.mjs";
+import { r as SessionPanelProps } from "./SessionPanel-BNNc8grK.mjs";
 import { CSSProperties } from "react";
 import { ShellInfo } from "@workerdeck/protocol";
 import { OpenFile, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { $t as Tip, A as ShellTerminal, Dn as cn, Jt as Splitter, Sn as Input, Tn as Button, U as EntryIcon, Xt as Spinner, i as SessionPanel, n as usePathLinks, t as resolveAgainstCwd, tn as TooltipProvider } from "./use-path-links-BEWxt0ZM.mjs";
+import { $t as Spinner, En as Input, N as ShellTerminal, Zt as Splitter, i as SessionPanel, in as TooltipProvider, jn as cn, kn as Button, n as usePathLinks, nn as Tip, q as EntryIcon, t as resolveAgainstCwd } from "./use-path-links-C6Fh5zdx.mjs";
 import { m as formatBytes } from "./status-kmsBhuFG.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": "3.0.1",
+  "version": "3.2.0",
   "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.7.0",
     "use-stick-to-bottom": "^1.1.6",
-    "@workerdeck/client": "3.0.1",
-    "@workerdeck/react": "3.0.1",
-    "@workerdeck/protocol": "3.0.1"
+    "@workerdeck/client": "3.2.0",
+    "@workerdeck/protocol": "3.2.0",
+    "@workerdeck/react": "3.2.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

package/src/components/agent/ApprovalPrompts.tsx

@@ -0,0 +1,87 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { PermissionRequest } from '@workerdeck/protocol'
+import { cn } from '../../lib/utils.ts'
+import { PermissionPrompt } from './PermissionPrompt.tsx'
+import { QuestionPrompt, parseUserQuestions } from './QuestionPrompt.tsx'
+import { TerminalPermissionPrompt } from '../terminal/PermissionPrompt.tsx'
+import { TerminalQuestionPrompt } from '../terminal/QuestionPrompt.tsx'
+import { TerminalSurface } from '../terminal/surface.tsx'
+import type { TerminalAffordances } from '../terminal/affordances.tsx'
+
+// Deliberately the built-in prompts' own callback shapes, so `PermissionPrompt` and
+// `TerminalPermissionPrompt` stay drop-in fallbacks for an input a host declines to draw.
+export interface ApprovalPromptProps {
+  request: PermissionRequest
+  onApprove: (requestId: string, updatedInput?: Record<string, unknown>) => void
+  onDeny: (requestId: string, message?: string, interrupt?: boolean) => void
+}
+
+type ApprovalPromptsProps = {
+  requests: readonly PermissionRequest[]
+  terminal: boolean
+  fontSize?: number
+  lineHeight?: number
+  affordances?: TerminalAffordances | boolean
+  hostPrompts?: Record<string, ComponentType<ApprovalPromptProps>>
+  onApprove: ApprovalPromptProps['onApprove']
+  onDeny: ApprovalPromptProps['onDeny']
+}
+
+export function ApprovalPrompts({
+  requests,
+  terminal,
+  fontSize,
+  lineHeight,
+  affordances,
+  hostPrompts,
+  onApprove,
+  onDeny,
+}: ApprovalPromptsProps) {
+  const dismissQuestion = (id: string) => onDeny(id, 'Question dismissed by user')
+  return (
+    <div className={cn(terminal ? 'pb-2' : 'px-3 pb-2')}>
+      <PromptSurface terminal={terminal} fontSize={fontSize} lineHeight={lineHeight} affordances={affordances}>
+        {requests.map((request) => {
+          // Before the variant split: a host's entry is the renderer for its tool in
+          // both themes, and it overrides the built-in entries rather than racing them.
+          const HostPrompt = hostPrompts?.[request.toolName]
+          if (HostPrompt) {
+            return <HostPrompt key={request.id} request={request} onApprove={onApprove} onDeny={onDeny} />
+          }
+          const isQuestion = request.toolName === 'AskUserQuestion' && parseUserQuestions(request.input).length > 0
+          if (terminal) {
+            return isQuestion ? (
+              <TerminalQuestionPrompt key={request.id} request={request} onAnswer={onApprove} onDismiss={dismissQuestion} />
+            ) : (
+              <TerminalPermissionPrompt key={request.id} request={request} onApprove={onApprove} onDeny={onDeny} />
+            )
+          }
+          return isQuestion ? (
+            <QuestionPrompt key={request.id} request={request} onAnswer={onApprove} onDismiss={dismissQuestion} />
+          ) : (
+            <PermissionPrompt key={request.id} request={request} onApprove={onApprove} onDeny={onDeny} />
+          )
+        })}
+      </PromptSurface>
+    </div>
+  )
+}
+
+type PromptSurfaceProps = {
+  terminal: boolean
+  fontSize?: number
+  lineHeight?: number
+  affordances?: TerminalAffordances | boolean
+  children: ReactNode
+}
+
+function PromptSurface({ terminal, fontSize, lineHeight, affordances, children }: PromptSurfaceProps) {
+  if (!terminal) {
+    return <div className="mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] flex-col gap-2">{children}</div>
+  }
+  return (
+    <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} affordances={affordances} bleed="1ch" className="term-transcript">
+      {children}
+    </TerminalSurface>
+  )
+}

package/src/components/agent/Composer.tsx

@@ -394,6 +394,26 @@ export function Composer({
     </div>
   ) : null
 
+  const stagedStrip = staged.length > 0 && attachments ? <AttachmentStrip attachments={attachments} /> : null
+
+  const field = (minHeight: number, maxHeight: number, fieldClass: string) => (
+    <PromptArea
+      {...bind}
+      triggers={triggers}
+      markdown={false}
+      normalizeBullets={false}
+      onSubmit={submit}
+      disabled={disabled}
+      placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      aria-label={shellMode ? 'Run a shell command' : 'Message the agent'}
+      className={fieldClass}
+      onImagePaste={(file) => attachments?.add([file])}
+      {...shellKeys}
+    />
+  )
+
   if (terminal) {
     const line = lineHeight ?? 18
     return (
@@ -408,26 +428,12 @@ export function Composer({
           className={cn('term-composer', shellMode && 'term-composer-shell', disabled && 'opacity-60')}
         >
           <div className="term-composer-body">
-            {staged.length > 0 && attachments ? <AttachmentStrip attachments={attachments} /> : null}
+            {stagedStrip}
             <div className="term-row">
               {canAttach && !shellMode ? fileField : null}
               {gutter}
               <div className="flex min-w-0 items-start">
-                <PromptArea
-                  {...bind}
-                  triggers={triggers}
-                  markdown={false}
-                  normalizeBullets={false}
-                  onSubmit={submit}
-                  disabled={disabled}
-                  placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
-                  minHeight={line}
-                  maxHeight={line * 10}
-                  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}
-                />
+                {field(line, line * 10, 'term-composer-field min-w-0 flex-1')}
                 {submitButton}
               </div>
             </div>
@@ -470,44 +476,16 @@ export function Composer({
           disabled && 'opacity-60',
         )}
       >
-        {staged.length > 0 && attachments ? <AttachmentStrip attachments={attachments} /> : null}
+        {stagedStrip}
         {inline ? (
           <div className="flex items-end gap-1 p-1">
             {shellMode ? <ShellBadge onLeave={() => leaveShellMode(false)} /> : attach}
-            <PromptArea
-              {...bind}
-              triggers={triggers}
-              markdown={false}
-              normalizeBullets={false}
-              onSubmit={submit}
-              disabled={disabled}
-              placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
-              minHeight={20}
-              maxHeight={192}
-              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}
-            />
+            {field(20, 192, 'min-w-0 flex-1 py-1 text-body-sm text-text')}
             {submitButton}
           </div>
         ) : (
           <>
-            <PromptArea
-              {...bind}
-              triggers={triggers}
-              markdown={false}
-              normalizeBullets={false}
-              onSubmit={submit}
-              disabled={disabled}
-              placeholder={disabled ? 'Session ended' : shellMode ? SHELL_PLACEHOLDER : placeholder}
-              minHeight={28}
-              maxHeight={192}
-              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}
-            />
+            {field(28, 192, 'px-3 pt-2.5 pb-0 text-body-sm text-text')}
             <div className="flex items-center justify-between gap-2 px-2 pb-2">
               <div className="flex min-w-0 items-center gap-1">
                 {shellMode ? <ShellBadge onLeave={() => leaveShellMode(false)} /> : attach}

package/src/components/agent/ContextDialog.tsx

@@ -14,81 +14,89 @@ export interface ContextDialogProps {
   className?: string
 }
 
+export interface ContextPanelProps {
+  usage?: ContextUsage
+  engine?: ProfileEngine
+}
+
 export function ContextDialog({ usage, engine, open, onOpenChange, className }: ContextDialogProps) {
-  const note = contextNote(engine)
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className}>
         <DialogHeader title="Context" description={usage?.model} />
         <DialogBody>
-          {!usage ? (
-            <p className="py-6 text-center text-body-sm text-fg-4">
-              No reading yet - the context window is measured after a turn completes.
-            </p>
-          ) : (
-            <>
-              <div className="flex items-baseline justify-between gap-4">
-                <span className="text-label text-fg-3">Used</span>
-                <span className="font-mono text-body-sm text-fg-1">
-                  {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} · {usage.percentage.toFixed(0)}%
-                </span>
-              </div>
-              <div className="mt-2 h-2 overflow-hidden rounded-full bg-border">
-                <div
-                  className={cn('h-full rounded-full', meterTintClass(usage.percentage))}
-                  style={{ width: `${Math.min(100, Math.max(2, usage.percentage))}%` }}
-                />
-              </div>
-              {usage.categories.length > 0 ? (
-                <div className="mt-5">
-                  <h3 className="text-label font-medium text-fg-3">Breakdown</h3>
-                  <div className="mt-2 flex flex-col gap-3">
-                    {usage.categories.map((category) => {
-                      const share = (category.tokens / Math.max(usage.maxTokens, 1)) * 100
-                      const color = cssColor(category.color)
-                      return (
-                        <div key={category.name}>
-                          <div className="flex items-baseline justify-between gap-3">
-                            <span className="flex min-w-0 items-center gap-2">
-                              <span
-                                className="size-2 shrink-0 rounded-full bg-fg-4"
-                                style={color ? { backgroundColor: color } : undefined}
-                              />
-                              <span className="truncate text-body-sm text-fg-1">{category.name}</span>
-                            </span>
-                            <span className="shrink-0 font-mono text-label text-fg-3">{formatTokens(category.tokens)}</span>
-                          </div>
-                          <div className="mt-1 h-1 overflow-hidden rounded-full bg-border">
-                            <div
-                              className="h-full rounded-full bg-fg-4"
-                              style={{
-                                width: `${Math.min(100, share)}%`,
-                                backgroundColor: color,
-                              }}
-                            />
-                          </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-                </div>
-              ) : null}
-            </>
-          )}
-          {note ? (
-            <div className="mt-5 border-t border-border pt-4">
-              <h3 className="text-label font-medium text-fg-3">Why this window is 272K</h3>
-              <p className="mt-2 text-body-sm text-fg-2">{note.summary}</p>
-              {note.detail.map((line) => (
-                <p key={line} className="mt-2 text-body-sm text-fg-3">
-                  {line}
-                </p>
-              ))}
-              <p className="mt-2 text-body-sm text-warning">{note.caveat}</p>
-            </div>
-          ) : null}
+          <ContextPanel usage={usage} engine={engine} />
         </DialogBody>
       </DialogContent>
     </Dialog>
   )
 }
+
+export function ContextPanel({ usage, engine }: ContextPanelProps) {
+  const note = contextNote(engine)
+  return (
+    <>
+      {!usage ? (
+        <p className="py-6 text-center text-body-sm text-fg-4">No reading yet - the context window is measured after a turn completes.</p>
+      ) : (
+        <>
+          <div className="flex items-baseline justify-between gap-4">
+            <span className="text-label text-fg-3">Used</span>
+            <span className="font-mono text-body-sm text-fg-1">
+              {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} · {usage.percentage.toFixed(0)}%
+            </span>
+          </div>
+          <div className="mt-2 h-2 overflow-hidden rounded-full bg-border">
+            <div
+              className={cn('h-full rounded-full', meterTintClass(usage.percentage))}
+              style={{ width: `${Math.min(100, Math.max(2, usage.percentage))}%` }}
+            />
+          </div>
+          {usage.categories.length > 0 ? (
+            <div className="mt-5">
+              <h3 className="text-label font-medium text-fg-3">Breakdown</h3>
+              <div className="mt-2 flex flex-col gap-3">
+                {usage.categories.map((category) => {
+                  const share = (category.tokens / Math.max(usage.maxTokens, 1)) * 100
+                  const color = cssColor(category.color)
+                  return (
+                    <div key={category.name}>
+                      <div className="flex items-baseline justify-between gap-3">
+                        <span className="flex min-w-0 items-center gap-2">
+                          <span className="size-2 shrink-0 rounded-full bg-fg-4" style={color ? { backgroundColor: color } : undefined} />
+                          <span className="truncate text-body-sm text-fg-1">{category.name}</span>
+                        </span>
+                        <span className="shrink-0 font-mono text-label text-fg-3">{formatTokens(category.tokens)}</span>
+                      </div>
+                      <div className="mt-1 h-1 overflow-hidden rounded-full bg-border">
+                        <div
+                          className="h-full rounded-full bg-fg-4"
+                          style={{
+                            width: `${Math.min(100, share)}%`,
+                            backgroundColor: color,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          ) : null}
+        </>
+      )}
+      {note ? (
+        <div className="mt-5 border-t border-border pt-4">
+          <h3 className="text-label font-medium text-fg-3">Why this window is 272K</h3>
+          <p className="mt-2 text-body-sm text-fg-2">{note.summary}</p>
+          {note.detail.map((line) => (
+            <p key={line} className="mt-2 text-body-sm text-fg-3">
+              {line}
+            </p>
+          ))}
+          <p className="mt-2 text-body-sm text-warning">{note.caveat}</p>
+        </div>
+      ) : null}
+    </>
+  )
+}

package/src/components/agent/FrameStrip.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+import { Button } from '../ui/Button.tsx'
+import { Ink, Row } from '../terminal/row.tsx'
+import { TerminalSurface } from '../terminal/surface.tsx'
+import { WithActions } from '../terminal/affordances.tsx'
+
+export type FrameKind = 'shell' | 'subagent'
+
+export interface FrameStripProps {
+  kind: FrameKind
+  name: string
+  status?: string
+  detail?: string
+  failed: boolean
+  live: boolean
+  onBack: () => void
+  // Drawn at the strip's trailing edge; a terminal strip then hangs them inline, which is why only the name stays the Back target.
+  actions?: ReactNode
+  terminal: boolean
+  fontSize?: number
+  lineHeight?: number
+}
+
+const TERMINAL_TONE = { shell: { name: 'magenta', live: 'magenta' }, subagent: { name: 'green', live: 'mark' } } as const
+const CARDS_LIVE_CLASS: Record<FrameKind, string> = { shell: 'text-[var(--wd-shell-accent)]', subagent: 'text-accent' }
+
+export function FrameStrip({ kind, name, status, detail, failed, live, onBack, actions, terminal, fontSize, lineHeight }: FrameStripProps) {
+  if (terminal) {
+    const tones = TERMINAL_TONE[kind]
+    const line = (label: ReactNode) => (
+      <Row glyph="←" glyphTone="dim" indent={1} tone={failed ? 'red' : tones.name}>
+        {label}
+        {status ? <Ink tone={failed ? 'red' : live ? tones.live : 'dim'}> · {status}</Ink> : null}
+        {detail ? <Ink tone="faint"> · {detail}</Ink> : null}
+      </Row>
+    )
+    return (
+      <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} className="shrink-0">
+        {actions === undefined ? (
+          <button type="button" onClick={onBack} aria-label="Back to the session" className="block w-full cursor-pointer text-left">
+            {line(name)}
+          </button>
+        ) : (
+          <WithActions placement="inline" actions={actions}>
+            {line(
+              <button type="button" onClick={onBack} aria-label="Back to the session" className="cursor-pointer text-left">
+                {name}
+              </button>,
+            )}
+          </WithActions>
+        )}
+      </TerminalSurface>
+    )
+  }
+
+  return (
+    <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+      <Button variant="ghost" size="sm" onClick={onBack} className="h-6 gap-1 px-1.5">
+        <ArrowLeft className="size-3.5" />
+        Back
+      </Button>
+      <span className={cn('min-w-0 flex-1 truncate text-body-sm', kind === 'shell' && 'font-mono', failed ? 'text-danger' : 'text-fg-2')}>
+        {name}
+      </span>
+      {status ? (
+        <span className={cn('shrink-0 text-label', failed ? 'text-danger' : live ? CARDS_LIVE_CLASS[kind] : 'text-fg-3')}>{status}</span>
+      ) : null}
+      {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
+      {actions}
+    </div>
+  )
+}

package/src/components/agent/HostFilesDialog.tsx

@@ -1,3 +1,4 @@
+import { errorMessage } from '@workerdeck/protocol'
 import { useCallback, useEffect, useState } from 'react'
 import type { WorkerDeckClient } from '@workerdeck/client'
 import type { HostDirEntry, HostFileMatch } from '@workerdeck/protocol'
@@ -37,7 +38,7 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
         setEntries(response.entries)
         setTruncated(response.truncated ?? false)
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Could not read that directory')
+        setError(errorMessage(e, 'Could not read that directory'))
       } finally {
         setLoading(false)
       }
@@ -87,7 +88,7 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
         content: response.encoding === 'utf8' ? response.content : '(binary file - not shown)',
       })
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read that file')
+      setError(errorMessage(e, 'Could not read that file'))
     } finally {
       setLoading(false)
     }