@workerdeck/ui 0.9.0 → 0.10.0

package/src/components/agent/PermissionModeSelect.tsx

@@ -1,4 +1,6 @@
+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,
@@ -11,34 +13,94 @@ 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). */
+/**
+ * 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', label: 'default', description: 'ask for approval' },
-  { value: 'acceptEdits', label: 'acceptEdits', description: 'auto-approve file edits' },
-  { value: 'plan', label: 'plan', description: 'read-only planning' },
-  { value: 'auto', label: 'auto', description: 'model decides when to ask' },
-  { value: 'dontAsk', label: 'dontAsk', description: 'never ask — deny unapproved' },
+  {
+    value: 'default',
+    label: 'Manual',
+    shortLabel: 'Manual',
+    description: 'Always ask before making changes',
+    icon: Hand,
+  },
+  {
+    value: 'acceptEdits',
+    label: 'Accept edits',
+    shortLabel: 'Edits',
+    description: 'Automatically accept all file edits',
+    icon: Code,
+  },
+  {
+    value: 'plan',
+    label: 'Plan',
+    shortLabel: 'Plan',
+    description: 'Create a plan before making changes',
+    icon: ClipboardList,
+  },
+  {
+    value: 'auto',
+    label: 'Auto',
+    shortLabel: 'Auto',
+    description: 'Claude handles permission decisions',
+    icon: Zap,
+  },
+  {
+    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,
+  },
   {
     value: 'bypassPermissions',
-    label: 'bypassPermissions',
-    description: 'no prompts (danger)',
+    label: 'Bypass permissions',
+    shortLabel: 'Bypass',
+    description: 'Skip every approval — the agent is unsupervised',
+    icon: TriangleAlert,
     dangerous: true,
   },
 ]
 
+export const permissionModeMeta = (mode: PermissionMode): PermissionModeMeta | undefined =>
+  PERMISSION_MODES.find((m) => m.value === mode)
+
 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 provider engine has no meaning for. Defaults to all of them;
-   * pass `PROVIDER_PERMISSION_MODES` for a provider session. */
+   * 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'
@@ -51,12 +113,15 @@ export function PermissionModeSelect({
   mode,
   onModeChange,
   modes,
+  canBypass,
   variant = 'toolbar',
   disabled,
   className,
 }: 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
   return (
     <Select
       items={offered.map((m) => ({ value: m.value, label: m.label }))}
@@ -73,21 +138,33 @@ export function PermissionModeSelect({
           dangerous ? 'text-danger' : variant === 'toolbar' ? 'text-fg-3' : undefined,
           className,
         )}>
-        <span className={cn('truncate', variant === 'toolbar' && 'font-mono text-label')}>
+        <span className={cn('truncate', variant === 'toolbar' && 'text-label')}>
           <SelectValue placeholder='permissions' />
         </span>
       </SelectTrigger>
-      <SelectContent className='min-w-56'>
-        {offered.map((m) => (
-          <SelectItem key={m.value} value={m.value}>
-            <SelectItemText>
-              <span className={cn('font-medium', m.dangerous && 'text-danger')}>{m.label}</span>
-            </SelectItemText>
-            <span className={cn('text-label', m.dangerous ? 'text-danger/80' : 'text-fg-4')}>
-              {m.description}
-            </span>
-          </SelectItem>
-        ))}
+      <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={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',
+                )}>
+                {blocked ? 'Only available to a session started in this mode' : m.description}
+              </span>
+            </SelectItem>
+          )
+        })}
       </SelectContent>
     </Select>
   )

package/src/components/agent/PermissionPrompt.tsx

@@ -1,31 +1,73 @@
 import { useState } from 'react'
 import type { PermissionRequest } from '@workerdeck/protocol'
-import { ShieldAlert } from 'lucide-react'
+import { Hand } from 'lucide-react'
 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 { toolIcon } from '../../lib/tool-icon.ts'
 
 export interface PermissionPromptProps {
   request: PermissionRequest
   onApprove: (requestId: string) => void
-  onDeny: (requestId: string, message?: 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)
+  const [reason, setReason] = useState('')
+
+  const deny = (interrupt: boolean) => {
+    const message = reason.trim()
+    onDeny(request.id, message || undefined, interrupt || undefined)
+    setReason('')
+    setDenying(false)
+  }
+
+  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'>
-        <ShieldAlert className='mt-0.5 size-4 shrink-0 text-warning' />
+        <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 ?? `Claude wants to use ${request.toolName}`}
+            {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'
@@ -38,15 +80,39 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
             </pre>
           ) : null}
         </div>
-        <div className='flex shrink-0 gap-1.5'>
+        <div className='flex shrink-0 flex-wrap justify-end gap-1.5'>
           <Button size='sm' onClick={() => onApprove(request.id)}>
             Allow
           </Button>
-          <Button size='sm' variant='outline' onClick={() => onDeny(request.id, 'Denied by user')}>
+          <Button size='sm' variant='outline' onClick={() => setDenying((v) => !v)}>
             Deny
           </Button>
+          <Button size='sm' variant='outline' onClick={() => deny(true)}>
+            Deny &amp; stop
+          </Button>
         </div>
       </div>
