@workerdeck/ui 0.6.0

package/src/components/agent/ToolCallCard.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react'
+import type { TranscriptItem } from '@workerdeck/react'
+import { ChevronDown, Clock, Wrench } from 'lucide-react'
+import { Badge } from '../ui/Badge.tsx'
+import { CodeBlock } from '../ui/CodeBlock.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+import { cn } from '../../lib/utils.ts'
+import { toolInputPreview } from '../../lib/format.ts'
+
+export type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
+
+const RESULT_PREVIEW_CHARS = 2000
+
+export interface ToolCallCardProps {
+  item: ToolCallItem
+  className?: string
+}
+
+/** Badge per execution state. `pending`/`deferred` mean the work is happening
+ * somewhere else (this tab's sandbox, a queue) — distinct from the model still
+ * running the call itself. */
+const STATE_BADGE = {
+  running: { label: 'Running', variant: 'info', busy: true },
+  pending: { label: 'Executing', variant: 'info', busy: true },
+  deferred: { label: 'Deferred', variant: 'accent', busy: false },
+  settled: { label: 'Done', variant: 'success', busy: false },
+  failed: { label: 'Error', variant: 'danger', busy: false },
+} as const
+
+export function ToolCallCard({ item, className }: ToolCallCardProps) {
+  const [open, setOpen] = useState(false)
+  const [fullResult, setFullResult] = useState(false)
+  const status = item.status ?? (item.result === undefined ? 'running' : 'settled')
+  const badge = STATE_BADGE[status]
+  const isError = status === 'failed' || item.result?.isError === true
+
+  const resultText = item.result?.text ?? ''
+  const truncated = !fullResult && resultText.length > RESULT_PREVIEW_CHARS
+  const shownResult = truncated ? resultText.slice(0, RESULT_PREVIEW_CHARS) : resultText
+
+  return (
+    <div
+      data-slot='tool-call'
+      data-state={status}
+      className={cn('w-full overflow-hidden rounded-lg border border-border bg-surface', className)}>
+      <button
+        type='button'
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          'flex w-full items-center gap-2 px-3 py-2 text-left transition-colors outline-none',
+          'hover:bg-surface-hover focus-visible:bg-surface-hover',
+        )}>
+        <Wrench className='size-3.5 shrink-0 text-fg-3' />
+        <span className='shrink-0 font-mono text-body-sm font-medium text-fg-1'>{item.name}</span>
+        <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-4'>
+          {toolInputPreview(item.input)}
+        </span>
+        <Badge variant={badge.variant} dot={!badge.busy} className='shrink-0 gap-1'>
+          {badge.busy ? <Spinner className='size-3 text-current' /> : null}
+          {status === 'deferred' ? <Clock className='size-3 text-current' /> : null}
+          {badge.label}
+        </Badge>
+        <ChevronDown
+          className={cn('size-3.5 shrink-0 text-fg-4 transition-transform', open && 'rotate-180')}
+        />
+      </button>
+      {open ? (
+        <div className='flex flex-col gap-2 border-t border-border p-2.5'>
+          <CodeBlock code={JSON.stringify(item.input, null, 2)} label='Parameters' />
+          {item.logs?.length ? (
+            <CodeBlock code={item.logs.join('\n')} label='Logs' />
+          ) : null}
+          {item.result !== undefined ? (
+            <div>
+              <CodeBlock
+                code={shownResult || '(empty result)'}
+                label={isError ? 'Error' : 'Result'}
+                className={cn(isError && 'border-danger/40 [&_pre]:text-danger')}
+              />
+              {truncated ? (
+                <button
+                  type='button'
+                  className='mt-1 text-label text-fg-3 underline-offset-2 hover:underline'
+                  onClick={() => setFullResult(true)}>
+                  Show all {resultText.length.toLocaleString()} chars
+                </button>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/agent/Transcript.tsx

@@ -0,0 +1,114 @@
+import type { TranscriptItem, TranscriptState } from '@workerdeck/react'
+import { cn } from '../../lib/utils.ts'
+import { formatCost, formatDuration } from '../../lib/format.ts'
+import { Conversation, ConversationContent, ConversationScrollButton } from './Conversation.tsx'
+import { FileCard } from './FileCard.tsx'
+import { Loader } from './Loader.tsx'
+import { Message, MessageContent } from './Message.tsx'
+import { Reasoning } from './Reasoning.tsx'
+import { Response } from './Response.tsx'
+import { ToolCallCard } from './ToolCallCard.tsx'
+
+function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
+  return (
+    <div data-slot='turn-result' className='flex items-center gap-2 py-1'>
+      <div className='h-px flex-1 bg-border' />
+      <span className={cn('font-mono text-label', item.isError ? 'text-danger' : 'text-fg-4')}>
+        {item.isError ? item.subtype : 'turn done'} · {formatDuration(item.durationMs)} ·{' '}
+        {formatCost(item.totalCostUsd)}
+      </span>
+      <div className='h-px flex-1 bg-border' />
+    </div>
+  )
+}
+
+function NoticeRow({ item }: { item: Extract<TranscriptItem, { kind: 'notice' }> }) {
+  return (
+    <div
+      data-slot='notice'
+      className={cn(
+        'rounded-md border px-3 py-2 text-body-sm',
+        item.level === 'error'
+          ? 'border-transparent bg-danger-bg text-danger'
+          : 'border-border bg-surface text-fg-3',
+      )}>
+      {item.text}
+    </div>
+  )
+}
+
+function TranscriptItemView({
+  item,
+  fileUrl,
+}: {
+  item: TranscriptItem
+  fileUrl?: (path: string) => string
+}) {
+  switch (item.kind) {
+    case 'user':
+      return (
+        <Message from='user'>
+          <MessageContent>{item.text}</MessageContent>
+        </Message>
+      )
+    case 'assistant_text':
+      return (
+        <Message from='assistant'>
+          <MessageContent>
+            <Response streaming={item.streaming}>{item.text}</Response>
+          </MessageContent>
+        </Message>
+      )
+    case 'thinking':
+      return <Reasoning isStreaming={item.id === 'streaming-thinking'}>{item.text}</Reasoning>
+    case 'tool_call':
+      return <ToolCallCard item={item} />
+    case 'turn_result':
+      return <TurnResultRow item={item} />
+    case 'notice':
+      return <NoticeRow item={item} />
+    case 'file_delivered':
+      return <FileCard item={item} href={fileUrl?.(item.path)} />
+    default:
+      return null
+  }
+}
+
+/** Should the "waiting for output" loader show? Only while running with no in-flight
+ * streamed content at the tail of the transcript. */
+function showLoader(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 last.kind !== 'turn_result' || state.status === 'running'
+}
+
+export interface TranscriptProps {
+  state: TranscriptState
+  /** Builds the download URL for a delivered file (see FileCard). Typically
+   * `(path) => client.sessionFileUrl(sessionId, path)`. */
+  fileUrl?: (path: string) => string
+  className?: string
+}
+
+export function Transcript({ state, fileUrl, className }: TranscriptProps) {
+  return (
+    <Conversation className={className}>
+      <ConversationContent>
+        {state.items.length === 0 && state.status !== 'starting' ? (
+          <div className='py-12 text-center text-body-sm text-fg-4'>No messages yet.</div>
+        ) : (
+          state.items.map((item) => (
+            <TranscriptItemView key={`${item.kind}:${item.id}`} item={item} fileUrl={fileUrl} />
+          ))
+        )}
+        {showLoader(state) ? (
+          <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
+        ) : null}
+      </ConversationContent>
+      <ConversationScrollButton />
+    </Conversation>
+  )
+}

package/src/components/agent/status.ts

@@ -0,0 +1,16 @@
+import type { SessionStatus } from '@workerdeck/protocol'
+import type { BadgeProps } from '../ui/Badge.tsx'
+
+export const STATUS_META: Record<
+  SessionStatus,
+  { label: string; variant: NonNullable<BadgeProps['variant']>; busy: boolean }
+> = {
+  starting: { label: 'Starting', variant: 'info', busy: true },
+  running: { label: 'Running', variant: 'info', busy: true },
+  awaiting_approval: { label: 'Needs approval', variant: 'warning', busy: true },
+  idle: { label: 'Idle', variant: 'success', busy: false },
+  // Waiting on a deferred execution: the run is alive but nothing is burning.
+  parked: { label: 'Parked', variant: 'accent', busy: false },
+  failed: { label: 'Failed', variant: 'danger', busy: false },
+  closed: { label: 'Closed', variant: 'neutral', busy: false },
+}

package/src/components/prompt-area/animated-placeholder.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+type AnimatedPlaceholderProps = {
+  texts: string[]
+  interval?: number
+}
+
+/**
+ * Cross-fading placeholder that rotates through `texts`.
+ *
+ * Each text is keyed so React remounts it on change, replaying the
+ * `tw-animate-css` enter animation (slide down + fade in). No animation
+ * library is required.
+ */
+export function AnimatedPlaceholder({ texts, interval = 3000 }: AnimatedPlaceholderProps) {
+  const [index, setIndex] = useState(0)
+
+  useEffect(() => {
+    if (texts.length <= 1) return
+
+    const id = setInterval(() => {
+      setIndex((prev) => (prev + 1) % texts.length)
+    }, interval)
+
+    return () => clearInterval(id)
+  }, [texts.length, interval])
+
+  return (
+    <div
+      className="pointer-events-none absolute top-0 left-0 overflow-hidden select-none"
+      style={{ color: 'var(--prompt-area-placeholder, var(--muted-foreground))' }}
+      aria-hidden="true">
+      <div
+        key={index}
+        className="animate-in fade-in-0 slide-in-from-top-4 duration-300 ease-in-out">
+        {texts[index]}
+      </div>
+    </div>
+  )
+}

package/src/components/prompt-area/clipboard-helpers.ts

@@ -0,0 +1,206 @@
+/**
+ * Clipboard-related DOM utilities for the PromptArea component.
+ * Handles serializing selections and inserting pasted segments at the cursor.
+ *
+ * Not merged into dom-helpers.ts to avoid overcrowding that file with
+ * clipboard I/O concerns alongside its DOM traversal and chip-accessor helpers.
+ */
+import type { Segment, ChipSegment } from './types.ts'
+import {
+  chipNodeToSegment,
+  getChipDisplay,
+  getChipTrigger,
+  getSelectionRange,
+  isChipElement,
+  isHTMLElement,
+} from './dom-helpers.ts'
+import { mergeAdjacentTextSegments } from './prompt-area-engine.ts'
+import { getTextLengthInRange } from './cursor-helpers.ts'
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+/**
+ * Visitor callbacks for {@link walkFragmentNodes}. Each fires for the
+ * corresponding node kind encountered during a depth-first walk.
+ */
+type FragmentVisitor = {
+  /** A text node — receives its text content (may be empty). */
+  onText: (text: string) => void
+  /** A chip element (has `data-chip-trigger`). */
+  onChip: (node: HTMLElement) => void
+  /** A `<br>` line break. */
+  onBreak: () => void
+}
+
+/**
+ * Depth-first walk of a selection fragment, classifying each node as text,
+ * chip, or line break and recursing into any other element (decoration spans,
+ * anchors, browser-inserted wrappers).
+ *
+ * Both fragment serializers share this single traversal so they cannot drift
+ * on which nodes count as chips/breaks or how nested decorations are unwrapped.
+ */
+function walkFragmentNodes(fragment: DocumentFragment, visitor: FragmentVisitor): void {
+  const walk = (node: Node): void => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      visitor.onText(node.textContent ?? '')
+    } else if (isChipElement(node)) {
+      visitor.onChip(node)
+    } else if (isHTMLElement(node) && node.tagName === 'BR') {
+      visitor.onBreak()
+    } else {
+      node.childNodes.forEach(walk)
+    }
+  }
+
+  fragment.childNodes.forEach(walk)
+}
+
+/**
+ * Serializes a DocumentFragment (from selection) to plain text,
+ * converting chip elements to their `trigger + displayText` form.
+ */
+export function serializeFragmentToPlainText(fragment: DocumentFragment): string {
+  let text = ''
+
+  walkFragmentNodes(fragment, {
+    onText: (value) => {
+      text += value
+    },
+    onChip: (node) => {
+      text += (getChipTrigger(node) ?? '') + (getChipDisplay(node) ?? '')
+    },
+    onBreak: () => {
+      text += '\n'
+    },
+  })
+
+  return text
+}
+
+/**
+ * Serializes a DocumentFragment to an array of Segment objects,
+ * preserving chip data for internal copy/paste.
+ */
+export function serializeFragmentToSegments(fragment: DocumentFragment): Segment[] {
+  const segments: Segment[] = []
+
+  walkFragmentNodes(fragment, {
+    onText: (value) => {
+      if (value) segments.push({ type: 'text', text: value })
+    },
+    onChip: (node) => {
+      const chip = chipNodeToSegment(node)
+      if (chip) segments.push(chip)
+    },
+    onBreak: () => {
+      segments.push({ type: 'text', text: '\n' })
+    },
+  })
+
+  return segments
+}
+
+/**
+ * Parses segment JSON from the clipboard. Returns null if invalid.
+ */
+export function parseSegmentsFromClipboard(json: string): Segment[] | null {
+  try {
+    const parsed: unknown = JSON.parse(json)
+    if (!Array.isArray(parsed)) return null
+
+    const segments: Segment[] = []
+    for (const item of parsed) {
+      if (!isRecord(item)) return null
+
+      if (item.type === 'text' && typeof item.text === 'string') {
+        segments.push({ type: 'text', text: item.text })
+      } else if (
+        item.type === 'chip' &&
+        typeof item.trigger === 'string' &&
+        typeof item.value === 'string' &&
+        typeof item.displayText === 'string'
+      ) {
+        const chip: ChipSegment = {
+          type: 'chip',
+          trigger: item.trigger,
+          value: item.value,
+          displayText: item.displayText,
+          ...(item.data !== undefined ? { data: item.data } : {}),
+          ...(item.autoResolved ? { autoResolved: true } : {}),
+        }
+        segments.push(chip)
+      } else {
+        return null
+      }
+    }
+
+    return segments
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Inserts pasted segments at the current cursor position within existing segments.
+ * Splits any text segment that straddles the cursor so the pasted content lands
+ * exactly at the cursor and nothing before or after is lost.
+ */
+export function insertSegmentsAtCursor(
+  currentSegments: Segment[],
+  pastedSegments: Segment[],
+  editor: HTMLElement,
+): Segment[] {
+  const range = getSelectionRange()
+  if (!range) return [...currentSegments, ...pastedSegments]
+
+  const preRange = document.createRange()
+  preRange.selectNodeContents(editor)
+  preRange.setEnd(range.startContainer, range.startOffset)
+  const cursorOffset = getTextLengthInRange(preRange)
+
+  const result: Segment[] = []
+  let offset = 0
+  let inserted = false
+
+  const insertOnce = (): void => {
+    if (!inserted) {
+      result.push(...pastedSegments)
+      inserted = true
+    }
+  }
+
+  for (const seg of currentSegments) {
+    if (seg.type === 'chip') {
+      const chipLen = seg.trigger.length + seg.displayText.length
+      if (offset >= cursorOffset) insertOnce()
+      result.push(seg)
+      offset += chipLen
+      continue
+    }
+
+    const segEnd = offset + seg.text.length
+    if (segEnd <= cursorOffset) {
+      // Entirely before the cursor
+      result.push(seg)
+    } else if (offset >= cursorOffset) {
+      // Entirely after the cursor
+      insertOnce()
+      result.push(seg)
+    } else {
+      // Cursor falls inside this text segment — split it.
+      const splitAt = cursorOffset - offset
+      const before = seg.text.slice(0, splitAt)
+      const after = seg.text.slice(splitAt)
+      if (before) result.push({ type: 'text', text: before })
+      insertOnce()
+      if (after) result.push({ type: 'text', text: after })
+    }
+    offset = segEnd
+  }
+
+  insertOnce()
+  return mergeAdjacentTextSegments(result)
+}