@workerdeck/ui 2.15.0 → 3.1.0

package/src/lib/permission-prompt.ts

@@ -0,0 +1,57 @@
+import type { PermissionRequest } from '@workerdeck/protocol'
+import { planFromRequest } from './plan-request.ts'
+import { shellRequestPayload, shellRequestTitle, type ShellRequestPayload } from './shell-request.ts'
+
+export type PermissionChoiceKey = 'allow' | 'deny' | 'stop'
+
+export type PermissionChoice = {
+  key: PermissionChoiceKey
+  button: string
+  option: string
+  danger?: boolean
+}
+
+export type PermissionPromptModel = {
+  plan?: string
+  shell?: ShellRequestPayload
+  heading: string
+  question: string
+  description?: string
+  decisionReason?: string
+  choices: [PermissionChoice, PermissionChoice, PermissionChoice]
+  denyPlaceholder: string
+}
+
+type PermissionRequestLike = Pick<PermissionRequest, 'toolName' | 'input' | 'title' | 'displayName' | 'description' | 'decisionReason'>
+
+export function permissionPromptModel(request: PermissionRequestLike): PermissionPromptModel {
+  const plan = planFromRequest(request)
+  const shell = plan ? undefined : shellRequestPayload(request)
+  const context = { description: request.description, decisionReason: request.decisionReason }
+  if (plan) {
+    return {
+      plan,
+      heading: 'Plan ready for review',
+      question: 'Ready to implement this plan?',
+      ...context,
+      choices: [
+        { key: 'allow', button: 'Approve plan', option: 'Approve plan' },
+        { key: 'deny', button: 'Keep planning', option: 'Keep planning - tell it what to change' },
+        { key: 'stop', button: 'Stop the turn', option: 'No, and stop the turn', danger: true },
+      ],
+      denyPlaceholder: 'What should change? (optional) - the agent keeps planning and reads this',
+    }
+  }
+  return {
+    shell,
+    heading: shell ? shellRequestTitle(shell) : (request.title ?? request.displayName ?? 'Permission needed'),
+    question: shell ? 'Do you want to let it?' : 'Do you want to proceed?',
+    ...context,
+    choices: [
+      { key: 'allow', button: 'Allow', option: 'Yes' },
+      { key: 'deny', button: 'Deny', option: 'No, and tell the agent what to do differently' },
+      { key: 'stop', button: 'Deny & stop', option: 'No, and stop the turn', danger: true },
+    ],
+    denyPlaceholder: 'Reason (optional) - the agent reads this and can try something else',
+  }
+}

package/src/lib/question-answers.ts

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import type { UserQuestion } from '@workerdeck/protocol'
+
+export type Selection = { labels: string[]; other: string; otherActive: boolean }
+
+export const EMPTY_SELECTION: Selection = { labels: [], other: '', otherActive: false }
+
+export function answerFor(selection: Selection): string {
+  const parts = [...selection.labels]
+  if (selection.otherActive && selection.other.trim()) {
+    parts.push(selection.other.trim())
+  }
+  return parts.join(', ')
+}
+
+export function toggleLabel(selection: Selection, label: string, multiSelect: boolean): Selection {
+  if (!multiSelect) {
+    return { ...selection, labels: [label], otherActive: false }
+  }
+  const labels = selection.labels.includes(label) ? selection.labels.filter((l) => l !== label) : [...selection.labels, label]
+  return { ...selection, labels }
+}
+
+export function toggleOther(selection: Selection, multiSelect: boolean): Selection {
+  const otherActive = !selection.otherActive
+  return { ...selection, otherActive, labels: otherActive && !multiSelect ? [] : selection.labels }
+}
+
+export function answersFor(questions: readonly UserQuestion[], selections: readonly Selection[]): Record<string, string> {
+  const answers: Record<string, string> = {}
+  questions.forEach((question, index) => {
+    answers[question.question] = answerFor(selections[index] ?? EMPTY_SELECTION)
+  })
+  return answers
+}
+
+export interface QuestionAnswers {
+  selections: Selection[]
+  selectionFor: (index: number) => Selection
+  answered: (index: number) => boolean
+  complete: boolean
+  update: (index: number, patch: Partial<Selection>) => void
+  toggle: (index: number, label: string) => void
+  toggleOther: (index: number) => void
+  answers: () => Record<string, string>
+}
+
+export function useQuestionAnswers(questions: readonly UserQuestion[]): QuestionAnswers {
+  const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY_SELECTION))
+  const selectionFor = (index: number) => selections[index] ?? EMPTY_SELECTION
+  const answered = (index: number) => answerFor(selectionFor(index)) !== ''
+  const edit = (index: number, change: (selection: Selection) => Selection) =>
+    setSelections((prev) => questions.map((_, i) => (i === index ? change(prev[i] ?? EMPTY_SELECTION) : (prev[i] ?? EMPTY_SELECTION))))
+  const multiSelect = (index: number) => questions[index]?.multiSelect === true
+  return {
+    selections,
+    selectionFor,
+    answered,
+    complete: questions.every((_, index) => answered(index)),
+    update: (index, patch) => edit(index, (selection) => ({ ...selection, ...patch })),
+    toggle: (index, label) => edit(index, (selection) => toggleLabel(selection, label, multiSelect(index))),
+    toggleOther: (index) => edit(index, (selection) => toggleOther(selection, multiSelect(index))),
+    answers: () => answersFor(questions, selections),
+  }
+}

