@workerdeck/ui 0.13.0 → 0.16.0

package/src/components/agent/Composer.tsx

@@ -1,4 +1,12 @@
-import { useImperativeHandle, useMemo, useRef, useState, type ReactNode, type Ref } from 'react'
+import {
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type DragEvent,
+  type ReactNode,
+  type Ref,
+} from 'react'
 import type { SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
 import type { StagedAttachment, UseAttachmentsResult } from '@workerdeck/react'
 import {
@@ -16,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'
@@ -69,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>
 }
@@ -137,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)
@@ -314,36 +341,69 @@ export function Composer({
   const attach = canAttach ? (
     <>
       {fileField}
-      {inline ? (
-        // 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 = inline ? (
+  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
@@ -365,36 +425,119 @@ export function Composer({
     </Button>
   )
 
+  const dropHandlers = {
+    onDragOver: (e: DragEvent) => {
+      if (attachments && !attachments.disabled) {
+        e.preventDefault()
+        setDragging(true)
+      }
+    },
+    onDragLeave: () => setDragging(false),
+    onDrop: (e: DragEvent) => {
+      if (!attachments || attachments.disabled) return
+      e.preventDefault()
+      setDragging(false)
+      pick(e.dataTransfer.files)
+    },
+  }
+
+  const errorRow = attachments?.error ? (
+    <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',
+      )}>
+      <TriangleAlert className='size-3 shrink-0' />
+      <span className='min-w-0 flex-1'>{attachments.error}</span>
+      <button
+        type='button'
+        onClick={attachments.dismissError}
+        aria-label='Dismiss'
+        className='shrink-0 opacity-70 hover:opacity-100'>
+        <X className='size-3' />
+      </button>
+    </div>
+  ) : null
+
+  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)}>
+        <TerminalSurface
+          {...dropHandlers}
+          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}
+            <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 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='term-row'>
+                <span aria-hidden className='term-gutter' />
+                <div className='flex min-w-0 items-center gap-[1ch]'>{toolbar}</div>
+              </div>
+            ) : null}
+          </div>
+        </TerminalSurface>
+        {errorRow}
+      </div>
+    )
+  }
+
   return (
     <div data-slot='composer' className={cn('px-3 pb-3', className)}>
       <div
-        onDragOver={(e) => {
-          if (attachments && !attachments.disabled) {
-            e.preventDefault()
-            setDragging(true)
-          }
-        }}
-        onDragLeave={() => setDragging(false)}
-        onDrop={(e) => {
-          if (!attachments || attachments.disabled) return
-          e.preventDefault()
-          setDragging(false)
-          pick(e.dataTransfer.files)
-        }}
+        {...dropHandlers}
         className={cn(
           'mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden border border-border bg-bg',
-          'transition-colors',
-          // VS Code's input: a flat, near-square box that gains a 1px accent
-          // border on focus. No radius worth the name, no shadow, no glow ring —
-          // an editor's chrome sits *in* the surface rather than floating above
-          // it, and the `lines` transcript above it has no rounded box either.
-          lines
-            ? 'rounded-sm focus-within:border-accent'
-            : cn(
-                'rounded-lg shadow-(--shadow-xs)',
-                'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30',
-              ),
-          dragging && (lines ? 'border-accent' : 'border-ring ring-2 ring-ring/30'),
+          'transition-colors rounded-lg shadow-(--shadow-xs)',
+          'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30',
+          dragging && 'border-ring ring-2 ring-ring/30',
           disabled && 'opacity-60',
         )}>
         {/* Above the field, like the picture you are talking about should be. */}
@@ -412,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}
@@ -428,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}
@@ -447,40 +596,36 @@ export function Composer({
           </>
         )}
       </div>
-      {attachments?.error ? (
-        <div className='mx-auto mt-1 flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-danger'>
-          <TriangleAlert className='size-3 shrink-0' />
-          <span className='min-w-0 flex-1'>{attachments.error}</span>
-          <button
-            type='button'
-            onClick={attachments.dismissError}
-            aria-label='Dismiss'
-            className='shrink-0 opacity-70 hover:opacity-100'>
-            <X className='size-3' />
-          </button>
-        </div>
-      ) : null}
+      {errorRow}
     </div>
   )
 }
 
 /**
- * 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
 }) {
@@ -491,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>
   )
@@ -507,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}
@@ -531,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' />
         ) : (
@@ -552,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}
@@ -561,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}
@@ -569,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>
   )
 }