@workerdeck/ui 3.0.1 → 3.1.0

package/src/components/prompt-area/prompt-area-engine.ts

@@ -210,8 +210,10 @@ export function resolveChip(
 
   const newSegments: Segment[] = []
   let offset = 0
+  let insertedChip: ChipSegment | undefined
 
-  for (const seg of segments) {
+  // Merged first: the trigger range is typed text, so it then lies in exactly one text segment.
+  for (const seg of mergeAdjacentTextSegments(segments)) {
     if (seg.type === 'chip') {
       const chipText = chipPlainText(seg)
       const chipStart = offset
@@ -252,6 +254,7 @@ export function resolveChip(
           ...(chip.autoResolved ? { autoResolved: true } : {}),
         }
         newSegments.push(newChip)
+        insertedChip = newChip
 
         // Add the trailing text (a space by default) after the chip, then any remaining text
         if (afterText) {
@@ -266,23 +269,10 @@ export function resolveChip(
   }
 
   const merged = mergeAdjacentTextSegments(newSegments)
-
-  // Cursor should be placed after the chip + trailing space.
-  // Find the *last* matching chip so duplicates resolve correctly.
-  let lastChipEndOffset = -1
-  let runningOffset = 0
-  for (const seg of merged) {
-    if (seg.type === 'text') {
-      runningOffset += seg.text.length
-    } else {
-      runningOffset += chipPlainText(seg).length
-      if (seg.value === chip.value && seg.displayText === chip.displayText && seg.trigger === activeTrigger.config.char) {
-        lastChipEndOffset = runningOffset
-      }
-    }
-  }
-  // The caret lands after the chip and its trailing text
-  const cursorOffset = lastChipEndOffset === -1 ? runningOffset : lastChipEndOffset + trailingText.length
+  // Everything before the trigger is untouched, so the new chip starts exactly where the trigger did.
+  const cursorOffset = insertedChip
+    ? triggerStart + chipPlainText(insertedChip).length + trailingText.length
+    : segmentsToPlainText(merged).length
 
   return { segments: merged, cursorOffset }
 }
@@ -309,7 +299,7 @@ export function resolveText(
   let offset = 0
   let cursorOffset = triggerStart + text.length
 
-  for (const seg of segments) {
+  for (const seg of mergeAdjacentTextSegments(segments)) {
     if (seg.type === 'chip') {
       const chipEnd = offset + chipPlainText(seg).length
       // A trigger range can never overlap a chip - chips are atomic - so a chip
@@ -510,8 +500,18 @@ export function replaceTextRange(segments: Segment[], start: number, end: number
         inserted = true
       }
 
-      if (chipEnd <= start || chipStart >= end) {
+      if (start === end) {
         newSegments.push(seg)
+        // A collapsed insertion can never split an atomic chip, so one inside it lands just after.
+        if (!inserted && chipStart < start && start < chipEnd) {
+          newSegments.push({ type: 'text', text: replacement })
+          inserted = true
+        }
+      } else if (chipEnd <= start || chipStart >= end) {
+        newSegments.push(seg)
+      } else if (!inserted) {
+        newSegments.push({ type: 'text', text: replacement })
+        inserted = true
       }
       offset = chipEnd
     } else {
@@ -709,6 +709,7 @@ export function segmentsEqual(a: Segment[], b: Segment[]): boolean {
         sa.trigger !== sb.trigger ||
         sa.value !== sb.value ||
         sa.displayText !== sb.displayText ||
+        sa.sigil !== sb.sigil ||
         sa.autoResolved !== sb.autoResolved
       ) {
         return false

package/src/components/prompt-area/prompt-area-list-ops.ts

@@ -304,28 +304,25 @@ export function normalizeListPrefixText(text: string, markdownEnabled: boolean):
  * preserved, while an unterminated fence does not suppress later bullets.
  */
 export function normalizeListPrefixes(segments: Segment[], markdownEnabled: boolean): Segment[] {
-  const globalLines: string[] = []
-  segments.forEach((seg) => {
-    if (seg.type === 'text') {
-      globalLines.push(...seg.text.split('\n'))
-    }
-  })
-  const protectedLines = fenceProtectedLineIndices(globalLines)
+  const protectedLines = fenceProtectedLineIndices(segmentsToPlainText(segments).split('\n'))
 
-  let globalIndex = 0
+  let line = 0
+  // A chip is inline, so text right after one continues its line rather than starting a new one.
+  let atLineStart = true
   let changed = false
   const result = segments.map((seg) => {
     if (seg.type !== 'text') {
+      atLineStart = false
       return seg
     }
-    const newText = seg.text
-      .split('\n')
-      .map((line) => {
-        const out = protectedLines.has(globalIndex) ? line : swapListPrefixLine(line, markdownEnabled)
-        globalIndex++
-        return out
-      })
+    const pieces = seg.text.split('\n')
+    const newText = pieces
+      .map((piece, k) => ((k > 0 || atLineStart) && !protectedLines.has(line + k) ? swapListPrefixLine(piece, markdownEnabled) : piece))
       .join('\n')
+    line += pieces.length - 1
+    if (pieces.length > 1 || seg.text !== '') {
+      atLineStart = pieces[pieces.length - 1] === ''
+    }
     if (newText === seg.text) {
       return seg
     }

package/src/components/terminal/PermissionPrompt.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import type { PermissionRequest } from '@workerdeck/protocol'
 import { toolInputPreview } from '../../lib/format.ts'
-import { planFromRequest } from '../../lib/plan-request.ts'
-import { shellRequestLines, shellRequestPayload, shellRequestTitle } from '../../lib/shell-request.ts'
+import { permissionPromptModel } from '../../lib/permission-prompt.ts'
+import { shellRequestLines } from '../../lib/shell-request.ts'
 import { TerminalDiff, previewPatch } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
 import { Choices, Hint, PromptInput, PromptTitle, Rule } from './prompt.tsx'
@@ -29,15 +29,10 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
     setDenying(false)
   }
 
-  const plan = planFromRequest(request)
-  const shell = plan ? undefined : shellRequestPayload(request)
+  const model = permissionPromptModel(request)
+  const { plan, shell, heading } = model
   const patch = plan || shell ? undefined : previewPatch(request.input)
   const summary = plan || shell ? '' : toolInputPreview(request.input)
-  const heading = plan
-    ? 'Plan ready for review'
-    : shell
-      ? shellRequestTitle(shell)
-      : (request.displayName ?? request.title ?? 'Permission needed')
   const subject = patch?.path ?? (summary || undefined)
 
   const reasonInput = denying ? (
@@ -46,25 +41,16 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
       onChange={setReason}
       onSubmit={() => deny(false)}
       onCancel={() => setDenying(false)}
-      placeholder={
-        plan
-          ? 'What should change? (optional) - the agent keeps planning and reads this'
-          : 'Reason (optional) - the agent reads this and can try something else'
-      }
+      placeholder={model.denyPlaceholder}
     />
   ) : undefined
 
-  const options = plan
-    ? [
-        { key: 'allow', label: 'Approve plan' },
-        { key: 'deny', label: 'Keep planning - tell it what to change', detail: reasonInput },
-        { key: 'stop', label: 'No, and stop the turn', danger: true },
-      ]
-    : [
-        { key: 'allow', label: 'Yes' },
-        { key: 'deny', label: 'No, and tell the agent what to do differently', detail: reasonInput },
-        { key: 'stop', label: 'No, and stop the turn', danger: true },
-      ]
+  const options = model.choices.map((choice) => ({
+    key: choice.key,
+    label: choice.option,
+    danger: choice.danger,
+    detail: choice.key === 'deny' ? reasonInput : undefined,
+  }))
 
   return (
     <div
@@ -104,14 +90,14 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
           <Blank />
           <Rule dashed />
         </>
-      ) : request.description ? (
+      ) : model.description ? (
         <>
-          <Row tone="dim">{request.description}</Row>
+          <Row tone="dim">{model.description}</Row>
           <Blank />
         </>
       ) : null}
-      {request.decisionReason ? <Row tone="faint">{request.decisionReason}</Row> : null}
-      <Row>{plan ? 'Ready to implement this plan?' : shell ? 'Do you want to let it?' : (request.title ?? `Do you want to proceed?`)}</Row>
+      {model.decisionReason ? <Row tone="faint">{model.decisionReason}</Row> : null}
+      <Row>{model.question}</Row>
       <Choices
         label={heading}
         options={options}
@@ -119,11 +105,12 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
         onFocus={setFocused}
         active={!denying}
         onChoose={(index) => {
-          if (index === 0) {
+          const key = model.choices[index]?.key
+          if (key === 'allow') {
             onApprove(request.id)
-          } else if (index === 1) {
+          } else if (key === 'deny') {
             setDenying(true)
-          } else {
+          } else if (key === 'stop') {
             deny(true)
           }
         }}

package/src/components/terminal/QuestionPrompt.tsx

@@ -1,21 +1,10 @@
 import { useState } from 'react'
 import type { PermissionRequest, UserQuestion } from '@workerdeck/protocol'
 import { parseUserQuestions } from '../agent/QuestionPrompt.tsx'
+import { answerFor, useQuestionAnswers, type Selection } from '../../lib/question-answers.ts'
 import { Box, Choices, Hint, PromptInput, Rule, TabStrip, type Choice } from './prompt.tsx'
 import { Blank, Ink, Row } from './row.tsx'
 
-type Selection = { labels: string[]; other: string; otherActive: boolean }
-
-const EMPTY: Selection = { labels: [], other: '', otherActive: false }
-
-function answerFor(selection: Selection): string {
-  const parts = [...selection.labels]
-  if (selection.otherActive && selection.other.trim()) {
-    parts.push(selection.other.trim())
-  }
-  return parts.join(', ')
-}
-
 export interface TerminalQuestionPromptProps {
   request: PermissionRequest
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void
@@ -25,43 +14,15 @@ export interface TerminalQuestionPromptProps {
 
 export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className }: TerminalQuestionPromptProps) {
   const questions = parseUserQuestions(request.input)
-  const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY))
+  const { selectionFor, answered, complete, update, toggle, toggleOther, answers } = useQuestionAnswers(questions)
   const [cursors, setCursors] = useState<number[]>(() => questions.map(() => 0))
   const [tab, setTab] = useState(0)
   const [reviewCursor, setReviewCursor] = useState(0)
 
   const review = tab >= questions.length
-  const selection = selections[tab] ?? EMPTY
-  const answered = (index: number) => answerFor(selections[index] ?? EMPTY) !== ''
-  const complete = questions.every((_, index) => answered(index))
-
-  const update = (index: number, patch: Partial<Selection>) =>
-    setSelections((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)))
-
-  const toggle = (index: number, label: string, multiSelect: boolean) => {
-    setSelections((prev) =>
-      prev.map((current, i) => {
-        if (i !== index) {
-          return current
-        }
-        if (!multiSelect) {
-          return { ...current, labels: [label], otherActive: false }
-        }
-        return {
-          ...current,
-          labels: current.labels.includes(label) ? current.labels.filter((l) => l !== label) : [...current.labels, label],
-        }
-      }),
-    )
-  }
+  const selection = selectionFor(tab)
 
-  const submit = () => {
-    const answers: Record<string, string> = {}
-    questions.forEach((question, index) => {
-      answers[question.question] = answerFor(selections[index] ?? EMPTY)
-    })
-    onAnswer(request.id, { ...request.input, answers })
-  }
+  const submit = () => onAnswer(request.id, { ...request.input, answers: answers() })
 
   const dismiss = () => onDismiss(request.id, 'Question dismissed by user')
 
@@ -100,7 +61,7 @@ export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className
       {review ? (
         <ReviewStep
           questions={questions}
-          answers={questions.map((_, index) => answerFor(selections[index] ?? EMPTY))}
+          answers={questions.map((_, index) => answerFor(selectionFor(index)))}
           complete={complete}
           cursor={reviewCursor}
           onCursor={setReviewCursor}
@@ -115,8 +76,9 @@ export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className
           selection={selection}
           cursor={cursors[tab] ?? 0}
           onCursor={(next) => setCursors((prev) => prev.map((c, i) => (i === tab ? next : c)))}
-          onToggle={(label) => toggle(tab, label, questions[tab]!.multiSelect === true)}
+          onToggle={(label) => toggle(tab, label)}
           onOther={(patch) => update(tab, patch)}
+          onToggleOther={() => toggleOther(tab)}
           onAdvance={() => move(1)}
           onDismiss={dismiss}
         />
@@ -138,6 +100,7 @@ function QuestionStep({
   onCursor,
   onToggle,
   onOther,
+  onToggleOther,
   onAdvance,
   onDismiss,
 }: {
@@ -147,6 +110,7 @@ function QuestionStep({
   onCursor: (index: number) => void
   onToggle: (label: string) => void
   onOther: (patch: Partial<Selection>) => void
+  onToggleOther: () => void
   onAdvance: () => void
   onDismiss: () => void
 }) {
@@ -214,7 +178,7 @@ function QuestionStep({
             return
           }
           if (index === question.options.length) {
-            onOther({ otherActive: !selection.otherActive })
+            onToggleOther()
             return
           }
           if (multiSelect && index === question.options.length + 1) {

package/src/components/terminal/TerminalTranscript.tsx

@@ -1,7 +1,6 @@
-import { Fragment, useEffect, useMemo, useState } from 'react'
-import type { TranscriptItem, TranscriptState } from '@workerdeck/react'
+import { Fragment, useMemo, useState } from 'react'
+import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
-import type { TerminalAffordances } from './affordances.tsx'
 import { ActionPlacementProvider, OpenSubagentAction, WithActions } from './affordances.tsx'
 import {
   AssistantRow,
@@ -15,25 +14,13 @@ import {
   ToolRow,
   TurnResultRow,
   UserRow,
-  WorkingRow,
 } from './items.tsx'
-import { blockNeedsBlank, taskChildItems, terminalBlocks, type TaskBlock } from './blocks.ts'
+import { blockNeedsBlank, taskChildItems, type TaskBlock } from './blocks.ts'
 import { usePulse } from '../agent/pulse.tsx'
-import { PeerNamesProvider } from './peer-names.tsx'
 import { Pressable, useRevealOnOpen } from './press.tsx'
 import { isPeerSend, taskBrief, taskBusy, taskFailed, taskSummary } from './tool-run.ts'
 import { BRIEF_LINES } from './height.ts'
 import { Blank, Row } from './row.tsx'
-import { TerminalSurface } from './surface.tsx'
-
-export interface TerminalTranscriptProps {
-  state: TranscriptState
-  fileUrl?: (path: string) => string
-  fontSize?: number
-  lineHeight?: number
-  affordances?: TerminalAffordances | boolean
-  className?: string
-}
 
 export function TerminalItemView({
   item,
@@ -150,73 +137,3 @@ export function TaskRow({
     <WithActions actions={<OpenSubagentAction onOpen={() => onOpenSubagent(block.task.id)} />}>{row}</WithActions>
   )
 }
-
-function useRunStart(status: TranscriptState['status']): number | undefined {
-  const running = status === 'running' || status === 'starting'
-  const [startedAt, setStartedAt] = useState<number | undefined>(undefined)
-  useEffect(() => {
-    setStartedAt((previous) => (running ? (previous ?? Date.now()) : undefined))
-  }, [running])
-  return running ? startedAt : undefined
-}
-
-function working(state: TranscriptState): boolean {
-  if (state.status !== 'running' && state.status !== 'starting') {
-    return false
-  }
-  const last = state.items.at(-1)
-  if (!last) {
-    return true
-  }
-  if (last.kind === 'assistant_text' && last.streaming) {
-    return false
-  }
-  if (last.kind === 'thinking' && last.id === 'streaming-thinking') {
-    return false
-  }
-  return true
-}
-
-export function TerminalTranscript({ state, fileUrl, fontSize, lineHeight, affordances, className }: TerminalTranscriptProps) {
-  const runStartedAt = useRunStart(state.status)
-  const blocks = useMemo(() => terminalBlocks(state.items), [state.items])
-  return (
-    <TerminalSurface
-      fontSize={fontSize}
-      lineHeight={lineHeight}
-      affordances={affordances}
-      bleed="1ch"
-      className={cn('term-transcript', className)}
-    >
-      <PeerNamesProvider items={state.items}>
-        {blocks.map((block, index) => {
-          const next = blocks[index + 1]
-          return (
-            <Fragment key={block.key}>
-              {index > 0 && blockNeedsBlank(blocks[index - 1]!, block) ? <Blank /> : null}
-              <ActionPlacementProvider value={next && !blockNeedsBlank(block, next) ? 'inline' : 'below'}>
-                {'run' in block ? (
-                  <RunRow items={block.run} />
-                ) : 'item' in block ? (
-                  <TerminalItemView item={block.item} fileUrl={fileUrl} />
-                ) : (
-                  <TaskRow block={block} fileUrl={fileUrl} />
-                )}
-              </ActionPlacementProvider>
-            </Fragment>
-          )
-        })}
-        {working(state) ? (
-          <>
-            {state.items.length > 0 ? <Blank /> : null}
-            <WorkingRow
-              label={state.status === 'starting' ? 'Starting…' : 'Working…'}
-              startedAt={runStartedAt}
-              tokens={state.contextUsage?.totalTokens}
-            />
-          </>
-        ) : null}
-      </PeerNamesProvider>
-    </TerminalSurface>
-  )
-}

package/src/components/terminal/items.tsx

@@ -5,15 +5,7 @@ import { compactionText, formatBytes, formatCost, formatDuration, toolInputPrevi
 import { isMutatingTool } from '../../lib/tool-icon.ts'
 import { usePulse } from '../agent/pulse.tsx'
 import { PromptTokenText } from '../agent/PromptTokenText.tsx'
-import {
-  ActionPlacementProvider,
-  AgentWriteAction,
-  BookmarkAction,
-  CopyAction,
-  KillShellAction,
-  OpenShellAction,
-  WithActions,
-} from './affordances.tsx'
+import { ActionPlacementProvider, BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
 import { TerminalDiff } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
 import { usePeerNames } from './peer-names.tsx'
@@ -26,17 +18,8 @@ import { useHostImageSrc, useToolResultImageSrc, type ToolResultImageState } fro
 import { ViewableImage, useOpenImage } from '../agent/image-viewer.tsx'
 import { isPeerSend, peerName, peerOneLine, peerSendTarget, peerSendText, planRun, runFailed, runSummary } from './tool-run.ts'
 import { todoLine, todoPreview, type TodoPreview, type TodoStatus } from './todos.ts'
-import { useShellActions } from '../agent/shell-actions.tsx'
-import {
-  SHELL_GLYPH,
-  shellAgentWriteLabel,
-  shellBodyLines,
-  shellFailed,
-  shellFooterText,
-  shellGrantable,
-  shellLabel,
-  shellStatusText,
-} from './shell-row.ts'
+import { ShellItemActions, useShellActions, useVerifyRunning } from '../agent/shell-actions.tsx'
+import { SHELL_GLYPH, shellBodyLines, shellFailed, shellFooterText, shellLabel, shellStatusText } from './shell-row.ts'
 import { type ToolCallItem } from './blocks.ts'
 import { Band, Blank, Ink, Row, type Tone } from './row.tsx'
 
@@ -471,12 +454,7 @@ export function ShellRow({ item }: { item: ShellItem }) {
   const footer = shellFooterText(item, open, lines.length)
 
   const shellId = item.shell.id
-  const verify = actions.verify
-  useEffect(() => {
-    if (running) {
-      void verify(shellId)
-    }
-  }, [running, shellId, verify])
+  useVerifyRunning(item)
 
   const press = (modifiers: PressModifiers) => {
     if ((modifiers.meta || modifiers.ctrl) && actions.open) {
@@ -494,23 +472,7 @@ export function ShellRow({ item }: { item: ShellItem }) {
 
   return (
     <div ref={reveal} className={open ? 'term-open' : undefined}>
-      <WithActions
-        actions={
-          <>
-            {actions.open ? <OpenShellAction onOpen={() => actions.open?.(shellId)} /> : null}
-            {actions.agentWrite && shellGrantable(item.shell) ? (
-              <AgentWriteAction
-                granted={item.shell.agentWrite === true}
-                label={shellAgentWriteLabel(item.shell)}
-                onToggle={() => void actions.agentWrite?.(shellId, item.shell.agentWrite !== true)}
-              />
-            ) : null}
-            {running ? <KillShellAction onKill={() => void actions.kill(shellId)} /> : null}
-            <BookmarkAction id={item.id} />
-            <CopyAction text={item.shell.command} label="Copy command" />
-          </>
-        }
-      >
+      <WithActions actions={<ShellItemActions item={item} />}>
         <Pressable onPress={press} expanded={open}>
           <Row glyph={SHELL_GLYPH} glyphTone={tone} tone="fg">
             <Ink bold tone="bright">