package/src/lib/shell-request.ts

@@ -0,0 +1,115 @@
+// The agent's shell write tools on a permission card. Allow-lists key on the tool name, and the danger is in the
+// payload, so the card shows the command, the typed text and the keys verbatim rather than a JSON summary.
+export type ShellRequestPayload =
+  | { kind: 'run'; command: string }
+  | { kind: 'write'; shellId: string; data?: string; keys?: string[] }
+  | { kind: 'kill'; shellId: string }
+  | { kind: 'grant'; shellId: string; reason: string }
+
+type RequestLike = { toolName?: unknown; input?: unknown }
+
+const CONTROL_NAMES: Record<string, string> = {
+  '\r': 'enter',
+  '\n': 'newline',
+  '\t': 'tab',
+  '\x1b': 'escape',
+  '\x7f': 'backspace',
+}
+
+type ShellWriteTool = 'shell_run' | 'shell_write' | 'shell_kill' | 'shell_request_write'
+
+const SHELL_WRITE_TOOLS: readonly string[] = ['shell_run', 'shell_write', 'shell_kill', 'shell_request_write']
+
+export function shellToolOf(toolName: unknown): ShellWriteTool | undefined {
+  if (typeof toolName !== 'string') {
+    return undefined
+  }
+  const bare = toolName.startsWith('mcp__') ? toolName.slice(toolName.indexOf('__', 5) + 2) : toolName
+  return SHELL_WRITE_TOOLS.includes(bare) ? (bare as ShellWriteTool) : undefined
+}
+
+export function shellRequestPayload(request: RequestLike | null | undefined): ShellRequestPayload | undefined {
+  const tool = shellToolOf(request?.toolName)
+  if (!tool) {
+    return undefined
+  }
+  const input = request?.input !== null && typeof request?.input === 'object' ? (request.input as Record<string, unknown>) : {}
+  const shellId = typeof input.shellId === 'string' ? input.shellId : ''
+  switch (tool) {
+    case 'shell_run': {
+      return { kind: 'run', command: typeof input.command === 'string' ? input.command : '' }
+    }
+    case 'shell_write': {
+      const keys = Array.isArray(input.keys) ? input.keys.filter((key): key is string => typeof key === 'string') : undefined
+      return {
+        kind: 'write',
+        shellId,
+        ...(typeof input.data === 'string' ? { data: input.data } : {}),
+        ...(keys && keys.length > 0 ? { keys } : {}),
+      }
+    }
+    case 'shell_kill': {
+      return { kind: 'kill', shellId }
+    }
+    case 'shell_request_write': {
+      return { kind: 'grant', shellId, reason: typeof input.reason === 'string' ? input.reason : '' }
+    }
+  }
+}
+
+export function shellRequestTitle(payload: ShellRequestPayload): string {
+  switch (payload.kind) {
+    case 'run': {
+      return 'Agent wants to start a shell'
+    }
+    case 'write': {
+      return `Agent wants to type into shell ${payload.shellId}`
+    }
+    case 'kill': {
+      return `Agent wants to kill shell ${payload.shellId}`
+    }
+    case 'grant': {
+      return `Agent asks to type into your shell ${payload.shellId}`
+    }
+  }
+}
+
+// The lines drawn verbatim under the title. Typed text keeps its shape; a control character is named in brackets
+// so a hidden Enter or Escape is visible on the card.
+export function shellRequestLines(payload: ShellRequestPayload): string[] {
+  switch (payload.kind) {
+    case 'run': {
+      return payload.command.split('\n').map((line, index) => (index === 0 ? `$ ${line}` : `  ${line}`))
+    }
+    case 'write': {
+      const lines: string[] = []
+      if (payload.data !== undefined) {
+        lines.push(`types: ${visibleControls(payload.data)}`)
+      }
+      if (payload.keys) {
+        lines.push(`presses: ${payload.keys.map((key) => `[${key}]`).join(' ')}`)
+      }
+      return lines
+    }
+    case 'kill': {
+      return [`kill ${payload.shellId}`]
+    }
+    case 'grant': {
+      return [`why: ${visibleControls(payload.reason)}`, 'until the shell ends or you revoke it']
+    }
+  }
+}
+
+export function visibleControls(text: string): string {
+  let out = ''
+  for (const char of text) {
+    const code = char.codePointAt(0)!
+    if (code >= 0x20 && code !== 0x7f) {
+      out += char
+      continue
+    }
+    const named = CONTROL_NAMES[char]
+    out += named ? `[${named}]` : `[ctrl-${String.fromCharCode(code + 64).toLowerCase()}]`
+  }
+  return out
+}

