@workerdeck/ui 0.15.0 → 0.16.0

package/src/components/agent/Composer.tsx

@@ -24,7 +24,10 @@ import { Spinner } from '../ui/Spinner.tsx'
 import { PromptArea } from '../prompt-area/prompt-area.tsx'
 import { usePromptAreaState } from '../prompt-area/use-prompt-area-state.ts'
 import { commandTrigger, mentionTrigger } from '../prompt-area/trigger-presets.ts'
-import { useLines } from './transcript-variant.tsx'
+import { useTranscriptVariant } from './transcript-variant.tsx'
+import type { TerminalAffordances } from '../terminal/affordances.tsx'
+import { PROMPT_GLYPH } from '../terminal/items.tsx'
+import { TerminalSurface } from '../terminal/surface.tsx'
 import type { TriggerSuggestion } from '../prompt-area/types.ts'
 import { cn } from '../../lib/utils.ts'
 import { formatBytes } from '../../lib/format.ts'
@@ -77,6 +80,19 @@ export interface ComposerProps {
    * empty composer would otherwise spend two rows saying nothing.
    */
   layout?: 'stacked' | 'inline'
+  /**
+   * Terminal theme only: the cell the composer draws on. Passed straight
+   * through to its own {@link TerminalSurface}, and it has to be passed — the
+   * composer sits outside the transcript's scroller, so it establishes a second
+   * surface, and a surface handed no metrics falls back to the 13/18 default. A
+   * host running the transcript at its editor's size and the composer at the
+   * default would have the caret land on a different column from the text above
+   * it, which is the one thing this theme exists to prevent.
+   */
+  fontSize?: number
+  lineHeight?: number
+  /** Terminal theme only; see {@link TerminalAffordances}. */
+  affordances?: TerminalAffordances | boolean
   className?: string
   ref?: Ref<ComposerHandle>
 }
