@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/ProjectIcon.tsx

@@ -1,87 +1,231 @@
 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,
+  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,
+  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,
 }
 
@@ -92,27 +236,18 @@ export function ProjectIcon({
   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) {
+    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)}
-      />
-    )
+    if (!src) {
+      return null
+    }
+    return <img src={src} alt="" aria-hidden title={name} 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/PromptTokenText.tsx

@@ -2,33 +2,27 @@ import { Fragment } from 'react'
 import { scanPromptTokens } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
 
-/**
- * A sent message, with its `@file` and `/command` tokens styled the way the CLI
- * writes them: monospace and tinted, no background — the bubble already has one,
- * and a second fill inside it reads as a button.
- *
- * Literal text, never markdown: what was typed is what was sent. The one pass
- * over it is this, so a message reads the same after sending as it did in the
- * composer. Two tokens, two meanings — a file is a reference, a command is an
- * action — so they are told apart by hue rather than by shape alone.
- */
 export function PromptTokenText({ text, className }: { text: string; className?: string }) {
   const tokens = scanPromptTokens(text)
-  if (tokens.length === 0) return <span className={className}>{text}</span>
+  if (tokens.length === 0) {
+    return <span className={className}>{text}</span>
+  }
   const parts: React.ReactNode[] = []
   let cursor = 0
   for (const [index, token] of tokens.entries()) {
-    if (token.start > cursor) parts.push(text.slice(cursor, token.start))
+    if (token.start > cursor) {
+      parts.push(text.slice(cursor, token.start))
+    }
     parts.push(
-      <span
-        key={`${token.start}-${index}`}
-        className={cn('font-mono', token.kind === 'file' ? 'text-accent' : 'text-info')}>
+      <span key={`${token.start}-${index}`} className={cn('font-mono', token.kind === 'file' ? 'text-accent' : 'text-info')}>
         {token.text}
       </span>,
     )
     cursor = token.end
   }
-  if (cursor < text.length) parts.push(text.slice(cursor))
+  if (cursor < text.length) {
+    parts.push(text.slice(cursor))
+  }
   return (
     <span className={className}>
       {parts.map((part, index) => (

package/src/components/agent/QuestionPrompt.tsx

@@ -1,10 +1,5 @@
 import { useState } from 'react'
-import type {
-  PermissionRequest,
-  QuestionBehavior,
-  UserQuestion,
-  UserQuestionOption,
-} from '@workerdeck/protocol'
+import type { PermissionRequest, QuestionBehavior, UserQuestion, UserQuestionOption } from '@workerdeck/protocol'
 import { MessageCircleQuestion, X } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
 import { Button } from '../ui/Button.tsx'
@@ -17,23 +12,23 @@ export type QuestionBehaviorMeta = {
   description: string
 }
 
-/** The AskUserQuestion policies surfaced on job/session creation forms. */
 export const QUESTION_BEHAVIORS: QuestionBehaviorMeta[] = [
   { value: 'auto', label: 'Auto-answer', description: 'pick each question’s recommended option' },
   { value: 'ask', label: 'Ask', description: 'wait for a watcher or webhook controller to answer' },
   { value: 'deny', label: 'Disabled', description: 'the agent is told to decide on its own' },
 ]
 
-/** Extract well-formed questions from an AskUserQuestion permission request's input. */
 export function parseUserQuestions(input: Record<string, unknown>): UserQuestion[] {
   const raw = Array.isArray(input.questions) ? input.questions : []
   return raw.flatMap((entry): UserQuestion[] => {
     const q = entry as Partial<UserQuestion>
-    if (typeof q.question !== 'string' || !Array.isArray(q.options)) return []
-    const options = q.options.filter(
-      (o): o is UserQuestionOption => typeof (o as UserQuestionOption | undefined)?.label === 'string',
-    )
-    if (options.length === 0) return []
+    if (typeof q.question !== 'string' || !Array.isArray(q.options)) {
+      return []
+    }
+    const options = q.options.filter((o): o is UserQuestionOption => typeof (o as UserQuestionOption | undefined)?.label === 'string')
+    if (options.length === 0) {
+      return []
+    }
     return [
       {
         question: q.question,
@@ -49,33 +44,24 @@ type Selection = { labels: string[]; other: string; otherActive: boolean }
 
 const EMPTY_SELECTION: Selection = { labels: [], other: '', otherActive: false }
 
-/** A question's answer string: chosen label(s) (multi-select comma-joined), with any
- * free-text "Other" appended — the value the CLI expects in `updatedInput.answers`. */
 function answerFor(selection: Selection): string {
   const parts = [...selection.labels]
-  if (selection.otherActive && selection.other.trim()) parts.push(selection.other.trim())
+  if (selection.otherActive && selection.other.trim()) {
+    parts.push(selection.other.trim())
+  }
   return parts.join(', ')
 }
 
 export interface QuestionPromptProps {
-  /** A pending permission whose toolName is 'AskUserQuestion'. */
   request: PermissionRequest
-  /** Allow the tool with `updatedInput` (the original input plus `answers`). */
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void
-  /** Deny the tool — the model proceeds without an answer. */
   onDismiss: (requestId: string, message?: string) => void
   className?: string
 }
 
-/** Interactive form for the AskUserQuestion tool: option buttons per question
- * (multi-select where the question allows it), a free-text "Other" escape hatch,
- * 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 questions = parseUserQuestions(request.input)
-  const [selections, setSelections] = useState<Selection[]>(() =>
-    questions.map(() => EMPTY_SELECTION),
-  )
+  const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY_SELECTION))
 
   const update = (index: number, patch: Partial<Selection>) => {
     setSelections((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)))
@@ -85,9 +71,7 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
     const current = selections[index] ?? EMPTY_SELECTION
     if (multiSelect) {
       update(index, {
-        labels: current.labels.includes(label)
-          ? current.labels.filter((l) => l !== label)
-          : [...current.labels, label],
+        labels: current.labels.includes(label) ? current.labels.filter((l) => l !== label) : [...current.labels, label],
       })
     } else {
       update(index, { labels: current.labels[0] === label ? [] : [label], otherActive: false })
@@ -105,58 +89,52 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
   }
 
   return (
-    <div
-      data-slot='question-prompt'
-      className={cn('rounded-lg border border-info/40 bg-info-bg p-3', className)}>
-      <div className='flex items-start gap-2.5'>
-        <MessageCircleQuestion className='mt-0.5 size-4 shrink-0 text-info' />
-        <div className='flex min-w-0 flex-1 flex-col gap-3'>
+    <div data-slot="question-prompt" className={cn('rounded-lg border border-info/40 bg-info-bg p-3', className)}>
+      <div className="flex items-start gap-2.5">
+        <MessageCircleQuestion className="mt-0.5 size-4 shrink-0 text-info" />
+        <div className="flex min-w-0 flex-1 flex-col gap-3">
           {questions.map((q, index) => {
             const selection = selections[index] ?? EMPTY_SELECTION
             return (
-              <div key={index} className='flex flex-col gap-1.5'>
-                <div className='flex items-center gap-2'>
-                  {q.header ? <Badge variant='info'>{q.header}</Badge> : null}
-                  <span className='text-body-sm font-medium text-fg-1'>{q.question}</span>
+              <div key={index} className="flex flex-col gap-1.5">
+                <div className="flex items-center gap-2">
+                  {q.header ? <Badge variant="info">{q.header}</Badge> : null}
+                  <span className="text-body-sm font-medium text-fg-1">{q.question}</span>
                 </div>
-                <div className='flex flex-col gap-1'>
+                <div className="flex flex-col gap-1">
                   {q.options.map((option) => {
                     const selected = selection.labels.includes(option.label)
                     return (
                       <button
                         key={option.label}
-                        type='button'
+                        type="button"
                         onClick={() => toggle(index, option.label, q.multiSelect === true)}
                         className={cn(
                           'rounded-md border px-2.5 py-1.5 text-left transition-colors',
-                          selected
-                            ? 'border-info bg-bg'
-                            : 'border-border bg-bg/50 hover:border-border-strong hover:bg-bg',
-                        )}>
-                        <span className='block text-body-sm font-medium text-fg-1'>
-                          {option.label}
-                        </span>
-                        {option.description ? (
-                          <span className='block text-label text-fg-4'>{option.description}</span>
-                        ) : null}
+                          selected ? 'border-info bg-bg' : 'border-border bg-bg/50 hover:border-border-strong hover:bg-bg',
+                        )}
+                      >
+                        <span className="block text-body-sm font-medium text-fg-1">{option.label}</span>
+                        {option.description ? <span className="block text-label text-fg-4">{option.description}</span> : null}
                         {selected && option.preview ? (
-                          <pre className='mt-1.5 max-h-40 overflow-auto rounded-md bg-code-bg px-2.5 py-1.5 font-mono text-label whitespace-pre-wrap text-fg-2'>
+                          <pre className="mt-1.5 max-h-40 overflow-auto rounded-md bg-code-bg px-2.5 py-1.5 font-mono text-label whitespace-pre-wrap text-fg-2">
                             {option.preview}
                           </pre>
                         ) : null}
                       </button>
                     )
                   })}
-                  <div className='flex items-center gap-2'>
+                  <div className="flex items-center gap-2">
                     <button
-                      type='button'
+                      type="button"
                       onClick={() => update(index, { otherActive: !selection.otherActive })}
                       className={cn(
                         'shrink-0 rounded-md border px-2.5 py-1.5 text-body-sm font-medium transition-colors',
                         selection.otherActive
                           ? 'border-info bg-bg text-fg-1'
                           : 'border-border bg-bg/50 text-fg-3 hover:border-border-strong hover:bg-bg',
-                      )}>
+                      )}
+                    >
                       Other…
                     </button>
                     {selection.otherActive ? (
@@ -164,8 +142,8 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
                         autoFocus
                         value={selection.other}
                         onChange={(e) => update(index, { other: e.target.value })}
-                        placeholder='Type your own answer'
-                        className='flex-1'
+                        placeholder="Type your own answer"
+                        className="flex-1"
                       />
                     ) : null}
                   </div>
@@ -174,18 +152,19 @@ export function QuestionPrompt({ request, onAnswer, onDismiss, className }: Ques
             )
           })}
           <div>
-            <Button size='sm' onClick={submit} disabled={!complete}>
+            <Button size="sm" onClick={submit} disabled={!complete}>
               Answer
             </Button>
           </div>
         </div>
         <Button
-          variant='ghost'
-          size='icon-sm'
-          aria-label='Dismiss question'
-          className='shrink-0'
-          onClick={() => onDismiss(request.id, 'Question dismissed by user')}>
-          <X className='size-3.5' />
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Dismiss question"
+          className="shrink-0"
+          onClick={() => onDismiss(request.id, 'Question dismissed by user')}
+        >
+          <X className="size-3.5" />
         </Button>
       </div>
     </div>

package/src/components/agent/Reasoning.tsx

@@ -5,20 +5,19 @@ import { Response } from './Response.tsx'
 
 export interface ReasoningProps {
   children: string
-  /** Auto-opens while true, auto-closes shortly after it flips false. */
   isStreaming?: boolean
   defaultOpen?: boolean
   className?: string
 }
 
-/** 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 [open, setOpen] = useState(defaultOpen ?? isStreaming)
   const userToggled = useRef(false)
 
   useEffect(() => {
-    if (userToggled.current) return
+    if (userToggled.current) {
+      return
+    }
     if (isStreaming) {
       setOpen(true)
     } else {
@@ -27,30 +26,28 @@ export function Reasoning({ children, isStreaming = false, defaultOpen, classNam
     }
   }, [isStreaming])
 
-  // Models with encrypted thinking emit the blocks but never the summary text. Then there is
-  // nothing to expand: show a bare "Thinking…" marker live, and nothing at all once it's done.
   const hasText = children.trim() !== ''
-  if (!hasText && !isStreaming) return null
+  if (!hasText && !isStreaming) {
+    return null
+  }
 
   return (
-    <div data-slot='reasoning' data-streaming={isStreaming || undefined} className={cn('w-full', className)}>
+    <div data-slot="reasoning" data-streaming={isStreaming || undefined} className={cn('w-full', className)}>
       <button
-        type='button'
+        type="button"
         disabled={!hasText}
         onClick={() => {
           userToggled.current = true
           setOpen((v) => !v)
         }}
-        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' />
+        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}
+        {hasText ? <ChevronDown className={cn('size-3.5 transition-transform', open && 'rotate-180')} /> : null}
       </button>
       {open && hasText ? (
-        <div
-          className='mt-2 border-l-2 border-border pl-3 text-body-sm text-fg-3 [&_*]:text-fg-3'>
+        <div 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}