package/src/lib/tool-icon.ts

@@ -22,7 +22,19 @@ export function toolIcon(toolName: string): LucideIcon {
   switch (toolName) {
     case 'Bash':
     case 'BashOutput':
-    case 'KillShell': {
+    case 'KillShell':
+    case 'shell_list':
+    case 'shell_read':
+    case 'shell_run':
+    case 'shell_write':
+    case 'shell_kill':
+    case 'shell_request_write':
+    case 'mcp__workerdeck__shell_list':
+    case 'mcp__workerdeck__shell_read':
+    case 'mcp__workerdeck__shell_run':
+    case 'mcp__workerdeck__shell_write':
+    case 'mcp__workerdeck__shell_kill':
+    case 'mcp__workerdeck__shell_request_write': {
       return Terminal
     }
     case 'Read': {

package/src/styles/terminal.css

@@ -436,46 +436,144 @@
 .term-hoverable {
   position: relative;
 }
-/* Pinned to the block's first line at its right edge. Absolute, so the rows
-   below are exactly where they would have been without it. */
-[data-terminal] .term-actions {
+/* `below` sits in the blank line (cards: the row gap) under the block; `inline`
+   pins to the block's first line at its right edge, for blocks with no blank
+   line beneath them. Absolute either way, so no row moves when they appear. */
+:is([data-terminal], [data-cards]) .term-actions {
   position: absolute;
-  top: 0;
-  right: 0;
-  height: var(--term-line);
+  z-index: 1;
   display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity var(--motion-fast, 120ms);
+}
+[data-terminal] .term-actions {
+  height: var(--term-line);
   gap: 1ch;
+}
+[data-cards] .term-actions {
+  height: 20px;
+  gap: 6px;
+}
+:is([data-terminal], [data-cards]) [data-placement='below'] > .term-actions {
+  top: 100%;
+}
+[data-terminal] [data-placement='below'] > .term-actions {
+  left: var(--term-cell);
+}
+[data-cards] [data-placement='below'] > .term-actions {
+  left: 0;
+}
+:is([data-terminal], [data-cards]) [data-placement='inline'] > .term-actions {
+  top: 0;
+  right: 0;
   padding-inline: 1ch;
   background: var(--bg, transparent);
-  opacity: 0;
-  transition: opacity var(--motion-fast, 120ms);
 }
-[data-terminal] .term-hoverable:hover .term-actions,
-[data-terminal] .term-hoverable:focus-within .term-actions {
+/* Only the innermost `below` block under the pointer shows its bar, so an
+   expanded chain does not light up its own and its parent's at once. */
+:is([data-terminal], [data-cards])
+  [data-placement='below']:is(:hover, :focus-within):not(:has([data-placement='below']:is(:hover, :focus-within)))
+  > .term-actions,
+:is([data-terminal], [data-cards]) [data-placement='inline']:is(:hover, :focus-within) > .term-actions {
   opacity: 1;
 }
+/* A virtualized row paints under the next one, whose top padding is the gap
+   the bar sits in; lift the hovered row so the bar stays clickable. */
+:is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:not(.absolute) {
+  position: relative;
+}
+:is([data-terminal], [data-cards]) [data-slot='transcript-rows'] [data-index]:is(:hover, :focus-within) {
+  z-index: 1;
+}
 @media (hover: none) {
-  /* No pointer to hover with: showing them always is the only way they exist at
-     all, and a phone has the room. */
-  [data-terminal] .term-actions {
+  :is([data-terminal], [data-cards]) .term-actions {
     opacity: 1;
   }
 }
+[data-cards] .term-action {
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  height: 18px;
+  min-width: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding-inline: 5px;
+  color: var(--fg-3);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+[data-cards] .term-action-icon {
+  width: 14px;
+  height: 14px;
+  stroke-width: 2.25;
+  flex: none;
+}
+[data-cards] .term-action-word {
+  padding-right: 2px;
+}
+[data-cards] .term-action:hover,
+[data-cards] .term-action:focus-visible {
+  color: var(--fg-1);
+  background: var(--row-hover);
+}
+[data-cards] .term-action[data-tone='magenta'] {
+  color: var(--wd-shell-accent);
+}
+[data-cards] .term-action[data-tone='yellow'] {
+  color: var(--warning);
+}
+[data-cards] .term-action[data-tone='danger']:hover {
+  color: var(--danger);
+}
 [data-terminal] .term-action {
   font: inherit;
-  line-height: var(--term-line);
+  font-weight: 500;
+  line-height: 1;
+  height: calc(var(--term-line) - 2px);
+  min-width: 3ch;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6ch;
+  padding-inline: 0.6ch;
   color: var(--term-dim);
-  background: none;
-  border: 0;
-  padding: 0;
+  background: var(--term-band-bg);
+  border: 1px solid color-mix(in srgb, var(--term-faint) 55%, transparent);
+  border-radius: 3px;
+  white-space: pre;
   cursor: pointer;
 }
-/* The shell drill-in, in the same magenta as the row's `$`. */
+[data-terminal] .term-action-icon {
+  width: calc(var(--term-font-size) + 1px);
+  height: calc(var(--term-font-size) + 1px);
+  stroke-width: 2.25;
+  flex: none;
+}
+[data-terminal] .term-action-word {
+  padding-right: 0.2ch;
+}
+[data-terminal] .term-action:hover,
+[data-terminal] .term-action:focus-visible {
+  color: var(--term-bright);
+  border-color: var(--term-dim);
+  background: var(--term-row-hover);
+}
 [data-terminal] .term-action[data-tone='magenta'] {
   color: var(--term-magenta);
 }
-[data-terminal] .term-action:hover {
-  color: var(--term-fg);
+[data-terminal] .term-action[data-tone='yellow'] {
+  color: var(--term-yellow);
+}
+[data-terminal] .term-action[data-tone='danger']:hover {
+  color: var(--term-red);
 }
 
 /* What you typed, on a band of its own - the CLI's own treatment. */
@@ -714,7 +812,7 @@ button.term-link {
 [data-terminal] [data-sticky-lane] > [data-sticky-headlane] {
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: 2;
   pointer-events: none;
 }
 
@@ -1276,7 +1374,16 @@ button.term-link {
   display: block;
   overflow: hidden;
 }
-.term-image > img {
+.term-image > [data-slot='viewable-image'] {
+  display: block;
+  height: 100%;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.term-image img {
+  display: block;
   max-width: 100%;
   height: 100%;
   object-fit: contain;

package/src/styles/theme.css

@@ -821,6 +821,10 @@
   left: 0;
   width: 12px;
 }
+/* xterm.css paints its viewport #000 whatever the theme says; the drill-in shows the panel through. */
+.wd-shell-term .xterm .xterm-viewport {
+  background-color: transparent;
+}
 .wd-scrubber .wd-scrub-mark[data-kind='user'] {
   background: var(--accent);
 }