@workerdeck/ui 0.15.0 → 0.16.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/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}

package/src/components/agent/Response.tsx

@@ -1,131 +1,6 @@
 import { memo } from 'react'
 import { Streamdown } from 'streamdown'
 import { cn } from '../../lib/utils.ts'
-import { useLines } from './transcript-variant.tsx'
-
-/**
- * Markdown on a terminal's grid.
- *
- * Prose defaults give every block its own rhythm — a heading is bigger, a list
- * item is looser, an inline `code` chip is padded taller than the line it sits
- * in — and the result is text that visibly breathes at different rates as you
- * scroll. A terminal has exactly one line height and one type size, and that
- * uniformity is most of what makes it readable at a glance.
- *
- * So: every line 1.25rem, every block flush, and one blank line (1.25rem, i.e.
- * exactly one row) between blocks. Headings keep their weight but lose their
- * size. Inline code keeps a background — it still has to be distinguishable —
- * but no vertical padding, because that is what pushes a line off the grid.
- */
-const TERMINAL_PROSE = [
-  'text-body-sm leading-5',
-  '[&_*]:leading-5',
-  // Block rhythm: nothing has its own margins, and siblings are one row apart.
-  // `!` throughout because these fight the renderer's own utilities, and some of
-  // those (`space-y-*`, which is a `> * + *` rule) outrank a plain descendant
-  // selector — a list would otherwise keep its half-row gaps while every other
-  // block snapped to the grid.
-  '[&_p]:my-0! [&_pre]:my-0! [&_blockquote]:my-0! [&_table]:my-0!',
-  '[&_h1]:my-0! [&_h2]:my-0! [&_h3]:my-0! [&_h4]:my-0! [&_h5]:my-0! [&_h6]:my-0!',
-  '[&>*+*]:mt-5',
-  // Lists are rows, not paragraphs: no margin anywhere in them, and no
-  // inter-item spacing from a `space-y` on the list itself.
-  '[&_ul]:my-0! [&_ol]:my-0! [&_li]:my-0! [&_li>p]:my-0!',
-  '[&_li+li]:mt-0! [&_ul_ul]:mt-0! [&_ul_ol]:mt-0! [&_ol_ul]:mt-0! [&_ol_ol]:mt-0!',
-  '[&_li]:py-0! [&_ul]:py-0! [&_ol]:py-0!',
-  // Markers on their own column, at the width the marker actually is — the
-  // indent a terminal (and the markdown source) uses, not a typographic one.
-  // `ch` is the unit because this variant runs in a monospace face: `• ` is two
-  // cells, `1. ` is three, so the text starts exactly where it would in the raw
-  // document and a wrapped line hangs under it instead of under the bullet.
-  // Nesting then costs one marker width per level, which is the 2-space step.
-  // `list-outside` is the load-bearing half: the renderer marks lists `inside`,
-  // where the marker joins the text flow — so the indent moves the bullet too
-  // (the list sits a marker-width right of the paragraph above it) and a wrapped
-  // line runs back under the bullet instead of hanging under its own text.
-  '[&_ul]:list-outside! [&_ol]:list-outside!',
-  '[&_ul]:pl-[2ch]! [&_ol]:pl-[3ch]! [&_li]:pl-0!',
-  // Headings are weight, not size — a terminal has one type size.
-  '[&_h1]:text-body-sm [&_h2]:text-body-sm [&_h3]:text-body-sm',
-  '[&_h4]:text-body-sm [&_h5]:text-body-sm [&_h6]:text-body-sm',
-  '[&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold',
-  '[&_h4]:font-semibold [&_h5]:font-semibold [&_h6]:font-semibold',
-  '[&_blockquote]:border-l [&_blockquote]:border-border [&_blockquote]:pl-2',
-  // Inline code only (`:not(pre) > code`) — fenced blocks keep their own box.
-  // Horizontal padding is free; vertical padding is what pushes a line off grid.
-  '[&_:not(pre)>code]:rounded-none [&_:not(pre)>code]:px-1! [&_:not(pre)>code]:py-0!',
-  '[&_:not(pre)>code]:text-body-sm [&_:not(pre)>code]:leading-5! [&_:not(pre)>code]:text-fg-1',
-  '[&_th]:py-0! [&_td]:py-0!',
-  // The renderer's fenced-code card: rounded frame, its own header strip, a
-  // second rounded frame inside it, and a floating pill for the buttons. Four
-  // boxes around what is, in a terminal, a band of dim text. Flattened to
-  // exactly that — the band keeps a background so a block still reads as code,
-  // and the actions keep their top-right corner but lose the pill.
-  '[&_[data-streamdown=code-block]]:my-0! [&_[data-streamdown=code-block]]:gap-0!',
-  '[&_[data-streamdown=code-block]]:rounded-none! [&_[data-streamdown=code-block]]:border-0!',
-  '[&_[data-streamdown=code-block]]:bg-transparent! [&_[data-streamdown=code-block]]:p-0!',
-  // The language strip costs a whole row to say what the code already shows, and
-  // the actions cost another. Both go: the block is the band, and the buttons
-  // float over its top-right corner, appearing on hover or keyboard focus.
-  '[&_[data-streamdown=code-block]]:relative!',
-  '[&_[data-streamdown=code-block-header]]:hidden!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:absolute! [&_div:has(>[data-streamdown=code-block-actions])]:top-0!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:right-0! [&_div:has(>[data-streamdown=code-block-actions])]:mt-0!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:h-5! [&_div:has(>[data-streamdown=code-block-actions])]:opacity-0!',
-  '[&_div:has(>[data-streamdown=code-block-actions])]:transition-opacity',
-  '[&_[data-streamdown=code-block]:hover_div:has(>[data-streamdown=code-block-actions])]:opacity-100!',
-  '[&_[data-streamdown=code-block]:focus-within_div:has(>[data-streamdown=code-block-actions])]:opacity-100!',
-  '[&_[data-streamdown=code-block-actions]]:rounded-none! [&_[data-streamdown=code-block-actions]]:border-0!',
-  '[&_[data-streamdown=code-block-actions]]:bg-code-bg! [&_[data-streamdown=code-block-actions]]:px-1!',
-  '[&_[data-streamdown=code-block-actions]]:py-0! [&_[data-streamdown=code-block-actions]]:gap-1!',
-  '[&_[data-streamdown=code-block-actions]]:backdrop-blur-none!',
-  '[&_[data-streamdown=code-block-body]]:rounded-none! [&_[data-streamdown=code-block-body]]:border-0!',
-  '[&_[data-streamdown=code-block-body]]:bg-code-bg! [&_[data-streamdown=code-block-body]]:px-2!',
-  '[&_[data-streamdown=code-block-body]]:py-0! [&_[data-streamdown=code-block-body]]:text-body-sm!',
-  // The action buttons' hit areas, on the grid like everything else.
-  '[&_[data-streamdown=code-block-copy-button]]:p-0! [&_[data-streamdown=code-block-download-button]]:p-0!',
-  // Tables come in a frame of their own, plus a controls row above them and a
-  // second frame around the scroller — three boxes and a blank line to hold
-  // three buttons. Same treatment: the table is the content, the buttons float
-  // over its top-right on hover. The controls row is the child that has no
-  // `<table>` in it, which is also how it knows to disappear when the renderer
-  // draws no controls at all.
-  '[&_[data-streamdown=table-wrapper]]:rounded-none! [&_[data-streamdown=table-wrapper]]:border-0!',
-  '[&_[data-streamdown=table-wrapper]]:my-0! [&_[data-streamdown=table-wrapper]]:bg-transparent!',
-  '[&_[data-streamdown=table-wrapper]]:relative! [&_[data-streamdown=table-wrapper]]:gap-0!',
-  '[&_[data-streamdown=table-wrapper]]:p-0!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:absolute! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:top-0!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:right-0! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:z-10!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:opacity-0! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:bg-code-bg!',
-  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:px-1! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:transition-opacity',
-  '[&_[data-streamdown=table-wrapper]:hover>div:not(:has(table))]:opacity-100!',
-  '[&_[data-streamdown=table-wrapper]:focus-within>div:not(:has(table))]:opacity-100!',
-  '[&_[data-streamdown=table-wrapper]>div:has(table)]:rounded-none! [&_[data-streamdown=table-wrapper]>div:has(table)]:border-0!',
-  '[&_[data-streamdown=table-wrapper]>div:has(table)]:bg-transparent!',
-].join(' ')
-
-/**
- * The controls' icons as characters.
- *
- * The renderer draws its copy/download affordances as line-art SVGs, which next
- * to monospace text read as buttons from another application. These are the
- * glyphs a terminal would use — and they inherit the surrounding font, so they
- * sit on the same grid as the code they belong to.
- */
-const glyphIcon = (glyph: string) =>
-  function GlyphIcon({ className }: { className?: string }) {
-    return (
-      <span aria-hidden className={cn('font-mono text-body-sm leading-5', className)}>
-        {glyph}
-      </span>
-    )
-  }
-
-const TERMINAL_ICONS = {
-  DownloadIcon: glyphIcon('⤓'),
-  CopyIcon: glyphIcon('⧉'),
-  CheckIcon: glyphIcon('✓'),
-}
 
 export interface ResponseProps {
   children: string
@@ -138,18 +13,12 @@ export interface ResponseProps {
  * highlighted with shiki (dual theme follows [data-theme] through the dark: variant). */
 export const Response = memo(
   function Response({ children, streaming, className }: ResponseProps) {
-    const lines = useLines()
     return (
       <Streamdown
         mode={streaming ? 'streaming' : 'static'}
         parseIncompleteMarkdown={streaming}
         shikiTheme={['github-light', 'github-dark']}
-        icons={lines ? TERMINAL_ICONS : undefined}
-        className={cn(
-          'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
-          lines && TERMINAL_PROSE,
-          className,
-        )}>
+        className={cn('size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0', className)}>
         {children}
       </Streamdown>
     )