@workerdeck/ui 0.6.0

package/src/components/agent/QuestionPrompt.tsx

@@ -0,0 +1,193 @@
+import { useState } from 'react'
+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'
+import { Input } from '../ui/Input.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export type QuestionBehaviorMeta = {
+  value: QuestionBehavior
+  label: string
+  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 []
+    return [
+      {
+        question: q.question,
+        header: typeof q.header === 'string' ? q.header : '',
+        options,
+        multiSelect: q.multiSelect === true,
+      },
+    ]
+  })
+}
+
+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())
+  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 update = (index: number, patch: Partial<Selection>) => {
+    setSelections((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)))
+  }
+
+  const toggle = (index: number, label: string, multiSelect: boolean) => {
+    const current = selections[index] ?? EMPTY_SELECTION
+    if (multiSelect) {
+      update(index, {
+        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 })
+    }
+  }
+
+  const complete = questions.every((_, i) => answerFor(selections[i] ?? EMPTY_SELECTION) !== '')
+
+  const submit = () => {
+    const answers: Record<string, string> = {}
+    questions.forEach((q, i) => {
+      answers[q.question] = answerFor(selections[i] ?? EMPTY_SELECTION)
+    })
+    onAnswer(request.id, { ...request.input, answers })
+  }
+
+  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'>
+          {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>
+                <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'
+                        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 && 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'>
+                            {option.preview}
+                          </pre>
+                        ) : null}
+                      </button>
+                    )
+                  })}
+                  <div className='flex items-center gap-2'>
+                    <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 ? (
+                      <Input
+                        autoFocus
+                        value={selection.other}
+                        onChange={(e) => update(index, { other: e.target.value })}
+                        placeholder='Type your own answer'
+                        className='flex-1'
+                      />
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+          <div>
+            <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' />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/agent/Reasoning.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from 'react'
+import { Brain, ChevronDown } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+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 (isStreaming) {
+      setOpen(true)
+    } else {
+      const timer = setTimeout(() => setOpen(false), 600)
+      return () => clearTimeout(timer)
+    }
+  }, [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
+
+  return (
+    <div data-slot='reasoning' data-streaming={isStreaming || undefined} className={cn('w-full', className)}>
+      <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' />
+        <span>{isStreaming ? 'Thinking…' : 'Thought process'}</span>
+        {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'>
+          <Response streaming={isStreaming}>{children}</Response>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/agent/Response.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react'
+import { Streamdown } from 'streamdown'
+import { cn } from '../../lib/utils.ts'
+
+export interface ResponseProps {
+  children: string
+  /** Streaming text: tolerate incomplete markdown (unclosed fences, half links). */
+  streaming?: boolean
+  className?: string
+}
+
+/** Markdown renderer for assistant output — streaming-safe via streamdown, code
+ * highlighted with shiki (dual theme follows [data-theme] through the dark: variant). */
+export const Response = memo(
+  function Response({ children, streaming, className }: ResponseProps) {
+    return (
+      <Streamdown
+        mode={streaming ? 'streaming' : 'static'}
+        parseIncompleteMarkdown={streaming}
+        shikiTheme={['github-light', 'github-dark']}
+        className={cn(
+          'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+          className,
+        )}>
+        {children}
+      </Streamdown>
+    )
+  },
+  (prev, next) =>
+    prev.children === next.children && prev.streaming === next.streaming && prev.className === next.className,
+)

package/src/components/agent/SessionList.tsx

@@ -0,0 +1,93 @@
+import type { SessionInfo } from '@workerdeck/protocol'
+import { Trash2 } from 'lucide-react'
+import { Badge } from '../ui/Badge.tsx'
+import { Button } from '../ui/Button.tsx'
+import { cn } from '../../lib/utils.ts'
+import { formatCost, formatRelativeTime } from '../../lib/format.ts'
+import { STATUS_META } from './status.ts'
+
+export interface SessionListItemProps {
+  session: SessionInfo
+  active?: boolean
+  onSelect?: (id: string) => void
+  onDelete?: (id: string) => void
+}
+
+export function SessionListItem({ session, active, onSelect, onDelete }: SessionListItemProps) {
+  const meta = STATUS_META[session.status]
+  return (
+    <div
+      data-slot='session-list-item'
+      data-active={active || undefined}
+      className={cn(
+        'group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors',
+        active ? 'border-border bg-surface' : 'hover:bg-surface-hover',
+      )}>
+      <button
+        type='button'
+        onClick={() => onSelect?.(session.id)}
+        className='min-w-0 flex-1 text-left outline-none'>
+        <div className='flex items-center gap-2'>
+          <span className='truncate text-body-sm font-medium text-fg-1'>
+            {session.title ?? session.id.slice(0, 8)}
+          </span>
+          <Badge variant={meta.variant} dot className='shrink-0'>
+            {meta.label}
+          </Badge>
+        </div>
+        <div className='mt-0.5 flex items-center gap-2 font-mono text-label text-fg-4'>
+          <span className='truncate'>{session.cwd}</span>
+          {session.profile ? <span className='shrink-0'>@{session.profile}</span> : null}
+          <span className='shrink-0'>{formatCost(session.totalCostUsd)}</span>
+          <span className='shrink-0'>{formatRelativeTime(session.lastActivityAt ?? session.createdAt)}</span>
+        </div>
+      </button>
+      {onDelete ? (
+        <Button
+          variant='ghost'
+          size='icon-sm'
+          aria-label='Close session'
+          className='opacity-0 transition-opacity group-hover:opacity-100'
+          onClick={() => onDelete(session.id)}>
+          <Trash2 className='size-3.5 text-fg-3' />
+        </Button>
+      ) : null}
+    </div>
+  )
+}
+
+export interface SessionListProps {
+  sessions: SessionInfo[]
+  activeId?: string
+  onSelect?: (id: string) => void
+  onDelete?: (id: string) => void
+  emptyText?: string
+  className?: string
+}
+
+export function SessionList({
+  sessions,
+  activeId,
+  onSelect,
+  onDelete,
+  emptyText = 'No sessions yet.',
+  className,
+}: SessionListProps) {
+  return (
+    <div data-slot='session-list' className={cn('flex flex-col gap-1', className)}>
+      {sessions.length === 0 ? (
+        <div className='px-2.5 py-6 text-center text-body-sm text-fg-4'>{emptyText}</div>
+      ) : (
+        sessions.map((session) => (
+          <SessionListItem
+            key={session.id}
+            session={session}
+            active={session.id === activeId}
+            onSelect={onSelect}
+            onDelete={onDelete}
+          />
+        ))
+      )}
+    </div>
+  )
+}

package/src/components/agent/SessionPanel.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import type { WorkerDeckClient } from '@workerdeck/client'
+import { PROVIDER_PERMISSION_MODES } from '@workerdeck/protocol'
+import { useClaudeSession, useToolCallHost } from '@workerdeck/react'
+import { cn } from '../../lib/utils.ts'
+import { Composer } from './Composer.tsx'
+import { ModelSelect } from './ModelSelect.tsx'
+import { PermissionModeSelect } from './PermissionModeSelect.tsx'
+import { PermissionPrompt } from './PermissionPrompt.tsx'
+import { QuestionPrompt, parseUserQuestions } from './QuestionPrompt.tsx'
+import { StatusBar } from './StatusBar.tsx'
+import { Transcript } from './Transcript.tsx'
+
+export interface SessionPanelProps {
+  client: WorkerDeckClient
+  sessionId: string | undefined
+  /** Optional slot rendered at the top, above the status bar. */
+  header?: ReactNode
+  className?: string
+}
+
+/**
+ * The all-in-one embeddable session surface: status bar, streaming transcript,
+ * permission prompts, composer. Attaches via useClaudeSession; remount (key) to switch
+ * sessions.
+ */
+export function SessionPanel({ client, sessionId, header, className }: SessionPanelProps) {
+  // Rejected commands (the CLI refusing a permission-mode switch, say) render INSIDE
+  // the panel rather than through `toast`. The panel does not mount a `Toaster`, and
+  // an embedder that doesn't either would drop the only signal that a command failed
+  // — the select would just "not stick". An error channel a host can lose by omission
+  // is not an error channel.
+  const [protocolError, setProtocolError] = useState<string | undefined>(undefined)
+  const { state, connected, handle, send, approve, deny, interrupt, setModel, setPermissionMode } =
+    useClaudeSession(client, sessionId, { onProtocolError: setProtocolError })
+  // Callers are told to remount on a session switch, but a changed prop must not leave
+  // the previous session's failure on screen.
+  useEffect(() => setProtocolError(undefined), [sessionId])
+  // Host server-bridged tool calls (provider-engine sessions) in this tab, on the
+  // SAME handle the panel attached with — the bridge asks the first attached
+  // client. Free for Claude sessions: the guest loads lazily on the first call,
+  // which for them never comes.
+  useToolCallHost(handle)
+  const busy = state.status === 'running' || state.status === 'awaiting_approval'
+  const ended = state.status === 'failed' || state.status === 'closed'
+
+  // "/model" is handled panel-side (see handleSend) — surface it in the autocomplete
+  // even though the CLI's command list doesn't include it.
+  const commands = useMemo(() => {
+    if (!state.commands) return undefined
+    if (state.commands.some((c) => c.name === 'model')) return state.commands
+    return [
+      { name: 'model', description: 'Switch the model for this session', argumentHint: '<model>' },
+      ...state.commands,
+    ]
+  }, [state.commands])
+
+  // "/model <id>" switches the model directly instead of going to the CLI.
+  const handleSend = (text: string) => {
+    const modelCommand = /^\/model\s+(\S+)$/.exec(text)
+    if (modelCommand) {
+      setModel(modelCommand[1])
+      return
+    }
+    send(text)
+  }
+
+  return (
+    <div
+      data-slot='session-panel'
+      className={cn('flex h-full min-h-0 flex-col overflow-hidden bg-bg', className)}>
+      {header}
+      <StatusBar state={state} connected={connected} />
+      {protocolError ? (
+        <div className='px-3 pt-2'>
+          <div
+            role='alert'
+            className='mx-auto flex w-full max-w-3xl items-start gap-2 rounded-md border border-danger/40 bg-danger-bg px-3 py-2 text-body-sm text-danger'>
+            <span className='min-w-0 flex-1 break-words'>{protocolError}</span>
+            <button
+              type='button'
+              onClick={() => setProtocolError(undefined)}
+              aria-label='Dismiss error'
+              className='shrink-0 opacity-70 transition-opacity hover:opacity-100'>
+              ✕
+            </button>
+          </div>
+        </div>
+      ) : null}
+      <Transcript
+        state={state}
+        fileUrl={sessionId ? (path) => client.sessionFileUrl(sessionId, path) : undefined}
+      />
+      {state.pendingApprovals.length > 0 ? (
+        <div className='px-3 pb-2'>
+          <div className='mx-auto flex w-full max-w-3xl flex-col gap-2'>
+            {state.pendingApprovals.map((request) =>
+              request.toolName === 'AskUserQuestion' &&
+              parseUserQuestions(request.input).length > 0 ? (
+                <QuestionPrompt
+                  key={request.id}
+                  request={request}
+                  onAnswer={approve}
+                  onDismiss={deny}
+                />
+              ) : (
+                <PermissionPrompt
+                  key={request.id}
+                  request={request}
+                  onApprove={approve}
+                  onDeny={deny}
+                />
+              ),
+            )}
+          </div>
+        </div>
+      ) : null}
+      <Composer
+        onSend={handleSend}
+        onInterrupt={interrupt}
+        busy={busy}
+        disabled={ended || !sessionId}
+        commands={commands}
+        toolbar={
+          <>
+            {state.models?.length ? (
+              <ModelSelect
+                models={state.models}
+                model={state.model}
+                onModelChange={setModel}
+                disabled={ended}
+              />
+            ) : null}
+            {state.permissionMode ? (
+              <PermissionModeSelect
+                mode={state.permissionMode}
+                onModeChange={setPermissionMode}
+                // A provider session rejects the CLI-only modes with a
+                // protocol_error — don't offer what can only fail.
+                modes={state.engine === 'provider' ? PROVIDER_PERMISSION_MODES : undefined}
+                disabled={ended}
+              />
+            ) : null}
+          </>
+        }
+      />
+    </div>
+  )
+}

package/src/components/agent/StatusBar.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react'
+import type { TranscriptState } from '@workerdeck/react'
+import type { ContextUsage, RateLimitInfo } from '@workerdeck/protocol'
+import { WifiOff } from 'lucide-react'
+import { Badge } from '../ui/Badge.tsx'
+import { ProgressRing } from '../ui/ProgressRing.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+import { Tip } from '../ui/Tooltip.tsx'
+import { cn } from '../../lib/utils.ts'
+import { formatCost, formatCountdown, formatTokens } from '../../lib/format.ts'
+import { STATUS_META } from './status.ts'
+
+export interface StatusBarProps {
+  state: TranscriptState
+  connected: boolean
+  className?: string
+}
+
+/** Ticking clock for reset countdowns — rate_limit events are sparse, so tick locally. */
+function useNow(intervalMs = 30_000): number {
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), intervalMs)
+    return () => clearInterval(timer)
+  }, [intervalMs])
+  return now
+}
+
+const utilizationColor = (pct: number) =>
+  pct >= 95 ? 'text-danger' : pct >= 80 ? 'text-warning' : 'text-fg-3'
+
+/** The CLI reports category colors as its own theme token names ('inactive',
+ * 'promptBorder', ...), not CSS colors — only pass through what CSS can render. */
+const cssColor = (color: string): string | undefined =>
+  typeof CSS !== 'undefined' && CSS.supports('color', color) ? color : undefined
+
+function ContextMeter({ usage }: { usage: ContextUsage }) {
+  return (
+    <Tip
+      content={
+        <div className='flex min-w-44 flex-col gap-1 py-0.5'>
+          {usage.categories.map((c) => (
+            <div key={c.name} className='flex items-center gap-2'>
+              <span
+                className='size-2 shrink-0 rounded-full bg-fg-4'
+                style={cssColor(c.color) ? { backgroundColor: c.color } : undefined}
+              />
+              <span className='flex-1'>{c.name}</span>
+              <span className='font-mono text-fg-3'>{formatTokens(c.tokens)}</span>
+            </div>
+          ))}
+          <div className='mt-0.5 flex items-center justify-between gap-2 border-t border-border pt-1'>
+            <span>Total</span>
+            <span className='font-mono text-fg-3'>
+              {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} (
+              {usage.percentage.toFixed(0)}%)
+            </span>
+          </div>
+        </div>
+      }>
+      <span
+        className={cn(
+          'inline-flex cursor-default items-center gap-1 font-mono text-label',
+          utilizationColor(usage.percentage),
+        )}>
+        Ctx {formatTokens(usage.totalTokens)}
+      </span>
+    </Tip>
+  )
+}
+
+function RateLimitMeter({ label, info, now }: { label: string; info: RateLimitInfo; now: number }) {
+  // The CLI omits utilization on some updates — show the window without a made-up 0%.
+  const pct = info.utilization
+  const resetsAtMs = info.resetsAt !== undefined ? info.resetsAt * 1000 : undefined
+  return (
+    <Tip
+      content={
+        <div className='flex min-w-36 flex-col gap-1 py-0.5'>
+          <div className='flex items-center justify-between gap-2'>
+            <span>{label} usage</span>
+            <span className='font-mono text-fg-3'>
+              {pct !== undefined ? `${pct.toFixed(1)}%` : '—'}
+            </span>
+          </div>
+          {resetsAtMs !== undefined ? (
+            <div className='flex items-center justify-between gap-2'>
+              <span>Resets in</span>
+              <span className='font-mono text-fg-3'>{formatCountdown(resetsAtMs, now)}</span>
+            </div>
+          ) : null}
+          {info.isUsingOverage ? <div className='text-warning'>Using overage</div> : null}
+          {info.status === 'rejected' ? <div className='text-danger'>Limit reached</div> : null}
+        </div>
+      }>
+      <span
+        className={cn(
+          'inline-flex cursor-default items-center gap-1 font-mono text-label',
+          info.status === 'rejected' ? 'text-danger' : utilizationColor(pct ?? 0),
+        )}>
+        <ProgressRing value={pct ?? 0} />
+        {label}
+        {pct !== undefined ? ` ${pct.toFixed(0)}%` : ''}
+        {resetsAtMs !== undefined ? (
+          <span className='text-fg-4'>· {formatCountdown(resetsAtMs, now)}</span>
+        ) : null}
+      </span>
+    </Tip>
+  )
+}
+
+export function StatusBar({ state, connected, className }: StatusBarProps) {
+  const meta = STATUS_META[state.status]
+  const now = useNow()
+  const session = state.rateLimits?.five_hour
+  const weekly = state.rateLimits?.seven_day
+  return (
+    <div
+      data-slot='status-bar'
+      className={cn(
+        'flex items-center gap-3 border-b border-border bg-surface px-3 py-2',
+        className,
+      )}>
+      <Badge variant={meta.variant} dot={!meta.busy}>
+        {meta.busy ? <Spinner className='size-3 text-current' /> : null}
+        {meta.label}
+      </Badge>
+      {state.contextUsage ? <ContextMeter usage={state.contextUsage} /> : null}
+      {session ? <RateLimitMeter label='Session' info={session} now={now} /> : null}
+      {weekly ? <RateLimitMeter label='Weekly' info={weekly} now={now} /> : null}
+      <span className='flex-1' />
+      {!connected ? (
+        <span className='inline-flex items-center gap-1 text-label text-warning'>
+          <WifiOff className='size-3' /> reconnecting…
+        </span>
+      ) : null}
+      <span className='font-mono text-label text-fg-3'>{formatCost(state.totalCostUsd)}</span>
+    </div>
+  )
+}