@workerdeck/ui 2.2.1 → 2.3.0

package/src/components/agent/QuestionPrompt.tsx

@@ -1,11 +1,16 @@
 import { useState } from 'react'
-import type { PermissionRequest, QuestionBehavior, UserQuestion, UserQuestionOption } from '@workerdeck/protocol'
+import { parseUserQuestions, type PermissionRequest, type QuestionBehavior } from '@workerdeck/protocol'
+
+// Re-exported, not redefined: the parse moved to protocol so the CLI's Live Activity builder could
+// share it. Kept on this path because `@workerdeck/ui` has published it since 1.0.0.
 import { MessageCircleQuestion, X } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
 import { Button } from '../ui/Button.tsx'
-import { Input } from '../ui/Input.tsx'
+import { Textarea } from '../ui/Textarea.tsx'
 import { cn } from '../../lib/utils.ts'
 
+export { parseUserQuestions }
+
 export type QuestionBehaviorMeta = {
   value: QuestionBehavior
   label: string
@@ -18,28 +23,6 @@ export const QUESTION_BEHAVIORS: QuestionBehaviorMeta[] = [
   { value: 'deny', label: 'Disabled', description: 'the agent is told to decide on its own' },
 ]
 
-export function parseUserQuestions(input: Record<string, unknown>): UserQuestion[] {
-  const raw = Array.isArray(input.questions) ? input.questions : []
-  return raw.flatMap((entry): UserQuestion[] => {
-    const q = entry as Partial<UserQuestion>
-    if (typeof q.question !== 'string' || !Array.isArray(q.options)) {
-      return []
-    }
-    const options = q.options.filter((o): o is UserQuestionOption => typeof (o as UserQuestionOption | undefined)?.label === 'string')
-    if (options.length === 0) {
-      return []
-    }
-    return [
-      {
-        question: q.question,
-        header: typeof q.header === 'string' ? q.header : '',
-        options,
-        multiSelect: q.multiSelect === true,
-      },
-    ]
-  })
-}
-
 type Selection = { labels: string[]; other: string; otherActive: boolean }
 
 const EMPTY_SELECTION: Selection = { labels: [], other: '', otherActive: false }
@@ -138,12 +121,13 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
                       Other…
                     </button>
                     {selection.otherActive ? (
-                      <Input
+                      <Textarea
                         autoFocus
+                        rows={1}
                         value={selection.other}
                         onChange={(e) => update(index, { other: e.target.value })}
                         placeholder="Type your own answer"
-                        className="flex-1"
+                        className="max-h-40 flex-1 overflow-y-auto py-1.5 field-sizing-content"
                       />
                     ) : null}
                   </div>

package/src/components/agent/SessionPanel.tsx

@@ -1,4 +1,13 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+} from 'react'
 import type { WorkerDeckClient } from '@workerdeck/client'
 import {
   PROTOCOL_VERSION,
@@ -8,6 +17,7 @@ import {
   usageInfos,
   type ModelOption,
   type PermissionMode,
+  type PermissionRequest,
   type RateLimitInfo,
   type SessionTask,
   type SkillInfo,
@@ -91,6 +101,14 @@ function PromptSurface({
 
 export type TerminalMetrics = { fontSize?: number; lineHeight?: number }
 
+// 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
+}
+
 export interface SessionPanelProps {
   client: WorkerDeckClient
   sessionId: string | undefined
@@ -120,6 +138,7 @@ export interface SessionPanelProps {
   focusComposerOnClick?: boolean
   unseen?: { itemCount: number; since?: number }
   readOnly?: boolean
+  approvalPrompts?: Record<string, ComponentType<ApprovalPromptProps>>
   toolHost?: UseToolCallHostOptions | false
   cacheTranscript?: boolean
   emptyState?: ReactNode
@@ -205,6 +224,7 @@ export function SessionPanel({
   focusComposerOnClick = false,
   unseen,
   readOnly = false,
+  approvalPrompts,
   toolHost,
   clientTools,
   cacheTranscript,
@@ -657,6 +677,12 @@ export function SessionPanel({
                       affordances={affordances}
                     >
                       {state.pendingApprovals.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 = approvalPrompts?.[request.toolName]
+                        if (HostPrompt) {
+                          return <HostPrompt key={request.id} request={request} onApprove={approve} onDeny={deny} />
+                        }
                         const isQuestion = request.toolName === 'AskUserQuestion' && parseUserQuestions(request.input).length > 0
                         if (terminal) {
                           return isQuestion ? (

package/src/components/agent/Transcript.tsx

@@ -196,11 +196,7 @@ export function Transcript({
                   />
                 </>
               ) : (
-                <Loader
-                  label={state.status === 'starting' ? 'Starting session…' : undefined}
-                  startedAt={runStartedAt}
-                  tokens={state.contextUsage?.totalTokens}
-                />
+                <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
               )
             ) : null}
           </TerminalShell>

package/src/components/agent/TranscriptItemView.tsx

@@ -1,7 +1,7 @@
 import type { MessageAttachment } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
-import { COMPACTION_TEXT, formatCost, formatDuration, formatRelativeTime } from '../../lib/format.ts'
+import { compactionText, formatCost, formatDuration, formatRelativeTime } from '../../lib/format.ts'
 import { FileCard } from './FileCard.tsx'
 import { Message, MessageContent } from './Message.tsx'
 import { PromptTokenText } from './PromptTokenText.tsx'
@@ -100,7 +100,7 @@ export function TranscriptItemView({
       return <NoticeRow item={item} />
     }
     case 'compaction': {
-      return <CompactionRow />
+      return <CompactionRow item={item} />
     }
     case 'file_delivered': {
       return <FileCard item={item} href={fileUrl?.(item.path)} />
@@ -111,11 +111,13 @@ export function TranscriptItemView({
   }
 }
 
-function CompactionRow() {
+function CompactionRow({ item }: { item: Extract<TranscriptItem, { kind: 'compaction' }> }) {
   return (
     <div data-slot="compaction" className="flex items-center gap-2 py-1">
       <div className="h-px flex-1 bg-border" />
-      <span className="font-mono text-label text-fg-3">≡ {COMPACTION_TEXT}</span>
+      <span className={`font-mono text-label ${item.error === undefined ? 'text-fg-3' : 'text-danger'}`}>
+        {item.pending ? '⋯' : '≡'} {compactionText(item)}
+      </span>
       <div className="h-px flex-1 bg-border" />
     </div>
   )

package/src/components/terminal/PermissionPrompt.tsx

@@ -113,7 +113,11 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
         }}
       />
       <Blank />
-      <Hint>Enter to select · ↑/↓ to navigate · 1–3 to choose · Esc to cancel</Hint>
+      <Hint>
+        {denying
+          ? 'Enter to send · Shift+Enter for a new line · Esc to go back'
+          : 'Enter to select · ↑/↓ to navigate · 1–3 to choose · Esc to cancel'}
+      </Hint>
     </div>
   )
 }

package/src/components/terminal/QuestionPrompt.tsx

@@ -122,7 +122,11 @@ export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className
         />
       )}
       <Blank />
-      <Hint>Enter to select · ↑/↓ to navigate · Tab to switch questions · Esc to cancel</Hint>
+      <Hint>
+        {!review && selection.otherActive
+          ? 'Enter to submit · Shift+Enter for a new line · Tab to switch questions · Esc to cancel'
+          : 'Enter to select · ↑/↓ to navigate · Tab to switch questions · Esc to cancel'}
+      </Hint>
     </div>
   )
 }

package/src/components/terminal/TerminalTranscript.tsx

@@ -53,7 +53,7 @@ export function TerminalItemView({ item, fileUrl }: { item: TranscriptItem; file
       return <NoticeRow item={item} />
     }
     case 'compaction': {
-      return <CompactionRow />
+      return <CompactionRow item={item} />
     }
     case 'file_delivered': {
       return <FileRow item={item} href={fileUrl?.(item.path)} />

package/src/components/terminal/height.ts

@@ -1,6 +1,6 @@
 import type { FilePatch, PatchHunk } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
-import { COMPACTION_TEXT, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
+import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { taskChildItems, type TerminalBlock, type ToolCallItem } from './blocks.ts'
 import { IMAGE_BOX_LINES } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
@@ -623,7 +623,7 @@ export function itemHeight(item: TranscriptItem, m: CellMetrics): ComputedHeight
       return rowH(item.text, m, { extraPx })
     }
     case 'compaction': {
-      return rowH(COMPACTION_TEXT, m, { extraPx })
+      return rowH(compactionText(item), m, { extraPx })
     }
     case 'file_delivered': {
       const text = `${item.path} · ${formatBytes(item.bytes)}` + (item.description ? ` · ${item.description}` : '')

package/src/components/terminal/items.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import type { TranscriptItem } from '@workerdeck/react'
-import { COMPACTION_TEXT, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
+import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { isMutatingTool } from '../../lib/tool-icon.ts'
 import { usePulse } from '../agent/pulse.tsx'
 import { BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
@@ -281,10 +281,11 @@ export function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind:
   )
 }
 
-export function CompactionRow() {
+export function CompactionRow({ item }: { item: Extract<TranscriptItem, { kind: 'compaction' }> }) {
+  const failed = item.error !== undefined
   return (
-    <Row glyph="≡" glyphTone="yellow" tone="faint">
-      {COMPACTION_TEXT}
+    <Row glyph={item.pending ? '⋯' : '≡'} glyphTone={failed ? 'red' : 'yellow'} tone={failed ? 'red' : 'faint'}>
+      {compactionText(item)}
     </Row>
   )
 }

package/src/components/terminal/prompt.tsx

@@ -162,13 +162,17 @@ export function PromptInput({
 }) {
   return (
     <Row columns={5} glyph="   ›" glyphTone="dim">
-      <input
+      <textarea
         autoFocus
+        rows={1}
         value={value}
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
         onKeyDown={(event) => {
-          if (event.key === 'Enter') {
+          // The composer's contract, so the send key means the same thing everywhere:
+          // Enter sends, Shift+Enter is the newline. `isComposing` keeps an IME's
+          // candidate-confirming Enter from submitting a half-typed answer.
+          if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
             event.preventDefault()
             onSubmit()
           }

package/src/index.ts

@@ -44,6 +44,7 @@ export {
 
 export {
   SessionPanel,
+  type ApprovalPromptProps,
   type SessionControls,
   type SessionPanelProps,
   type SessionSurfacePanel,

package/src/lib/format.ts

@@ -1,6 +1,31 @@
 // Here rather than beside the row: height.ts must measure the string items.tsx draws, and cannot import a .tsx.
 export const COMPACTION_TEXT = 'context compacted · earlier turns summarised to fit the window'
 
+export function compactionText(item: {
+  pending?: boolean
+  trigger?: 'manual' | 'auto'
+  preTokens?: number
+  postTokens?: number
+  error?: string
+}): string {
+  if (item.error) {
+    return `context compaction failed · ${item.error}`
+  }
+  if (item.pending) {
+    return 'compacting context · summarising earlier turns to fit the window'
+  }
+  const window =
+    item.preTokens === undefined
+      ? undefined
+      : item.postTokens === undefined
+        ? `from ${formatTokens(item.preTokens)}`
+        : `${formatTokens(item.preTokens)} → ${formatTokens(item.postTokens)}`
+  // The trigger is worth a word only when nobody asked for it: an automatic compaction mid-turn
+  // is the one a reader is surprised by.
+  const auto = item.trigger === 'auto' ? 'automatic' : undefined
+  return [COMPACTION_TEXT, window, auto].filter(Boolean).join(' · ')
+}
+
 export function formatCost(usd: number | undefined): string {
   if (usd === undefined || Number.isNaN(usd)) {
     return '—'

package/src/styles/terminal.css

@@ -532,6 +532,19 @@
   caret-animation: manual;
   background: linear-gradient(var(--term-faint), var(--term-faint)) bottom left / 100% 1px no-repeat;
 }
+/* The same field over more than one line. It stays on the grid for free: there is
+   no padding and `line-height` is `--term-line`, so the content box is always a
+   whole number of lines and the rule under it lands on a cell boundary. The cap is
+   lines too, not a pixel height. Where `field-sizing` is unsupported this is a
+   one-line box that scrolls — the old single-line behaviour, minus the sideways
+   crawl, so the degradation costs nothing that was there before. */
+[data-terminal] textarea.term-input {
+  display: block;
+  field-sizing: content;
+  resize: none;
+  overflow-y: auto;
+  max-height: calc(8 * var(--term-line));
+}
 [data-terminal] .term-input:focus {
   background-image: linear-gradient(var(--term-blue), var(--term-blue));
 }
@@ -559,8 +572,8 @@
  * top, not a line early.
  *
  * The lane spans the whole turn and the head is an overlay, so both are
- * transparent to the pointer — the real row beneath owns interaction, and
- * the head is `aria-hidden` in the markup. The z-index is on the lane —
+ * transparent to the pointer — the rows it covers own interaction, and the
+ * head is `aria-hidden` in the markup. The z-index is on the lane —
  * every row wrapper is its own stacking context (they are transformed), so
  * the head's own z-index could never beat a later sibling.
  *
@@ -575,6 +588,15 @@
   pointer-events: none;
 }
 
+/* The prompt itself is *inside* the lane, not beneath it, so the lane's `none`
+   reached it too and made a user message the one block in the transcript the
+   pointer could not touch: a drag started on it landed on the lane instead and
+   selected nothing. Only the real row is given back — the head overlay above
+   stays transparent, which is the whole point of the lane. */
+[data-terminal] [data-sticky-lane] > [data-index] {
+  pointer-events: auto;
+}
+
 /* The head's own strip: the full lane, out of flow, so the head needs no
    footprint-cancelling margin — sticky confinement clamps the margin box, and
    a negative margin shrinks it to nothing, letting the head overshoot the