+      {denying ? (
+        <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)
+            }}
+            placeholder='Reason (optional) — the agent reads this and can try something else'
+            className='h-7 flex-1'
+          />
+          <Button size='sm' variant='outline' onClick={() => setDenying(false)}>
+            Cancel
+          </Button>
+          <Button size='sm' variant='destructive' onClick={() => deny(false)}>
+            Deny
+          </Button>
+        </div>
+      ) : null}
     </div>
   )
 }

package/src/components/agent/PromptTokenText.tsx

@@ -0,0 +1,39 @@
+import { Fragment } from 'react'
+import { scanPromptTokens } from '@workerdeck/react'
+import { cn } from '../../lib/utils.ts'
+
+/**
+ * A sent message, with its `@file` and `/command` tokens styled the way the CLI
+ * writes them: monospace and tinted, no background — the bubble already has one,
+ * and a second fill inside it reads as a button.
+ *
+ * Literal text, never markdown: what was typed is what was sent. The one pass
+ * over it is this, so a message reads the same after sending as it did in the
+ * composer. Two tokens, two meanings — a file is a reference, a command is an
+ * action — so they are told apart by hue rather than by shape alone.
+ */
+export function PromptTokenText({ text, className }: { text: string; className?: string }) {
+  const tokens = scanPromptTokens(text)
+  if (tokens.length === 0) return <span className={className}>{text}</span>
+  const parts: React.ReactNode[] = []
+  let cursor = 0
+  for (const [index, token] of tokens.entries()) {
+    if (token.start > cursor) parts.push(text.slice(cursor, token.start))
+    parts.push(
+      <span
+        key={`${token.start}-${index}`}
+        className={cn('font-mono', token.kind === 'file' ? 'text-accent' : 'text-info')}>
+        {token.text}
+      </span>,
+    )
+    cursor = token.end
+  }
+  if (cursor < text.length) parts.push(text.slice(cursor))
+  return (
+    <span className={className}>
+      {parts.map((part, index) => (
+        <Fragment key={index}>{part}</Fragment>
+      ))}
+    </span>
+  )
+}

package/src/components/agent/SessionEmptyState.tsx

