@workerdeck/ui 0.13.0 → 0.16.0

package/src/components/agent/Loader.tsx

@@ -1,92 +1,42 @@
 import { cn } from '../../lib/utils.ts'
-import { formatDuration, formatTokens } from '../../lib/format.ts'
-import { usePulse } from './pulse.tsx'
-import { LineGlyph, useLines } from './transcript-variant.tsx'
 
 export interface LoaderProps {
   /** Overrides the cycling verb — for a state that has one true name
    * ("Starting session…"). */
   label?: string
-  /** When the current run began, for the elapsed clock. Absent = no clock. */
+  /** When the current run began, for the elapsed clock. Absent = no clock.
+   * Unused by the card treatment; kept so the `cards` and `terminal` loaders
+   * take the same call site in `Transcript`. */
   startedAt?: number
-  /** Context tokens in play, shown beside the clock. */
+  /** Context tokens in play. Same story as `startedAt`. */
   tokens?: number
   className?: string
 }
 
-/**
- * What it says it is doing while it hasn't said anything yet. Cycled on a slow
- * clock so a long turn doesn't sit under one frozen word — a still label reads
- * as a hung process, which is exactly what this is meant to disprove.
- */
-const VERBS = [
-  'Working',
-  'Thinking',
-  'Churning',
-  'Pondering',
-  'Whirring',
-  'Computing',
-  'Percolating',
-  'Tinkering',
-  'Deliberating',
-  'Simmering',
-  'Crunching',
-  'Noodling',
-]
-const VERB_MS = 4000
-
 /**
  * "The agent is working and hasn't produced output yet."
  *
- * `lines`: a terminal working line — the mark's own pulse in the gutter (see
- * `pulse.tsx`), a verb, and the readings that answer "should I still be
- * waiting?" in one parenthesis. `cards`: the three-dot pulse, unchanged — the
- * dashboard's loader is not a gutter glyph and has no column to pulse in.
+ * Three dots pulsing in CSS — the chat convention, for the `cards` variant. The
+ * terminal theme has its own working line (`terminal/items.tsx`'s `WorkingRow`,
+ * with the mark's pulse in the gutter and the run's readings beside the verb),
+ * because there it is a *row of the transcript* rather than a spinner floating
+ * over one.
  */
