{/* Session header — flight-recorder strip. Hidden in the empty state * because the empty state already shows session metadata. */} {!isEmpty && (

session {sessionLabel.split("-")[0]} · {sessionLabel.split("-")[1]}

)} {/* Empty state — flight-recorder card with staggered reveal */}

arcadia // operator console session {sessionLabel}

ATLAS.{" "} standing by

›{" "} Issue an instruction. Read tools run automatically. Writes pause for confirmation. Tab ⇥ for command palette.

{/* Messages — rendered when there are any. In empty state a flex-grow * spacer takes its place so the sticky-bottom composer lands at the * actual bottom of the surface (otherwise it'd sit at the top with * nothing above it, and the lift transform would push it off-screen). */} {isEmpty ? (

) : (

{messages.map((m, i) => { if (m.role === "system" || m.role === "tool") return null const calls = m.role === "assistant" && m.toolCalls ? m.toolCalls.map((tc) => buildAgentToolCall(tc, messages, isStreaming, !!pendingConfirm), ) : [] const isWritePending = pendingConfirm?.afterIndex === i ? pendingConfirm.writes : null return (

{calls.length > 0 && (

{calls.map((c) => (

{c.status === "success" && ( )}

))}

)} {isWritePending && ( )}

) })} {(() => { const activity = deriveAgentActivity({ isStreaming, lastMessage: messages.at(-1), pendingConfirm: !!pendingConfirm, confirmBusy, }) const isIdle = activity === "idle" return (

) })()}

)} {/* Composer — single persistent mount; transform lifts it to viewport * center when empty, then springs to sticky-bottom on the first message. */}

void compactConversation()} onRestoreCompact={restoreCompact} onCopyMarkdown={() => void copyMarkdown()} onExportMarkdown={exportMarkdown} onSaveToLibrary={saveToLibrary} onShowPrompt={() => setShowPromptOpen(true)} onRetryProbe={onRetryProbe} onClear={resetAndClear} hasMessages={messages.length > 0} hasUserMessage={messages.some((m) => m.role === "user")} hasCompactSnapshot={hasCompactSnapshot} isMock={isMock} isCompacting={compacting} placeholder={isEmpty ? "Ask anything…" : "Reply…"} reasoning={reasoningEffort} onCycleReasoning={cycleReasoning} /> {showPromptOpen && ( setShowPromptOpen(false)} /> )}

{/* Modeline — vim-style status strip. Pinned above the AppShell's own * footer/padding so it always reads in the operator's bottom band. */}

utc {clockLabel} turn {userTurns.toString().padStart(2, "0")} tok ~{estTokensTotal.toLocaleString()}

