@workerdeck/ui 0.6.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@workerdeck/ui",
+  "version": "0.6.0",
+  "type": "module",
+  "description": "Styled agent-control component library for WorkerDeck: session panel, transcript with streaming, tool-call cards, permission prompts, session list, composer. Tailwind v4 + Base UI + cva. Pairs with the headless @workerdeck/react layer.",
+  "license": "MIT",
+  "main": "./build/index.mjs",
+  "types": "./build/index.d.mts",
+  "files": [
+    "build",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "@workerdeck/source": "./src/index.ts",
+      "types": "./build/index.d.mts",
+      "default": "./build/index.mjs"
+    },
+    "./theme.css": "./src/styles/theme.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.21.0",
+    "sonner": "^2.0.7",
+    "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.6.0",
+    "use-stick-to-bottom": "^1.1.6",
+    "@workerdeck/protocol": "0.6.0",
+    "@workerdeck/client": "0.6.0",
+    "@workerdeck/react": "0.6.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rimraf": "^6.1.3",
+    "tsdown": "^0.21.10"
+  },
+  "author": "Tobias Strebitzer",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/workerdeck/workerdeck.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://workerdeck.github.io/workerdeck/",
+  "bugs": "https://github.com/workerdeck/workerdeck/issues",
+  "keywords": [
+    "claude",
+    "claude-code",
+    "anthropic",
+    "agent",
+    "react",
+    "components",
+    "tailwind",
+    "ui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf build",
+    "build": "tsdown",
+    "typecheck": "tsgo -p tsconfig.json"
+  }
+}

package/src/components/agent/Composer.tsx

@@ -0,0 +1,139 @@
+import { useMemo, type ReactNode } from 'react'
+import type { SlashCommandInfo } from '@workerdeck/protocol'
+import { ArrowUp, Square } from 'lucide-react'
+import { Button } from '../ui/Button.tsx'
+import { PromptArea } from '../prompt-area/prompt-area.tsx'
+import { usePromptAreaState } from '../prompt-area/use-prompt-area-state.ts'
+import { commandTrigger } from '../prompt-area/trigger-presets.ts'
+import type { TriggerSuggestion } from '../prompt-area/types.ts'
+import { cn } from '../../lib/utils.ts'
+
+export interface ComposerProps {
+  onSend: (text: string) => void
+  onInterrupt: () => void
+  busy: boolean
+  /** Disable input entirely (session failed/closed). */
+  disabled?: boolean
+  placeholder?: string
+  /** Slash commands offered as autocomplete; picked ones render as chips. */
+  commands?: SlashCommandInfo[]
+  /** Left side of the toolbar row (mode selects, attachments, …). */
+  toolbar?: ReactNode
+  className?: string
+}
+
+/** CLI names may carry display annotations (e.g. "foo (MCP)") the parser rejects. */
+const cleanName = (name: string) => name.replace(/\s*\(MCP\)$/i, '')
+
+/** Framed prompt input built on prompt-area's contentEditable: typing "/" — at the
+ * start or after whitespace — opens a suggestion dropdown fed by `commands`, and a
+ * picked command becomes an inline chip. Submit button flips to stop while a turn
+ * is running (messages still queue while busy). */
+export function Composer({
+  onSend,
+  onInterrupt,
+  busy,
+  disabled,
+  placeholder = 'Message Claude…',
+  commands,
+  toolbar,
+  className,
+}: ComposerProps) {
+  const { bind, plainText, isEmpty, clear, focus } = usePromptAreaState()
+
+  const triggers = useMemo(() => {
+    if (!commands || commands.length === 0) return undefined
+    // The CLI list can contain the same skill name from several sources — first wins.
+    const seen = new Set<string>()
+    const unique = commands.flatMap((c) => {
+      const name = cleanName(c.name)
+      if (seen.has(name)) return []
+      seen.add(name)
+      return [{ ...c, name }]
+    })
+    return [
+      commandTrigger({
+        onSearch: (query: string): TriggerSuggestion[] => {
+          const needle = query.toLowerCase()
+          const scored = unique.flatMap((c) => {
+            const haystacks = [c.name, ...(c.aliases ?? [])].map((s) => s.toLowerCase())
+            const score = haystacks.some((h) => h.startsWith(needle))
+              ? 2
+              : haystacks.some((h) => h.includes(needle))
+                ? 1
+                : 0
+            return score === 0 ? [] : [{ c, score }]
+          })
+          scored.sort((a, b) => b.score - a.score)
+          return scored.map(({ c }) => ({
+            value: c.name,
+            label: `/${c.name}${c.argumentHint ? ` ${c.argumentHint}` : ''}`,
+            description: c.description,
+          }))
+        },
+        // Chip text renders as trigger + displayText — return the bare name so
+        // the chip reads "/name" (label carries the argument hint for the menu).
+        onSelect: (suggestion) => suggestion.value,
+        chipClassName: 'font-mono',
+      }),
+    ]
+  }, [commands])
+
+  const submit = () => {
+    const trimmed = plainText.trim()
+    if (!trimmed || disabled) return
+    onSend(trimmed)
+    clear()
+    focus()
+  }
+
+  const canSend = !disabled && !isEmpty
+
+  return (
+    <div data-slot='composer' className={cn('px-3 pb-3', className)}>
+      <div
+        className={cn(
+          'mx-auto w-full max-w-3xl overflow-hidden rounded-lg border border-border bg-bg shadow-(--shadow-xs)',
+          'transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30',
+          disabled && 'opacity-60',
+        )}>
+        <PromptArea
+          {...bind}
+          triggers={triggers}
+          onSubmit={submit}
+          disabled={disabled}
+          placeholder={disabled ? 'Session ended' : placeholder}
+          minHeight={28}
+          maxHeight={192}
+          aria-label='Message Claude'
+          className='px-3 pt-2.5 pb-1 text-body-sm text-text'
+        />
+        <div className='flex items-center justify-between gap-2 px-2 pb-2'>
+          <div className='flex min-w-0 items-center gap-1'>{toolbar}</div>
+          {busy ? (
+            <Button
+              variant='outline'
+              size='icon-sm'
+              aria-label='Interrupt'
+              className='rounded-full'
+              onClick={onInterrupt}>
+              <Square className='size-3' />
+            </Button>
+          ) : (
+            <Button
+              size='icon-sm'
+              aria-label='Send'
+              className='rounded-full'
+              disabled={!canSend}
+              onClick={submit}>
+              <ArrowUp className='size-4' />
+            </Button>
+          )}
+        </div>
+      </div>
+      <div className='mx-auto mt-1 w-full max-w-3xl text-center text-label text-fg-4'>
+        Enter to send · Shift+Enter for a new line
+      </div>
+    </div>
+  )
+}

