@workerdeck/ui 0.23.0 → 1.0.0

package/src/components/agent/Message.tsx

@@ -5,26 +5,9 @@ export interface MessageProps extends HTMLAttributes<HTMLDivElement> {
   from: 'user' | 'assistant'
 }
 
-/**
- * One chat turn row.
- *
- * `cards`: user messages sit in a bubble, assistant content is flat and
- * full-width. Both are **left-aligned**: the transcript is a log read top to
- * bottom, and an editor-shaped host (a full-width session view beside a sessions
- * rail) has no right edge to anchor to — a bubble drifting right in a 1600px
- * column separates a prompt from the reply it produced. The bubble alone is
- * enough to say who spoke.
- *
- * The terminal theme draws none of this: it is its own renderer
- * (`components/terminal/`) and mounts instead of these rows.
- */
 export function Message({ from, className, children, ...props }: MessageProps) {
   return (
-    <div
-      data-slot='message'
-      data-from={from}
-      className={cn('flex w-full flex-col items-start gap-1', className)}
-      {...props}>
+    <div data-slot="message" data-from={from} className={cn('flex w-full flex-col items-start gap-1', className)} {...props}>
       {children}
     </div>
   )
@@ -33,11 +16,9 @@ export function Message({ from, className, children, ...props }: MessageProps) {
 export function MessageContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      data-slot='message-content'
+      data-slot="message-content"
       className={cn(
         'min-w-0 text-body-sm leading-6 text-fg-1',
-        // Bubble treatment only within a user message row.
-        // The tail points bottom-*left* now that the bubble is left-aligned.
         'in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-bl-sm',
         'in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2',
         'in-data-[from=user]:whitespace-pre-wrap',

package/src/components/agent/ModelSelect.tsx

@@ -1,112 +1,83 @@
 import type { ModelOption } from '@workerdeck/protocol'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectItemText,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/Select.tsx'
+import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
 import { cn } from '../../lib/utils.ts'
 
 export interface ModelSelectProps {
-  /** Models the session can switch to (TranscriptState.models). */
   models: ModelOption[]
-  /** The session's current model id (TranscriptState.model), possibly decorated
-   * (e.g. "claude-fable-5[1m]") — matched leniently against the options.
-   * `undefined` selects the list's default row, if it has one. */
   model?: string
-  /** `undefined` = back to the CLI's default model. */
   onModelChange: (model?: string) => void
-  /** 'toolbar' (default) is the composer's compact borderless trigger;
-   * 'form' is a standard field-sized Select for create/settings forms. */
   variant?: 'toolbar' | 'form'
   disabled?: boolean
   className?: string
 }
 
-/** The CLI's supportedModels list leads with a "Default (recommended)" row whose value
- * is a sentinel, not a model id — selecting it means "clear the override". */
-const isDefaultOption = (value: string) => value === 'default'
+function isDefaultOption(value: string) {
+  return value === 'default'
+}
 
-/** Everything before a '[1m]'-style context-window suffix. */
-const dropVariant = (id: string) => id.replace(/\[.*\]$/, '')
+function dropVariant(id: string) {
+  return id.replace(/\[.*\]$/, '')
+}
 
-/** 'claude-opus-4-8' → "opus", 'sonnet' → "sonnet". The vendor prefix and the
- * version tail are dropped; what is left is the name a person would say. */
 function family(id: string): string {
   const parts = id.toLowerCase().split('-')
-  if (parts[0] === 'claude') parts.shift()
+  if (parts[0] === 'claude') {
+    parts.shift()
+  }
   return parts[0] ?? ''
 }
 
-/**
- * Whether a row is the one naming `model`.
- *
- * Three passes, narrowest first, because the rows and the id a session *reports*
- * are written differently: the rows are aliases ('opus[1m]', 'sonnet',
- * 'claude-fable-5[1m]') and a session reports a resolved wire id
- * ('claude-opus-5[1m]'). `resolvedModel` is the server's own answer to this and
- * wins when present; the family fallback covers a server that doesn't send it,
- * which is the difference between the chip reading "Opus 5" and reading
- * `claude-opus-5[1m]`. Kept identical to the iOS client's `ModelOption.matches`.
- */
 function optionMatches(option: ModelOption, model: string): boolean {
-  if (model === option.value || model === option.resolvedModel) return true
+  if (model === option.value || model === option.resolvedModel) {
+    return true
+  }
   const stripped = dropVariant(model)
-  // A row that declares what it resolves to is *authoritative*, including when
-  // it disagrees: two rows of the same family ("Opus 5" and "Opus 4.8") differ
-  // only here, so falling through to the family would match both.
-  if (option.resolvedModel) return stripped === dropVariant(option.resolvedModel)
+  if (option.resolvedModel) {
+    return stripped === dropVariant(option.resolvedModel)
+  }
   const token = family(stripped)
   return token !== '' && token === family(dropVariant(option.value))
 }
 
-/** Find the option matching a (possibly decorated/aliased) session model id. */
 function matchModel(models: ModelOption[], model?: string): ModelOption | undefined {
-  if (!model) return undefined
+  if (!model) {
+    return undefined
+  }
   return models.filter((m) => !isDefaultOption(m.value)).find((m) => optionMatches(m, model))
 }
 
-/** Compact model switcher for the composer toolbar; fed by the `capabilities` event.
- * Rows render CLI-style: bold display name with the model's description beneath. */
-export function ModelSelect({
-  models,
-  model,
-  onModelChange,
-  variant = 'toolbar',
-  disabled,
-  className,
-}: ModelSelectProps) {
-  const selected =
-    matchModel(models, model) ?? (model ? undefined : models.find((m) => isDefaultOption(m.value)))
+export function ModelSelect({ models, model, onModelChange, variant = 'toolbar', disabled, className }: ModelSelectProps) {
+  const selected = matchModel(models, model) ?? (model ? undefined : models.find((m) => isDefaultOption(m.value)))
   return (
     <Select
       items={models.map((m) => ({ value: m.value, label: m.displayName }))}
       value={selected?.value ?? null}
       onValueChange={(value) => {
-        if (typeof value !== 'string' || value === selected?.value) return
+        if (typeof value !== 'string' || value === selected?.value) {
+          return
+        }
         onModelChange(isDefaultOption(value) ? undefined : value)
       }}
-      disabled={disabled}>
+      disabled={disabled}
+    >
       <SelectTrigger
-        aria-label='Model'
+        aria-label="Model"
         className={cn(
-          variant === 'toolbar' &&
-            'h-6 max-w-56 border-transparent bg-transparent text-fg-3 hover:bg-surface-hover',
+          variant === 'toolbar' && 'h-6 max-w-56 border-transparent bg-transparent text-fg-3 hover:bg-surface-hover',
           className,
-        )}>
+        )}
+      >
         <span className={cn('truncate', variant === 'toolbar' && 'font-mono text-label')}>
           <SelectValue placeholder={model ?? 'model'} />
         </span>
       </SelectTrigger>
-      <SelectContent className='min-w-72'>
+      <SelectContent className="min-w-72">
         {models.map((m) => (
           <SelectItem key={m.value} value={m.value}>
             <SelectItemText>
-              <span className='font-medium'>{m.displayName}</span>
+              <span className="font-medium">{m.displayName}</span>
             </SelectItemText>
-            {m.description ? <span className='text-label text-fg-4'>{m.description}</span> : null}
+            {m.description ? <span className="text-label text-fg-4">{m.description}</span> : null}
           </SelectItem>
         ))}
       </SelectContent>

package/src/components/agent/PermissionModeSelect.tsx

@@ -1,39 +1,18 @@
 import type { LucideIcon } from 'lucide-react'
 import type { PermissionMode } from '@workerdeck/protocol'
 import { ClipboardList, Code, Hand, ShieldCheck, TriangleAlert, Zap } from 'lucide-react'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectItemText,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/Select.tsx'
+import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
 import { cn } from '../../lib/utils.ts'
 
 export type PermissionModeMeta = {
   value: PermissionMode
-  /** The name Claude Code itself uses. */
   label: string
-  /** The chip form, for bars where the label shares a line with three other
-   * things and "Bypass permissions" would eat half of it. */
   shortLabel: string
-  /** What the mode actually does — the CLI's own one-liners. */
   description: string
   icon: LucideIcon
   dangerous?: boolean
 }
 
-/**
- * The modes surfaced across UI surfaces (session creation, in-session switcher),
- * ordered by how much of the approval gate they give away.
- *
- * Notably `default` is **"Manual"**: the wire value is `default`, but calling it
- * that in the UI conflates a real mode (ask me every time) with "whatever the
- * server picked", which is the one confusion a mode chip exists to avoid. The
- * naming, the icons and the summaries are shared with the iOS app on purpose —
- * the two surfaces should read as the same list.
- */
 export const PERMISSION_MODES: PermissionModeMeta[] = [
   {
     value: 'default',
@@ -60,10 +39,6 @@ export const PERMISSION_MODES: PermissionModeMeta[] = [
     value: 'auto',
     label: 'Auto',
     shortLabel: 'Auto',
-    // Engine-neutral on purpose: on claude this is the operator-configurable
-    // auto-mode classifier, on codex it is `approvalsReviewer: 'auto_review'`,
-    // a fixed OpenAI-prompted subagent. Both "something other than you decides";
-    // naming Claude here reads as a bug on a codex session.
     description: 'The agent handles permission decisions',
     icon: Zap,
   },
@@ -71,8 +46,6 @@ export const PERMISSION_MODES: PermissionModeMeta[] = [
     value: 'dontAsk',
     label: "Don't ask",
     shortLabel: "Don't ask",
-    // The CLI's own definition, and the opposite of bypass: it never prompts,
-    // and anything not already permitted is denied rather than allowed.
     description: 'Never ask — deny anything not pre-approved',
     icon: ShieldCheck,
   },
@@ -86,67 +59,40 @@ export const PERMISSION_MODES: PermissionModeMeta[] = [
   },
 ]
 
-export const permissionModeMeta = (mode: PermissionMode): PermissionModeMeta | undefined =>
-  PERMISSION_MODES.find((m) => m.value === mode)
+export function permissionModeMeta(mode: PermissionMode): PermissionModeMeta | undefined {
+  return PERMISSION_MODES.find((m) => m.value === mode)
+}
 
-/** One offered mode as plain data — no icon, no React. What a host chrome
- * outside the panel (a VS Code QuickPick) needs to draw the same list. */
 export type PermissionModeChoice = {
   value: PermissionMode
   label: string
   description: string
   dangerous?: boolean
-  /** Offered but unreachable: a session not started for bypass can never gain
-   * it, and saying so beats omitting the row. */
   disabled?: boolean
 }
 
-/**
- * The modes this session may actually be switched into, with the reasons baked
- * in — the same filtering {@link PermissionModeSelect} applies, so an embedder
- * rendering its own picker cannot drift from the panel's.
- */
-export function permissionModeChoices(
-  modes?: readonly PermissionMode[],
-  canBypass?: boolean,
-): PermissionModeChoice[] {
+export function permissionModeChoices(modes?: readonly PermissionMode[], canBypass?: boolean): PermissionModeChoice[] {
   const offered = modes ? PERMISSION_MODES.filter((m) => modes.includes(m.value)) : PERMISSION_MODES
   return offered.map((m) => ({
     value: m.value,
     label: m.label,
     description:
-      m.value === 'bypassPermissions' && canBypass === false
-        ? 'Only available to a session started in this mode'
-        : m.description,
+      m.value === 'bypassPermissions' && canBypass === false ? 'Only available to a session started in this mode' : m.description,
     dangerous: m.dangerous,
     disabled: m.value === 'bypassPermissions' && canBypass === false,
   }))
 }
 
 export interface PermissionModeSelectProps {
-  /** The session's current mode (TranscriptState.permissionMode). */
   mode?: PermissionMode
   onModeChange: (mode: PermissionMode) => void
-  /** Restrict what is offered — most of {@link PERMISSION_MODES} is Claude Code
-   * vocabulary the other engines have no meaning for. Defaults to all of them;
-   * pass the session's `capabilities.permissionModes`. */
   modes?: readonly PermissionMode[]
-  /**
-   * Whether this session may be switched into `bypassPermissions` at all. The
-   * CLI refuses unless the process was spawned for it, so a session that didn't
-   * ask up front can never gain it. The row is shown disabled rather than hidden
-   * — "you can't have this here" is a more useful answer than a row that
-   * silently isn't there. `undefined` (an older server) offers it.
-   */
   canBypass?: boolean
-  /** 'toolbar' (default) is the composer's compact borderless trigger;
-   * 'form' is a standard field-sized Select for create/settings forms. */
   variant?: 'toolbar' | 'form'
   disabled?: boolean
   className?: string
 }
 
-/** Permission-mode switcher: compact in the composer toolbar, field-sized in forms. */
 export function PermissionModeSelect({
   mode,
   onModeChange,
@@ -158,46 +104,42 @@ export function PermissionModeSelect({
 }: PermissionModeSelectProps) {
   const dangerous = mode === 'bypassPermissions'
   const offered = modes ? PERMISSION_MODES.filter((m) => modes.includes(m.value)) : PERMISSION_MODES
-  const unavailable = (meta: PermissionModeMeta) =>
-    meta.value === 'bypassPermissions' && canBypass === false
+  const unavailable = (meta: PermissionModeMeta) => meta.value === 'bypassPermissions' && canBypass === false
   return (
     <Select
       items={offered.map((m) => ({ value: m.value, label: m.label }))}
       value={mode ?? null}
       onValueChange={(value) => {
-        if (typeof value === 'string' && value !== mode) onModeChange(value as PermissionMode)
+        if (typeof value === 'string' && value !== mode) {
+          onModeChange(value as PermissionMode)
+        }
       }}
-      disabled={disabled}>
+      disabled={disabled}
+    >
       <SelectTrigger
-        aria-label='Permission mode'
+        aria-label="Permission mode"
         className={cn(
-          variant === 'toolbar' &&
-            'h-6 max-w-44 border-transparent bg-transparent hover:bg-surface-hover',
+          variant === 'toolbar' && 'h-6 max-w-44 border-transparent bg-transparent hover:bg-surface-hover',
           dangerous ? 'text-danger' : variant === 'toolbar' ? 'text-fg-3' : undefined,
           className,
-        )}>
+        )}
+      >
         <span className={cn('truncate', variant === 'toolbar' && 'text-label')}>
-          <SelectValue placeholder='permissions' />
+          <SelectValue placeholder="permissions" />
         </span>
       </SelectTrigger>
-      <SelectContent className='min-w-64'>
+      <SelectContent className="min-w-64">
         {offered.map((m) => {
           const blocked = unavailable(m)
           return (
             <SelectItem key={m.value} value={m.value} disabled={blocked}>
               <SelectItemText>
-                <span className='flex items-center gap-2'>
-                  <m.icon
-                    className={cn('size-3.5 shrink-0', m.dangerous ? 'text-danger' : 'text-fg-3')}
-                  />
+                <span className="flex items-center gap-2">
+                  <m.icon className={cn('size-3.5 shrink-0', m.dangerous ? 'text-danger' : 'text-fg-3')} />
                   <span className={cn('font-medium', m.dangerous && 'text-danger')}>{m.label}</span>
                 </span>
               </SelectItemText>
-              <span
-                className={cn(
-                  'pl-5.5 text-label',
-                  blocked ? 'text-fg-4' : m.dangerous ? 'text-danger/80' : 'text-fg-4',
-                )}>
+              <span className={cn('pl-5.5 text-label', blocked ? 'text-fg-4' : m.dangerous ? 'text-danger/80' : 'text-fg-4')}>
                 {blocked ? 'Only available to a session started in this mode' : m.description}
               </span>
             </SelectItem>

package/src/components/agent/PermissionPrompt.tsx

@@ -5,29 +5,17 @@ import { Button } from '../ui/Button.tsx'
 import { Input } from '../ui/Input.tsx'
 import { cn } from '../../lib/utils.ts'
 import { toolInputPreview } from '../../lib/format.ts'
+import { planFromRequest } from '../../lib/plan-request.ts'
 import { toolIcon } from '../../lib/tool-icon.ts'
+import { Response } from './Response.tsx'
 
 export interface PermissionPromptProps {
   request: PermissionRequest
   onApprove: (requestId: string) => void
-  /** `message` is fed back to the agent, which can then try something else;
-   * `interrupt` also stops the turn. */
   onDeny: (requestId: string, message?: string, interrupt?: boolean) => void
   className?: string
 }
 
-/**
- * Generic allow/deny prompt for a pending permission request.
- *
- * Three outcomes, not two: denying usually means "not that, try something else",
- * so plain Deny lets the turn continue (with an optional reason the agent reads)
- * while "Deny & stop" also interrupts.
- *
- * The heading is whatever the engine authored — `title`, else `displayName`.
- * Composing "wants to use {tool}" instead would be wrong for codex, where an
- * approval is usually an *escalation after a sandbox refusal* and the runner has
- * already written the sentence that says so.
- */
 export function PermissionPrompt({ request, onApprove, onDeny, className }: PermissionPromptProps) {
   const [showInput, setShowInput] = useState(false)
   const [denying, setDenying] = useState(false)
@@ -40,76 +28,84 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
     setDenying(false)
   }
 
+  const plan = planFromRequest(request)
   const summary = toolInputPreview(request.input)
   const ToolIcon = toolIcon(request.toolName)
 
   return (
-    <div
-      data-slot='permission-prompt'
-      className={cn('rounded-lg border border-warning/40 bg-warning-bg p-3', className)}>
-      <div className='flex items-start gap-2.5'>
-        <Hand className='mt-0.5 size-4 shrink-0 text-warning' />
-        <div className='min-w-0 flex-1'>
-          <div className='text-body-sm font-medium text-fg-1'>
-            {request.title ?? request.displayName ?? 'Permission needed'}
+    <div data-slot="permission-prompt" className={cn('rounded-lg border border-warning/40 bg-warning-bg p-3', className)}>
+      <div className="flex items-start gap-2.5">
+        <Hand className="mt-0.5 size-4 shrink-0 text-warning" />
+        <div className="min-w-0 flex-1">
+          <div className="text-body-sm font-medium text-fg-1">
+            {plan ? 'Plan ready for review' : (request.title ?? request.displayName ?? 'Permission needed')}
           </div>
-          {request.description ? (
-            <div className='mt-0.5 text-label text-fg-3'>{request.description}</div>
-          ) : null}
-          {request.decisionReason ? (
-            <div className='mt-0.5 text-label text-fg-4'>{request.decisionReason}</div>
-          ) : null}
-          <div className='mt-1.5 flex min-w-0 items-center gap-2'>
-            <ToolIcon className='size-3 shrink-0 text-fg-3' />
-            <span className='shrink-0 font-mono text-label font-medium text-fg-2'>
-              {request.toolName}
-            </span>
-            {summary ? (
-              <span className='min-w-0 truncate font-mono text-label text-fg-4'>{summary}</span>
-            ) : null}
-          </div>
-          <button
-            type='button'
-            className='mt-1 font-mono text-label text-fg-3 underline-offset-2 hover:underline'
-            onClick={() => setShowInput((v) => !v)}>
-            {showInput ? 'Hide' : 'Show'} {request.toolName} input
-          </button>
-          {showInput ? (
-            <pre className='mt-1.5 max-h-48 overflow-auto rounded-md bg-code-bg px-2.5 py-1.5 font-mono text-label whitespace-pre-wrap text-fg-2'>
-              {JSON.stringify(request.input, null, 2)}
-            </pre>
-          ) : null}
+          {request.description ? <div className="mt-0.5 text-label text-fg-3">{request.description}</div> : null}
+          {request.decisionReason ? <div className="mt-0.5 text-label text-fg-4">{request.decisionReason}</div> : null}
+          {plan ? (
+            <div className="mt-1.5 max-h-72 overflow-y-auto rounded-md bg-code-bg px-2.5 py-2 text-body-sm text-fg-2">
+              <Response>{plan}</Response>
+            </div>
+          ) : (
+            <>
+              <div className="mt-1.5 flex min-w-0 items-center gap-2">
+                <ToolIcon className="size-3 shrink-0 text-fg-3" />
+                <span className="shrink-0 font-mono text-label font-medium text-fg-2">{request.toolName}</span>
+                {summary ? <span className="min-w-0 truncate font-mono text-label text-fg-4">{summary}</span> : null}
+              </div>
+              <button
+                type="button"
+                className="mt-1 font-mono text-label text-fg-3 underline-offset-2 hover:underline"
+                onClick={() => setShowInput((v) => !v)}
+              >
+                {showInput ? 'Hide' : 'Show'} {request.toolName} input
+              </button>
+              {showInput ? (
+                <pre className="mt-1.5 max-h-48 overflow-auto rounded-md bg-code-bg px-2.5 py-1.5 font-mono text-label whitespace-pre-wrap text-fg-2">
+                  {JSON.stringify(request.input, null, 2)}
+                </pre>
+              ) : null}
+            </>
+          )}
         </div>
-        <div className='flex shrink-0 flex-wrap justify-end gap-1.5'>
-          <Button size='sm' onClick={() => onApprove(request.id)}>
-            Allow
+        <div className="flex shrink-0 flex-wrap justify-end gap-1.5">
+          <Button size="sm" onClick={() => onApprove(request.id)}>
+            {plan ? 'Approve plan' : 'Allow'}
           </Button>
-          <Button size='sm' variant='outline' onClick={() => setDenying((v) => !v)}>
-            Deny
+          <Button size="sm" variant="outline" onClick={() => setDenying((v) => !v)}>
+            {plan ? 'Keep planning' : 'Deny'}
           </Button>
-          <Button size='sm' variant='outline' onClick={() => deny(true)}>
-            Deny &amp; stop
+          <Button size="sm" variant="outline" onClick={() => deny(true)}>
+            {plan ? 'Stop the turn' : 'Deny & stop'}
           </Button>
         </div>
       </div>
       {denying ? (
-        <div className='mt-2.5 flex items-center gap-2 border-t border-warning/30 pt-2.5'>
+        <div className="mt-2.5 flex items-center gap-2 border-t border-warning/30 pt-2.5">
           <Input
             autoFocus
             value={reason}
             onChange={(e) => setReason(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === 'Enter') deny(false)
-              if (e.key === 'Escape') setDenying(false)
+              if (e.key === 'Enter') {
+                deny(false)
+              }
+              if (e.key === 'Escape') {
+                setDenying(false)
+              }
             }}
-            placeholder='Reason (optional) — the agent reads this and can try something else'
-            className='h-7 flex-1'
+            placeholder={
+              plan
+                ? 'What should change? (optional) — the agent keeps planning and reads this'
+                : 'Reason (optional) — the agent reads this and can try something else'
+            }
+            className="h-7 flex-1"
           />
-          <Button size='sm' variant='outline' onClick={() => setDenying(false)}>
+          <Button size="sm" variant="outline" onClick={() => setDenying(false)}>
             Cancel
           </Button>
-          <Button size='sm' variant='destructive' onClick={() => deny(false)}>
-            Deny
+          <Button size="sm" variant="destructive" onClick={() => deny(false)}>
+            {plan ? 'Keep planning' : 'Deny'}
           </Button>
         </div>
       ) : null}