@@ -145,13 +161,16 @@ export function Composer({
   attachments,
   toolbar,
   layout = 'stacked',
+  fontSize,
+  lineHeight,
+  affordances,
   className,
   ref,
 }: ComposerProps) {
   const inline = layout === 'inline'
   // The transcript's variant reaches here through the panel-wide context, so
   // the composer matches the rows above it without a prop chain.
-  const lines = useLines()
+  const terminal = useTranscriptVariant() === 'terminal'
   const { bind, plainText, isEmpty, clear, focus } = usePromptAreaState()
   const fileInput = useRef<HTMLInputElement>(null)
   const [dragging, setDragging] = useState(false)
@@ -322,36 +341,69 @@ export function Composer({
   const attach = canAttach ? (
     <>
       {fileField}
-      {lines ? (
-        // The glyph sits in the same 14px gutter the transcript's markers use,
-        // so the typed line starts on the column the conversation does.
-        <GlyphButton label='Attach files' disabled={disabled} onClick={() => fileInput.current?.click()}>
-          +
-        </GlyphButton>
-      ) : (
-        <Button
-          variant='ghost'
-          size='icon-sm'
-          aria-label='Attach files'
-          disabled={disabled}
-          onClick={() => fileInput.current?.click()}>
-          <Paperclip className='size-4' />
-        </Button>
-      )}
+      <Button
+        variant='ghost'
+        size='icon-sm'
+        aria-label='Attach files'
+        disabled={disabled}
+        onClick={() => fileInput.current?.click()}>
+        <Paperclip className='size-4' />
+      </Button>
     </>
   ) : null
 
+  /**
+   * The terminal composer's **gutter cell** — the one column every transcript
+   * row's marker sits in, so whatever stands here cannot move the text beside
+   * it. It holds one of three things, in this order:
+   *
+   * `✕` **while the session is working**, because the gutter is where the eye
+   * already is (it is the column the pulse and every marker share) and stop is
+   * the only action that matters mid-run. Note the condition is `busy` alone,
+   * not the old `busy && !canSend`: with send living on the other side of the
+   * field there is no longer a slot to compete for, so typing a follow-up while
+   * a turn runs no longer hides the way to stop it.
+   *
+   * A cross rather than the `■` this started as: the square reads as a *state*
+   * ("stopped") in a column where `●` and `◆` really are states, so it looked
+   * like a status marker rather than something to press. A cross reads as an
+   * action and collides with nothing else on the column. It is also one of the
+   * few candidates that measures exactly 1ch in JetBrains Mono — `⏹`, `⏸` and
+   * `⏻`, the obvious picks, are 1.05–1.31 cells and would break the grid.
+   *
+   * `+` **otherwise**, when there is anything to attach — the composer's own
+   * affordance, in the composer's own gutter.
+   *
+   * `❯` when neither applies, so the column is never empty and the typed line
+   * never shifts. Blue, not the brand's coral: coral is the *working* mark, and
+   * a prompt waiting for you is not the session working.
+   */
+  const gutter = busy ? (
+    <GlyphButton gutter label='Interrupt' tone='yellow' onClick={onInterrupt}>
+      ✕
+    </GlyphButton>
+  ) : canAttach ? (
+    <GlyphButton
+      gutter
+      label='Attach files'
+      disabled={disabled}
+      onClick={() => fileInput.current?.click()}>
+      +
+    </GlyphButton>
+  ) : (
+    <span aria-hidden className='term-gutter' data-tone='blue'>
+      {PROMPT_GLYPH}
+    </span>
+  )
+
   const interrupting = busy && !canSend
-  const submitButton = lines ? (
+  const submitButton = terminal ? (
     // Terminal furniture rather than chat furniture: a glyph that lights up on
-    // hover/focus instead of a filled pill. `↵` is what sends, `■` is what stops
-    // — the same two symbols the keyboard and a shell already use.
-    <GlyphButton
-      label={interrupting ? 'Interrupt' : 'Send'}
-      disabled={!interrupting && !canSend}
-      onClick={interrupting ? onInterrupt : submit}
-      className={interrupting ? 'text-warning' : canSend ? 'text-accent' : undefined}>
-      {interrupting ? '■' : '↵'}
+    // hover/focus instead of a filled pill. `↵` is the only thing on this side
+    // now — stop moved to the gutter — so it means one thing at all times, and
+    // a reader never has to check which symbol is currently under their cursor.
+    <GlyphButton label='Send' disabled={!canSend} onClick={submit} tone={canSend ? 'blue' : undefined}>
+      ↵
     </GlyphButton>
   ) : interrupting ? (
     <Button
@@ -393,7 +445,6 @@ export function Composer({
     <div
       className={cn(
         'mx-auto mt-1 flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-danger',
-        lines && 'px-2',
       )}>
       <TriangleAlert className='size-3 shrink-0' />
       <span className='min-w-0 flex-1'>{attachments.error}</span>
@@ -407,59 +458,72 @@ export function Composer({
     </div>
   ) : null
 
-  if (lines) {
-    // Docked, not floating: the composer is the foot of the panel rather than a
-    // card sitting on it. No gutter, no radius, no shadow, and **one** border —
-    // the rule along the top — which turns accent while anything inside has
-    // focus. That single blue line is the whole affordance, which is what VS
-    // Code's own agent view does and what the transcript above (no boxes) asks
-    // for. The bar spans the panel; its contents stay in the transcript's
-    // column, so the typed line starts where the conversation does.
+  if (terminal) {
+    // The CLI's own prompt, on the CLI's own grid: `>` sits in the gutter cell
+    // every transcript row's marker sits in, so what you type starts on the
+    // column what you are reading starts on. That alignment is the entire
+    // reason this is its own branch rather than the docked chrome restyled —
+    // the composer is outside the transcript's scroller, so it needs a surface
+    // of its own, at the same metrics.
+    const line = lineHeight ?? 18
     return (
       <div data-slot='composer' className={cn('shrink-0', className)}>
-        <div
+        <TerminalSurface
           {...dropHandlers}
-          className={cn(
-            // `min-h`, not `h`: one line matches the status bar below it exactly
-            // — two strips of one piece of chrome — and it still grows with the
-            // message, which a fixed height would not.
-            'flex min-h-[38px] flex-col justify-center',
-            'border-t border-border bg-bg transition-colors',
-            'focus-within:border-t-accent',
-            dragging && 'border-t-accent',
-            disabled && 'opacity-60',
-          )}>
-          <div className='mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] px-2 py-1'>
+          fontSize={fontSize}
+          lineHeight={lineHeight}
+          affordances={affordances}
+          bleed='1ch'
+          data-dragging={dragging || undefined}
+          className={cn('term-composer', disabled && 'opacity-60')}>
+          <div className='term-composer-body'>
             {staged.length > 0 && attachments ? (
               <AttachmentStrip attachments={attachments} />
             ) : null}
-            {/* One row until the message needs more: the field grows into the
-                space rather than the frame reserving it, and the buttons stay
-                bottom-aligned as it does. */}
-            <div className='flex items-end gap-1'>
-              {attach}
-              <PromptArea
-                {...bind}
-                triggers={triggers}
-                onSubmit={submit}
-                disabled={disabled}
-                placeholder={disabled ? 'Session ended' : placeholder}
-                minHeight={20}
-                maxHeight={192}
-                aria-label='Message the agent'
-                className='min-w-0 flex-1 py-0.5 text-body-sm text-text'
-                onImagePaste={(file) => attachments?.add([file])}
-              />
-              {submitButton}
+            <div className='term-row'>
+              {/* The hidden input only — its trigger lives in the gutter. */}
+              {canAttach ? fileField : null}
+              {gutter}
+              <div className='flex min-w-0 items-start'>
+                <PromptArea
+                  {...bind}
+                  triggers={triggers}
+                  // What the agent receives is markdown, so the marker the user
+                  // typed is the marker that has to survive. Left on (the
+                  // default), the editor rewrites `- ` to `• ` in the *model*,
+                  // not just on screen — so a bulleted message reached the agent
+                  // as `• item`, which is not a list in any markdown parser, and
+                  // drew a glyph the character grid has no cell for. Off, the
+                  // convenience stays and only the rewrite goes:
+                  // `insertListContinuation` keys on `[•\-*] ` and reuses the
+                  // line's own marker, so Enter after `- item` still inserts
+                  // `\n- `, and Enter on an empty item still leaves the list.
+                  normalizeBullets={false}
+                  onSubmit={submit}
+                  disabled={disabled}
+                  placeholder={disabled ? 'Session ended' : placeholder}
+                  // The field's own metrics are the cell's: one row is one line,
+                  // and it grows in whole lines from there.
+                  minHeight={line}
+                  maxHeight={line * 10}
+                  aria-label='Message the agent'
+                  className='term-composer-field min-w-0 flex-1'
+                  onImagePaste={(file) => attachments?.add([file])}
+                />
+                {submitButton}
+              </div>
             </div>
-            {/* Model and mode under the field, where an editor's chat puts them.
-                Absent entirely under `controlsSurface: 'external'`, which is how
-                the VS Code panel keeps the composer one row tall. */}
+            {/* Model and mode below the prompt, on the body column so they read
+                as a continuation of the line rather than new chrome. Absent
+                under `controlsSurface: 'external'`. */}
             {toolbar ? (
-              <div className='flex min-w-0 items-center gap-1 pt-1'>{toolbar}</div>
+              <div className='term-row'>
+                <span aria-hidden className='term-gutter' />
+                <div className='flex min-w-0 items-center gap-[1ch]'>{toolbar}</div>
+              </div>
             ) : null}
           </div>
-        </div>
+        </TerminalSurface>
         {errorRow}
       </div>
     )
@@ -491,6 +555,9 @@ export function Composer({
             <PromptArea
               {...bind}
               triggers={triggers}
+              // See the terminal composer above: `•` is not a markdown list
+              // marker, and this rewrite reaches the sent message.
+              normalizeBullets={false}
               onSubmit={submit}
               disabled={disabled}
               placeholder={disabled ? 'Session ended' : placeholder}
@@ -507,6 +574,9 @@ export function Composer({
             <PromptArea
               {...bind}
               triggers={triggers}
+              // See the terminal composer above: `•` is not a markdown list
+              // marker, and this rewrite reaches the sent message.
+              normalizeBullets={false}
               onSubmit={submit}
               disabled={disabled}
               placeholder={disabled ? 'Session ended' : placeholder}
@@ -532,22 +602,30 @@ export function Composer({
 }
 
 /**
- * A composer action as a **character**, for the inline (terminal) layout: no
- * pill, no border, nothing drawn until you reach for it — the surface only
- * appears on hover/focus/press, which is how a terminal's own affordances
- * behave. Sized to the transcript's gutter glyph (14px) so the row's furniture
- * lines up with the conversation above it rather than towering over it.
+ * A composer action as a **character**, for the terminal composer: no pill, no
+ * border, nothing drawn until you reach for it — the surface only appears on
+ * hover/focus, which is how a terminal's own affordances behave.
+ *
+ * One cell wide and one line tall (`term-glyph` in `terminal.css`), so it sits
+ * on the same grid as the row it shares and removing it would move nothing.
  */
 function GlyphButton({
+  tone,
   label,
   disabled,
   onClick,
+  gutter,
   className,
   children,
 }: {
+  tone?: 'blue' | 'yellow'
   label: string
   disabled?: boolean
   onClick: () => void
+  /** Standing in the gutter cell rather than at the row's trailing edge, so the
+   * glyph aligns to the column's start like every transcript marker instead of
+   * centring in the 2ch cell — see `.term-glyph[data-gutter]`. */
+  gutter?: boolean
   className?: string
   children: ReactNode
 }) {
@@ -558,13 +636,9 @@ function GlyphButton({
       title={label}
       disabled={disabled}
       onClick={onClick}
-      className={cn(
-        'flex size-6 shrink-0 items-center justify-center rounded-sm font-mono text-body-sm leading-none',
-        'text-fg-3 transition-colors outline-none select-none',
-        'hover:bg-surface-hover hover:text-fg-1 focus-visible:bg-surface-hover focus-visible:text-fg-1',
-        'active:bg-accent-bg disabled:pointer-events-none disabled:opacity-40',
-        className,
-      )}>
+      data-tone={tone}
+      data-gutter={gutter || undefined}
+      className={cn('term-glyph', className)}>
       {children}
     </button>
   )
@@ -574,8 +648,16 @@ function GlyphButton({
  * the local blob, so nothing here waits on the network; the upload's state rides
  * on top of it and the ✕ takes it back off. */
 function AttachmentStrip({ attachments }: { attachments: UseAttachmentsResult }) {
+  const terminal = useTranscriptVariant() === 'terminal'
   return (
-    <div className='flex gap-2 overflow-x-auto border-b border-border px-2 py-2'>
+    <div
+      className={cn(
+        'flex gap-2 overflow-x-auto',
+        // The terminal form draws no rule of its own: the composer's frame is
+        // already directly below this strip, and two rules a few pixels apart
+        // is the box the theme has none of. Geometry in `terminal.css`.
+        terminal ? 'term-attachments' : 'border-b border-border px-2 py-2',
+      )}>
       {attachments.items.map((item) => (
         <AttachmentChip
           key={item.key}
@@ -598,15 +680,23 @@ function AttachmentChip({
   onRemove: () => void
 }) {
   const failed = item.status === 'failed'
+  const terminal = useTranscriptVariant() === 'terminal'
+  // Corners are the whole difference: rounded and floating in `cards`, square
+  // and inside the frame here. Kept as one flag rather than four so a thumbnail
+  // and the overlays stacked on it cannot disagree about their own shape.
+  const round = terminal ? '' : 'rounded-md'
   return (
     <div
       className='group relative shrink-0'
       title={failed ? `${item.name} — ${item.error}` : `${item.name} · ${formatBytes(item.bytes)}`}>
       <div
         className={cn(
-          'flex size-14 items-center justify-center overflow-hidden rounded-md border border-border bg-surface',
+          'flex size-14 items-center justify-center overflow-hidden bg-surface',
+          round,
+          terminal ? 'term-attachment' : 'border border-border',
           failed && 'border-danger/50',
-        )}>
+        )}
+        data-failed={terminal && failed ? '' : undefined}>
         {item.previewUrl ? (
           <img src={item.previewUrl} alt={item.name} className='size-full object-cover' />
         ) : (
@@ -619,7 +709,7 @@ function AttachmentChip({
         )}
       </div>
       {item.status === 'uploading' ? (
-        <div className='absolute inset-0 flex items-center justify-center rounded-md bg-black/35'>
+        <div className={cn('absolute inset-0 flex items-center justify-center bg-black/35', round)}>
           <Spinner className='size-4 text-white' />
         </div>
       ) : null}
@@ -628,7 +718,10 @@ function AttachmentChip({
           type='button'
           onClick={onRetry}
           aria-label={`Retry ${item.name}`}
-          className='absolute inset-0 flex items-center justify-center rounded-md bg-black/45 text-warning'>
+          className={cn(
+            'absolute inset-0 flex items-center justify-center bg-black/45 text-warning',
+            round,
+          )}>
           <RotateCw className='size-4' />
         </button>
       ) : null}
@@ -636,7 +729,14 @@ function AttachmentChip({
         type='button'
         onClick={onRemove}
         aria-label={`Remove ${item.name}`}
-        className='absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full border border-border bg-surface text-fg-3 shadow-(--shadow-xs) hover:text-fg-1'>
+        className={cn(
+          'absolute flex size-4 items-center justify-center bg-surface text-fg-3 hover:text-fg-1',
+          // Cards hang it off the corner as a round badge; the terminal tucks it
+          // inside, squared, with two rules for its corner (`terminal.css`).
+          terminal
+            ? 'term-attachment-remove'
+            : '-top-1 -right-1 rounded-full border border-border shadow-(--shadow-xs)',
+        )}>
         <X className='size-2.5' />
       </button>
     </div>

package/src/components/agent/Conversation.tsx

@@ -6,25 +6,25 @@ import { cn } from '../../lib/utils.ts'
 
 export interface ConversationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: ReactNode
-  /**
-   * How the view follows content that grows. `'smooth'` is right for a live
-   * turn — the text scrolls as it is written. `'instant'` is right while a
-   * transcript is *filling* (an attach replaying a whole session), where
-   * animating each arrival makes opening a session a several-second journey
-   * from its first row to its last.
-   */
-  resize?: 'smooth' | 'instant'
 }
 
 /** 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, resize = 'smooth', ...props }: ConversationProps) {
+ * scrolls up — plus a floating scroll-to-bottom button.
+ *
+ * **Nothing here animates its scroll position.** `initial` and `resize` are both
+ * `'instant'` and are no longer configurable: the follow spring's job is to
+ * *stay* at the bottom, not to travel there, and every travel a reader has ever
+ * complained about on this surface was an animation we asked for. The `resize`
+ * prop used to exist so a caller could pick, which required the caller to know
+ * whether the transcript was streaming or replaying — a latch's worth of
+ * machinery to decide something that has one right answer. */
+export function Conversation({ className, children, ...props }: ConversationProps) {
   return (
     <StickToBottom
       data-slot='conversation'
       className={cn('relative flex-1 overflow-y-auto', className)}
       initial='instant'
-      resize={resize}
+      resize='instant'
       role='log'
       {...props}>
       {children}
@@ -60,7 +60,7 @@ export function ConversationScrollButton({ className }: { className?: string })
         'absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-(--shadow-md)',
         className,
       )}
-      onClick={() => void scrollToBottom()}>
+      onClick={() => void scrollToBottom('instant')}>
       <ArrowDown className='size-4' />
     </Button>
   )

package/src/components/agent/FileCard.tsx

@@ -2,7 +2,6 @@ import type { TranscriptItem } from '@workerdeck/react'
 import { Download, FileText } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
 import { formatBytes } from '../../lib/format.ts'
-import { LineGlyph, useLines } from './transcript-variant.tsx'
 
 export type FileDeliveredItem = Extract<TranscriptItem, { kind: 'file_delivered' }>
 
@@ -18,32 +17,7 @@ export interface FileCardProps {
  * 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 lines = useLines()
   const name = item.path.split('/').pop() || item.path
-  if (lines) {
-    // One row: what arrived, how big, and the link — no box around it.
-    return (
-      <div data-slot='file-delivered' className={cn('flex w-full items-baseline gap-2', className)}>
-        <LineGlyph className='text-fg-4'>◇</LineGlyph>
-        <span className='min-w-0 flex-1 truncate text-body-sm leading-5'>
-          <span className='font-medium text-fg-1'>{name}</span>
-          <span className='text-fg-4'>
-            {' · '}
-            {formatBytes(item.bytes)}
-            {item.description ? ` · ${item.description}` : ''}
-          </span>
-        </span>
-        {href ? (
-          <a
-            href={href}
-            download={name}
-            className='shrink-0 text-label text-fg-3 underline-offset-2 hover:text-fg-1 hover:underline'>
-            download
-          </a>
-        ) : null}
-      </div>
-    )
-  }
   return (
     <div
       data-slot='file-delivered'

package/src/components/agent/FileTree.tsx

@@ -108,9 +108,7 @@ export function FileTree({
             ) : null}
           </div>
         ) : (
-          <span className='min-w-0 flex-1 truncate px-1 font-mono text-label text-fg-4'>
-            {tree.root}
-          </span>
+          <span className='min-w-0 flex-1 truncate px-1 text-label text-fg-4'>{tree.root}</span>
         )}
         <Button
           variant='ghost'
@@ -259,11 +257,14 @@ function Row({
       <span className='flex size-3 shrink-0 items-center justify-center'>{chevron}</span>
       {icon}
       {/* `shrink-0` on the name and `min-w-0` on the detail: when the row runs
-          out of room the directory gives way and the filename stays whole. */}
-      <span className='shrink-0 truncate font-mono text-label'>{label}</span>
-      {detail ? (
-        <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-4'>{detail}</span>
-      ) : null}
+          out of room the directory gives way and the filename stays whole.
+          The rail reads in the **UI font**, never mono: it is workbench chrome
+          — a list you scan — and the editors it sits beside (VS Code, Finder)
+          all set filenames in their UI face. Mono is for content on a grid, and
+          nothing here is on one. It is also independent of `transcriptFont`,
+          which scopes to the session panel alone. */}
+      <span className='shrink-0 truncate text-label'>{label}</span>
+      {detail ? <span className='min-w-0 flex-1 truncate text-label text-fg-4'>{detail}</span> : null}
     </button>
   )
 }

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>
   )
 }