package/src/components/agent/Conversation.tsx

@@ -0,0 +1,59 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
+import { ArrowDown } from 'lucide-react'
+import { Button } from '../ui/Button.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export interface ConversationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ReactNode
+}
+
+/** Scroll container that stays pinned to the bottom while streaming, unless the user
+ * scrolls up — plus a floating scroll-to-bottom button. */
+export function Conversation({ className, children, ...props }: ConversationProps) {
+  return (
+    <StickToBottom
+      data-slot='conversation'
+      className={cn('relative flex-1 overflow-y-auto', className)}
+      initial='instant'
+      resize='smooth'
+      role='log'
+      {...props}>
+      {children}
+    </StickToBottom>
+  )
+}
+
+export function ConversationContent({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+  return (
+    <StickToBottom.Content
+      data-slot='conversation-content'
+      className={cn('mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-4', className)}
+      {...props}>
+      {children}
+    </StickToBottom.Content>
+  )
+}
+
+export function ConversationScrollButton({ className }: { className?: string }) {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext()
+  if (isAtBottom) return null
+  return (
+    <Button
+      variant='outline'
+      size='icon'
+      aria-label='Scroll to bottom'
+      data-slot='conversation-scroll-button'
+      className={cn(
+        'absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-(--shadow-md)',
+        className,
+      )}
+      onClick={() => void scrollToBottom()}>
+      <ArrowDown className='size-4' />
+    </Button>
+  )
+}

package/src/components/agent/FileCard.tsx

@@ -0,0 +1,50 @@
+import type { TranscriptItem } from '@workerdeck/react'
+import { Download, FileText } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+import { formatBytes } from '../../lib/format.ts'
+
+export type FileDeliveredItem = Extract<TranscriptItem, { kind: 'file_delivered' }>
+
+export interface FileCardProps {
+  item: FileDeliveredItem
+  /** Download URL for the delivered path (the server's session file route).
+   * Without it the card renders informational only. */
+  href?: string
+  className?: string
+}
+
+/** A file the agent handed over (`file_delivered`): name, size, download link.
+ * The file lives in the session's in-memory VFS — the link works while the
+ * session lives. */
+export function FileCard({ item, href, className }: FileCardProps) {
+  const name = item.path.split('/').pop() || item.path
+  return (
+    <div
+      data-slot='file-delivered'
+      className={cn(
+        'flex w-full items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2.5',
+        className,
+      )}>
+      <FileText className='size-4 shrink-0 text-fg-3' />
+      <div className='min-w-0 flex-1'>
+        <div className='truncate font-mono text-body-sm font-medium text-fg-1'>{name}</div>
+        <div className='truncate text-label text-fg-4'>
+          {formatBytes(item.bytes)}
+          {item.description ? ` · ${item.description}` : ''}
+        </div>
+      </div>
+      {href ? (
+        <a
+          href={href}
+          download={name}
+          className={cn(
+            'flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5',
+            'text-body-sm text-fg-2 transition-colors hover:bg-surface-hover',
+          )}>
+          <Download className='size-3.5' />
+          Download
+        </a>
+      ) : null}
+    </div>
+  )
+}

package/src/components/agent/Loader.tsx

@@ -0,0 +1,21 @@
+import { cn } from '../../lib/utils.ts'
+
+/** Three-dot pulse shown while the assistant hasn't produced output yet. */
+export function Loader({ label, className }: { label?: string; className?: string }) {
+  return (
+    <div
+      data-slot='loader'
+      className={cn('flex items-center gap-2 py-1 text-body-sm text-fg-4', className)}>
+      <span className='flex items-center gap-1'>
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            className='size-1.5 animate-pulse rounded-full bg-fg-4'
+            style={{ animationDelay: `${i * 160}ms` }}
+          />
+        ))}
+      </span>
+      {label ? <span>{label}</span> : null}
+    </div>
+  )
+}