{isStreaming ? ( STREAM ) : ( enter send ⇧ enter newline )}

) } function deriveAgentActivity({ isStreaming, lastMessage, pendingConfirm, confirmBusy, }: { isStreaming: boolean lastMessage: LLMMessage | undefined pendingConfirm: boolean confirmBusy: boolean }): "idle" | "thinking" | "working" | "waiting" | "speaking" { if (confirmBusy) return "working" if (pendingConfirm) return "waiting" if (!isStreaming) return "idle" if (!lastMessage || lastMessage.role !== "assistant") return "thinking" if (lastMessage.content.trim().length > 0) return "speaking" return "thinking" } function buildAgentToolCall( tc: ToolCall, allMessages: LLMMessage[], isStreaming: boolean, pendingConfirm: boolean, ): AgentToolCall { const result = allMessages.find( (m) => m.role === "tool" && m.toolCallId === tc.id, ) let parsedArgs: Record | undefined try { parsedArgs = tc.arguments ? JSON.parse(tc.arguments) : undefined } catch { parsedArgs = undefined } if (result) { let parsedResult: unknown = result.content let errorMsg: string | undefined try { const obj = JSON.parse(result.content) as Record if (obj && typeof obj === "object" && typeof obj.error === "string") { errorMsg = obj.error } else { parsedResult = obj } } catch { // leave as raw text } return { id: tc.id, name: tc.name, status: errorMsg ? "error" : "success", args: parsedArgs, result: errorMsg ? undefined : parsedResult, error: errorMsg, } } let status: ToolCallStatus = "running" if (pendingConfirm) status = "pending" else if (!isStreaming) status = "running" return { id: tc.id, name: tc.name, status, args: parsedArgs, } } function SessionMeta({ label, value, tone = "default", }: { label: string value: string tone?: "default" | "amber" | "rose" | "mint" | "muted" }) { const toneColor = { default: "var(--console-text)", amber: "var(--console-amber)", rose: "var(--console-rose)", mint: "var(--console-mint)", muted: "var(--console-muted)", }[tone] return (

{label} {value}

) } function truncateModel(m: string): string { if (!m) return "—" if (m.length <= 22) return m return m.slice(0, 10) + "…" + m.slice(-9) } /** Walk forward from an assistant message and collect doc-search hits from * any matching `tool` result messages. Deduped by sourcePath so a chunk and * its sibling chunk in the same file collapse to one citation. */ function extractDocSources( messages: LLMMessage[], assistantIdx: number, ): DocHit[] { const msg = messages[assistantIdx] if (msg?.role !== "assistant" || !msg.toolCalls?.length) return [] const docCallIds = new Set( msg.toolCalls.filter((tc) => tc.name === "search_docs").map((tc) => tc.id), ) if (docCallIds.size === 0) return [] const seen = new Set() const out: DocHit[] = [] for (let i = assistantIdx + 1; i < messages.length; i++) { const m = messages[i] if (m.role === "assistant") break // hit the next turn if (m.role !== "tool" || !m.toolCallId || !docCallIds.has(m.toolCallId)) { continue } try { const parsed = JSON.parse(m.content) as { hits?: DocHit[] } for (const h of parsed.hits ?? []) { if (seen.has(h.sourcePath + "#" + h.id)) continue seen.add(h.sourcePath + "#" + h.id) out.push(h) } } catch { // Tool errors come back as { error } — no hits to surface. } } return out } function SourcesFooter({ sources }: { sources: DocHit[] }) { if (sources.length === 0) return null return (

sources › {sources.map((s) => ( {s.title} ))}

) } function MessageRow({ role, content, toolCalls, turnNum, agentName, timestamp, sources, }: { role: "user" | "assistant" content: string toolCalls?: ToolCall[] turnNum?: number agentName?: string timestamp?: string sources?: DocHit[] }) { // Operator turn — monospace, sodium-amber prompt, no bubble. The whole // row hangs from a left gutter showing the turn number. if (role === "user") { return (

T{(turnNum ?? 0).toString().padStart(2, "0")} {timestamp ? ( {timestamp} ) : null}

› {content}

) } // Assistant turn — set in serif, with a tiny mono signature beneath. If // there's no prose (just tool calls), suppress the row entirely. if (!content.trim()) return null return (

T{(turnNum ?? 0).toString().padStart(2, "0")} {agentName?.slice(0, 6).toLowerCase() ?? "atlas"}

{sources && sources.length > 0 && }

