@workerdeck/ui 0.15.0 → 0.17.0

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,67 +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 ? (
-        <>
-          {/* The prompt marker is accent, the same blue VS Code's own chat and
-              the iOS app give it: in a column of grey rows it is the one thing
-              that says "you said this", and it is what the eye scrolls back to. */}
-          <LineGlyph className={from === 'user' ? 'text-accent' : '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/ProjectIcon.tsx

@@ -0,0 +1,119 @@
+import type { ProjectIcon as ProjectIconSpec } from '@workerdeck/protocol'
+import {
+  Anchor, Atom, Beaker, Bike, Binary, Blocks, Bot, Box, Brain, Briefcase, Brush, Bug,
+  Building2, Cable, Camera, Car, Cat, CircuitBoard, Cloud, Code, Coffee, Cog, Compass,
+  Container, Cpu, CreditCard, Database, Diamond, Dog, Feather, Film, Flame, FlaskConical,
+  Folder, Gamepad2, Gauge, Gem, Ghost, Gift, GitBranch, Globe, GraduationCap, Hammer,
+  Hexagon, House, Image, Key, Landmark, Laptop, Layers, Leaf, Library, Lightbulb, Lock,
+  Mail, Map, MessageCircle, Mic, Monitor, Moon, Mountain, Music, Network, Newspaper,
+  Notebook, Orbit, Package, Palette, PenTool, Phone, PiggyBank, Plane, Plug, Puzzle,
+  Radar, Radio, Receipt, Rocket, Ruler, Satellite, Scale, Scissors, Server, Shield, Ship,
+  ShoppingCart, Signal, Smartphone, Sparkles, Sprout, Square, Star, Sun, Table, Tag,
+  Target, Telescope, Terminal, TestTube, TreePine, Trophy, Truck, Umbrella, Users, Wallet,
+  Wand, Waves, Webhook, Wifi, Wrench, Zap,
+} from 'lucide-react'
+import type { ComponentType } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+/**
+ * A project's icon — the render side of protocol's `ProjectIcon`, for a list
+ * row or a group header.
+ *
+ * **The glyph arm is a curated set, and that is the design rather than a
+ * shortcut.** The gateway validates a glyph name by *shape* only (lucide's
+ * lowercase-kebab convention) and explicitly declines to grow an icon catalog,
+ * so the contract already says a client must fall back on a name it does not
+ * know.
+ *
+ * The alternative was measured rather than argued, against the VS Code
+ * sidebar's own bundle: `sidebar.js` is **31 KB** with one glyph, **77 KB**
+ * with the 110 below (~418 bytes each), and **927 KB** with a
+ * `import * as` over lucide's ~1,600 — which is what it costs, because a
+ * namespace import defeats tree-shaking by construction. (`DynamicIcon` is the
+ * third option and worse in a different currency: ~1,600 chunk files shipped
+ * inside the `.vsix`.) Twelve times the bundle to render a name nobody has
+ * declared yet is not a trade worth making; 46 KB to cover the names people
+ * actually use is.
+ *
+ * The set is chosen to cover what people call a project; an unlisted-but-valid
+ * name draws {@link Folder}, which is what the row drew before this feature
+ * existed. **Grow it freely** — each addition is ~400 bytes and the fallback
+ * means a missing one is a shrug, not a hole.
+ *
+ * **The image arm draws nothing until its bytes arrive**, and takes them as a
+ * resolved `src` rather than fetching: the wire carries only an address
+ * (media type, size, content hash), and *who* fetches it differs per client —
+ * a VS Code webview cannot reach a gateway at all and must be handed a data
+ * URL by its extension host, while a browser can fetch and `createObjectURL`.
+ * A component that fetched would be wrong on one of them. Absent `src` renders
+ * nothing rather than a placeholder box: an icon is decoration beside a name
+ * that is already there, and a box that becomes a picture a beat later is more
+ * movement than the picture is worth.
+ *
+ * One thing an image icon cannot do, and a glyph can: **take the row's
+ * colour.** An `<img>`-embedded SVG is its own document, so `currentColor` does
+ * not reach it and its own `prefers-color-scheme` resolves against the *OS*
+ * rather than the host's theme (measured: it does resolve, which is the
+ * surprise — so a monochrome mark tuned for both schemes is right on a dark OS
+ * in a dark editor and wrong on a light OS in a dark one). A repo that wants a
+ * mark that always matches its row should declare a glyph; one that wants its
+ * brand should declare the image and accept that it is a picture.
+ */
+const GLYPHS: Record<string, ComponentType<{ className?: string }>> = {
+  anchor: Anchor, atom: Atom, beaker: Beaker, bike: Bike, binary: Binary, blocks: Blocks,
+  bot: Bot, box: Box, brain: Brain, briefcase: Briefcase, brush: Brush, bug: Bug,
+  'building-2': Building2, cable: Cable, camera: Camera, car: Car, cat: Cat,
+  'circuit-board': CircuitBoard, cloud: Cloud, code: Code, coffee: Coffee, cog: Cog,
+  compass: Compass, container: Container, cpu: Cpu, 'credit-card': CreditCard,
+  database: Database, diamond: Diamond, dog: Dog, feather: Feather, film: Film,
+  flame: Flame, 'flask-conical': FlaskConical, folder: Folder, 'gamepad-2': Gamepad2,
+  gauge: Gauge, gem: Gem, ghost: Ghost, gift: Gift, 'git-branch': GitBranch, globe: Globe,
+  'graduation-cap': GraduationCap, hammer: Hammer, hexagon: Hexagon, house: House,
+  image: Image, key: Key, landmark: Landmark, laptop: Laptop, layers: Layers, leaf: Leaf,
+  library: Library, lightbulb: Lightbulb, lock: Lock, mail: Mail, map: Map,
+  'message-circle': MessageCircle, mic: Mic, monitor: Monitor, moon: Moon,
+  mountain: Mountain, music: Music, network: Network, newspaper: Newspaper,
+  notebook: Notebook, orbit: Orbit, package: Package, palette: Palette, 'pen-tool': PenTool,
+  phone: Phone, 'piggy-bank': PiggyBank, plane: Plane, plug: Plug, puzzle: Puzzle,
+  radar: Radar, radio: Radio, receipt: Receipt, rocket: Rocket, ruler: Ruler,
+  satellite: Satellite, scale: Scale, scissors: Scissors, server: Server, shield: Shield,
+  ship: Ship, 'shopping-cart': ShoppingCart, signal: Signal, smartphone: Smartphone,
+  sparkles: Sparkles, sprout: Sprout, square: Square, star: Star, sun: Sun, table: Table,
+  tag: Tag, target: Target, telescope: Telescope, terminal: Terminal, 'test-tube': TestTube,
+  'tree-pine': TreePine, trophy: Trophy, truck: Truck, umbrella: Umbrella, users: Users,
+  wallet: Wallet, wand: Wand, waves: Waves, webhook: Webhook, wifi: Wifi, wrench: Wrench,
+  zap: Zap,
+}
+
+export function ProjectIcon({
+  icon,
+  src,
+  name,
+  className,
+}: {
+  icon: ProjectIconSpec | undefined
+  /** Resolved bytes for the `image` arm — an object URL or a data URL. The
+   * caller fetches (see the note above); absent draws nothing. */
+  src?: string
+  /** The project's name, for the alt text. */
+  name?: string
+  className?: string
+}) {
+  if (!icon) return null
+  if (icon.type === 'image') {
+    if (!src) return null
+    return (
+      <img
+        src={src}
+        alt=''
+        aria-hidden
+        title={name}
+        // `object-contain` because a declared icon is whatever aspect the repo
+        // checked in, and a squashed logo reads worse than a letterboxed one.
+        className={cn('inline-block size-3 shrink-0 object-contain', className)}
+      />
+    )
+  }
+  const Glyph = GLYPHS[icon.name] ?? Folder
+  return <Glyph className={cn('inline-block size-3 shrink-0', className)} />
+}

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}