-export function Loader({ label, startedAt, tokens, className }: LoaderProps) {
-  const lines = useLines()
-  // Only the line variant animates a glyph; cards pulse three dots in CSS.
-  const pulse = usePulse(lines)
-
-  if (!lines) {
-    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>
-    )
-  }
-
-  // Derived from the clock rather than kept in state: the frame tick is already
-  // re-rendering, so the seconds and the verb come along for free.
-  const elapsed = startedAt === undefined ? undefined : Date.now() - startedAt
-  const verb =
-    label ?? VERBS[Math.floor((elapsed ?? 0) / VERB_MS) % VERBS.length] ?? VERBS[0]
-  const readings = [
-    elapsed !== undefined ? formatDuration(elapsed) : undefined,
-    tokens !== undefined ? `↓ ${formatTokens(tokens)}` : undefined,
-  ].filter(Boolean)
-
+export function Loader({ label, className }: LoaderProps) {
   return (
-    <div data-slot='loader' className={cn('flex items-baseline gap-2', className)}>
-      {/* `lines` is monochrome: the terminal treatment earns its calm by
-          spending no colour on decoration, and a pulsing glyph is already the
-          loudest thing on a still page. `cards` keeps the brand accent. */}
-      <LineGlyph className={lines ? 'text-fg-3' : 'text-accent'}>{pulse}</LineGlyph>
-      <span className='min-w-0 flex-1 text-body-sm leading-5 text-fg-3'>
-        {verb}…{' '}
-        {readings.length ? <span className='text-label text-fg-4'>({readings.join(' · ')})</span> : null}
+    <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

@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from 'react'
 import { cn } from '../../lib/utils.ts'
-import { LINE_TEXT, LineGlyph, useLines } from './transcript-variant.tsx'
 
 export interface MessageProps extends HTMLAttributes<HTMLDivElement> {
   from: 'user' | 'assistant'
@@ -16,64 +15,33 @@ export interface MessageProps extends HTMLAttributes<HTMLDivElement> {
  * column separates a prompt from the reply it produced. The bubble alone is
  * enough to say who spoke.
  *
- * `lines`: both are left-aligned full-width line items behind a gutter glyph —
- * `❯` for what was typed, `●` for what the model said. No bubble: a prompt is
- * already distinguishable by its marker, and the bubble's padding is vertical
- * space the terminal treatment refuses to spend.
+ * The terminal theme draws none of this: it is its own renderer
+ * (`components/terminal/`) and mounts instead of these rows.
  */
 export function Message({ from, className, children, ...props }: MessageProps) {
-  const lines = useLines()
   return (
     <div
       data-slot='message'
       data-from={from}
-      className={cn(
-        'flex w-full',
-        lines
-          ? cn(
-              'flex-row gap-2',
-              // What YOU said, on a band of its own — the CLI's own treatment.
-              // Full-bleed (the negative margin cancels the row's padding) so
-              // the band lines up with the hover highlight rather than sitting
-              // inside it, and square-ish so it reads as a strip, not a bubble.
-              from === 'user' && '-mx-1 rounded-sm bg-surface px-1',
-            )
-          : 'flex-col items-start gap-1',
-        className,
-      )}
+      className={cn('flex w-full flex-col items-start gap-1', className)}
       {...props}>
-      {lines ? (
-        <>
-          <LineGlyph className={from === 'user' ? 'text-fg-2' : 'text-fg-3'}>
-            {from === 'user' ? '❯' : '●'}
-          </LineGlyph>
-          <div className='flex min-w-0 flex-1 flex-col gap-1'>{children}</div>
-        </>
-      ) : (
-        children
-      )}
+      {children}
     </div>
   )
 }
 
 export function MessageContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  const lines = useLines()
   return (
     <div
       data-slot='message-content'
       className={cn(
-        'min-w-0',
-        lines
-          ? cn('w-full text-fg-1', LINE_TEXT, 'in-data-[from=user]:whitespace-pre-wrap')
-          : cn(
-              'text-body-sm leading-6 text-fg-1',
-              // Bubble treatment only within a user message row.
-              // The tail points bottom-*left* now that the bubble is left-aligned.
-              'in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-bl-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',
-            ),
+        'min-w-0 text-body-sm leading-6 text-fg-1',
+        // Bubble treatment only within a user message row.
+        // The tail points bottom-*left* now that the bubble is left-aligned.
+        'in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-bl-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/PermissionPrompt.tsx

@@ -6,14 +6,6 @@ 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'
-import {
-  LINE_INDENT,
-  LineHint,
-  LineInput,
-  LineOptionList,
-  LinePayload,
-} from './line-prompt.tsx'
-import { LineGlyph, useLines } from './transcript-variant.tsx'
 
 export interface PermissionPromptProps {
   request: PermissionRequest
@@ -37,11 +29,9 @@ export interface PermissionPromptProps {
  * already written the sentence that says so.
  */
 export function PermissionPrompt({ request, onApprove, onDeny, className }: PermissionPromptProps) {
-  const lines = useLines()
   const [showInput, setShowInput] = useState(false)
   const [denying, setDenying] = useState(false)
   const [reason, setReason] = useState('')
-  const [focused, setFocused] = useState(0)
 
   const deny = (interrupt: boolean) => {
     const message = reason.trim()
@@ -52,88 +42,6 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
 
   const summary = toolInputPreview(request.input)
   const ToolIcon = toolIcon(request.toolName)
-  const heading = request.title ?? request.displayName ?? 'Permission needed'
-
-  if (lines) {
-    // The same three outcomes as the card, as rows. "Deny" opens the reason
-    // field rather than acting, because a denial the agent can learn from is the
-    // one worth defaulting to — an empty field still just denies.
-    const options = [
-      { key: 'allow', label: 'Allow' },
-      {
-        key: 'deny',
-        label: 'Deny',
-        description: 'the turn continues',
-        detail: denying ? (
-          <LineInput
-            value={reason}
-            onChange={setReason}
-            onSubmit={() => deny(false)}
-            onCancel={() => setDenying(false)}
-            placeholder='Reason (optional) — the agent reads this and can try something else'
-          />
-        ) : undefined,
-      },
-      { key: 'stop', label: 'Deny & stop', description: 'interrupt the turn', danger: true },
-    ]
-
-    return (
-      <div
-        data-slot='permission-prompt'
-        className={cn('w-full', className)}
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') {
-            event.preventDefault()
-            deny(false)
-          }
-        }}>
-        <div className='flex items-baseline gap-2'>
-          <LineGlyph className='text-warning'>!</LineGlyph>
-          <span className='min-w-0 flex-1 text-body-sm leading-5 font-medium text-fg-1'>
-            {heading}
-          </span>
-        </div>
-        {request.description ? (
-          <div className={cn(LINE_INDENT, 'text-label leading-5 text-fg-3')}>
-            {request.description}
-          </div>
-        ) : null}
-        {request.decisionReason ? (
-          <div className={cn(LINE_INDENT, 'text-label leading-5 text-fg-4')}>
-            {request.decisionReason}
-          </div>
-        ) : null}
-        <button
-          type='button'
-          onClick={() => setShowInput((v) => !v)}
-          className='flex w-full items-baseline gap-2 text-left outline-none hover:bg-surface-hover/60'>
-          <LineGlyph className='text-fg-4'>⎿</LineGlyph>
-          <span className='min-w-0 flex-1 truncate text-label leading-5 text-fg-4'>
-            <span className='font-medium text-fg-2'>{request.toolName}</span>
-            {summary ? `(${summary})` : null}
-          </span>
-        </button>
-        {showInput ? (
-          <div className={LINE_INDENT}>
-            <LinePayload code={JSON.stringify(request.input, null, 2)} language='json' label='Input' />
-          </div>
-        ) : null}
-        <LineOptionList
-          label={heading}
-          options={options}
-          focused={focused}
-          onFocus={setFocused}
-          active={!denying}
-          onChoose={(index) => {
-            if (index === 0) onApprove(request.id)
-            else if (index === 1) setDenying(true)
-            else deny(true)
-          }}
-        />
-        <LineHint>↑↓ move · 1–3 choose · esc deny</LineHint>
-      </div>
-    )
-  }
 
   return (
     <div

package/src/components/agent/QuestionPrompt.tsx

@@ -10,8 +10,6 @@ import { Badge } from '../ui/Badge.tsx'
 import { Button } from '../ui/Button.tsx'
 import { Input } from '../ui/Input.tsx'
 import { cn } from '../../lib/utils.ts'
-import { LINE_INDENT, LineHint, LineInput, LineOptionList, LinePayload } from './line-prompt.tsx'
-import { LineGlyph, useLines } from './transcript-variant.tsx'
 
 export type QuestionBehaviorMeta = {
   value: QuestionBehavior
@@ -49,9 +47,6 @@ export function parseUserQuestions(input: Record<string, unknown>): UserQuestion
 
 type Selection = { labels: string[]; other: string; otherActive: boolean }
 
-/** Whether the key hint should say "toggle" rather than "choose". */
-const multiSelectAnywhere = (questions: UserQuestion[]) => questions.some((q) => q.multiSelect === true)
-
 const EMPTY_SELECTION: Selection = { labels: [], other: '', otherActive: false }
 
 /** A question's answer string: chosen label(s) (multi-select comma-joined), with any
@@ -77,16 +72,10 @@ export interface QuestionPromptProps {
  * and the focused option's preview. Falls back to nothing renderable → the caller
  * should show a generic PermissionPrompt if `parseUserQuestions` finds no questions. */
 export function QuestionPrompt({ request, onAnswer, onDismiss, className }: QuestionPromptProps) {
-  const lines = useLines()
   const questions = parseUserQuestions(request.input)
   const [selections, setSelections] = useState<Selection[]>(() =>
     questions.map(() => EMPTY_SELECTION),
   )
-  // `lines` only: the roving cursor per question, and which question's list owns
-  // the DOM focus — two lists both chasing their own index would tear the caret
-  // between them on every render.
-  const [cursors, setCursors] = useState<number[]>(() => questions.map(() => 0))
-  const [activeQuestion, setActiveQuestion] = useState(0)
 
   const update = (index: number, patch: Partial<Selection>) => {
     setSelections((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)))
@@ -115,117 +104,6 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
     onAnswer(request.id, { ...request.input, answers })
   }
 
-  if (lines) {
-    const dismiss = () => onDismiss(request.id, 'Question dismissed by user')
-    return (
-      <div
-        data-slot='question-prompt'
-        className={cn('flex w-full flex-col gap-2', className)}
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') {
-            event.preventDefault()
-            dismiss()
-            return
-          }
-          // Enter belongs to the focused row (it is a button), so committing the
-          // whole form needs the modifier — the composer's own convention.
-          if (event.key === 'Enter' && (event.metaKey || event.ctrlKey) && complete) {
-            event.preventDefault()
-            submit()
-          }
-        }}>
-        {questions.map((q, index) => {
-          const selection = selections[index] ?? EMPTY_SELECTION
-          const cursor = cursors[index] ?? 0
-          const multiSelect = q.multiSelect === true
-          const options = [
-            ...q.options.map((option, optionIndex) => {
-              const selected = selection.labels.includes(option.label)
-              return {
-                key: option.label,
-                label: option.label,
-                description: option.description,
-                // A preview shows on focus, not only on selection: in a list you
-                // walk with the arrow keys, "what does this one look like" is the
-                // question the cursor is asking.
-                detail:
-                  option.preview && (selected || cursor === optionIndex) ? (
-                    <LinePayload code={option.preview} label='Preview' />
-                  ) : undefined,
-                // Both kinds draw their state: without a marker a chosen
-                // one-of is invisible the moment the cursor moves off it.
-                checked: selected,
-                marker: multiSelect ? ('check' as const) : ('radio' as const),
-              }
-            }),
-            {
-              key: '__other',
-              label: 'Other…',
-              checked: selection.otherActive,
-              marker: multiSelect ? ('check' as const) : ('radio' as const),
-              detail: selection.otherActive ? (
-                <LineInput
-                  value={selection.other}
-                  onChange={(value) => update(index, { other: value })}
-                  onSubmit={() => {
-                    // The typed text is already in state, so `complete` is
-                    // current: Enter finishes the form when this was the last
-                    // question outstanding, and is a no-op when it wasn't.
-                    if (complete) submit()
-                  }}
-                  onCancel={() => update(index, { otherActive: false, other: '' })}
-                  placeholder='Type your own answer'
-                />
-              ) : undefined,
-            },
-          ]
-          return (
-            <div key={index} className='flex flex-col'>
-              <div className='flex items-baseline gap-2'>
-                <LineGlyph className='text-fg-3'>?</LineGlyph>
-                <span className='min-w-0 flex-1 text-body-sm leading-5 text-fg-1'>
-                  {q.header ? <span className='text-fg-4'>{q.header} · </span> : null}
-                  <span className='font-medium'>{q.question}</span>
-                </span>
-              </div>
-              <LineOptionList
-                label={q.question}
-                options={options}
-                focused={cursor}
-                active={activeQuestion === index && !selection.otherActive}
-                onFocus={(next) => {
-                  setActiveQuestion(index)
-                  setCursors((prev) => prev.map((c, i) => (i === index ? next : c)))
-                }}
-                onChoose={(next) => {
-                  if (next === q.options.length) {
-                    update(index, { otherActive: !selection.otherActive })
-                    return
-                  }
-                  const option = q.options[next]
-                  if (option) toggle(index, option.label, multiSelect)
-                }}
-              />
-            </div>
-          )
-        })}
-        <div className={cn(LINE_INDENT, 'flex flex-col')}>
-          <button
-            type='button'
-            disabled={!complete}
-            onClick={submit}
-            className='w-fit text-body-sm leading-5 text-accent underline-offset-2 outline-none hover:underline disabled:text-fg-4 disabled:no-underline'>
-            ⏎ Answer
-          </button>
-        </div>
-        <LineHint>
-          ↑↓ move · {multiSelectAnywhere(questions) ? 'space/1–9 toggle' : '1–9 choose'} · ⌘⏎ answer
-          · esc dismiss
-        </LineHint>
-      </div>
-    )
-  }
-
   return (
     <div
       data-slot='question-prompt'

package/src/components/agent/Reasoning.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react'
 import { Brain, ChevronDown } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
 import { Response } from './Response.tsx'
-import { LineGlyph, useLines } from './transcript-variant.tsx'
 
 export interface ReasoningProps {
   children: string
@@ -15,7 +14,6 @@ export interface ReasoningProps {
 /** Collapsible extended-thinking block: open while the model is thinking, tucks itself
  * away once the thought is finished (unless the user toggled it manually). */
 export function Reasoning({ children, isStreaming = false, defaultOpen, className }: ReasoningProps) {
-  const lines = useLines()
   const [open, setOpen] = useState(defaultOpen ?? isStreaming)
   const userToggled = useRef(false)
 
@@ -43,28 +41,16 @@ export function Reasoning({ children, isStreaming = false, defaultOpen, classNam
           userToggled.current = true
           setOpen((v) => !v)
         }}
-        className={cn(
-          'flex items-baseline text-label text-fg-3 transition-colors outline-none disabled:cursor-default hover:text-fg-1 disabled:hover:text-fg-3',
-          lines ? 'w-full gap-2' : 'items-center gap-1.5',
-        )}>
-        {lines ? (
-          <LineGlyph className='text-fg-4'>✻</LineGlyph>
-        ) : (
-          <Brain className='size-3.5' />
-        )}
-        <span className={cn(lines && 'leading-5')}>
-          {isStreaming ? 'Thinking…' : 'Thought process'}
-        </span>
-        {hasText && !lines ? (
+        className='flex items-center gap-1.5 text-label text-fg-3 transition-colors outline-none disabled:cursor-default hover:text-fg-1 disabled:hover:text-fg-3'>
+        <Brain className='size-3.5' />
+        <span>{isStreaming ? 'Thinking…' : 'Thought process'}</span>
+        {hasText ? (
           <ChevronDown className={cn('size-3.5 transition-transform', open && 'rotate-180')} />
         ) : null}
       </button>
       {open && hasText ? (
         <div
-          className={cn(
-            'border-l border-border text-body-sm text-fg-3 [&_*]:text-fg-3',
-            lines ? 'ml-[0.4375rem] mt-0.5 pl-2 leading-5' : 'mt-2 border-l-2 pl-3',
-          )}>
+          className='mt-2 border-l-2 border-border pl-3 text-body-sm text-fg-3 [&_*]:text-fg-3'>
           <Response streaming={isStreaming}>{children}</Response>
         </div>
       ) : null}