{agentName?.toLowerCase() ?? "atlas"}» {timestamp ? {timestamp} : null} · recv

) } function Composer({ value, onChange, onSubmit, onAbort, isStreaming, models, model, onModelChange, agents, activeAgent, onAgentChange, onRegenerate, onContinue, onCompact, onRestoreCompact, onCopyMarkdown, onExportMarkdown, onSaveToLibrary, onShowPrompt, onRetryProbe, onClear, hasMessages, hasUserMessage, hasCompactSnapshot, isMock, isCompacting, placeholder, reasoning, onCycleReasoning, }: { value: string onChange: (v: string) => void onSubmit: () => void onAbort: () => void isStreaming: boolean models: string[] model: string onModelChange: (m: string) => void agents: Agent[] activeAgent: Agent | undefined onAgentChange: (id: string) => void onRegenerate: () => void onContinue: () => void onCompact: () => void onRestoreCompact: () => void onCopyMarkdown: () => void onExportMarkdown: () => void onSaveToLibrary: () => void onShowPrompt: () => void onRetryProbe: () => void onClear: () => void hasMessages: boolean hasUserMessage: boolean hasCompactSnapshot: boolean isMock: boolean isCompacting: boolean placeholder: string reasoning: ReasoningEffort onCycleReasoning: () => void }) { const taRef = useRef(null) // Auto-grow the textarea. useEffect(() => { const el = taRef.current if (!el) return el.style.height = "auto" el.style.height = Math.min(el.scrollHeight, 240) + "px" }, [value]) const onKey = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() onSubmit() } } return (

›_

onChange(e.target.value)}
            onKeyDown={onKey}
            placeholder={placeholder}
            rows={2}
            data-action="ai-composer-input"
            className="min-h-[3.5rem] w-full resize-none bg-transparent outline-none"
          />
        </div>
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-1">
            <button
              type="button"
              data-action="ai-attach"
              aria-label="Attach"
              className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
            >
              <Plus className="size-5" />
            </button>
            <CommandsMenu
              onRegenerate={onRegenerate}
              onContinue={onContinue}
              onCompact={onCompact}
              onRestoreCompact={onRestoreCompact}
              onCopyMarkdown={onCopyMarkdown}
              onExportMarkdown={onExportMarkdown}
              onSaveToLibrary={onSaveToLibrary}
              onShowPrompt={onShowPrompt}
              onRetryProbe={onRetryProbe}
              onClear={onClear}
              isStreaming={isStreaming}
              isCompacting={isCompacting}
              hasMessages={hasMessages}
              hasUserMessage={hasUserMessage}
              hasCompactSnapshot={hasCompactSnapshot}
              isMock={isMock}
            />
          </div>
          <div className="flex items-center gap-1">
            <AgentChip
              agents={agents}
              activeAgent={activeAgent}
              onAgentChange={onAgentChange}
            />
            <ModelSelector
              models={models}
              model={model}
              onModelChange={onModelChange}
            />
            <ReasoningChip value={reasoning} onCycle={onCycleReasoning} />
            <VoiceInputButton
              onTranscript={(t) => onChange((value ? value + " " : "") + t)}
            />
            {isStreaming ? (
              <Button
                type="button"
                size="sm"
                variant="ghost"
                onClick={onAbort}
                aria-label="Stop"
                data-action="ai-stop"
                className="rounded-full"
              >
                <Square className="size-4" />
              </Button>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  )
}