package/src/components/agent/Message.tsx

@@ -0,0 +1,44 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+export interface MessageProps extends HTMLAttributes<HTMLDivElement> {
+  from: 'user' | 'assistant'
+}
+
+/** One chat turn row. User messages sit right in a bubble; assistant content is flat,
+ * full-width (the AI-chat convention — assistant output is the page, user input is quoted). */
+export function Message({ from, className, ...props }: MessageProps) {
+  return (
+    <div
+      data-slot='message'
+      data-from={from}
+      className={cn(
+        'flex w-full flex-col gap-1',
+        from === 'user' ? 'items-end' : 'items-start',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function MessageContent({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      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.
+        'in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-br-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',
+        'in-data-[from=assistant]:w-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/components/agent/ModelSelect.tsx

@@ -0,0 +1,87 @@
+import type { ModelOption } from '@workerdeck/protocol'
+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'
+
+/** Find the option matching a (possibly decorated/aliased) session model id. */
+function matchModel(models: ModelOption[], model?: string): ModelOption | undefined {
+  if (!model) return undefined
+  const normalized = model.replace(/\[.*\]$/, '')
+  const concrete = models.filter((m) => !isDefaultOption(m.value))
+  return (
+    concrete.find((m) => m.value === normalized) ??
+    concrete.find((m) => normalized.includes(m.value) || m.value.includes(normalized))
+  )
+}
+
+/** 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)))
+  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
+        onModelChange(isDefaultOption(value) ? undefined : value)
+      }}
+      disabled={disabled}>
+      <SelectTrigger
+        aria-label='Model'
+        className={cn(
+          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'>
+        {models.map((m) => (
+          <SelectItem key={m.value} value={m.value}>
+            <SelectItemText>
+              <span className='font-medium'>{m.displayName}</span>
+            </SelectItemText>
+            {m.description ? <span className='text-label text-fg-4'>{m.description}</span> : null}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/components/agent/PermissionModeSelect.tsx

@@ -0,0 +1,94 @@
+import type { PermissionMode } from '@workerdeck/protocol'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/Select.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export type PermissionModeMeta = {
+  value: PermissionMode
+  label: string
+  description: string
+  dangerous?: boolean
+}
+
+/** The modes surfaced across UI surfaces (session creation, in-session switcher). */
+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: 'bypassPermissions',
+    label: 'bypassPermissions',
+    description: 'no prompts (danger)',
+    dangerous: true,
+  },
+]
+
+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. */
+  modes?: readonly PermissionMode[]
+  /** '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,
+  modes,
+  variant = 'toolbar',
+  disabled,
+  className,
+}: PermissionModeSelectProps) {
+  const dangerous = mode === 'bypassPermissions'
+  const offered = modes ? PERMISSION_MODES.filter((m) => modes.includes(m.value)) : PERMISSION_MODES
+  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)
+      }}
+      disabled={disabled}>
+      <SelectTrigger
+        aria-label='Permission mode'
+        className={cn(
+          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' && 'font-mono 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>
+    </Select>
+  )
+}

package/src/components/agent/PermissionPrompt.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import type { PermissionRequest } from '@workerdeck/protocol'
+import { ShieldAlert } from 'lucide-react'
+import { Button } from '../ui/Button.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export interface PermissionPromptProps {
+  request: PermissionRequest
+  onApprove: (requestId: string) => void
+  onDeny: (requestId: string, message?: string) => void
+  className?: string
+}
+
+export function PermissionPrompt({ request, onApprove, onDeny, className }: PermissionPromptProps) {
+  const [showInput, setShowInput] = useState(false)
+  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' />
+        <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}`}
+          </div>
+          {request.description ? (
+            <div className='mt-0.5 text-label text-fg-3'>{request.description}</div>
+          ) : null}
+          <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 gap-1.5'>
+          <Button size='sm' onClick={() => onApprove(request.id)}>
+            Allow
+          </Button>
+          <Button size='sm' variant='outline' onClick={() => onDeny(request.id, 'Denied by user')}>
+            Deny
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}