@@ -0,0 +1,65 @@
+import { AtSign, MessageSquareText, SlashSquare, Sparkles, Terminal } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+
+export interface SessionEmptyStateProps {
+  cwd?: string
+  /** Whether `/command` completion is live yet — the CLI reports its commands a
+   * beat after the session starts, and promising a feature that isn't wired up
+   * yet is worse than not mentioning it. */
+  hasCommands?: boolean
+  /** Whether the engine has reported skills the `/` popover can offer. Its own
+   * flag, not a variant of `hasCommands`: what `/` does differs — a command is
+   * submitted, a skill is typed for you to edit — and an engine can have one
+   * without the other. */
+  hasSkills?: boolean
+  /** Whether this gateway serves `@file` search for the session's directory. */
+  canBrowseFiles?: boolean
+  className?: string
+}
+
+/**
+ * What a session shows before it has said anything: where the agent is sitting,
+ * and what the composer accepts beyond prose.
+ *
+ * Every hint is conditional on the affordance actually existing — an engine
+ * without slash commands, or a gateway without host files, is not told about
+ * them. Deliberately no project name (the header already carries it) and no
+ * brand mark (its geometry is inlined in several places already and they are
+ * meant to stay identical).
+ */
+export function SessionEmptyState({
+  cwd,
+  hasCommands,
+  hasSkills,
+  canBrowseFiles,
+  className,
+}: SessionEmptyStateProps) {
+  const hints = [
+    { icon: MessageSquareText, text: 'Tell the agent what to do.' },
+    // Two keys, two hints — they are different features, not two spellings of
+    // one. `$` is codex's own sigil for skills; `/` stays the CLI's commands.
+    ...(hasCommands ? [{ icon: SlashSquare, text: 'Type / for the CLI’s slash commands.' }] : []),
+    ...(hasSkills
+      ? [{ icon: Sparkles, text: 'Type $ to draft a message for one of the agent’s skills.' }]
+      : []),
+    ...(canBrowseFiles
+      ? [{ icon: AtSign, text: 'Type @ to search this project’s files.' }]
+      : []),
+  ]
+  return (
+    <div className={cn('flex flex-col items-center gap-4 py-10', className)}>
+      <div className='flex size-12 items-center justify-center rounded-xl bg-surface text-fg-3'>
+        <Terminal className='size-5' />
+      </div>
+      {cwd ? <p className='max-w-full truncate font-mono text-label text-fg-4'>{cwd}</p> : null}
+      <ul className='w-full max-w-sm divide-y divide-border overflow-hidden rounded-lg bg-surface'>
+        {hints.map((hint) => (
+          <li key={hint.text} className='flex items-center gap-3 px-3.5 py-2.5'>
+            <hint.icon className='size-4 shrink-0 text-fg-4' />
+            <span className='text-body-sm text-fg-3'>{hint.text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/components/agent/SessionInfoDialog.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react'
+import type { WorkerDeckClient } from '@workerdeck/client'
+import type { SessionFileInfo } from '@workerdeck/protocol'
+import type { TranscriptState } from '@workerdeck/react'
+import { Download } from 'lucide-react'
+import { CopyButton } from '../ui/CopyButton.tsx'
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogRow } from '../ui/Dialog.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+import { formatBytes, formatCost, formatRelativeTime } from '../../lib/format.ts'
+import { permissionModeMeta } from './PermissionModeSelect.tsx'
+
+export interface SessionInfoDialogProps {
+  state: TranscriptState
+  client: WorkerDeckClient
+  sessionId: string | undefined
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+/**
+ * What this session *is*: engine, profile, model, mode, where it runs, which
+ * credentials it found, and the files it has handed over.
+ *
+ * The identity half of the session's facts. Context and usage have their own
+ * panels — they change every turn and are consulted mid-run, while everything
+ * here is fixed at creation and looked up once.
+ */
+export function SessionInfoDialog({
+  state,
+  client,
+  sessionId,
+  open,
+  onOpenChange,
+}: SessionInfoDialogProps) {
+  const session = state.session
+  const mode = state.permissionMode ? permissionModeMeta(state.permissionMode) : undefined
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader title='Session info' description={session?.title} />
+        <DialogBody>
+          <div className='flex flex-col divide-y divide-border'>
+            <div className='pb-2'>
+              <DialogRow label='Engine'>{state.engine ?? 'claude'}</DialogRow>
+              {session?.profile ? (
+                <DialogRow label='Profile'>{session.profile}</DialogRow>
+              ) : null}
+              {state.model ? (
+                <DialogRow label='Model' mono>
+                  {state.model}
+                </DialogRow>
+              ) : null}
+              {mode ? <DialogRow label='Permission mode'>{mode.label}</DialogRow> : null}
+              {session?.apiKeySource ? (
+                <DialogRow label='Credentials'>{session.apiKeySource}</DialogRow>
+              ) : null}
+            </div>
+            <div className='py-2'>
+              {state.cwd ? <CopyRow label='Working directory' value={state.cwd} /> : null}
+              {state.sdkSessionId ? (
+                <CopyRow label='Engine session id' value={state.sdkSessionId} />
+              ) : null}
+              {session ? <CopyRow label='Gateway session id' value={session.id} /> : null}
+            </div>
+            <div className='py-2'>
+              {session?.createdAt ? (
+                <DialogRow label='Started'>{formatRelativeTime(session.createdAt)}</DialogRow>
+              ) : null}
+              {session?.numTurns !== undefined ? (
+                <DialogRow label='Turns'>{session.numTurns}</DialogRow>
+              ) : null}
+              <DialogRow label='Cost' mono>
+                {formatCost(state.totalCostUsd)}
+              </DialogRow>
+            </div>
+            {/* Only for an engine that has a scratch VFS — for the rest the route
+                404s, and a "Files" heading over nothing reads as a failed load. */}
+            {state.capabilities.vfs ? (
+              <SessionFiles client={client} sessionId={sessionId} open={open} />
+            ) : null}
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/** Long ids are for pasting elsewhere, so give them a copy target. */
+function CopyRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className='flex items-start justify-between gap-2 py-1.5'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-label text-fg-3'>{label}</div>
+        <div className='mt-0.5 font-mono text-label break-all text-fg-1'>{value}</div>
+      </div>
+      <CopyButton value={value} aria-label={`Copy ${label.toLowerCase()}`} />
+    </div>
+  )
+}
+
+/** Files the agent produced inside the session's VFS. Fetched when the panel
+ * opens — this is not a live list and nothing pushes changes to it. */
+function SessionFiles({
+  client,
+  sessionId,
+  open,
+}: {
+  client: WorkerDeckClient
+  sessionId: string | undefined
+  open: boolean
+}) {
+  const [files, setFiles] = useState<SessionFileInfo[] | undefined>()
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!open || !sessionId) return
+    let cancelled = false
+    setLoading(true)
+    client
+      .listSessionFiles(sessionId)
+      .then((list) => {
+        if (!cancelled) setFiles(list)
+      })
+      .catch(() => {
+        if (!cancelled) setFiles([])
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [client, sessionId, open])
+
+  return (
+    <div className='pt-3'>
+      <h3 className='text-label font-medium text-fg-3'>Files</h3>
+      {loading ? (
+        <div className='py-3 text-center'>
+          <Spinner className='size-4 text-fg-4' />
+        </div>
+      ) : !files?.length ? (
+        <p className='py-2 text-body-sm text-fg-4'>Nothing delivered yet.</p>
+      ) : (
+        <ul className='mt-1 flex flex-col'>
+          {files.map((file) => (
+            <li key={file.path}>
+              <a
+                href={sessionId ? client.sessionFileUrl(sessionId, file.path) : undefined}
+                className='flex items-center gap-2 rounded-md px-1 py-1.5 hover:bg-surface-hover'>
+                <Download className='size-3.5 shrink-0 text-fg-4' />
+                <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-1'>
+                  {file.path}
+                </span>
+                <span className='shrink-0 text-label text-fg-4'>{formatBytes(file.bytes)}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}