function ModelSelector({
  models,
  model,
  onModelChange,
}: {
  models: string[]
  model: string
  onModelChange: (m: string) => void
}) {
  const label = prettyModelName(model)
  return (
    <DropdownMenu>
      {/* base-ui's Menu.Trigger renders its own <button>, so we don't wrap
       * a nested <button> here (which Radix's asChild pattern would require).
       * Styles + data-action go straight on the Trigger. */}
      <DropdownMenuTrigger
        data-action="ai-model"
        className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
      >
        <span>{label}</span>
        <ChevronDown className="size-4 opacity-70" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {models.map((m) => (
          <DropdownMenuItem
            key={m}
            onClick={() => onModelChange(m)}
            className={m === model ? "font-medium" : ""}
          >
            {prettyModelName(m)}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/**
 * Reasoning-effort chip for the composer. Click cycles off → low → medium →
 * high → max → off. When non-off, the next send includes
 * `reasoning_effort: <level>` which the proxy passes to OpenAI/DeepSeek
 * natively and translates to Anthropic's thinking block server-side.
 *
 * Visually: hidden when off (no chrome clutter for the common case),
 * surfaces as a sodium-amber pill when set.
 */
function ReasoningChip({
  value,
  onCycle,
}: {
  value: ReasoningEffort
  onCycle: () => void
}) {
  const active = value !== "off"
  return (
    <button
      type="button"
      onClick={onCycle}
      data-action="ai-reasoning"
      title={
        active
          ? `Reasoning: ${value}. Click to cycle.`
          : "Reasoning: off. Click to enable thinking mode."
      }
      className={[
        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-mono uppercase tracking-[0.12em] transition-colors",
        active
          ? "bg-amber-500/15 text-amber-500 hover:bg-amber-500/25 dark:text-amber-300"
          : "text-muted-foreground hover:bg-accent hover:text-foreground",
      ].join(" ")}
    >
      <Sparkles className="size-3" />
      <span className="select-none">
        think
        {active ? <span className="ml-1 font-semibold">{value}</span> : null}
      </span>
    </button>
  )
}

function AgentChip({
  agents,
  activeAgent,
  onAgentChange,
}: {
  agents: Agent[]
  activeAgent: Agent | undefined
  onAgentChange: (id: string) => void
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        data-action="ai-agent"
        className="inline-flex items-center gap-1.5 rounded-full py-1 pl-1 pr-2.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        title={
          activeAgent
            ? `${activeAgent.name} — ${activeAgent.role}`
            : "Pick a persona"
        }
      >
        <Avatar className="size-5">
          <AvatarFallback
            style={{
              background: agentTint(activeAgent?.id ?? ""),
              color: "var(--primary-foreground)",
            }}
            className="text-[10px] font-semibold"
          >
            {agentInitials(activeAgent?.name)}
          </AvatarFallback>
        </Avatar>
        <span className="font-medium">
          {activeAgent?.name ?? "Agent"}
        </span>
        <ChevronDown className="size-4 opacity-70" />
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="start"
        sideOffset={6}
        className="max-h-80 w-72 overflow-y-auto"
      >
        <div className="px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
          Switch persona
        </div>
        {agents.map((a) => (
          <DropdownMenuItem
            key={a.id}
            onClick={() => onAgentChange(a.id)}
            data-state={activeAgent?.id === a.id ? "checked" : undefined}
            data-action={`ai-agent-${a.id}`}
            className="flex items-center gap-2.5"
          >
            <Avatar className="size-7">
              <AvatarFallback
                style={{
                  background: agentTint(a.id),
                  color: "var(--primary-foreground)",
                }}
                className="text-[11px] font-semibold"
              >
                {agentInitials(a.name)}
              </AvatarFallback>
            </Avatar>
            <span className="flex min-w-0 flex-col">
              <span className="truncate font-medium">{a.name}</span>
              <span className="truncate text-xs text-muted-foreground">
                {a.role}
              </span>
            </span>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

function agentInitials(name: string | undefined): string {
  if (!name) return "?"
  const words = name.trim().split(/\s+/).filter(Boolean)
  if (words.length === 0) return "?"
  if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
  return (words[0][0] + words[words.length - 1][0]).toUpperCase()
}

function agentTint(id: string): string {
  let hash = 0
  for (let i = 0; i < id.length; i++) {
    hash = (hash * 31 + id.charCodeAt(i)) | 0
  }
  const hue = ((hash % 360) + 360) % 360
  return `oklch(0.55 0.18 ${hue})`
}

function CommandsMenu({
  onRegenerate,
  onContinue,
  onCompact,
  onRestoreCompact,
  onCopyMarkdown,
  onExportMarkdown,
  onSaveToLibrary,
  onShowPrompt,
  onRetryProbe,
  onClear,
  isStreaming,
  isCompacting,
  hasMessages,
  hasUserMessage,
  hasCompactSnapshot,
  isMock,
}: {
  onRegenerate: () => void
  onContinue: () => void
  onCompact: () => void
  onRestoreCompact: () => void
  onCopyMarkdown: () => void
  onExportMarkdown: () => void
  onSaveToLibrary: () => void
  onShowPrompt: () => void
  onRetryProbe: () => void
  onClear: () => void
  isStreaming: boolean
  isCompacting: boolean
  hasMessages: boolean
  hasUserMessage: boolean
  hasCompactSnapshot: boolean
  isMock: boolean
}) {
  const [open, setOpen] = useState(false)
  // Close the popover after a tile is clicked, so the menu acknowledges the
  // action visually even when the action itself produces no obvious change
  // (Copy MD, Export MD, etc — those also fire a toast at the call site).
  const close = useCallback(
    (fn: () => void) => () => {
      fn()
      setOpen(false)
    },
    [],
  )
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger
        render={
          <button
            type="button"
            data-action="ai-commands"
            aria-label="Commands"
            title="Commands"
            className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
          >
            <CommandIcon className="size-5" />
          </button>
        }
      />
      <PopoverContent align="start" side="top" className="w-80 p-2">
        <SectionLabel>Conversation</SectionLabel>
        <div className="grid grid-cols-2 gap-1">
          <ToolTile
            data-action="ai-cmd-regenerate"
            onClick={close(onRegenerate)}
            disabled={isStreaming || !hasUserMessage}
            icon={<RotateCcw className="size-4" />}
            label="Regenerate"
            title="Re-run the most recent prompt"
          />
          <ToolTile
            data-action="ai-cmd-continue"
            onClick={close(onContinue)}
            disabled={isStreaming || !hasMessages}
            icon={<ArrowRight className="size-4" />}
            label="Continue"
            title="Ask the model to keep going"
          />
          <ToolTile
            data-action="ai-cmd-compact"
            onClick={close(onCompact)}
            disabled={isCompacting || isStreaming || !hasMessages}
            icon={
              isCompacting ? (
                <Loader2 className="size-4 animate-spin" />
              ) : (
                <Archive className="size-4" />
              )
            }
            label="Compact"
            title="Summarize older turns to free context"
          />
          <ToolTile
            data-action="ai-cmd-restore-compact"
            onClick={close(onRestoreCompact)}
            disabled={!hasCompactSnapshot}
            icon={<Undo2 className="size-4" />}
            label="Restore"
            title={
              hasCompactSnapshot
                ? "Undo the most recent compact"
                : "No snapshot available"
            }
          />
        </div>

<SectionLabel>Share</SectionLabel>
        <div className="grid grid-cols-2 gap-1">
          <ToolTile
            data-action="ai-cmd-copy-md"
            onClick={close(onCopyMarkdown)}
            disabled={!hasMessages}
            icon={<Copy className="size-4" />}
            label="Copy MD"
            title="Copy conversation as Markdown"
          />
          <ToolTile
            data-action="ai-cmd-export-md"
            onClick={close(onExportMarkdown)}
            disabled={!hasMessages}
            icon={<Download className="size-4" />}
            label="Export MD"
            title="Download a .md file"
          />
          <ToolTile
            data-action="ai-cmd-save-library"
            onClick={close(onSaveToLibrary)}
            disabled={!hasMessages}
            icon={<BookmarkPlus className="size-4" />}
            label="Save to Library"
            title="Snapshot this conversation"
          />
          <ToolTile
            data-action="ai-cmd-show-prompt"
            onClick={close(onShowPrompt)}
            icon={<FileText className="size-4" />}
            label="Show prompt"
            title="Preview the system prompt"
          />
        </div>

{isMock && (
          <>
            <SectionLabel>Connection</SectionLabel>
            <div className="grid grid-cols-2 gap-1">
              <ToolTile
                data-action="ai-cmd-retry-probe"
                onClick={close(onRetryProbe)}
                icon={<RefreshCw className="size-4" />}
                label="Reconnect"
                title="Probe the LLM endpoint again"
              />
            </div>
          </>
        )}

<div className="my-2 h-px bg-border" />
        <ToolTile
          data-action="ai-cmd-clear"
          onClick={close(onClear)}
          disabled={!hasMessages}
          icon={<Trash2 className="size-4" />}
          label="Clear conversation"
          title="Wipe history and start fresh"
          destructive
          fullWidth
        />
      </PopoverContent>
    </Popover>
  )
}

function SystemPromptDialog({
  prompt,
  onClose,
}: {
  prompt: string
  onClose: () => void
}) {
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(prompt)
    } catch {}
  }
  if (typeof document === "undefined") return null
  return createPortal(
    <div
      role="dialog"
      aria-modal="true"
      onClick={onClose}
      className="fixed inset-0 z-50 flex items-center justify-center bg-background/70 p-4 backdrop-blur-sm"
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="flex max-h-[80vh] w-full max-w-2xl flex-col rounded-lg border bg-card shadow-lg"
      >
        <div className="flex items-center gap-2 border-b px-4 py-3">
          <FileText className="size-4 text-muted-foreground" />
          <div className="flex flex-1 flex-col">
            <span className="text-sm font-semibold">System prompt</span>
            <span className="text-xs text-muted-foreground">
              Base prompt + active persona
            </span>
          </div>
          <Button variant="ghost" size="sm" onClick={copy}>
            <Copy className="size-3.5" /> Copy
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={onClose}
            aria-label="Close"
          >
            <X className="size-4" />
          </Button>
        </div>
        <pre className="flex-1 overflow-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed">
          {prompt}
        </pre>
      </div>
    </div>,
    document.body,
  )
}

function SectionLabel({ children }: { children: React.ReactNode }) {
  return (
    <div className="mt-2 mb-1 px-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
      {children}
    </div>
  )
}

function ToolTile({
  icon,
  label,
  title,
  onClick,
  disabled,
  destructive,
  fullWidth,
  ...rest
}: {
  icon: React.ReactNode
  label: string
  title: string
  onClick: () => void
  disabled?: boolean
  destructive?: boolean
  fullWidth?: boolean
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "title">) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      title={title}
      className={
        "flex items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50 " +
        (fullWidth ? "w-full " : "") +
        (destructive
          ? "text-destructive hover:bg-destructive/10"
          : "hover:bg-accent hover:text-accent-foreground")
      }
      {...rest}
    >
      <span className="shrink-0">{icon}</span>
      <span className="truncate font-medium">{label}</span>
    </button>
  )
}

function prettyModelName(id: string): string {
  if (!id) return "model"
  // Trim known prefixes / paths so the chip stays compact.
  const last = id.split(/[\\/]/).pop() ?? id
  return last.length > 28 ? last.slice(0, 26) + "…" : last
}

type SpeechRecognitionLike = {
  lang: string
  interimResults: boolean
  continuous: boolean
  onresult: (e: { results: { [k: number]: { [k: number]: { transcript: string } } } }) => void
  onerror: () => void
  onend: () => void
  start: () => void
  stop: () => void
}

function getSpeechRecognition(): (new () => SpeechRecognitionLike) | null {
  if (typeof window === "undefined") return null
  const w = window as unknown as {
    SpeechRecognition?: new () => SpeechRecognitionLike
    webkitSpeechRecognition?: new () => SpeechRecognitionLike
  }
  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null
}

function VoiceInputButton({
  onTranscript,
}: {
  onTranscript: (text: string) => void
}) {
  const Ctor = getSpeechRecognition()
  const [listening, setListening] = useState(false)
  const recRef = useRef<SpeechRecognitionLike | null>(null)

if (!Ctor) return null

const start = () => {
    try {
      const rec = new Ctor()
      rec.lang = navigator.language || "en-US"
      rec.interimResults = false
      rec.continuous = false
      rec.onresult = (e) => {
        const text = e.results[0]?.[0]?.transcript ?? ""
        if (text.trim()) onTranscript(text.trim())
      }
      rec.onerror = () => setListening(false)
      rec.onend = () => setListening(false)
      recRef.current = rec
      rec.start()
      setListening(true)
    } catch {
      setListening(false)
    }
  }
  const stop = () => {
    recRef.current?.stop()
    setListening(false)
  }

return (
    <button
      type="button"
      data-action="ai-voice"
      onClick={() => (listening ? stop() : start())}
      aria-label={listening ? "Stop listening" : "Voice input"}
      className={
        "inline-flex size-9 items-center justify-center rounded-full transition-colors " +
        (listening
          ? "bg-destructive/10 text-destructive animate-pulse"
          : "text-muted-foreground hover:bg-accent hover:text-foreground")
      }
    >
      {listening ? <MicOff className="size-5" /> : <Mic className="size-5" />}
    </button>
  )
}