@workerdeck/ui 0.9.0 → 0.11.0

package/src/components/agent/PermissionModeSelect.tsx

@@ -1,4 +1,6 @@
+import type { LucideIcon } from 'lucide-react'
 import type { PermissionMode } from '@workerdeck/protocol'
+import { ClipboardList, Code, Hand, ShieldCheck, TriangleAlert, Zap } from 'lucide-react'
 import {
   Select,
   SelectContent,
@@ -11,34 +13,128 @@ import { cn } from '../../lib/utils.ts'
 
 export type PermissionModeMeta = {
   value: PermissionMode
+  /** The name Claude Code itself uses. */
   label: string
+  /** The chip form, for bars where the label shares a line with three other
+   * things and "Bypass permissions" would eat half of it. */
+  shortLabel: string
+  /** What the mode actually does — the CLI's own one-liners. */
   description: string
+  icon: LucideIcon
   dangerous?: boolean
 }
 
-/** The modes surfaced across UI surfaces (session creation, in-session switcher). */
+/**
+ * The modes surfaced across UI surfaces (session creation, in-session switcher),
+ * ordered by how much of the approval gate they give away.
+ *
+ * Notably `default` is **"Manual"**: the wire value is `default`, but calling it
+ * that in the UI conflates a real mode (ask me every time) with "whatever the
+ * server picked", which is the one confusion a mode chip exists to avoid. The
+ * naming, the icons and the summaries are shared with the iOS app on purpose —
+ * the two surfaces should read as the same list.
+ */
 export const PERMISSION_MODES: PermissionModeMeta[] = [
-  { value: 'default', label: 'default', description: 'ask for approval' },
-  { value: 'acceptEdits', label: 'acceptEdits', description: 'auto-approve file edits' },
-  { value: 'plan', label: 'plan', description: 'read-only planning' },
-  { value: 'auto', label: 'auto', description: 'model decides when to ask' },
-  { value: 'dontAsk', label: 'dontAsk', description: 'never ask — deny unapproved' },
+  {
+    value: 'default',
+    label: 'Manual',
+    shortLabel: 'Manual',
+    description: 'Always ask before making changes',
+    icon: Hand,
+  },
+  {
+    value: 'acceptEdits',
+    label: 'Accept edits',
+    shortLabel: 'Edits',
+    description: 'Automatically accept all file edits',
+    icon: Code,
+  },
+  {
+    value: 'plan',
+    label: 'Plan',
+    shortLabel: 'Plan',
+    description: 'Create a plan before making changes',
+    icon: ClipboardList,
+  },
+  {
+    value: 'auto',
+    label: 'Auto',
+    shortLabel: 'Auto',
+    description: 'Claude handles permission decisions',
+    icon: Zap,
+  },
+  {
+    value: 'dontAsk',
+    label: "Don't ask",
+    shortLabel: "Don't ask",
+    // The CLI's own definition, and the opposite of bypass: it never prompts,
+    // and anything not already permitted is denied rather than allowed.
+    description: 'Never ask — deny anything not pre-approved',
+    icon: ShieldCheck,
+  },
   {
     value: 'bypassPermissions',
-    label: 'bypassPermissions',
-    description: 'no prompts (danger)',
+    label: 'Bypass permissions',
+    shortLabel: 'Bypass',
+    description: 'Skip every approval — the agent is unsupervised',
+    icon: TriangleAlert,
     dangerous: true,
   },
 ]
 
+export const permissionModeMeta = (mode: PermissionMode): PermissionModeMeta | undefined =>
+  PERMISSION_MODES.find((m) => m.value === mode)
+
+/** One offered mode as plain data — no icon, no React. What a host chrome
+ * outside the panel (a VS Code QuickPick) needs to draw the same list. */
+export type PermissionModeChoice = {
+  value: PermissionMode
+  label: string
+  description: string
+  dangerous?: boolean
+  /** Offered but unreachable: a session not started for bypass can never gain
+   * it, and saying so beats omitting the row. */
+  disabled?: boolean
+}
+
+/**
+ * The modes this session may actually be switched into, with the reasons baked
+ * in — the same filtering {@link PermissionModeSelect} applies, so an embedder
+ * rendering its own picker cannot drift from the panel's.
+ */
+export function permissionModeChoices(
+  modes?: readonly PermissionMode[],
+  canBypass?: boolean,
+): PermissionModeChoice[] {
+  const offered = modes ? PERMISSION_MODES.filter((m) => modes.includes(m.value)) : PERMISSION_MODES
+  return offered.map((m) => ({
+    value: m.value,
+    label: m.label,
+    description:
+      m.value === 'bypassPermissions' && canBypass === false
+        ? 'Only available to a session started in this mode'
+        : m.description,
+    dangerous: m.dangerous,
+    disabled: m.value === 'bypassPermissions' && canBypass === false,
+  }))
+}
+
 export interface PermissionModeSelectProps {
   /** The session's current mode (TranscriptState.permissionMode). */
   mode?: PermissionMode
   onModeChange: (mode: PermissionMode) => void
   /** Restrict what is offered — most of {@link PERMISSION_MODES} is Claude Code
-   * vocabulary the provider engine has no meaning for. Defaults to all of them;
-   * pass `PROVIDER_PERMISSION_MODES` for a provider session. */
+   * vocabulary the other engines have no meaning for. Defaults to all of them;
+   * pass the session's `capabilities.permissionModes`. */
   modes?: readonly PermissionMode[]
+  /**
+   * Whether this session may be switched into `bypassPermissions` at all. The
+   * CLI refuses unless the process was spawned for it, so a session that didn't
+   * ask up front can never gain it. The row is shown disabled rather than hidden
+   * — "you can't have this here" is a more useful answer than a row that
+   * silently isn't there. `undefined` (an older server) offers it.
+   */
+  canBypass?: boolean
   /** 'toolbar' (default) is the composer's compact borderless trigger;
    * 'form' is a standard field-sized Select for create/settings forms. */
   variant?: 'toolbar' | 'form'
@@ -51,12 +147,15 @@ export function PermissionModeSelect({
   mode,
   onModeChange,
   modes,
+  canBypass,
   variant = 'toolbar',
   disabled,
   className,
 }: PermissionModeSelectProps) {
   const dangerous = mode === 'bypassPermissions'
   const offered = modes ? PERMISSION_MODES.filter((m) => modes.includes(m.value)) : PERMISSION_MODES
+  const unavailable = (meta: PermissionModeMeta) =>
+    meta.value === 'bypassPermissions' && canBypass === false
   return (
     <Select
       items={offered.map((m) => ({ value: m.value, label: m.label }))}
@@ -73,21 +172,33 @@ export function PermissionModeSelect({
           dangerous ? 'text-danger' : variant === 'toolbar' ? 'text-fg-3' : undefined,
           className,
         )}>
-        <span className={cn('truncate', variant === 'toolbar' && 'font-mono text-label')}>
+        <span className={cn('truncate', variant === 'toolbar' && 'text-label')}>
           <SelectValue placeholder='permissions' />
         </span>
       </SelectTrigger>
-      <SelectContent className='min-w-56'>
-        {offered.map((m) => (
-          <SelectItem key={m.value} value={m.value}>
-            <SelectItemText>
-              <span className={cn('font-medium', m.dangerous && 'text-danger')}>{m.label}</span>
-            </SelectItemText>
-            <span className={cn('text-label', m.dangerous ? 'text-danger/80' : 'text-fg-4')}>
-              {m.description}
-            </span>
-          </SelectItem>
-        ))}
+      <SelectContent className='min-w-64'>
+        {offered.map((m) => {
+          const blocked = unavailable(m)
+          return (
+            <SelectItem key={m.value} value={m.value} disabled={blocked}>
+              <SelectItemText>
+                <span className='flex items-center gap-2'>
+                  <m.icon
+                    className={cn('size-3.5 shrink-0', m.dangerous ? 'text-danger' : 'text-fg-3')}
+                  />
+                  <span className={cn('font-medium', m.dangerous && 'text-danger')}>{m.label}</span>
+                </span>
+              </SelectItemText>
+              <span
+                className={cn(
+                  'pl-5.5 text-label',
+                  blocked ? 'text-fg-4' : m.dangerous ? 'text-danger/80' : 'text-fg-4',
+                )}>
+                {blocked ? 'Only available to a session started in this mode' : m.description}
+              </span>
+            </SelectItem>
+          )
+        })}
       </SelectContent>
     </Select>
   )

package/src/components/agent/PermissionPrompt.tsx

@@ -1,31 +1,165 @@
 import { useState } from 'react'
 import type { PermissionRequest } from '@workerdeck/protocol'
-import { ShieldAlert } from 'lucide-react'
+import { Hand } from 'lucide-react'
 import { Button } from '../ui/Button.tsx'
+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
   onApprove: (requestId: string) => void
-  onDeny: (requestId: string, message?: string) => void
+  /** `message` is fed back to the agent, which can then try something else;
+   * `interrupt` also stops the turn. */
+  onDeny: (requestId: string, message?: string, interrupt?: boolean) => void
   className?: string
 }
 
+/**
+ * Generic allow/deny prompt for a pending permission request.
+ *
+ * Three outcomes, not two: denying usually means "not that, try something else",
+ * so plain Deny lets the turn continue (with an optional reason the agent reads)
+ * while "Deny & stop" also interrupts.
+ *
+ * The heading is whatever the engine authored — `title`, else `displayName`.
+ * Composing "wants to use {tool}" instead would be wrong for codex, where an
+ * approval is usually an *escalation after a sandbox refusal* and the runner has
+ * 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()
+    onDeny(request.id, message || undefined, interrupt || undefined)
+    setReason('')
+    setDenying(false)
+  }
+
+  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
       data-slot='permission-prompt'
       className={cn('rounded-lg border border-warning/40 bg-warning-bg p-3', className)}>
       <div className='flex items-start gap-2.5'>
-        <ShieldAlert className='mt-0.5 size-4 shrink-0 text-warning' />
+        <Hand className='mt-0.5 size-4 shrink-0 text-warning' />
         <div className='min-w-0 flex-1'>
           <div className='text-body-sm font-medium text-fg-1'>
-            {request.title ?? `Claude wants to use ${request.toolName}`}
+            {request.title ?? request.displayName ?? 'Permission needed'}
           </div>
           {request.description ? (
             <div className='mt-0.5 text-label text-fg-3'>{request.description}</div>
           ) : null}
+          {request.decisionReason ? (
+            <div className='mt-0.5 text-label text-fg-4'>{request.decisionReason}</div>
+          ) : null}
+          <div className='mt-1.5 flex min-w-0 items-center gap-2'>
+            <ToolIcon className='size-3 shrink-0 text-fg-3' />
+            <span className='shrink-0 font-mono text-label font-medium text-fg-2'>
+              {request.toolName}
+            </span>
+            {summary ? (
+              <span className='min-w-0 truncate font-mono text-label text-fg-4'>{summary}</span>
+            ) : null}
+          </div>
           <button
             type='button'
             className='mt-1 font-mono text-label text-fg-3 underline-offset-2 hover:underline'
@@ -38,15 +172,39 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
             </pre>
           ) : null}
         </div>
-        <div className='flex shrink-0 gap-1.5'>
+        <div className='flex shrink-0 flex-wrap justify-end gap-1.5'>
           <Button size='sm' onClick={() => onApprove(request.id)}>
             Allow
           </Button>
-          <Button size='sm' variant='outline' onClick={() => onDeny(request.id, 'Denied by user')}>
+          <Button size='sm' variant='outline' onClick={() => setDenying((v) => !v)}>
             Deny
           </Button>
+          <Button size='sm' variant='outline' onClick={() => deny(true)}>
+            Deny &amp; stop
+          </Button>
         </div>
       </div>
+      {denying ? (
+        <div className='mt-2.5 flex items-center gap-2 border-t border-warning/30 pt-2.5'>
+          <Input
+            autoFocus
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') deny(false)
+              if (e.key === 'Escape') setDenying(false)
+            }}
+            placeholder='Reason (optional) — the agent reads this and can try something else'
+            className='h-7 flex-1'
+          />
+          <Button size='sm' variant='outline' onClick={() => setDenying(false)}>
+            Cancel
+          </Button>
+          <Button size='sm' variant='destructive' onClick={() => deny(false)}>
+            Deny
+          </Button>
+        </div>
+      ) : null}
     </div>
   )
 }

package/src/components/agent/PromptTokenText.tsx

@@ -0,0 +1,39 @@
+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>
+  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))
+    parts.push(
+      <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))
+  return (
+    <span className={className}>
+      {parts.map((part, index) => (
+        <Fragment key={index}>{part}</Fragment>
+      ))}
+    </span>
+  )
+}

package/src/components/agent/QuestionPrompt.tsx

@@ -10,6 +10,8 @@ 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
@@ -47,6 +49,9 @@ 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
@@ -72,10 +77,16 @@ 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)))
@@ -104,6 +115,117 @@ 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-info'>?</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,6 +2,7 @@ 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
@@ -14,6 +15,7 @@ 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)
 
@@ -41,15 +43,28 @@ export function Reasoning({ children, isStreaming = false, defaultOpen, classNam
           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' />
-        <span>{isStreaming ? 'Thinking…' : 'Thought process'}</span>
-        {hasText ? (
+        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 ? (
           <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={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',
+          )}>
           <Response streaming={isStreaming}>{children}</Response>
         </div>
       ) : null}