@hachej/boring-ui-kit 0.4.3 → 0.4.5

package/r/pi-chat.json

@@ -4,8 +4,8 @@
   "title": "Pi chat",
   "description": "A complete Tailwind chat over the borrowed native chat controller: composer, messages, one collapsible activity block per turn (tool calls and reasoning), message queue, history, a human-in-the-loop question card, an Approve / Deny card for host tools wrapped with requireApproval optional artifact cards that open generated content in the host's panel, and feedback cards for the opt-in feedback tool (lists, and Show offers that the host page resolves). Chat only: no layout. Owned, editable source; no AI SDK. The optional pi-ambient and pi-workspace blocks build on it.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.3",
-    "@hachej/boring-files@^0.4.3",
+    "@hachej/boring-ui-kit@^0.4.5",
+    "@hachej/boring-files@^0.4.5",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "marked@^17.0.6",
@@ -16,11 +16,13 @@
     "@earendil-works/pi-ai@~1.2.0",
     "@modelcontextprotocol/sdk@^1.32.1",
     "lucide-react@^1.51.0",
-    "@shadcn/react@0.3.1"
+    "@shadcn/react@0.3.1",
+    "zod@^4.6.5"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.3/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.3/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/button.json",
+    "tooltip",
     "trace",
     "message",
     "message-scroller",
@@ -75,6 +77,12 @@
       "type": "registry:lib",
       "target": "components/pi-chat/artifact.ts"
     },
+    {
+      "path": "registry/pi-chat/camera-sheet.tsx",
+      "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CameraIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { useChatText } from './labels';\n\n// The in-page camera behind the composer's \"Take a photo\" (phones). getUserMedia is secure-context only and needs permission, so it is\n// opened only when this sheet mounts (the person's tap on the menu item), through an injectable `getUserMedia` whose default\n// feature-detects `navigator.mediaDevices.getUserMedia`. Where the stream cannot open (refused, unsupported, a Permissions-Policy, an\n// insecure page) the sheet offers the phone's own camera through a file input instead. Same shape as feedback/voice/capture.ts.\n\n/** The longest side of a captured photo, in pixels. */\nexport const CAMERA_MAX_SIDE = 1600;\nconst JPEG_QUALITY = 0.85;\n\ntype GetUserMedia = (constraints: MediaStreamConstraints) => Promise<MediaStream>;\n\n/** The browser's camera, or null where the page cannot have one (insecure origin, no media devices). */\nfunction browserGetUserMedia(): GetUserMedia | null {\n  if (typeof globalThis.navigator?.mediaDevices?.getUserMedia !== 'function') return null;\n  const devices = globalThis.navigator.mediaDevices;\n  return constraints => devices.getUserMedia(constraints);\n}\n\nexport interface CameraSheetProps {\n  /** The photo, as a JPEG File scaled to at most `CAMERA_MAX_SIDE` on its longest side (or the phone camera's own file, from the fallback). */\n  readonly onCapture: (file: File) => void;\n  readonly onClose: () => void;\n  /** Opens the camera; defaults to the browser's, when it has one. */\n  readonly getUserMedia?: GetUserMedia | undefined;\n}\n\n/** Full-screen camera above the agent layer (the app shell's point layer + 10): a live preview, a shutter and a close button. */\nexport function CameraSheet({ onCapture, onClose, getUserMedia }: CameraSheetProps) {\n  const { labels } = useChatText();\n  const video = useRef<HTMLVideoElement>(null);\n  const stream = useRef<MediaStream | null>(null);\n  const fallback = useRef<HTMLInputElement>(null);\n  const [ready, setReady] = useState(false);\n  const [failed, setFailed] = useState(false);\n  const [encoding, setEncoding] = useState(false);\n  // The latest callbacks, so the stream effect runs once per mount.\n  const latest = useRef({ onClose, getUserMedia });\n  latest.current = { onClose, getUserMedia };\n\n  const release = () => { stream.current?.getTracks().forEach(track => track.stop()); stream.current = null; };\n  useEffect(() => {\n    let live = true;\n    const open = latest.current.getUserMedia ?? browserGetUserMedia();\n    (async () => {\n      if (!open) throw new Error('no camera');\n      // The rear camera if there is one; any camera otherwise.\n      const media = await open({ video: { facingMode: 'environment' } }).catch(() => open({ video: true }));\n      if (!live) { media.getTracks().forEach(track => track.stop()); return; }\n      stream.current = media;\n      const element = video.current;\n      if (!element) return;\n      element.srcObject = media;\n      await element.play();\n      if (live) setReady(true);\n    })().catch(() => { if (live) { release(); setFailed(true); } });\n    return () => { live = false; release(); };\n  }, []);\n  // Escape closes the camera only: captured before the drawer or the dropdown behind it see it.\n  useEffect(() => {\n    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') { event.stopPropagation(); event.preventDefault(); release(); latest.current.onClose(); } };\n    document.addEventListener('keydown', onKey, true);\n    return () => document.removeEventListener('keydown', onKey, true);\n  }, []);\n\n  const close = () => { release(); onClose(); };\n  const shoot = () => {\n    const element = video.current;\n    if (!element || !ready || encoding || !element.videoWidth || !element.videoHeight) return;\n    const scale = Math.min(1, CAMERA_MAX_SIDE / Math.max(element.videoWidth, element.videoHeight));\n    const canvas = document.createElement('canvas');\n    canvas.width = Math.max(1, Math.round(element.videoWidth * scale));\n    canvas.height = Math.max(1, Math.round(element.videoHeight * scale));\n    const context = canvas.getContext('2d');\n    if (!context) { setFailed(true); return; }\n    context.drawImage(element, 0, 0, canvas.width, canvas.height);\n    setEncoding(true);\n    canvas.toBlob(blob => {\n      setEncoding(false);\n      if (!blob) { setFailed(true); return; }\n      release();\n      onCapture(new File([blob], `photo-${Date.now()}.jpg`, { type: 'image/jpeg' }));\n    }, 'image/jpeg', JPEG_QUALITY);\n  };\n\n  return createPortal(\n    <div role=\"dialog\" aria-modal=\"true\" aria-label={labels.takePhoto} data-boring-overlay=\"\" data-testid=\"camera-sheet\"\n      style={{ zIndex: 'calc(var(--app-shell-z-point, 60) + 10)' }}\n      className=\"fixed inset-0 flex flex-col bg-background text-foreground\">\n      <div className=\"flex min-h-0 flex-1 items-center justify-center overflow-hidden\">\n        {failed\n          ? <div className=\"flex flex-col items-center gap-3 p-6 text-center\">\n            <p role=\"alert\" data-testid=\"camera-unavailable\" className=\"text-sm text-muted-foreground\">{labels.cameraUnavailable}</p>\n            {/* Synchronous click: the browser opens the phone camera only from the person's tap. */}\n            <Button type=\"button\" data-testid=\"camera-fallback\" className=\"min-h-11\" onClick={() => fallback.current?.click()}>\n              <CameraIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.cameraFallback}</Button>\n            <Input ref={fallback} type=\"file\" accept=\"image/*\" capture=\"environment\" tabIndex={-1} aria-hidden=\"true\" className=\"sr-only\" data-testid=\"camera-fallback-input\"\n              onChange={event => { const file = event.currentTarget.files?.[0]; event.currentTarget.value = ''; if (file) onCapture(file); }} />\n          </div>\n          : <video ref={video} playsInline muted autoPlay data-testid=\"camera-video\" className=\"size-full object-cover\" />}\n      </div>\n      <div className=\"flex items-center justify-between p-4 pb-[max(1rem,env(safe-area-inset-bottom))]\">\n        <Button type=\"button\" variant=\"ghost\" size=\"icon-lg\" data-testid=\"camera-close\" aria-label={labels.cameraClose} title={labels.cameraClose} onClick={close}>\n          <XIcon aria-hidden=\"true\" /></Button>\n        {!failed && <Button type=\"button\" size=\"icon-lg\" data-testid=\"camera-shoot\" aria-label={labels.cameraShoot} title={labels.cameraShoot}\n          disabled={!ready || encoding} onClick={shoot}><CameraIcon aria-hidden=\"true\" /></Button>}\n        <span className=\"w-9\" aria-hidden=\"true\" />\n      </div>\n    </div>, document.body);\n}\n",
+      "type": "registry:component",
+      "target": "components/pi-chat/camera-sheet.tsx"
+    },
     {
       "path": "registry/pi-chat/code-block.tsx",
       "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Item, ItemHeader, ItemTitle } from '@/components/ui/item';\nimport { copyText } from '../utils/utils';\nimport { useChatText } from './labels';\n\n/** Copy button with a short \"copied\" confirmation. Failures stay visible as a title instead of throwing. */\nexport function CopyButton({ text, label: given, onCopy, className, iconOnly = false }: { readonly text: string; readonly label?: string; readonly onCopy?: (text: string) => Promise<void>; readonly className?: string; readonly iconOnly?: boolean }) {\n  const { labels } = useChatText();\n  const label = given ?? labels.copy;\n  const [state, setState] = useState<'idle' | 'copied' | 'failed'>('idle');\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n  const settle = (next: 'copied' | 'failed') => { setState(next); clearTimeout(timer.current); timer.current = setTimeout(() => setState('idle'), 1600); };\n  return <Button variant=\"ghost\" size={iconOnly ? 'icon-sm' : 'sm'} className={className} data-testid=\"copy\" aria-label={label} title={state === 'failed' ? labels.copyFailed : label}\n    onClick={() => { copyText(text, onCopy).then(() => settle('copied'), () => settle('failed')); }}>\n    {state === 'copied' ? <CheckIcon data-icon=\"inline-start\" /> : <CopyIcon data-icon=\"inline-start\" />}\n    <span className={iconOnly ? 'sr-only' : 'sr-only md:not-sr-only'}>{state === 'copied' ? labels.copied : state === 'failed' ? labels.failed : label}</span>\n  </Button>;\n}\n\n/** Fenced code: language label, copy action, horizontal scroll. Text only, never interpreted as markup. */\nexport function CodeBlock({ code, language, onCopy }: { readonly code: string; readonly language?: string; readonly onCopy?: (text: string) => Promise<void> }) {\n  const { labels } = useChatText();\n  const label = language?.trim().split(/\\s+/)[0]?.slice(0, 24);\n  // shadcn's own Code Block installs a syntax highlighter (shiki) this block never uses, so the frame is an outline Item.\n  return <Item variant=\"outline\" size=\"xs\" data-testid=\"code-block\" className=\"my-3 flex-col items-stretch text-start\">\n    <ItemHeader>\n      <ItemTitle data-testid=\"code-language\" className=\"lowercase\">{label || 'text'}</ItemTitle>\n      <CopyButton text={code} label={labels.copyCode} {...(onCopy ? { onCopy } : {})} />\n    </ItemHeader>\n    <pre className=\"m-0 overflow-x-auto font-mono text-xs leading-5\"><code>{code}</code></pre>\n  </Item>;\n}\n",
@@ -83,7 +91,7 @@
     },
     {
       "path": "registry/pi-chat/composer.tsx",
-      "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEvent, ClipboardEvent, ComponentProps, DragEvent, KeyboardEvent, ReactNode, Ref } from 'react';\nimport { AlertCircleIcon, FileTextIcon, Loader2Icon, MessageSquarePlusIcon, SlashIcon, XIcon } from 'lucide-react';\nimport { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentMedia, AttachmentTitle } from '@/components/ui/attachment';\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Input } from '@/components/ui/input';\nimport { InputGroup, InputGroupAddon, InputGroupTextarea } from '@/components/ui/input-group';\nimport { Toggle } from '@/components/ui/toggle';\nimport { hasMention, isLongPaste, mentionToken, mentionTrigger, removeMention, slashItems, slashQuery } from './config';\nimport type { MentionsConfig, PastedText, PasteToFile, SlashConfig, SlashItem } from './config';\nimport { MentionPicker } from './mention-menu';\nimport { SlashPicker } from './slash-menu';\nimport { useChatText } from './labels';\nimport { cn } from '../utils/utils';\n\nexport interface ComposerAttachment { readonly id: string; readonly name: string; readonly mimeType: string; readonly data: string }\n\nconst SAFE_IMAGE = /^image\\/(png|jpe?g|gif|webp)$/;\nconst BASE64 = /^[A-Za-z0-9+/=\\s]+$/;\n/** A data URL for a thumbnail, only for common image types and well-formed base64. */\nexport function thumbnail(mimeType: string, data: string): string | undefined {\n  return SAFE_IMAGE.test(mimeType) && BASE64.test(data) ? `data:${mimeType};base64,${data}` : undefined;\n}\n\n/**\n * The optional annotate toggle (FEEDBACK.md, \"UX\"): one button in the composer's row that arms element targeting on the host's page,\n * and one count chip for the notes taken. Send attaches them. The host owns everything else (the registry `feedback` item's\n * `useComposerFeedback` returns this shape). Absent: the composer is unchanged.\n */\nexport interface ComposerFeedback {\n  /** The annotate toggle: arms targeting on the page (point mode on touch and compact screens), or stops it when it is on. */\n  readonly annotate: () => void;\n  /** Annotating is on: the toggle shows pressed. */\n  readonly active: boolean;\n  /** Notes taken and waiting to be sent with the next message; above zero, Send is allowed with no text. */\n  readonly count: number;\n  /** Removes the notes (the count chip's remove button). */\n  readonly clear: () => void;\n  /** Send: the text to send instead, with the notes attached, or why they cannot be sent yet. */\n  readonly attach: (text: string) => Promise<{ readonly kind: 'ok'; readonly text: string } | { readonly kind: 'refused'; readonly reason: string }>;\n  /** The message carrying the notes was accepted. */\n  readonly sent: () => void;\n}\n\n/** One file being uploaded (or that failed to upload), shown as a chip until it settles or is dismissed. */\nexport interface PendingUpload {\n  readonly id: string; readonly name: string; readonly state: 'uploading' | 'failed'; readonly error?: string;\n  /** A pasted text file: abandons the upload and puts the text back in the message (its restore button, or Ctrl+Z). */\n  readonly cancel?: (() => void) | undefined;\n  /** The message text right after the paste was accepted: Ctrl+Z restores only while the text is still this (any later edit leaves it alone). */\n  readonly restoreWhile?: string | undefined;\n}\n\nexport interface ComposerProps {\n  /** `/` menu of commands and skills. Absent: no menu and no keyboard trigger. */\n  readonly slash?: SlashConfig | undefined;\n  /** Reports a failing command. */\n  readonly onSlashError?: ((cause: unknown) => void) | undefined;\n  /** `@` file picker. Absent: no picker. */\n  readonly mentions?: MentionsConfig | undefined;\n  /** Paths picked or uploaded as mentions; each shows as a chip while its `@path` is still in the text. */\n  readonly mentionPaths?: readonly string[];\n  readonly onMentionPicked?: ((path: string) => void) | undefined;\n  readonly uploads?: readonly PendingUpload[];\n  readonly onDismissUpload?: ((id: string) => void) | undefined;\n  /** A paste above `pasteToFile`'s limits, taken by the composer: the host uploads it as a file. Absent: pastes stay inline. */\n  readonly onPasteText?: ((paste: PastedText) => void) | undefined;\n  readonly pasteToFile?: PasteToFile | undefined;\n  /** Extra controls in the bar (the model and effort pill) and a short note beside them. */\n  readonly barStart?: ReactNode;\n  readonly barNote?: ReactNode;\n  /** Optional host mode/model chips beside the attach control. */\n  readonly chips?: ReactNode;\n  readonly text: string;\n  readonly onText: (text: string) => void;\n  readonly attachments: readonly ComposerAttachment[];\n  readonly onRemoveAttachment: (id: string) => void;\n  /** The agent is working: the primary button stops it and Enter queues the message (steering is chosen on the queued message). */\n  readonly working: boolean;\n  /** A send would be refused right now (not connected, a submission in flight, uploading). */\n  readonly sendBlocked: boolean;\n  readonly disabled: boolean;\n  readonly stopRequested: boolean;\n  readonly onSend: () => void;\n  readonly onStop: () => void;\n  readonly uploading: boolean;\n  readonly canAttach: boolean;\n  readonly fileAccept: string;\n  readonly onPickFiles: (files: readonly File[]) => void;\n  readonly onKeyDown?: ((event: KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;\n  readonly textareaRef: Ref<HTMLTextAreaElement>;\n  readonly placeholder?: string;\n  /** `card` (default): chips, then full-width text, then a row of controls, in the host's shadcn InputGroup. `pill` puts the text between\n   * the controls on one row. `stacked` and `inline` are compatibility values that render as `card`. */\n  readonly layout?: 'card' | 'pill' | 'stacked' | 'inline';\n  /** Host controls (for example a voice button) as round buttons between the model pill and the send button. */\n  readonly barEnd?: ReactNode;\n  /** The optional Feedback button and chip. */\n  readonly feedback?: ComposerFeedback | undefined;\n}\n\n/** The annotate toggle beside the \"+\" menu in both layouts. */\nfunction AnnotateButton({ feedback, disabled }: { readonly feedback: ComposerFeedback; readonly disabled: boolean }) {\n  const { labels } = useChatText();\n  return <Toggle data-testid=\"composer-annotate\" pressed={feedback.active} disabled={disabled}\n    aria-label={labels.annotate} title={labels.annotateHint} onPressedChange={() => feedback.annotate()}>\n    <MessageSquarePlusIcon data-icon=\"inline-start\" aria-hidden=\"true\" />\n  </Toggle>;\n}\n\n/**\n * One chip above the text (a mention, an upload, an attachment or the notes count) as the host's shadcn Attachment. The remove\n * buttons keep a 44px touch target on coarse pointers; negative margins let it extend beyond the chip instead of growing it.\n */\nfunction Chip({ media, image = false, label, actions, ...props }: ComponentProps<typeof Attachment> & { readonly media: ReactNode; readonly image?: boolean; readonly label: ReactNode; readonly actions?: ReactNode }) {\n  return <Attachment size=\"xs\" role=\"listitem\" {...props}>\n    <AttachmentMedia variant={image ? 'image' : 'icon'}>{media}</AttachmentMedia>\n    <AttachmentContent><AttachmentTitle>{label}</AttachmentTitle></AttachmentContent>\n    {actions && <AttachmentActions className=\"max-sm:-my-2.5 pointer-coarse:-my-2.5\">{actions}</AttachmentActions>}\n  </Attachment>;\n}\n\nfunction RemoveChip({ label, onClick }: { readonly label: string; readonly onClick: () => void }) {\n  return <AttachmentAction aria-label={label} title={label} onClick={onClick}><XIcon aria-hidden=\"true\" /></AttachmentAction>;\n}\n\n/** The count chip: how many notes go with the next message, and a way to drop them. */\nfunction NotesChip({ feedback }: { readonly feedback: ComposerFeedback }) {\n  const { labels } = useChatText();\n  return <Chip data-testid=\"feedback-count\" data-count={feedback.count} media={<MessageSquarePlusIcon aria-hidden=\"true\" />} label={labels.annotateNotes(feedback.count)}\n    actions={<AttachmentAction data-testid=\"feedback-count-clear\" aria-label={labels.annotateClear} title={labels.annotateClear} onClick={() => feedback.clear()}><XIcon aria-hidden=\"true\" /></AttachmentAction>} />;\n}\n\n/** The \"+\" button and the host's shadcn dropdown menu (Attach files, Commands). */\nfunction PlusActions({ disabled, onAttach, onCommands, textarea }: { readonly disabled: boolean; readonly onAttach?: (() => void) | undefined; readonly onCommands?: (() => void) | undefined; readonly textarea: { readonly current: HTMLTextAreaElement | null } }) {\n  const { labels, icons } = useChatText();\n  const [open, setOpen] = useState(false);\n  // Commands puts `/` in the message: focus goes back to the text, not to the \"+\" button.\n  const toText = useRef(false);\n  useEffect(() => { if (disabled) setOpen(false); }, [disabled]);\n  return <DropdownMenu open={open} onOpenChange={setOpen}>\n    <DropdownMenuTrigger render={<Button variant=\"ghost\" size=\"icon\" />} data-testid=\"composer-plus\" aria-label={labels.add} title={labels.add} disabled={disabled}>\n      <icons.add data-icon=\"inline-start\" aria-hidden=\"true\" /></DropdownMenuTrigger>\n    <DropdownMenuContent side=\"top\" align=\"start\" aria-label={labels.add} data-testid=\"composer-plus-menu\" className=\"w-52\"\n      finalFocus={() => { const text = toText.current; toText.current = false; return text ? textarea.current : true; }}>\n      {onAttach && <DropdownMenuItem data-testid=\"composer-attach\" onClick={onAttach} className=\"max-sm:min-h-11 pointer-coarse:min-h-11\">\n        <icons.attach aria-hidden=\"true\" />{labels.attachFiles}</DropdownMenuItem>}\n      {onCommands && <DropdownMenuItem data-testid=\"composer-commands\" onClick={() => { toText.current = true; onCommands(); }} className=\"max-sm:min-h-11 pointer-coarse:min-h-11\">\n        <SlashIcon aria-hidden=\"true\" />{labels.commands}</DropdownMenuItem>}\n    </DropdownMenuContent>\n  </DropdownMenu>;\n}\n\nconst MAX_HEIGHT = 208;\n\n/** Prompt composer: auto-growing textarea, Enter to send, one primary Send/Stop button. While the agent works a message is queued. */\nexport function Composer(props: ComposerProps) {\n  const { text, attachments, working, sendBlocked, disabled, stopRequested, uploading, canAttach, layout = 'card' } = props;\n  const { labels, icons } = useChatText();\n  const inner = useRef<HTMLTextAreaElement | null>(null);\n  const composing = useRef(false);\n  const [dragging, setDragging] = useState(false);\n  const [caret, setCaret] = useState(0);\n  // A menu closed with Escape stays closed until the text changes.\n  const [dismissed, setDismissed] = useState<string | null>(null);\n  useEffect(() => { setDismissed(value => value === null || value === text ? value : null); }, [text]);\n  const pendingCaret = useRef<number | null>(null);\n  const fileInput = useRef<HTMLInputElement>(null);\n  const { slash, mentions } = props;\n  const items = useMemo<SlashItem[]>(() => slash ? slashItems(slash) : [], [slash]);\n  const setRef = (element: HTMLTextAreaElement | null) => {\n    inner.current = element;\n    if (typeof props.textareaRef === 'function') props.textareaRef(element); else if (props.textareaRef) (props.textareaRef as { current: HTMLTextAreaElement | null }).current = element;\n  };\n  useLayoutEffect(() => {\n    const element = inner.current;\n    if (!element) return;\n    const resize = () => {\n      element.style.height = 'auto';\n      element.style.height = `${Math.min(element.scrollHeight, MAX_HEIGHT)}px`;\n      element.style.overflowY = element.scrollHeight > MAX_HEIGHT ? 'auto' : 'hidden';\n    };\n    resize();\n    if (pendingCaret.current !== null) { element.setSelectionRange(pendingCaret.current, pendingCaret.current); element.focus(); pendingCaret.current = null; }\n    if (typeof ResizeObserver === 'undefined') return;\n    let width = element.clientWidth;\n    const observer = new ResizeObserver(() => {\n      const next = element.clientWidth;\n      if (next === width) return;\n      width = next; resize();\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [text]);\n\n  const query = slash && items.length ? slashQuery(text, caret) : null;\n  const trigger = query === null && mentions ? mentionTrigger(text, caret) : null;\n  const slashOpen = query !== null && dismissed !== text, mentionOpen = trigger !== null && dismissed !== text;\n  const menuOpen = slashOpen || mentionOpen;\n  const edit = (next: string, position: number) => { pendingCaret.current = position; setCaret(position); props.onText(next); };\n  const trackCaret = (element: HTMLTextAreaElement) => setCaret(element.selectionStart ?? element.value.length);\n  const dismiss = () => setDismissed(text);\n  const pickSlash = (item: SlashItem) => {\n    const rest = text.slice(caret).replace(/^\\s+/, '');\n    if (item.source === 'skill') return edit(`/${item.name} ${rest}`, item.name.length + 2);\n    const command = slash?.commands?.find(candidate => candidate.name === item.name);\n    props.onText(rest); setCaret(0);\n    inner.current?.focus();\n    if (!command) return;\n    try { void Promise.resolve(command.run({ text: rest, setText: value => props.onText(value) })).catch(cause => props.onSlashError?.(cause)); }\n    catch (cause) { props.onSlashError?.(cause); }\n  };\n  const pickMention = (path: string) => {\n    if (!trigger) return;\n    const token = `${mentionToken(path)} `;\n    edit(`${text.slice(0, trigger.start)}${token}${text.slice(trigger.end)}`, trigger.start + token.length);\n    props.onMentionPicked?.(path);\n  };\n  const openCommands = () => edit(`${text}${text && !/\\s$/.test(text) ? ' ' : ''}/`, text.length + (text && !/\\s$/.test(text) ? 2 : 1));\n  const chips = (props.mentionPaths ?? []).filter(path => hasMention(text, path));\n  const onChange = (event: ChangeEvent<HTMLTextAreaElement>) => { trackCaret(event.currentTarget); props.onText(event.currentTarget.value); };\n\n  const { feedback } = props;\n  const hasContent = text.trim().length > 0 || attachments.length > 0 || (feedback?.count ?? 0) > 0;\n  const canSubmit = hasContent && !sendBlocked && !disabled;\n  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n    props.onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    // Ctrl+Z right after a paste that is still uploading puts the pasted text back, instead of undoing the paste in the textarea.\n    const undo = (props.uploads ?? []).filter(item => item.state === 'uploading' && item.cancel && item.restoreWhile === props.text).pop();\n    if (undo && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'z') { event.preventDefault(); undo.cancel!(); return; }\n    // Never send while an input method editor is composing (Enter confirms the candidate).\n    // A phone keyboard has no Shift+Enter: on a touch device Enter inserts a newline and the Send button sends.\n    const touch = globalThis.matchMedia?.('(pointer: coarse)').matches === true;\n    if (event.key === 'Enter' && !touch && !event.shiftKey && !composing.current && !event.nativeEvent.isComposing && event.keyCode !== 229) {\n      event.preventDefault();\n      if (canSubmit) props.onSend();\n    }\n  };\n  const onPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {\n    if (canAttach && event.clipboardData.files.length) { event.preventDefault(); props.onPickFiles(Array.from(event.clipboardData.files)); return; }\n    if (!props.onPasteText) return;\n    const pasted = event.clipboardData.getData('text/plain');\n    if (!isLongPaste(pasted, props.pasteToFile)) return;\n    event.preventDefault();\n    props.onPasteText({ text: pasted, start: event.currentTarget.selectionStart, end: event.currentTarget.selectionEnd });\n  };\n  const drag = (event: DragEvent) => { if (canAttach) { event.preventDefault(); setDragging(event.type === 'dragover'); } };\n  const drop = (event: DragEvent) => { if (!canAttach) return; event.preventDefault(); setDragging(false); props.onPickFiles(Array.from(event.dataTransfer.files)); };\n\n  const chipList = (chips.length > 0 || (props.uploads?.length ?? 0) > 0 || (feedback?.count ?? 0) > 0 || attachments.length > 0) && <>\n    {feedback && feedback.count > 0 && <div role=\"list\" className=\"contents\"><NotesChip feedback={feedback} /></div>}\n    {chips.length > 0 && <div role=\"list\" data-testid=\"mention-chips\" aria-label={labels.mentionedFiles} className=\"contents\">\n      {chips.map(path => <Chip key={path} data-testid=\"mention-chip\" data-path={path} title={path} className=\"max-w-full sm:max-w-[16rem]\"\n        media={<FileTextIcon aria-hidden=\"true\" />} label={path} actions={<RemoveChip label={labels.remove(path)} onClick={() => props.onText(removeMention(text, path))} />} />)}\n    </div>}\n    {(props.uploads?.length ?? 0) > 0 && <div role=\"list\" data-testid=\"uploads\" aria-label={labels.uploads} className=\"contents\">\n      {props.uploads!.map(item => <Chip key={item.id} data-testid=\"upload-chip\" state={item.state === 'failed' ? 'error' : 'uploading'} data-state={item.state} title={item.error ?? item.name} className=\"max-w-full sm:max-w-[20rem]\"\n        media={item.state === 'failed' ? <AlertCircleIcon className=\"text-destructive\" aria-hidden=\"true\" /> : <Loader2Icon className=\"animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />}\n        label={item.state === 'failed' ? labels.uploadFailed(item.name, item.error) : labels.uploading(item.name)}\n        actions={<>\n          {item.cancel && <RemoveChip label={labels.restorePaste} onClick={() => item.cancel!()} />}\n          {item.state === 'failed' && <RemoveChip label={labels.dismiss(item.name)} onClick={() => props.onDismissUpload?.(item.id)} />}\n        </>} />)}\n    </div>}\n    {attachments.length > 0 && <div role=\"list\" data-testid=\"attachments\" aria-label={labels.attachments} className=\"contents\">\n      {attachments.map(attachment => {\n        const src = thumbnail(attachment.mimeType, attachment.data);\n        return <Chip key={attachment.id} data-testid=\"attachment\" className=\"max-w-full sm:max-w-[14rem]\" image={!!src}\n          media={src ? <img src={src} alt=\"\" /> : <FileTextIcon aria-hidden=\"true\" />} label={attachment.name}\n          actions={<RemoveChip label={labels.remove(attachment.name)} onClick={() => props.onRemoveAttachment(attachment.id)} />} />;\n      })}\n    </div>}\n  </>;\n  const pill = layout === 'pill';\n  const textareaEl = <InputGroupTextarea ref={setRef} data-testid=\"composer-input\" aria-label={labels.messageInput} rows={1} value={text} disabled={disabled}\n      placeholder={props.placeholder ?? (working ? labels.placeholderWorking : labels.placeholder)}\n      {...(slash || mentions ? { role: 'combobox', 'aria-expanded': menuOpen, 'aria-haspopup': 'listbox', 'aria-autocomplete': 'list' } as const : {})}\n      onChange={onChange} onKeyDown={onKeyDown} onPaste={onPaste} onKeyUp={event => trackCaret(event.currentTarget)} onClick={event => trackCaret(event.currentTarget)}\n      onCompositionStart={() => { composing.current = true; }} onCompositionEnd={() => { composing.current = false; }}\n      className={pill ? 'max-h-52 min-h-0 min-w-0' : 'max-h-52 min-h-11'} />;\n  const plus = (canAttach || items.length > 0) && <PlusActions disabled={disabled} textarea={inner} onAttach={canAttach ? () => fileInput.current?.click() : undefined} onCommands={items.length > 0 ? openCommands : undefined} />;\n  const fileEl = canAttach && <Input ref={fileInput} type=\"file\" multiple accept={props.fileAccept} disabled={disabled} tabIndex={-1} aria-hidden=\"true\" className=\"sr-only\" data-testid=\"composer-file\" data-attach=\"true\"\n    onChange={event => { const files = Array.from(event.currentTarget.files ?? []); event.currentTarget.value = ''; props.onPickFiles(files); }} />;\n  const send = working\n    ? <Button variant=\"default\" size=\"icon\" data-testid=\"composer-submit\" data-state=\"stop\" aria-label={labels.stop} title={labels.stop} disabled={disabled || stopRequested} onClick={props.onStop} className=\"shrink-0\">\n      {stopRequested ? <Loader2Icon data-icon=\"inline-start\" className=\"animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" /> : <icons.stop data-icon=\"inline-start\" aria-hidden=\"true\" />}</Button>\n    : <Button variant=\"default\" size=\"icon\" type=\"submit\" data-testid=\"composer-submit\" data-state=\"send\" aria-label={labels.send} title={labels.sendHint} disabled={!canSubmit} className=\"shrink-0\">\n      <icons.send data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>;\n  const end = <>\n    {props.barStart}\n    {props.chips && <div className=\"flex min-w-0 items-center gap-2\">{props.chips}</div>}\n    {props.barNote}\n    {uploading && !(props.uploads?.length) && <span role=\"status\" className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\"><Loader2Icon className=\"size-3 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{labels.preparingAttachments}</span>}\n    {!pill && <span className=\"min-w-0 flex-1\" />}\n    {props.barEnd && <div data-testid=\"composer-tools\" className=\"flex shrink-0 items-center gap-2\">{props.barEnd}</div>}\n    {working && hasContent && <Button variant=\"secondary\" size=\"sm\" data-testid=\"composer-queue\" disabled={!canSubmit} onClick={props.onSend} className=\"shrink-0\">\n      <icons.queue data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.queue}</Button>}\n    {send}\n  </>;\n\n  // One shadcn InputGroup: the chips, the text and a row of controls (`card`, also used for the `stacked` and `inline` compatibility\n  // values), or one row with the text between the controls (`pill`, chips above it). Its look is the host's; ours is layout only.\n  return <form data-testid=\"composer\" data-layout={layout} data-dragging={dragging || undefined} onSubmit={event => { event.preventDefault(); if (canSubmit) props.onSend(); }} onDragOver={drag} onDragLeave={drag} onDrop={drop}\n    className={cn('relative flex flex-col gap-2', pill && '@container/composer')}>\n    {fileEl}\n    {slashOpen && <SlashPicker query={query!} items={items} onSelect={pickSlash} onDismiss={dismiss} />}\n    {mentionOpen && mentions && <MentionPicker query={trigger!.query} search={mentions.search} generation={mentions.generation} onSelect={pickMention} onDismiss={dismiss} />}\n    {pill && chipList && <div className=\"flex flex-wrap gap-2\">{chipList}</div>}\n    {pill ? <InputGroup>\n      <InputGroupAddon>{plus}{feedback && <AnnotateButton feedback={feedback} disabled={disabled} />}</InputGroupAddon>\n      {textareaEl}\n      <InputGroupAddon align=\"inline-end\" data-testid=\"composer-controls\">{end}</InputGroupAddon>\n    </InputGroup> : <InputGroup>\n      {chipList && <InputGroupAddon align=\"block-start\" className=\"flex-wrap\">{chipList}</InputGroupAddon>}\n      {textareaEl}\n      <InputGroupAddon align=\"block-end\" data-testid=\"composer-controls\">\n        {plus}\n        {feedback && <AnnotateButton feedback={feedback} disabled={disabled} />}\n        {end}\n      </InputGroupAddon>\n    </InputGroup>}\n  </form>;\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEvent, ClipboardEvent, ComponentProps, DragEvent, KeyboardEvent, ReactNode, Ref } from 'react';\nimport { AlertCircleIcon, FileTextIcon, Loader2Icon, MessageSquarePlusIcon, SlashIcon, XIcon } from 'lucide-react';\nimport { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentMedia, AttachmentTitle } from '@/components/ui/attachment';\nimport { Button } from '@/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Input } from '@/components/ui/input';\nimport { InputGroup, InputGroupAddon, InputGroupTextarea } from '@/components/ui/input-group';\nimport { Toggle } from '@/components/ui/toggle';\nimport { hasMention, isLongPaste, mentionToken, mentionTrigger, removeMention, slashItems, slashQuery } from './config';\nimport type { MentionsConfig, PastedText, PasteToFile, SlashConfig, SlashItem } from './config';\nimport { CameraSheet } from './camera-sheet';\nimport { MentionPicker } from './mention-menu';\nimport { SlashPicker } from './slash-menu';\nimport { useChatText } from './labels';\nimport { cn } from '../utils/utils';\n\nexport interface ComposerAttachment { readonly id: string; readonly name: string; readonly mimeType: string; readonly data: string }\n\nconst SAFE_IMAGE = /^image\\/(png|jpe?g|gif|webp)$/;\nconst BASE64 = /^[A-Za-z0-9+/=\\s]+$/;\n/** A data URL for a thumbnail, only for common image types and well-formed base64. */\nexport function thumbnail(mimeType: string, data: string): string | undefined {\n  return SAFE_IMAGE.test(mimeType) && BASE64.test(data) ? `data:${mimeType};base64,${data}` : undefined;\n}\n\n/**\n * The optional annotate toggle (FEEDBACK.md, \"UX\"): one button in the composer's row that arms element targeting on the host's page,\n * and one count chip for the notes taken. Send attaches them. The host owns everything else (the registry `feedback` item's\n * `useComposerFeedback` returns this shape). Absent: the composer is unchanged.\n */\nexport interface ComposerFeedback {\n  /** The annotate toggle: arms targeting on the page (point mode on touch and compact screens), or stops it when it is on. */\n  readonly annotate: () => void;\n  /** Annotating is on: the toggle shows pressed. */\n  readonly active: boolean;\n  /** Notes taken and waiting to be sent with the next message; above zero, Send is allowed with no text. */\n  readonly count: number;\n  /** Removes the notes (the count chip's remove button). */\n  readonly clear: () => void;\n  /** Send: the text to send instead, with the notes attached, or why they cannot be sent yet. */\n  readonly attach: (text: string) => Promise<{ readonly kind: 'ok'; readonly text: string } | { readonly kind: 'refused'; readonly reason: string }>;\n  /** The message carrying the notes was accepted. */\n  readonly sent: () => void;\n}\n\n/** One file being uploaded (or that failed to upload), shown as a chip until it settles or is dismissed. */\nexport interface PendingUpload {\n  readonly id: string; readonly name: string; readonly state: 'uploading' | 'failed'; readonly error?: string;\n  /** A pasted text file: abandons the upload and puts the text back in the message (its restore button, or Ctrl+Z). */\n  readonly cancel?: (() => void) | undefined;\n  /** The message text right after the paste was accepted: Ctrl+Z restores only while the text is still this (any later edit leaves it alone). */\n  readonly restoreWhile?: string | undefined;\n}\n\nexport interface ComposerProps {\n  /** `/` menu of commands and skills. Absent: no menu and no keyboard trigger. */\n  readonly slash?: SlashConfig | undefined;\n  /** Reports a failing command. */\n  readonly onSlashError?: ((cause: unknown) => void) | undefined;\n  /** `@` file picker. Absent: no picker. */\n  readonly mentions?: MentionsConfig | undefined;\n  /** Paths picked or uploaded as mentions; each shows as a chip while its `@path` is still in the text. */\n  readonly mentionPaths?: readonly string[];\n  readonly onMentionPicked?: ((path: string) => void) | undefined;\n  readonly uploads?: readonly PendingUpload[];\n  readonly onDismissUpload?: ((id: string) => void) | undefined;\n  /** A paste above `pasteToFile`'s limits, taken by the composer: the host uploads it as a file. Absent: pastes stay inline. */\n  readonly onPasteText?: ((paste: PastedText) => void) | undefined;\n  readonly pasteToFile?: PasteToFile | undefined;\n  /** Extra controls in the bar (the model and effort pill) and a short note beside them. */\n  readonly barStart?: ReactNode;\n  readonly barNote?: ReactNode;\n  /** Optional host mode/model chips beside the attach control. */\n  readonly chips?: ReactNode;\n  /** Optional host context above the input. */\n  readonly quote?: ReactNode;\n  readonly text: string;\n  readonly onText: (text: string) => void;\n  readonly attachments: readonly ComposerAttachment[];\n  /** Host-owned content contributes to send readiness. */\n  readonly hasFiles?: boolean;\n  readonly onRemoveAttachment: (id: string) => void;\n  /** The agent is working: the primary button stops it and Enter queues the message (steering is chosen on the queued message). */\n  readonly working: boolean;\n  /** A send would be refused right now (not connected, a submission in flight, uploading). */\n  readonly sendBlocked: boolean;\n  readonly disabled: boolean;\n  readonly stopRequested: boolean;\n  readonly onSend: () => void;\n  readonly onStop: () => void;\n  readonly uploading: boolean;\n  readonly canAttach: boolean;\n  readonly fileAccept: string;\n  readonly onPickFiles: (files: readonly File[]) => void;\n  readonly onKeyDown?: ((event: KeyboardEvent<HTMLTextAreaElement>) => void) | undefined;\n  readonly textareaRef: Ref<HTMLTextAreaElement>;\n  readonly placeholder?: string;\n  /** `card` (default): chips, then full-width text, then a row of controls, in the host's shadcn InputGroup. `pill` puts the text between\n   * the controls on one row. `stacked` and `inline` are compatibility values that render as `card`. */\n  readonly layout?: 'card' | 'pill' | 'stacked' | 'inline';\n  /** Host controls (for example a voice button) as round buttons between the model pill and the send button. */\n  readonly barEnd?: ReactNode;\n  /** The optional Feedback button and chip. */\n  readonly feedback?: ComposerFeedback | undefined;\n}\n\n/** The annotate toggle beside the \"+\" menu in both layouts. */\nfunction AnnotateButton({ feedback, disabled }: { readonly feedback: ComposerFeedback; readonly disabled: boolean }) {\n  const { labels } = useChatText();\n  return <Toggle data-testid=\"composer-annotate\" pressed={feedback.active} disabled={disabled}\n    aria-label={labels.annotate} title={labels.annotateHint} onPressedChange={() => feedback.annotate()}>\n    <MessageSquarePlusIcon data-icon=\"inline-start\" aria-hidden=\"true\" />\n  </Toggle>;\n}\n\n/**\n * One chip above the text (a mention, an upload, an attachment or the notes count) as the host's shadcn Attachment. The remove\n * buttons keep a 44px touch target on coarse pointers; negative margins let it extend beyond the chip instead of growing it.\n */\nfunction Chip({ media, image = false, label, actions, ...props }: ComponentProps<typeof Attachment> & { readonly media: ReactNode; readonly image?: boolean; readonly label: ReactNode; readonly actions?: ReactNode }) {\n  return <Attachment size=\"xs\" role=\"listitem\" {...props}>\n    <AttachmentMedia variant={image ? 'image' : 'icon'}>{media}</AttachmentMedia>\n    <AttachmentContent><AttachmentTitle>{label}</AttachmentTitle></AttachmentContent>\n    {actions && <AttachmentActions className=\"max-sm:-my-2.5 pointer-coarse:-my-2.5\">{actions}</AttachmentActions>}\n  </Attachment>;\n}\n\nfunction RemoveChip({ label, onClick }: { readonly label: string; readonly onClick: () => void }) {\n  return <AttachmentAction aria-label={label} title={label} onClick={onClick}><XIcon aria-hidden=\"true\" /></AttachmentAction>;\n}\n\n/** The count chip: how many notes go with the next message, and a way to drop them. */\nfunction NotesChip({ feedback }: { readonly feedback: ComposerFeedback }) {\n  const { labels } = useChatText();\n  return <Chip data-testid=\"feedback-count\" data-count={feedback.count} media={<MessageSquarePlusIcon aria-hidden=\"true\" />} label={labels.annotateNotes(feedback.count)}\n    actions={<AttachmentAction data-testid=\"feedback-count-clear\" aria-label={labels.annotateClear} title={labels.annotateClear} onClick={() => feedback.clear()}><XIcon aria-hidden=\"true\" /></AttachmentAction>} />;\n}\n\n/** Whether a file input's `accept` admits a JPEG photo (empty admits everything). */\nexport function acceptsPhotos(accept: string): boolean {\n  const tokens = accept.split(',').map(token => token.trim().toLowerCase()).filter(Boolean);\n  return tokens.length === 0 || tokens.some(token => token === 'image/*' || token === '*/*' || token === 'image/jpeg' || token === '.jpg' || token === '.jpeg');\n}\n\n/** True on a touch-first device (a phone or tablet); false on the server, so the menu renders the same there. */\nfunction useCoarsePointer(): boolean {\n  const [coarse, setCoarse] = useState(() => globalThis.matchMedia?.('(pointer: coarse)').matches ?? false);\n  useEffect(() => {\n    const query = globalThis.matchMedia?.('(pointer: coarse)');\n    if (!query) return;\n    const update = () => setCoarse(query.matches);\n    update();\n    query.addEventListener?.('change', update);\n    return () => query.removeEventListener?.('change', update);\n  }, []);\n  return coarse;\n}\n\n/** The \"+\" button and the host's shadcn dropdown menu (Attach files, Take a photo, Commands). */\nfunction PlusActions({ disabled, onAttach, onTakePhoto, onCommands, textarea }: { readonly disabled: boolean; readonly onAttach?: (() => void) | undefined; readonly onTakePhoto?: (() => void) | undefined; readonly onCommands?: (() => void) | undefined; readonly textarea: { readonly current: HTMLTextAreaElement | null } }) {\n  const { labels, icons } = useChatText();\n  const [open, setOpen] = useState(false);\n  // Commands puts `/` in the message: focus goes back to the text, not to the \"+\" button.\n  const toText = useRef(false);\n  useEffect(() => { if (disabled) setOpen(false); }, [disabled]);\n  return <DropdownMenu open={open} onOpenChange={setOpen}>\n    <DropdownMenuTrigger render={<Button variant=\"ghost\" size=\"icon\" />} data-testid=\"composer-plus\" aria-label={labels.add} title={labels.add} disabled={disabled}>\n      <icons.add data-icon=\"inline-start\" aria-hidden=\"true\" /></DropdownMenuTrigger>\n    <DropdownMenuContent side=\"top\" align=\"start\" aria-label={labels.add} data-testid=\"composer-plus-menu\" className=\"w-52\"\n      finalFocus={() => { const text = toText.current; toText.current = false; return text ? textarea.current : true; }}>\n      {onAttach && <DropdownMenuItem data-testid=\"composer-attach\" onClick={onAttach} className=\"max-sm:min-h-11 pointer-coarse:min-h-11\">\n        <icons.attach aria-hidden=\"true\" />{labels.attachFiles}</DropdownMenuItem>}\n      {onTakePhoto && <DropdownMenuItem data-testid=\"composer-take-photo\" onClick={onTakePhoto} className=\"max-sm:min-h-11 pointer-coarse:min-h-11\">\n        <icons.camera aria-hidden=\"true\" />{labels.takePhoto}</DropdownMenuItem>}\n      {onCommands && <DropdownMenuItem data-testid=\"composer-commands\" onClick={() => { toText.current = true; onCommands(); }} className=\"max-sm:min-h-11 pointer-coarse:min-h-11\">\n        <SlashIcon aria-hidden=\"true\" />{labels.commands}</DropdownMenuItem>}\n    </DropdownMenuContent>\n  </DropdownMenu>;\n}\n\nconst MAX_HEIGHT = 208;\n\n/** Prompt composer: auto-growing textarea, Enter to send, one primary Send/Stop button. While the agent works a message is queued. */\nexport function Composer(props: ComposerProps) {\n  const { text, attachments, working, sendBlocked, disabled, stopRequested, uploading, canAttach, layout = 'card' } = props;\n  const { labels, icons } = useChatText();\n  const inner = useRef<HTMLTextAreaElement | null>(null);\n  const composing = useRef(false);\n  const [dragging, setDragging] = useState(false);\n  const [caret, setCaret] = useState(0);\n  // A menu closed with Escape stays closed until the text changes.\n  const [dismissed, setDismissed] = useState<string | null>(null);\n  useEffect(() => { setDismissed(value => value === null || value === text ? value : null); }, [text]);\n  const pendingCaret = useRef<number | null>(null);\n  const fileInput = useRef<HTMLInputElement>(null);\n  // The camera sheet lives here, not in the menu: the menu content unmounts as soon as it closes.\n  const [cameraOpen, setCameraOpen] = useState(false);\n  const coarse = useCoarsePointer();\n  const canPhoto = canAttach && coarse && acceptsPhotos(props.fileAccept);\n  const { slash, mentions } = props;\n  const items = useMemo<SlashItem[]>(() => slash ? slashItems(slash) : [], [slash]);\n  const setRef = (element: HTMLTextAreaElement | null) => {\n    inner.current = element;\n    if (typeof props.textareaRef === 'function') props.textareaRef(element); else if (props.textareaRef) (props.textareaRef as { current: HTMLTextAreaElement | null }).current = element;\n  };\n  useLayoutEffect(() => {\n    const element = inner.current;\n    if (!element) return;\n    const resize = () => {\n      element.style.height = 'auto';\n      element.style.height = `${Math.min(element.scrollHeight, MAX_HEIGHT)}px`;\n      element.style.overflowY = element.scrollHeight > MAX_HEIGHT ? 'auto' : 'hidden';\n    };\n    resize();\n    if (pendingCaret.current !== null) { element.setSelectionRange(pendingCaret.current, pendingCaret.current); element.focus(); pendingCaret.current = null; }\n    if (typeof ResizeObserver === 'undefined') return;\n    let width = element.clientWidth;\n    const observer = new ResizeObserver(() => {\n      const next = element.clientWidth;\n      if (next === width) return;\n      width = next; resize();\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [text]);\n\n  const query = slash && items.length ? slashQuery(text, caret) : null;\n  const trigger = query === null && mentions ? mentionTrigger(text, caret) : null;\n  const slashOpen = query !== null && dismissed !== text, mentionOpen = trigger !== null && dismissed !== text;\n  const menuOpen = slashOpen || mentionOpen;\n  const edit = (next: string, position: number) => { pendingCaret.current = position; setCaret(position); props.onText(next); };\n  const trackCaret = (element: HTMLTextAreaElement) => setCaret(element.selectionStart ?? element.value.length);\n  const dismiss = () => setDismissed(text);\n  const pickSlash = (item: SlashItem) => {\n    const rest = text.slice(caret).replace(/^\\s+/, '');\n    if (item.source === 'skill') return edit(`/${item.name} ${rest}`, item.name.length + 2);\n    const command = slash?.commands?.find(candidate => candidate.name === item.name);\n    props.onText(rest); setCaret(0);\n    inner.current?.focus();\n    if (!command) return;\n    try { void Promise.resolve(command.run({ text: rest, setText: value => props.onText(value) })).catch(cause => props.onSlashError?.(cause)); }\n    catch (cause) { props.onSlashError?.(cause); }\n  };\n  const pickMention = (path: string) => {\n    if (!trigger) return;\n    const token = `${mentionToken(path)} `;\n    edit(`${text.slice(0, trigger.start)}${token}${text.slice(trigger.end)}`, trigger.start + token.length);\n    props.onMentionPicked?.(path);\n  };\n  const openCommands = () => edit(`${text}${text && !/\\s$/.test(text) ? ' ' : ''}/`, text.length + (text && !/\\s$/.test(text) ? 2 : 1));\n  const chips = (props.mentionPaths ?? []).filter(path => hasMention(text, path));\n  const onChange = (event: ChangeEvent<HTMLTextAreaElement>) => { trackCaret(event.currentTarget); props.onText(event.currentTarget.value); };\n\n  const { feedback } = props;\n  const hasContent = text.trim().length > 0 || attachments.length > 0 || props.hasFiles || (feedback?.count ?? 0) > 0;\n  const canSubmit = hasContent && !sendBlocked && !disabled;\n  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n    props.onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    // Ctrl+Z right after a paste that is still uploading puts the pasted text back, instead of undoing the paste in the textarea.\n    const undo = (props.uploads ?? []).filter(item => item.state === 'uploading' && item.cancel && item.restoreWhile === props.text).pop();\n    if (undo && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'z') { event.preventDefault(); undo.cancel!(); return; }\n    // Never send while an input method editor is composing (Enter confirms the candidate).\n    // A phone keyboard has no Shift+Enter: on a touch device Enter inserts a newline and the Send button sends.\n    const touch = globalThis.matchMedia?.('(pointer: coarse)').matches === true;\n    if (event.key === 'Enter' && !touch && !event.shiftKey && !composing.current && !event.nativeEvent.isComposing && event.keyCode !== 229) {\n      event.preventDefault();\n      if (canSubmit) props.onSend();\n    }\n  };\n  const onPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {\n    if (canAttach && event.clipboardData.files.length) { event.preventDefault(); props.onPickFiles(Array.from(event.clipboardData.files)); return; }\n    if (!props.onPasteText) return;\n    const pasted = event.clipboardData.getData('text/plain');\n    if (!isLongPaste(pasted, props.pasteToFile)) return;\n    event.preventDefault();\n    props.onPasteText({ text: pasted, start: event.currentTarget.selectionStart, end: event.currentTarget.selectionEnd });\n  };\n  const drag = (event: DragEvent) => { if (canAttach) { event.preventDefault(); setDragging(event.type === 'dragover'); } };\n  const drop = (event: DragEvent) => { if (!canAttach) return; event.preventDefault(); setDragging(false); props.onPickFiles(Array.from(event.dataTransfer.files)); };\n\n  const chipList = (props.quote || chips.length > 0 || (props.uploads?.length ?? 0) > 0 || (feedback?.count ?? 0) > 0 || attachments.length > 0) && <>\n    {props.quote}\n    {feedback && feedback.count > 0 && <div role=\"list\" className=\"contents\"><NotesChip feedback={feedback} /></div>}\n    {chips.length > 0 && <div role=\"list\" data-testid=\"mention-chips\" aria-label={labels.mentionedFiles} className=\"contents\">\n      {chips.map(path => <Chip key={path} data-testid=\"mention-chip\" data-path={path} title={path} className=\"max-w-full sm:max-w-[16rem]\"\n        media={mentions?.icon ?? <FileTextIcon aria-hidden=\"true\" />}  label={mentions?.label?.(path) ?? path} actions={<RemoveChip label={labels.remove(mentions?.label?.(path) ?? path)} onClick={() => props.onText(removeMention(text, path))} />} />)}\n    </div>}\n    {(props.uploads?.length ?? 0) > 0 && <div role=\"list\" data-testid=\"uploads\" aria-label={labels.uploads} className=\"contents\">\n      {props.uploads!.map(item => <Chip key={item.id} data-testid=\"upload-chip\" state={item.state === 'failed' ? 'error' : 'uploading'} data-state={item.state} title={item.error ?? item.name} className=\"max-w-full sm:max-w-[20rem]\"\n        media={item.state === 'failed' ? <AlertCircleIcon className=\"text-destructive\" aria-hidden=\"true\" /> : <Loader2Icon className=\"animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />}\n        label={item.state === 'failed' ? labels.uploadFailed(item.name, item.error) : labels.uploading(item.name)}\n        actions={<>\n          {item.cancel && <RemoveChip label={labels.restorePaste} onClick={() => item.cancel!()} />}\n          {item.state === 'failed' && <RemoveChip label={labels.dismiss(item.name)} onClick={() => props.onDismissUpload?.(item.id)} />}\n        </>} />)}\n    </div>}\n    {attachments.length > 0 && <div role=\"list\" data-testid=\"attachments\" aria-label={labels.attachments} className=\"contents\">\n      {attachments.map(attachment => {\n        const src = thumbnail(attachment.mimeType, attachment.data);\n        return <Chip key={attachment.id} data-testid=\"attachment\" className=\"max-w-full sm:max-w-[14rem]\" image={!!src}\n          media={src ? <img src={src} alt=\"\" /> : <FileTextIcon aria-hidden=\"true\" />} label={attachment.name}\n          actions={<RemoveChip label={labels.remove(attachment.name)} onClick={() => props.onRemoveAttachment(attachment.id)} />} />;\n      })}\n    </div>}\n  </>;\n  const pill = layout === 'pill';\n  const textareaEl = <InputGroupTextarea ref={setRef} data-testid=\"composer-input\" aria-label={labels.messageInput} rows={1} value={text} disabled={disabled}\n      placeholder={props.placeholder ?? (working ? labels.placeholderWorking : labels.placeholder)}\n      {...(slash || mentions ? { role: 'combobox', 'aria-expanded': menuOpen, 'aria-haspopup': 'listbox', 'aria-autocomplete': 'list' } as const : {})}\n      onChange={onChange} onKeyDown={onKeyDown} onPaste={onPaste} onKeyUp={event => trackCaret(event.currentTarget)} onClick={event => trackCaret(event.currentTarget)}\n      onCompositionStart={() => { composing.current = true; }} onCompositionEnd={() => { composing.current = false; }}\n      className={pill ? 'max-h-52 min-h-0 min-w-0' : 'max-h-52 min-h-11'} />;\n  const plus = (canAttach || items.length > 0) && <PlusActions disabled={disabled} textarea={inner} onAttach={canAttach ? () => fileInput.current?.click() : undefined} onTakePhoto={canPhoto ? () => setCameraOpen(true) : undefined} onCommands={items.length > 0 ? openCommands : undefined} />;\n  const fileEl = canAttach && <Input ref={fileInput} type=\"file\" multiple accept={props.fileAccept} disabled={disabled} tabIndex={-1} aria-hidden=\"true\" className=\"sr-only\" data-testid=\"composer-file\" data-attach=\"true\"\n    onChange={event => { const files = Array.from(event.currentTarget.files ?? []); event.currentTarget.value = ''; props.onPickFiles(files); }} />;\n  const send = working\n    ? <Button variant=\"default\" size=\"icon\" data-testid=\"composer-submit\" data-state=\"stop\" aria-label={labels.stop} title={labels.stop} disabled={disabled || stopRequested} onClick={props.onStop} className=\"shrink-0\">\n      {stopRequested ? <Loader2Icon data-icon=\"inline-start\" className=\"animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" /> : <icons.stop data-icon=\"inline-start\" aria-hidden=\"true\" />}</Button>\n    : <Button variant=\"default\" size=\"icon\" type=\"submit\" data-testid=\"composer-submit\" data-state=\"send\" aria-label={labels.send} title={labels.sendHint} disabled={!canSubmit} className=\"shrink-0\">\n      <icons.send data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>;\n  const end = <>\n    {props.barStart}\n    {props.chips && <div className=\"flex min-w-0 items-center gap-2\">{props.chips}</div>}\n    {props.barNote}\n    {uploading && !(props.uploads?.length) && <span role=\"status\" className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\"><Loader2Icon className=\"size-3 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{labels.preparingAttachments}</span>}\n    {!pill && <span className=\"min-w-0 flex-1\" />}\n    {props.barEnd && <div data-testid=\"composer-tools\" className=\"flex shrink-0 items-center gap-2\">{props.barEnd}</div>}\n    {working && hasContent && <Button variant=\"ghost\" size=\"icon\" data-testid=\"composer-queue\" aria-label={labels.queue} title={labels.queue} disabled={!canSubmit} onClick={props.onSend} className=\"shrink-0\">\n      <icons.queue data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n    {send}\n  </>;\n\n  // One shadcn InputGroup: the chips, the text and a row of controls (`card`, also used for the `stacked` and `inline` compatibility\n  // values), or one row with the text between the controls (`pill`, chips above it). Its look is the host's; ours is layout only.\n  return <form data-testid=\"composer\" data-layout={layout} data-dragging={dragging || undefined} onSubmit={event => { event.preventDefault(); if (canSubmit) props.onSend(); }} onDragOver={drag} onDragLeave={drag} onDrop={drop}\n    className={cn('relative flex flex-col gap-2', pill && '@container/composer')}>\n    {fileEl}\n    {slashOpen && <SlashPicker query={query!} items={items} onSelect={pickSlash} onDismiss={dismiss} />}\n    {mentionOpen && mentions && <MentionPicker query={trigger!.query} listLabel={mentions.listLabel} renderOption={mentions.renderOption} search={mentions.search} generation={mentions.generation} onSelect={pickMention} onDismiss={dismiss} />}\n    {pill && chipList && <div className=\"flex flex-wrap gap-2\">{chipList}</div>}\n    {pill ? <InputGroup>\n      <InputGroupAddon>{plus}{feedback && <AnnotateButton feedback={feedback} disabled={disabled} />}</InputGroupAddon>\n      {textareaEl}\n      <InputGroupAddon align=\"inline-end\" data-testid=\"composer-controls\">{end}</InputGroupAddon>\n    </InputGroup> : <InputGroup>\n      {chipList && <InputGroupAddon align=\"block-start\" className=\"flex-wrap\">{chipList}</InputGroupAddon>}\n      {textareaEl}\n      <InputGroupAddon align=\"block-end\" data-testid=\"composer-controls\">\n        {plus}\n        {feedback && <AnnotateButton feedback={feedback} disabled={disabled} />}\n        {end}\n      </InputGroupAddon>\n    </InputGroup>}\n    {cameraOpen && <CameraSheet onClose={() => setCameraOpen(false)} onCapture={file => { setCameraOpen(false); props.onPickFiles([file]); }} />}\n  </form>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/composer.tsx"
     },
@@ -95,7 +103,7 @@
     },
     {
       "path": "registry/pi-chat/config.ts",
-      "content": "import type { ReactNode } from 'react';\nimport type { BlockAction } from '../button/actions';\n\n/*\n * Composer features the host switches on by configuration. Each prop is optional: leave it out and the composer has\n * no menu, no button and no keyboard trigger for it. The current model and thinking level are read from the native\n * view's `pi.agent` document, so there is no extra state to keep in sync.\n */\n\n/** Where a `/` menu entry comes from. Skills and host commands are grouped separately in the menu. */\nexport type SlashSource = 'local' | 'extension' | 'prompt' | 'skill';\n\nexport interface SlashApi {\n  /** Replace the composer text. */\n  readonly setText: (text: string) => void;\n  /** The composer text with the typed `/query` already removed. */\n  readonly text: string;\n}\nexport interface SlashCommand {\n  readonly name: string;\n  readonly description?: string;\n  /** Shown as a badge and as a filter chip; commands without one are grouped as `built-in`. */\n  readonly sourcePlugin?: string;\n  readonly run: (api: SlashApi) => void | Promise<void>;\n}\nexport interface SlashSkill {\n  readonly name: string;\n  readonly description: string;\n  readonly sourcePlugin?: string;\n}\nexport interface SlashConfig {\n  readonly commands?: readonly SlashCommand[];\n  readonly skills?: readonly SlashSkill[];\n}\n\nexport interface MentionResult { readonly path: string; readonly kind?: 'file' | 'directory' }\nexport interface MentionsConfig {\n  /** Workspace search for the `@` picker. Empty `query` asks for a default listing. Abort `signal` when the query changes. */\n  readonly search: (query: string, signal: AbortSignal) => Promise<readonly MentionResult[]>;\n  /** Open a mentioned workspace file (for example in the right panel). When given, a mention in a sent message is a button. */\n  readonly open?: ((path: string) => void) | undefined;\n  /** Changes whenever what `search` would return may have changed (a workspace change event, another workspace). An open picker searches again. */\n  readonly generation?: string | number | undefined;\n  /** Host-supplied look for a mention in a sent message (a plug-in such as feedback). Return undefined to keep the default mention. */\n  readonly render?: ((path: string) => ReactNode | undefined) | undefined;\n  /**\n   * The bytes of an image upload, for its card's thumbnail: the host reads them through its own provider. Absent: the card shows its icon.\n   * Only png, jpeg, gif and webp are shown (`thumbnail`); anything else, or a refusal, leaves the icon.\n   */\n  readonly preview?: PreviewRead | undefined;\n}\n/** Reads an image upload for its card's thumbnail: its media type and base64 data, or undefined. */\nexport type PreviewRead = (path: string, signal: AbortSignal) => Promise<{ readonly mimeType: string; readonly data: string } | undefined>;\n\n/** Paste-to-file thresholds: a paste with more characters or more lines than these becomes a file. Defaults 2000 and 40. */\nexport interface PasteToFile { readonly minChars?: number | undefined; readonly minLines?: number | undefined }\n/** A paste the composer took, with the textarea range it replaces (restored if the upload is cancelled). */\nexport interface PastedText { readonly text: string; readonly start: number; readonly end: number }\n\nexport interface UploadResult {\n  /** The host saved the file in the workspace: it becomes an `@path` mention. */\n  readonly path?: string;\n  /** Sent as a native image attachment. */\n  readonly image?: { readonly data: string; readonly mimeType: string };\n  readonly name: string;\n}\nexport interface AttachmentsConfig {\n  /** The file input's `accept`. Any file when omitted. */\n  readonly accept?: string;\n  readonly upload: (files: File[], signal: AbortSignal) => Promise<readonly UploadResult[]>;\n}\n\n/** One past conversation in the history list. `title` is its name or first message; `updatedAt` is when it last had activity. */\nexport interface ConversationItem {\n  readonly id: string;\n  readonly title?: string | undefined;\n  readonly updatedAt?: number | string | Date | undefined;\n  /** A preview of the last message (the row's tooltip). */\n  readonly lastMessage?: string | null | undefined;\n  readonly archived?: boolean | undefined;\n}\n/** The host's conversations. Give it to `PiChat` and the header's History button opens a list of them instead of the earlier records of this one. */\nexport interface ConversationsConfig {\n  readonly items: readonly ConversationItem[];\n  /** The conversation that is open; it is marked in the list. */\n  readonly activeId?: string | undefined;\n  readonly onSelect: (id: string) => void;\n  readonly onNew?: (() => void) | undefined;\n  readonly loading?: boolean | undefined;\n  /**\n   * Server-side search: with it, a typed query (or the Archived filter) lists what this returns instead of filtering `items`\n   * by title. Abort `signal` when the query changes.\n   */\n  readonly search?: ((query: string, options: { readonly archived: boolean }, signal: AbortSignal) => Promise<readonly ConversationItem[]>) | undefined;\n  /** Each action below adds its button to the rows; the host refreshes `items` when it resolves. */\n  readonly rename?: ((id: string, title: string) => Promise<void>) | undefined;\n  /** Archive (`true`) or restore (`false`). With it, the list also offers an Archived filter (which needs `search`). */\n  readonly archive?: ((id: string, archived: boolean) => Promise<void>) | undefined;\n  readonly remove?: ((id: string) => Promise<void>) | undefined;\n  /** Fork the open conversation after the entry of a settled reply: the reply's Fork button. */\n  readonly fork?: ((atEntryId: string) => Promise<void>) | undefined;\n  /**\n   * Host actions on each row, after rename, archive and delete: `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `conversation-action-<id>`, the menu `conversation-action-more`.\n   */\n  readonly rowActions?: ((item: ConversationItem) => readonly BlockAction[]) | undefined;\n}\n\n/** A settled reply, as host message actions receive it: its row key, its text and the native entry it ends with. */\nexport interface ReplyRef {\n  readonly key: string; readonly text: string; readonly entryId?: string | undefined;\n  /** When the last model round of the reply was written (ms), the same value as its message's `timestamp`: a host keys its own per-reply data on it. */\n  readonly timestamp?: number | undefined;\n  /** The model that wrote the last round of the reply, as its message names it (`provider` and `model` ids). */\n  readonly model?: { readonly provider: string; readonly modelId: string } | undefined;\n  /**\n   * How long the model took to answer in the last round of the reply (ms): Pi's own `AssistantMessage.durationMs`, measured monotonically\n   * and kept in the transcript. It excludes queue time, earlier rounds, tool runs and retry delays, and is absent for a message written\n   * before Pi recorded it. It is never computed from the clock at render time.\n   */\n  readonly durationMs?: number | undefined;\n}\n\nexport interface ModelRef { readonly provider: string; readonly modelId: string }\nexport interface ModelConfig {\n  readonly options: readonly (ModelRef & { readonly label?: string })[];\n  /** Reject to refuse: the message is shown inline. */\n  readonly change: (model: ModelRef) => Promise<void>;\n}\nexport interface EffortConfig {\n  readonly options: readonly string[];\n  readonly change: (level: string) => Promise<void>;\n}\n\n/** The unified, internal menu entry. */\nexport interface SlashItem {\n  readonly name: string;\n  readonly description: string;\n  readonly source: SlashSource;\n  readonly sourcePlugin?: string;\n}\n\nexport function slashItems(config: SlashConfig): SlashItem[] {\n  return [\n    ...(config.commands ?? []).map((command): SlashItem => ({ name: command.name, description: command.description ?? '', source: 'local', ...(command.sourcePlugin ? { sourcePlugin: command.sourcePlugin } : {}) })),\n    ...(config.skills ?? []).map((skill): SlashItem => ({ name: skill.name, description: skill.description, source: 'skill', ...(skill.sourcePlugin ? { sourcePlugin: skill.sourcePlugin } : {}) })),\n  ];\n}\n\n/** The group an item lives under in the filter chips: skills, its plugin, or `built-in`. */\nexport function slashGroup(item: Pick<SlashItem, 'source' | 'sourcePlugin'>): string {\n  if (item.source === 'skill') return 'skills';\n  return item.sourcePlugin || 'built-in';\n}\n\n/** `/` opens the menu only when the text before the caret is one `/token`, as in v2. */\nexport function slashQuery(text: string, caret: number): string | null {\n  const match = /^\\/(\\S*)$/.exec(text.slice(0, caret));\n  return match ? match[1]! : null;\n}\n\nexport interface MentionTrigger { readonly query: string; readonly start: number; readonly end: number }\n/** An `@` at the start or after whitespace, up to the caret. */\nexport function mentionTrigger(text: string, caret: number): MentionTrigger | null {\n  const before = text.slice(0, caret);\n  const match = /(^|\\s)@(\\S*)$/.exec(before);\n  // A typed opening quote (`@\"Meeting`) is not part of the search; the token starts at the `@` either way.\n  return match ? { query: match[2]!.replace(/^\"/, ''), start: before.length - match[2]!.length - 1, end: caret } : null;\n}\n\n/**\n * The text of a mention of `path`. A path with whitespace or a quote is written in double quotes, `@\"docs/Meeting notes.md\"`, with `\\`\n * and `\"` escaped, because a bare mention ends at a space. Any other path stays bare (`@docs/plan.md`), as it always was.\n */\nexport function mentionToken(path: string): string {\n  return /[\\s\"]/.test(path) ? `@\"${path.replace(/[\\\\\"]/g, '\\\\$&')}\"` : `@${path}`;\n}\n/**\n * The `@` tokens of a message, bare or quoted: group 1 is the character before the `@` (or the start), group 2 the quoted body (escapes\n * still in it), group 3 the bare path. `test/contracts/pi-chat-source.test.mjs` keeps `mentionedPaths` in the agent package equal to this.\n */\nexport const MENTION_TOKEN = /(^|\\s)@(?:\"((?:[^\"\\\\]|\\\\.)*)\"|([^\\s]+))/g;\n\nconst escape = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\nconst BOUNDARY = '[^A-Za-z0-9_./-]';\nexport function hasMention(text: string, path: string): boolean {\n  return new RegExp(`(^|${BOUNDARY})${escape(mentionToken(path))}($|${BOUNDARY})`).test(text);\n}\nexport function removeMention(text: string, path: string): string {\n  return text.replace(new RegExp(`(^|${BOUNDARY})${escape(mentionToken(path))}(?=$|${BOUNDARY})[ ]?`), '$1').replace(/^[ ]+/, '');\n}\n\nexport type Piece = { readonly text: string; readonly kind?: 'mention' | 'skill'; readonly value?: string };\n\n/** Upload paths are `uploads/<name>`: the attachments of a message, shown as cards rather than as text. */\nexport const isUploadPath = (path: string): boolean => path.startsWith('uploads/');\n\nexport type FileKind = 'document' | 'image' | 'pdf' | 'sheet' | 'slides' | 'file';\nconst KIND_BY_EXTENSION: Readonly<Record<string, FileKind>> = {\n  png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', webp: 'image', svg: 'image', bmp: 'image', avif: 'image',\n  pdf: 'pdf',\n  csv: 'sheet', tsv: 'sheet', xls: 'sheet', xlsx: 'sheet', xlsm: 'sheet', ods: 'sheet', numbers: 'sheet',\n  ppt: 'slides', pptx: 'slides', odp: 'slides', key: 'slides',\n  md: 'document', markdown: 'document', txt: 'document', doc: 'document', docx: 'document', odt: 'document', rtf: 'document',\n};\n/** The card's kind, from the extension alone. */\nexport function fileKind(path: string): FileKind {\n  const extension = /\\.([^./]+)$/.exec(path)?.[1]?.toLowerCase() ?? '';\n  return KIND_BY_EXTENSION[extension] ?? 'file';\n}\n/** The name a card shows: the upload's file name without the random suffix `uploadPath` adds (`report-1a2b3c4d.pdf` is `report.pdf`). */\nexport function displayName(path: string): string {\n  const name = path.slice(path.lastIndexOf('/') + 1);\n  return name.replace(/-[0-9a-f]{8}(?=\\.[^.]*$|$)/i, '');\n}\n\n/**\n * The pieces a message shows once `hidden` ones are taken out: a space that a removed piece leaves at a join is dropped, and the ends are\n * trimmed where it was. The message's own text is not changed, only what the bubble draws.\n */\nexport function visibleParts(parts: readonly Piece[], hidden: (part: Piece) => boolean): Piece[] {\n  const out: Piece[] = [];\n  let gap = false;\n  for (const part of parts) {\n    if (hidden(part)) { gap = true; continue; }\n    const prev = out[out.length - 1];\n    const joins = gap && part.kind === undefined && (prev === undefined || (prev.kind === undefined && /\\s$/.test(prev.text)));\n    out.push(joins ? { text: part.text.replace(/^\\s+/, '') } : part);\n    gap = false;\n  }\n  const last = out[out.length - 1];\n  if (gap && last && last.kind === undefined) out[out.length - 1] = { text: last.text.replace(/\\s+$/, '') };\n  return out.filter(part => part.kind !== undefined || part.text !== '');\n}\n\n/** Whether pasted text is long enough to become a file. `more` than the limits: the characters, or the lines, of the text. */\nexport function isLongPaste(text: string, limits: PasteToFile = {}): boolean {\n  const { minChars = 2000, minLines = 40 } = limits;\n  return text.length > minChars || text.split('\\n').length > minLines;\n}\n/** Markdown in pasted text: a heading, a list or quote item, a fence, a table row, emphasis or a link. Anything else is plain text. */\nexport function looksLikeMarkdown(text: string): boolean {\n  return /^\\s{0,3}(#{1,6}\\s|[-*+]\\s|\\d+[.)]\\s|>\\s|```|~~~)/m.test(text) || /\\*\\*[^*\\n]+\\*\\*|\\]\\([^)\\n]+\\)|^\\|.*\\|\\s*$/m.test(text);\n}\n/** Split a sent message into plain text, `@path` mentions and a leading `/skill` token. */\nexport function pieces(text: string, options: { readonly mentions: boolean; readonly skills: readonly string[]; readonly uploads?: boolean }): Piece[] {\n  const found: { start: number; end: number; kind: 'mention' | 'skill'; value: string }[] = [];\n  const skill = options.skills.length ? new RegExp(`^/(${options.skills.map(escape).join('|')})(?=\\\\s|$)`).exec(text) : null;\n  if (skill) found.push({ start: 0, end: skill[0].length, kind: 'skill', value: skill[1]! });\n  if (options.mentions || options.uploads) {\n    for (const match of text.matchAll(MENTION_TOKEN)) {\n      // A quoted path keeps its punctuation (the closing quote ends it); a bare one drops trailing punctuation, as a sentence would.\n      const quoted = match[2] !== undefined;\n      const path = quoted ? match[2]!.replace(/\\\\(.)/g, '$1') : match[3]!.replace(/[.,;:!?)\\]}'\"]+$/, '');\n      if (!path || (!options.mentions && !isUploadPath(path))) continue;\n      const start = match.index! + match[1]!.length;\n      const end = quoted ? match.index! + match[0].length : start + 1 + path.length;\n      found.push({ start, end, kind: 'mention', value: path });\n    }\n  }\n  const out: Piece[] = [];\n  let cursor = 0;\n  for (const item of found.sort((a, b) => a.start - b.start)) {\n    if (item.start < cursor) continue;\n    if (item.start > cursor) out.push({ text: text.slice(cursor, item.start) });\n    out.push({ text: text.slice(item.start, item.end), kind: item.kind, value: item.value });\n    cursor = item.end;\n  }\n  if (cursor < text.length) out.push({ text: text.slice(cursor) });\n  return out;\n}\n",
+      "content": "import type { ReactNode } from 'react';\nimport type { BlockAction } from '../button/actions';\n\n/*\n * Composer features the host switches on by configuration. Each prop is optional: leave it out and the composer has\n * no menu, no button and no keyboard trigger for it. The current model and thinking level are read from the native\n * view's `pi.agent` document, so there is no extra state to keep in sync.\n */\n\n/** Where a `/` menu entry comes from. Skills and host commands are grouped separately in the menu. */\nexport type SlashSource = 'local' | 'extension' | 'prompt' | 'skill';\n\nexport interface SlashApi {\n  /** Replace the composer text. */\n  readonly setText: (text: string) => void;\n  /** The composer text with the typed `/query` already removed. */\n  readonly text: string;\n}\nexport interface SlashCommand {\n  readonly name: string;\n  readonly description?: string;\n  /** Shown as a badge and as a filter chip; commands without one are grouped as `built-in`. */\n  readonly sourcePlugin?: string;\n  readonly run: (api: SlashApi) => void | Promise<void>;\n}\nexport interface SlashSkill {\n  readonly name: string;\n  readonly description: string;\n  readonly sourcePlugin?: string;\n}\nexport interface SlashConfig {\n  readonly commands?: readonly SlashCommand[];\n  readonly skills?: readonly SlashSkill[];\n}\n\nexport interface MentionResult { readonly path: string; readonly kind?: 'file' | 'directory'; readonly label?: string }\nexport interface MentionsConfig {\n  /** Accessible name and optional option/media presentation for a host catalog. */\n  readonly listLabel?: string;\n  readonly icon?: ReactNode;\n  readonly renderOption?: (item: MentionResult, query: string) => ReactNode;\n  readonly label?: (id: string) => string;\n  /** Workspace search for the `@` picker. Empty `query` asks for a default listing. Abort `signal` when the query changes. */\n  readonly search: (query: string, signal: AbortSignal) => Promise<readonly MentionResult[]>;\n  /** Open a mentioned workspace file (for example in the right panel). When given, a mention in a sent message is a button. */\n  readonly open?: ((path: string) => void) | undefined;\n  /** Changes whenever what `search` would return may have changed (a workspace change event, another workspace). An open picker searches again. */\n  readonly generation?: string | number | undefined;\n  /** Host-supplied look for a mention in a sent message (a plug-in such as feedback). Return undefined to keep the default mention. */\n  readonly render?: ((path: string) => ReactNode | undefined) | undefined;\n  /** Sent-message rendering, independent of the composer's token presentation. */\n  readonly renderSent?: ((path: string) => ReactNode | undefined) | undefined;\n  /**\n   * Upload bytes through the host's provider. Image cards read thumbnails; voice bubbles read audio only on Play.\n   * Thumbnails accept png, jpeg, gif and webp. Audio must retain its recorded audio MIME type.\n   */\n  readonly preview?: PreviewRead | undefined;\n  /** Optional authorized playback URL, requested only on Play; otherwise voice audio uses `preview`. */\n  readonly audioUrl?: AudioUrlRead | undefined;\n}\nexport type AudioUrlRead = (path: string, signal: AbortSignal) => Promise<string | undefined>;\n/** Reads an upload for its thumbnail or lazy voice playback: its media type and base64 data, or undefined. */\nexport type PreviewRead = (path: string, signal: AbortSignal) => Promise<{ readonly mimeType: string; readonly data: string } | undefined>;\n\n/** Paste-to-file thresholds: a paste with more characters or more lines than these becomes a file. Defaults 2000 and 40. */\nexport interface PasteToFile { readonly minChars?: number | undefined; readonly minLines?: number | undefined }\n/** A paste the composer took, with the textarea range it replaces (restored if the upload is cancelled). */\nexport interface PastedText { readonly text: string; readonly start: number; readonly end: number }\n\nexport interface UploadResult {\n  /** The host saved the file in the workspace: it becomes an `@path` mention. */\n  readonly path?: string;\n  /** Sent as a native image attachment. */\n  readonly image?: { readonly data: string; readonly mimeType: string };\n  readonly name: string;\n}\nexport interface VoiceMessageConfig {\n  readonly transcribe: (audio: Blob, signal: AbortSignal) => Promise<string>;\n  /** Capture limit (default five minutes). Upload and send still wait for release. */\n  readonly maxMs?: number;\n  /** Same workspace upload contract as `attachments.upload`, used instead when supplied. Preserve the voice- filename prefix. */\n  readonly upload?: AttachmentsConfig['upload'];\n}\n\nexport interface AttachmentsConfig {\n  /** The file input's `accept`. Any file when omitted. */\n  readonly accept?: string;\n  readonly upload: (files: File[], signal: AbortSignal) => Promise<readonly UploadResult[]>;\n}\n\n/** One past conversation in the history list. `title` is its name or first message; `updatedAt` is when it last had activity. */\nexport interface ConversationItem {\n  readonly id: string;\n  readonly title?: string | undefined;\n  readonly updatedAt?: number | string | Date | undefined;\n  /** A preview of the last message (the row's tooltip). */\n  readonly lastMessage?: string | null | undefined;\n  readonly archived?: boolean | undefined;\n}\n/** The host's conversations. Give it to `PiChat` and the header's History button opens a list of them instead of the earlier records of this one. */\nexport interface ConversationsConfig {\n  readonly items: readonly ConversationItem[];\n  /** The conversation that is open; it is marked in the list. */\n  readonly activeId?: string | undefined;\n  readonly onSelect: (id: string) => void;\n  readonly onNew?: (() => void) | undefined;\n  readonly loading?: boolean | undefined;\n  /**\n   * Server-side search: with it, a typed query (or the Archived filter) lists what this returns instead of filtering `items`\n   * by title. Abort `signal` when the query changes.\n   */\n  readonly search?: ((query: string, options: { readonly archived: boolean }, signal: AbortSignal) => Promise<readonly ConversationItem[]>) | undefined;\n  /** Each action below adds its button to the rows; the host refreshes `items` when it resolves. */\n  readonly rename?: ((id: string, title: string) => Promise<void>) | undefined;\n  /** Archive (`true`) or restore (`false`). With it, the list also offers an Archived filter (which needs `search`). */\n  readonly archive?: ((id: string, archived: boolean) => Promise<void>) | undefined;\n  readonly remove?: ((id: string) => Promise<void>) | undefined;\n  /** Fork the open conversation after the entry of a settled reply: the reply's Fork button. */\n  readonly fork?: ((atEntryId: string) => Promise<void>) | undefined;\n  /**\n   * Host actions on each row, after rename, archive and delete: `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `conversation-action-<id>`, the menu `conversation-action-more`.\n   */\n  readonly rowActions?: ((item: ConversationItem) => readonly BlockAction[]) | undefined;\n}\n\n/** A settled reply, as host message actions receive it: its row key, its text and the native entry it ends with. */\nexport interface ReplyRef {\n  readonly key: string; readonly text: string; readonly entryId?: string | undefined;\n  /** When the last model round of the reply was written (ms), the same value as its message's `timestamp`: a host keys its own per-reply data on it. */\n  readonly timestamp?: number | undefined;\n  /** The model that wrote the last round of the reply, as its message names it (`provider` and `model` ids). */\n  readonly model?: { readonly provider: string; readonly modelId: string } | undefined;\n  /**\n   * Sum of the model rounds that form the reply (ms): Pi's own `AssistantMessage.durationMs`, measured monotonically\n   * and kept in the transcript. It excludes queue time, tool runs and retry delays, and is absent for a message written\n   * before Pi recorded it. It is never computed from the clock at render time.\n   */\n  readonly durationMs?: number | undefined;\n}\n\nexport interface ModelRef { readonly provider: string; readonly modelId: string }\nexport interface ModelConfig {\n  readonly options: readonly (ModelRef & { readonly label?: string })[];\n  /** Reject to refuse: the message is shown inline. */\n  readonly change: (model: ModelRef) => Promise<void>;\n}\nexport interface EffortConfig {\n  readonly options: readonly string[];\n  readonly change: (level: string) => Promise<void>;\n}\n\n/** The unified, internal menu entry. */\nexport interface SlashItem {\n  readonly name: string;\n  readonly description: string;\n  readonly source: SlashSource;\n  readonly sourcePlugin?: string;\n}\n\nexport function slashItems(config: SlashConfig): SlashItem[] {\n  return [\n    ...(config.commands ?? []).map((command): SlashItem => ({ name: command.name, description: command.description ?? '', source: 'local', ...(command.sourcePlugin ? { sourcePlugin: command.sourcePlugin } : {}) })),\n    ...(config.skills ?? []).map((skill): SlashItem => ({ name: skill.name, description: skill.description, source: 'skill', ...(skill.sourcePlugin ? { sourcePlugin: skill.sourcePlugin } : {}) })),\n  ];\n}\n\n/** The group an item lives under in the filter chips: skills, its plugin, or `built-in`. */\nexport function slashGroup(item: Pick<SlashItem, 'source' | 'sourcePlugin'>): string {\n  if (item.source === 'skill') return 'skills';\n  return item.sourcePlugin || 'built-in';\n}\n\n/** `/` opens the menu only when the text before the caret is one `/token`, as in v2. */\nexport function slashQuery(text: string, caret: number): string | null {\n  const match = /^\\/(\\S*)$/.exec(text.slice(0, caret));\n  return match ? match[1]! : null;\n}\n\nexport interface MentionTrigger { readonly query: string; readonly start: number; readonly end: number }\n/** An `@` at the start or after whitespace, up to the caret. */\nexport function mentionTrigger(text: string, caret: number): MentionTrigger | null {\n  const before = text.slice(0, caret);\n  const match = /(^|\\s)@(\\S*)$/.exec(before);\n  // A typed opening quote (`@\"Meeting`) is not part of the search; the token starts at the `@` either way.\n  return match ? { query: match[2]!.replace(/^\"/, ''), start: before.length - match[2]!.length - 1, end: caret } : null;\n}\n\n/**\n * The text of a mention of `path`. A path with whitespace or a quote is written in double quotes, `@\"docs/Meeting notes.md\"`, with `\\`\n * and `\"` escaped, because a bare mention ends at a space. Any other path stays bare (`@docs/plan.md`), as it always was.\n */\nexport function mentionToken(path: string): string {\n  return /[\\s\"]/.test(path) ? `@\"${path.replace(/[\\\\\"]/g, '\\\\$&')}\"` : `@${path}`;\n}\n/**\n * The `@` tokens of a message, bare or quoted: group 1 is the character before the `@` (or the start), group 2 the quoted body (escapes\n * still in it), group 3 the bare path. `test/contracts/pi-chat-source.test.mjs` keeps `mentionedPaths` in the agent package equal to this.\n */\nexport const MENTION_TOKEN = /(^|\\s)@(?:\"((?:[^\"\\\\]|\\\\.)*)\"|([^\\s]+))/g;\n\nconst escape = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\nconst BOUNDARY = '[^A-Za-z0-9_./-]';\nexport function hasMention(text: string, path: string): boolean {\n  return new RegExp(`(^|${BOUNDARY})${escape(mentionToken(path))}($|${BOUNDARY})`).test(text);\n}\nexport function removeMention(text: string, path: string): string {\n  return text.replace(new RegExp(`(^|${BOUNDARY})${escape(mentionToken(path))}(?=$|${BOUNDARY})[ ]?`), '$1').replace(/^[ ]+/, '');\n}\n\nexport type Piece = { readonly text: string; readonly kind?: 'mention' | 'skill'; readonly value?: string };\n\n/** Upload paths are `uploads/<name>`: the attachments of a message, shown as cards rather than as text. */\nexport const isUploadPath = (path: string): boolean => path.startsWith('uploads/');\n\nexport type FileKind = 'document' | 'image' | 'pdf' | 'sheet' | 'slides' | 'audio' | 'file';\nconst KIND_BY_EXTENSION: Readonly<Record<string, FileKind>> = {\n  png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', webp: 'image', svg: 'image', bmp: 'image', avif: 'image',\n  pdf: 'pdf',\n  webm: 'audio', ogg: 'audio', m4a: 'audio', mp4: 'audio', mp3: 'audio', wav: 'audio',\n  csv: 'sheet', tsv: 'sheet', xls: 'sheet', xlsx: 'sheet', xlsm: 'sheet', ods: 'sheet', numbers: 'sheet',\n  ppt: 'slides', pptx: 'slides', odp: 'slides', key: 'slides',\n  md: 'document', markdown: 'document', txt: 'document', doc: 'document', docx: 'document', odt: 'document', rtf: 'document',\n};\n/** The card's kind, from the extension alone. */\nexport function fileKind(path: string): FileKind {\n  const extension = /\\.([^./]+)$/.exec(path)?.[1]?.toLowerCase() ?? '';\n  return KIND_BY_EXTENSION[extension] ?? 'file';\n}\n/** Recorded voice uses a reserved upload filename prefix; other audio remains a plain file card. */\nexport const isVoicePath = (path: string): boolean => /^uploads\\/voice-[^/]+$/.test(path) && fileKind(path) === 'audio';\n\n/** The name a card shows: the upload's file name without the random suffix `uploadPath` adds (`report-1a2b3c4d.pdf` is `report.pdf`). */\nexport function displayName(path: string): string {\n  const name = path.slice(path.lastIndexOf('/') + 1);\n  return name.replace(/-[0-9a-f]{8}(?=\\.[^.]*$|$)/i, '');\n}\n\n/**\n * The pieces a message shows once `hidden` ones are taken out: a space that a removed piece leaves at a join is dropped, and the ends are\n * trimmed where it was. The message's own text is not changed, only what the bubble draws.\n */\nexport function visibleParts(parts: readonly Piece[], hidden: (part: Piece) => boolean): Piece[] {\n  const out: Piece[] = [];\n  let gap = false;\n  for (const part of parts) {\n    if (hidden(part)) { gap = true; continue; }\n    const prev = out[out.length - 1];\n    const joins = gap && part.kind === undefined && (prev === undefined || (prev.kind === undefined && /\\s$/.test(prev.text)));\n    out.push(joins ? { text: part.text.replace(/^\\s+/, '') } : part);\n    gap = false;\n  }\n  const last = out[out.length - 1];\n  if (gap && last && last.kind === undefined) out[out.length - 1] = { text: last.text.replace(/\\s+$/, '') };\n  return out.filter(part => part.kind !== undefined || part.text !== '');\n}\n\n/** Whether pasted text is long enough to become a file. `more` than the limits: the characters, or the lines, of the text. */\nexport function isLongPaste(text: string, limits: PasteToFile = {}): boolean {\n  const { minChars = 2000, minLines = 40 } = limits;\n  return text.length > minChars || text.split('\\n').length > minLines;\n}\n/** Markdown in pasted text: a heading, a list or quote item, a fence, a table row, emphasis or a link. Anything else is plain text. */\nexport function looksLikeMarkdown(text: string): boolean {\n  return /^\\s{0,3}(#{1,6}\\s|[-*+]\\s|\\d+[.)]\\s|>\\s|```|~~~)/m.test(text) || /\\*\\*[^*\\n]+\\*\\*|\\]\\([^)\\n]+\\)|^\\|.*\\|\\s*$/m.test(text);\n}\n/** Split a sent message into plain text, `@path` mentions and a leading `/skill` token. */\nexport function pieces(text: string, options: { readonly mentions: boolean; readonly skills: readonly string[]; readonly uploads?: boolean }): Piece[] {\n  const found: { start: number; end: number; kind: 'mention' | 'skill'; value: string }[] = [];\n  const skill = options.skills.length ? new RegExp(`^/(${options.skills.map(escape).join('|')})(?=\\\\s|$)`).exec(text) : null;\n  if (skill) found.push({ start: 0, end: skill[0].length, kind: 'skill', value: skill[1]! });\n  if (options.mentions || options.uploads) {\n    for (const match of text.matchAll(MENTION_TOKEN)) {\n      // A quoted path keeps its punctuation (the closing quote ends it); a bare one drops trailing punctuation, as a sentence would.\n      const quoted = match[2] !== undefined;\n      const path = quoted ? match[2]!.replace(/\\\\(.)/g, '$1') : match[3]!.replace(/[.,;:!?)\\]}'\"]+$/, '');\n      if (!path || (!options.mentions && !isUploadPath(path))) continue;\n      const start = match.index! + match[1]!.length;\n      const end = quoted ? match.index! + match[0].length : start + 1 + path.length;\n      found.push({ start, end, kind: 'mention', value: path });\n    }\n  }\n  const out: Piece[] = [];\n  let cursor = 0;\n  for (const item of found.sort((a, b) => a.start - b.start)) {\n    if (item.start < cursor) continue;\n    if (item.start > cursor) out.push({ text: text.slice(cursor, item.start) });\n    out.push({ text: text.slice(item.start, item.end), kind: item.kind, value: item.value });\n    cursor = item.end;\n  }\n  if (cursor < text.length) out.push({ text: text.slice(cursor) });\n  return out;\n}\n",
       "type": "registry:lib",
       "target": "components/pi-chat/config.ts"
     },
@@ -113,31 +121,31 @@
     },
     {
       "path": "registry/pi-chat/markdown.tsx",
-      "content": "'use client';\n\nimport { createElement, Fragment, memo, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { Marked } from 'marked';\nimport { decodeHTML } from 'entities';\nimport { CodeBlock } from './code-block';\nimport { useChatText } from './labels';\nimport type { ChatLabels } from './labels';\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';\n\n/*\n * Safe Markdown for model output. Tokens are mapped to React elements one by one: raw HTML is shown as text, images are\n * shown as their alt text (nothing is fetched), and a link is only rendered when it is a plain http(s) URL.\n * Ported from the v4 `@hachej/boring-ui-kit` chat markdown renderer; the styling is Tailwind and fenced code gets a code block card.\n */\nexport interface CommandMention { readonly name: string; readonly behavior: 'execute' | 'insert' }\nexport interface CommandMentions {\n  readonly commands: readonly CommandMention[];\n  readonly onActivate: (command: CommandMention) => void;\n}\n\nconst markdown = new Marked({ gfm: true, breaks: false, pedantic: false });\n\nfunction isRecord(value: unknown): value is Record<string, unknown> { return value !== null && typeof value === 'object' && !Array.isArray(value); }\nfunction text(value: unknown): string { return typeof value === 'string' ? value : ''; }\nfunction visible(value: unknown): string {\n  if (!isRecord(value)) return '';\n  if (value['type'] === 'br') return '\\n';\n  if (Array.isArray(value['tokens'])) return value['tokens'].map(visible).join('');\n  const content = text(value['text']);\n  return value['type'] === 'text' && value['escaped'] !== true ? decodeHTML(content) : content;\n}\nfunction containsHtml(value: unknown): boolean {\n  if (!isRecord(value)) return false;\n  return value['type'] === 'html' || Array.isArray(value['tokens']) && value['tokens'].some(containsHtml);\n}\nfunction literal(value: string): ReactNode { return <span className=\"whitespace-pre-wrap\">{value}</span>; }\n\ninterface Context { readonly mentions: CommandMentions | undefined; readonly onCopy: ((text: string) => Promise<void>) | undefined; readonly labels: ChatLabels }\n\nfunction children(value: unknown, context: Context, before = '', after = '', inline = false): ReactNode {\n  if (!Array.isArray(value)) return null;\n  if (!context.mentions) return value.map((token: unknown, index) => <Fragment key={index}>{renderToken(token, context)}</Fragment>);\n  const shown = value.map(visible), source = before + shown.join('') + after;\n  const active = inline && value.some(containsHtml) ? { ...context, mentions: undefined } : context;\n  let position = before.length;\n  return value.map((token: unknown, index) => {\n    const start = position;\n    position += shown[index]?.length ?? 0;\n    return <Fragment key={index}>{renderToken(token, active, source.slice(0, start), source.slice(position))}</Fragment>;\n  });\n}\n\nconst mentionPattern = /(^|[\\s(\\[{\"'“‘])\\/([A-Za-z0-9_][A-Za-z0-9_-]*)(?=$|\\s|[.,;!?)}\\]\"'”’]+(?=$|\\s))/g;\nfunction mentionText(value: string, mentions: CommandMentions | undefined, before: string, after: string, labels: ChatLabels): ReactNode {\n  if (!mentions?.commands.length || !value.includes('/')) return value;\n  const commands = new Map(mentions.commands.filter(item => /^[A-Za-z0-9_][A-Za-z0-9_-]*$/.test(item.name)\n    && (item.behavior === 'execute' || item.behavior === 'insert')).map(item => [item.name, item]));\n  if (!commands.size) return value;\n  const source = before + value + after, start = before.length, end = start + value.length;\n  const pieces: ReactNode[] = [];\n  let cursor = 0;\n  for (const match of source.matchAll(mentionPattern)) {\n    if (match.index === undefined) continue;\n    const boundary = match[1] ?? '', name = match[2];\n    if (!name) continue;\n    const offset = match.index + boundary.length, limit = offset + name.length + 1;\n    const command: CommandMention | undefined = commands.get(name);\n    if (!command || offset < start || limit > end || offset - start < cursor) continue;\n    const selected = { name: command.name, behavior: command.behavior };\n    const at = offset - start;\n    if (at > cursor) pieces.push(value.slice(cursor, at));\n    pieces.push(<Button key={at} variant=\"secondary\" size=\"sm\" data-testid=\"command-mention\" aria-label={labels.runCommand(selected.name, selected.behavior === 'execute')}\n      onClick={() => mentions.onActivate(selected)}>/{selected.name}</Button>);\n    cursor = limit - start;\n  }\n  if (!pieces.length) return value;\n  if (cursor < value.length) pieces.push(value.slice(cursor));\n  return pieces;\n}\n\nfunction linkTarget(value: unknown): string | undefined {\n  if (typeof value !== 'string') return undefined;\n  const decoded = decodeHTML(value);\n  if (!/^https?:\\/\\//i.test(decoded) || /[\\u0000- \\u007f-\\u009f\\\\]/.test(decoded)) return undefined;\n  const authority = /^https?:\\/\\/([^/?#]*)/i.exec(decoded)?.[1];\n  if (!authority || authority.includes('@')) return undefined;\n  try {\n    const url = new URL(decoded);\n    if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) return undefined;\n    return url.href;\n  } catch { return undefined; }\n}\n\nfunction cells(value: unknown, header: boolean, context: Context): ReactNode {\n  if (!Array.isArray(value)) return null;\n  return value.map((cell: unknown, index) => {\n    if (!isRecord(cell)) return null;\n    const alignment = cell['align'];\n    const textAlign = alignment === 'left' || alignment === 'center' || alignment === 'right' ? alignment : undefined;\n    return createElement(header ? TableHead : TableCell, { key: index, style: { textAlign }, ...(header ? { scope: 'col' } : {}) },\n      children(cell['tokens'], context, '', '', true));\n  });\n}\n\nconst HEADINGS: Record<number, string> = {\n  1: 'mt-6 mb-2 text-xl font-semibold tracking-tight', 2: 'mt-5 mb-2 text-base font-semibold tracking-tight', 3: 'mt-4 mb-1.5 text-sm font-semibold',\n  4: 'mt-4 mb-1 text-sm font-semibold', 5: 'mt-3 mb-1 text-sm font-medium', 6: 'mt-3 mb-1 text-sm font-medium text-muted-foreground',\n};\n\n// Marked's extension token includes arbitrary fields. Narrow those fields here before creating React nodes.\nfunction renderToken(value: unknown, context: Context, before = '', after = ''): ReactNode {\n  if (!isRecord(value)) return null;\n  const raw = text(value['raw']), content = text(value['text']), mentions = context.mentions;\n  switch (value['type']) {\n    case 'space': case 'def': return null;\n    case 'paragraph': return <p className=\"my-3 first:mt-0 last:mb-0\">{children(value['tokens'], context, '', '', true)}</p>;\n    case 'heading': {\n      const depth = value['depth'];\n      return typeof depth === 'number' && Number.isInteger(depth) && depth >= 1 && depth <= 6\n        ? createElement(`h${depth}`, { className: `${HEADINGS[depth]} first:mt-0` }, children(value['tokens'], context, '', '', true)) : literal(raw);\n    }\n    case 'text': return Array.isArray(value['tokens']) ? children(value['tokens'], context, before, after, true)\n      : value['escaped'] === true ? literal(content) : mentionText(decodeHTML(content), mentions, before, after, context.labels);\n    case 'escape': return content;\n    case 'strong': return <strong className=\"font-semibold text-foreground\">{children(value['tokens'], context, before, after, true)}</strong>;\n    case 'em': return <em>{children(value['tokens'], context, before, after, true)}</em>;\n    case 'del': return <del className=\"text-muted-foreground\">{children(value['tokens'], context, before, after, true)}</del>;\n    case 'blockquote': return <blockquote className=\"my-3 px-4 py-2 text-muted-foreground [&_p]:my-1\">{children(value['tokens'], context)}</blockquote>;\n    case 'br': return <br />;\n    case 'hr': return <hr className=\"my-5 border-border\" />;\n    case 'codespan': return <code className=\"bg-muted px-1.5 py-0.5 font-mono text-sm whitespace-pre-wrap\">{content}</code>;\n    case 'code': return <CodeBlock code={content} {...(typeof value['lang'] === 'string' && value['lang'] ? { language: value['lang'] } : {})} {...(context.onCopy ? { onCopy: context.onCopy } : {})} />;\n    case 'html': return value['block'] === true ? <pre className=\"my-3 overflow-x-auto font-mono text-xs whitespace-pre-wrap\">{raw}</pre> : literal(raw);\n    case 'image': return literal(decodeHTML(content) || raw);\n    case 'link': {\n      const href = linkTarget(value['href']), title = typeof value['title'] === 'string' ? decodeHTML(value['title']) : undefined;\n      return href ? <a href={href} title={title} target=\"_blank\" rel=\"noopener noreferrer\"\n        className=\"font-medium text-foreground underline decoration-muted-foreground/50 underline-offset-4 hover:decoration-foreground\">{children(value['tokens'], context)}</a> : children(value['tokens'], context);\n    }\n    case 'list': {\n      const start = value['start'];\n      return value['ordered'] === true\n        ? <ol start={typeof start === 'number' && Number.isSafeInteger(start) ? start : undefined} className=\"my-3 list-decimal ps-6 marker:text-muted-foreground\">{children(value['items'], context)}</ol>\n        : <ul className=\"my-3 list-disc ps-6 marker:text-muted-foreground\">{children(value['items'], context)}</ul>;\n    }\n    case 'list_item': return <li className=\"ps-1 [&+li]:mt-1 [&>p]:my-1 [&>ol]:my-1 [&>ul]:my-1\">{children(value['tokens'], context, '', '', true)}</li>;\n    case 'checkbox': return <Checkbox className=\"inline-flex\" checked={value['checked'] === true} disabled aria-label={context.labels.taskStatus} />;\n    case 'table': return <Table>\n      <TableHeader><TableRow>{cells(value['header'], true, context)}</TableRow></TableHeader>\n      <TableBody>{Array.isArray(value['rows']) ? value['rows'].map((row: unknown, index) => <TableRow key={index}>{cells(row, false, context)}</TableRow>) : null}</TableBody></Table>;\n    default: return literal(raw);\n  }\n}\n\n/** One top-level block; unchanged blocks skip re-rendering while a long answer streams. */\nconst Block = memo(function Block({ token, context }: { readonly token: unknown; readonly context: Context }) {\n  return <>{renderToken(token, context)}</>;\n}, (a, b) => isRecord(a.token) && isRecord(b.token) && a.token['raw'] === b.token['raw'] && a.token['type'] === b.token['type'] && a.context.mentions === b.context.mentions && a.context.onCopy === b.context.onCopy && a.context.labels === b.context.labels);\n\nexport const Markdown = memo(function Markdown({ text: source, commandMentions, onCopy, streaming = false }: {\n  readonly text: string; readonly commandMentions?: CommandMentions; readonly onCopy?: (text: string) => Promise<void>; readonly streaming?: boolean;\n}) {\n  const tokens = useMemo(() => { try { return markdown.lexer(source); } catch { return null; } }, [source]);\n  const mentions = source.includes('/') && commandMentions?.commands.length ? commandMentions : undefined;\n  const { labels } = useChatText();\n  const context = useMemo<Context>(() => ({ mentions, onCopy, labels }), [mentions, onCopy, labels]);\n  const body = useMemo(() => {\n    if (!tokens) return literal(source);\n    // With mentions enabled, positions are relative to the whole text, so render the token list as one unit.\n    if (mentions) return children(tokens, context);\n    return tokens.map((token, index) => <Block key={index} token={token} context={context} />);\n  }, [tokens, source, mentions, context]);\n  return <div data-testid=\"message-text\" data-streaming={streaming ? 'true' : undefined} className=\"min-w-0 [overflow-wrap:anywhere]\">\n    {body}\n  </div>;\n});\n",
+      "content": "'use client';\n\nimport { createElement, Fragment, memo, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { Marked } from 'marked';\nimport { decodeHTML } from 'entities';\nimport { CodeBlock } from './code-block';\nimport { pieces } from './config';\nimport { useChatText } from './labels';\nimport type { ChatLabels } from './labels';\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';\n\n/*\n * Safe Markdown for model output. Tokens are mapped to React elements one by one: raw HTML is shown as text, images are\n * shown as their alt text (nothing is fetched), and a link is only rendered when it is a plain http(s) URL.\n * Ported from the v4 `@hachej/boring-ui-kit` chat markdown renderer; the styling is Tailwind and fenced code gets a code block card.\n */\nexport interface CommandMention { readonly name: string; readonly behavior: 'execute' | 'insert' }\nexport interface CommandMentions {\n  readonly commands: readonly CommandMention[];\n  readonly onActivate: (command: CommandMention) => void;\n}\n\nconst markdown = new Marked({ gfm: true, breaks: false, pedantic: false });\n\nfunction isRecord(value: unknown): value is Record<string, unknown> { return value !== null && typeof value === 'object' && !Array.isArray(value); }\nfunction text(value: unknown): string { return typeof value === 'string' ? value : ''; }\nfunction visible(value: unknown): string {\n  if (!isRecord(value)) return '';\n  if (value['type'] === 'br') return '\\n';\n  if (Array.isArray(value['tokens'])) return value['tokens'].map(visible).join('');\n  const content = text(value['text']);\n  return value['type'] === 'text' && value['escaped'] !== true ? decodeHTML(content) : content;\n}\nfunction containsHtml(value: unknown): boolean {\n  if (!isRecord(value)) return false;\n  return value['type'] === 'html' || Array.isArray(value['tokens']) && value['tokens'].some(containsHtml);\n}\nfunction literal(value: string): ReactNode { return <span className=\"whitespace-pre-wrap\">{value}</span>; }\n\ninterface Context { readonly renderMention: ((path: string, text: string) => ReactNode) | undefined; readonly mentions: CommandMentions | undefined; readonly onCopy: ((text: string) => Promise<void>) | undefined; readonly labels: ChatLabels }\n\nfunction children(value: unknown, context: Context, before = '', after = '', inline = false): ReactNode {\n  if (!Array.isArray(value)) return null;\n  if (!context.mentions) return value.map((token: unknown, index) => <Fragment key={index}>{renderToken(token, context)}</Fragment>);\n  const shown = value.map(visible), source = before + shown.join('') + after;\n  const active = inline && value.some(containsHtml) ? { ...context, mentions: undefined } : context;\n  let position = before.length;\n  return value.map((token: unknown, index) => {\n    const start = position;\n    position += shown[index]?.length ?? 0;\n    return <Fragment key={index}>{renderToken(token, active, source.slice(0, start), source.slice(position))}</Fragment>;\n  });\n}\n\nconst mentionPattern = /(^|[\\s(\\[{\"'“‘])\\/([A-Za-z0-9_][A-Za-z0-9_-]*)(?=$|\\s|[.,;!?)}\\]\"'”’]+(?=$|\\s))/g;\nfunction mentionText(value: string, mentions: CommandMentions | undefined, before: string, after: string, labels: ChatLabels): ReactNode {\n  if (!mentions?.commands.length || !value.includes('/')) return value;\n  const commands = new Map(mentions.commands.filter(item => /^[A-Za-z0-9_][A-Za-z0-9_-]*$/.test(item.name)\n    && (item.behavior === 'execute' || item.behavior === 'insert')).map(item => [item.name, item]));\n  if (!commands.size) return value;\n  const source = before + value + after, start = before.length, end = start + value.length;\n  const pieces: ReactNode[] = [];\n  let cursor = 0;\n  for (const match of source.matchAll(mentionPattern)) {\n    if (match.index === undefined) continue;\n    const boundary = match[1] ?? '', name = match[2];\n    if (!name) continue;\n    const offset = match.index + boundary.length, limit = offset + name.length + 1;\n    const command: CommandMention | undefined = commands.get(name);\n    if (!command || offset < start || limit > end || offset - start < cursor) continue;\n    const selected = { name: command.name, behavior: command.behavior };\n    const at = offset - start;\n    if (at > cursor) pieces.push(value.slice(cursor, at));\n    pieces.push(<Button key={at} variant=\"secondary\" size=\"sm\" data-testid=\"command-mention\" aria-label={labels.runCommand(selected.name, selected.behavior === 'execute')}\n      onClick={() => mentions.onActivate(selected)}>/{selected.name}</Button>);\n    cursor = limit - start;\n  }\n  if (!pieces.length) return value;\n  if (cursor < value.length) pieces.push(value.slice(cursor));\n  return pieces;\n}\n\nfunction linkTarget(value: unknown): string | undefined {\n  if (typeof value !== 'string') return undefined;\n  const decoded = decodeHTML(value);\n  if (!/^https?:\\/\\//i.test(decoded) || /[\\u0000- \\u007f-\\u009f\\\\]/.test(decoded)) return undefined;\n  const authority = /^https?:\\/\\/([^/?#]*)/i.exec(decoded)?.[1];\n  if (!authority || authority.includes('@')) return undefined;\n  try {\n    const url = new URL(decoded);\n    if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) return undefined;\n    return url.href;\n  } catch { return undefined; }\n}\n\nfunction cells(value: unknown, header: boolean, context: Context): ReactNode {\n  if (!Array.isArray(value)) return null;\n  return value.map((cell: unknown, index) => {\n    if (!isRecord(cell)) return null;\n    const alignment = cell['align'];\n    const textAlign = alignment === 'left' || alignment === 'center' || alignment === 'right' ? alignment : undefined;\n    return createElement(header ? TableHead : TableCell, { key: index, style: { textAlign }, ...(header ? { scope: 'col' } : {}) },\n      children(cell['tokens'], context, '', '', true));\n  });\n}\n\nconst HEADINGS: Record<number, string> = {\n  1: 'mt-6 mb-2 text-xl font-semibold tracking-tight', 2: 'mt-5 mb-2 text-base font-semibold tracking-tight', 3: 'mt-4 mb-1.5 text-sm font-semibold',\n  4: 'mt-4 mb-1 text-sm font-semibold', 5: 'mt-3 mb-1 text-sm font-medium', 6: 'mt-3 mb-1 text-sm font-medium text-muted-foreground',\n};\n\n// Marked's extension token includes arbitrary fields. Narrow those fields here before creating React nodes.\nfunction renderToken(value: unknown, context: Context, before = '', after = ''): ReactNode {\n  if (!isRecord(value)) return null;\n  const raw = text(value['raw']), content = text(value['text']), mentions = context.mentions;\n  switch (value['type']) {\n    case 'space': case 'def': return null;\n    case 'paragraph': return <p className=\"my-3 first:mt-0 last:mb-0\">{children(value['tokens'], context, '', '', true)}</p>;\n    case 'heading': {\n      const depth = value['depth'];\n      return typeof depth === 'number' && Number.isInteger(depth) && depth >= 1 && depth <= 6\n        ? createElement(`h${depth}`, { className: `${HEADINGS[depth]} first:mt-0` }, children(value['tokens'], context, '', '', true)) : literal(raw);\n    }\n    case 'text': return Array.isArray(value['tokens']) ? children(value['tokens'], context, before, after, true)\n      : value['escaped'] === true ? literal(content) : context.renderMention\n        ? pieces(decodeHTML(content), { mentions: true, skills: [] }).map((piece, index) => <Fragment key={index}>{piece.kind === 'mention' && piece.value !== undefined\n          ? context.renderMention?.(piece.value, piece.text) : mentionText(piece.text, mentions, before, after, context.labels)}</Fragment>)\n        : mentionText(decodeHTML(content), mentions, before, after, context.labels);\n    case 'escape': return content;\n    case 'strong': return <strong className=\"font-semibold text-foreground\">{children(value['tokens'], context, before, after, true)}</strong>;\n    case 'em': return <em>{children(value['tokens'], context, before, after, true)}</em>;\n    case 'del': return <del className=\"text-muted-foreground\">{children(value['tokens'], context, before, after, true)}</del>;\n    case 'blockquote': return <blockquote className=\"my-3 px-4 py-2 text-muted-foreground [&_p]:my-1\">{children(value['tokens'], context)}</blockquote>;\n    case 'br': return <br />;\n    case 'hr': return <hr className=\"my-5 border-border\" />;\n    case 'codespan': return <code className=\"bg-muted px-1.5 py-0.5 font-mono text-sm whitespace-pre-wrap\">{content}</code>;\n    case 'code': return <CodeBlock code={content} {...(typeof value['lang'] === 'string' && value['lang'] ? { language: value['lang'] } : {})} {...(context.onCopy ? { onCopy: context.onCopy } : {})} />;\n    case 'html': return value['block'] === true ? <pre className=\"my-3 overflow-x-auto font-mono text-xs whitespace-pre-wrap\">{raw}</pre> : literal(raw);\n    case 'image': return literal(decodeHTML(content) || raw);\n    case 'link': {\n      const href = linkTarget(value['href']), title = typeof value['title'] === 'string' ? decodeHTML(value['title']) : undefined;\n      return href ? <a href={href} title={title} target=\"_blank\" rel=\"noopener noreferrer\"\n        className=\"font-medium text-foreground underline decoration-muted-foreground/50 underline-offset-4 hover:decoration-foreground\">{children(value['tokens'], context)}</a> : children(value['tokens'], context);\n    }\n    case 'list': {\n      const start = value['start'];\n      return value['ordered'] === true\n        ? <ol start={typeof start === 'number' && Number.isSafeInteger(start) ? start : undefined} className=\"my-3 list-decimal ps-6 marker:text-muted-foreground\">{children(value['items'], context)}</ol>\n        : <ul className=\"my-3 list-disc ps-6 marker:text-muted-foreground\">{children(value['items'], context)}</ul>;\n    }\n    case 'list_item': return <li className=\"ps-1 [&+li]:mt-1 [&>p]:my-1 [&>ol]:my-1 [&>ul]:my-1\">{children(value['tokens'], context, '', '', true)}</li>;\n    case 'checkbox': return <Checkbox className=\"inline-flex\" checked={value['checked'] === true} disabled aria-label={context.labels.taskStatus} />;\n    case 'table': return <Table>\n      <TableHeader><TableRow>{cells(value['header'], true, context)}</TableRow></TableHeader>\n      <TableBody>{Array.isArray(value['rows']) ? value['rows'].map((row: unknown, index) => <TableRow key={index}>{cells(row, false, context)}</TableRow>) : null}</TableBody></Table>;\n    default: return literal(raw);\n  }\n}\n\n/** One top-level block; unchanged blocks skip re-rendering while a long answer streams. */\nconst Block = memo(function Block({ token, context }: { readonly token: unknown; readonly context: Context }) {\n  return <>{renderToken(token, context)}</>;\n}, (a, b) => isRecord(a.token) && isRecord(b.token) && a.token['raw'] === b.token['raw'] && a.token['type'] === b.token['type'] && a.context.mentions === b.context.mentions && a.context.renderMention === b.context.renderMention && a.context.onCopy === b.context.onCopy && a.context.labels === b.context.labels);\n\nexport const Markdown = memo(function Markdown({ text: source, commandMentions, renderMention, onCopy, streaming = false }: {\n  readonly text: string; readonly renderMention?: ((path: string, text: string) => ReactNode) | undefined; readonly commandMentions?: CommandMentions; readonly onCopy?: (text: string) => Promise<void>; readonly streaming?: boolean;\n}) {\n  const tokens = useMemo(() => { try { return markdown.lexer(source); } catch { return null; } }, [source]);\n  const mentions = source.includes('/') && commandMentions?.commands.length ? commandMentions : undefined;\n  const { labels } = useChatText();\n  const context = useMemo<Context>(() => ({ mentions, renderMention, onCopy, labels }), [mentions, renderMention, onCopy, labels]);\n  const body = useMemo(() => {\n    if (!tokens) return literal(source);\n    // With mentions enabled, positions are relative to the whole text, so render the token list as one unit.\n    if (mentions) return children(tokens, context);\n    return tokens.map((token, index) => <Block key={index} token={token} context={context} />);\n  }, [tokens, source, mentions, context]);\n  return <div data-testid=\"message-text\" data-streaming={streaming ? 'true' : undefined} className=\"min-w-0 [overflow-wrap:anywhere]\">\n    {body}\n  </div>;\n});\n",
       "type": "registry:component",
       "target": "components/pi-chat/markdown.tsx"
     },
     {
       "path": "registry/pi-chat/mention-menu.tsx",
-      "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { FileTextIcon, FolderIcon } from 'lucide-react';\nimport { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { usePickerKeyboard } from './picker-keyboard';\nimport type { MentionResult, MentionsConfig } from './config';\nimport { useChatText } from './labels';\n\n/**\n * The host's shadcn Popover above the composer, anchored to the nearest positioned ancestor's top edge and as wide as it.\n * Focus stays in the message box (the picker keyboard drives the rows); outside presses dismiss it.\n */\nexport function ComposerSuggestions({ testId, onDismiss, children }: { readonly testId: string; readonly onDismiss: () => void; readonly children: ReactNode }) {\n  return <Popover open modal={false} onOpenChange={open => { if (!open) onDismiss(); }}>\n    <PopoverTrigger nativeButton={false} render={<span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0\" />} />\n    <PopoverContent data-testid={testId} side=\"top\" align=\"start\" initialFocus={false} finalFocus={false} className=\"pi-chat w-(--anchor-width) max-w-[calc(100vw-1rem)]\">\n      {children}\n    </PopoverContent>\n  </Popover>;\n}\n\nfunction highlight(text: string, query: string) {\n  const at = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;\n  if (at < 0) return <>{text}</>;\n  return <>{text.slice(0, at)}<mark className=\"bg-transparent text-foreground underline underline-offset-2\">{text.slice(at, at + query.length)}</mark>{text.slice(at + query.length)}</>;\n}\n\n/** The `@` file picker, ported from v2's `MentionPicker`: debounced search, one highlighted row, name over path. */\nexport function MentionPicker({ query, search, generation, onSelect, onDismiss }: {\n  readonly query: string;\n  readonly generation?: MentionsConfig['generation'];\n  readonly search: MentionsConfig['search'];\n  readonly onSelect: (path: string) => void;\n  readonly onDismiss: () => void;\n}) {\n  const { labels } = useChatText();\n  // Results are tagged with the search function that produced them: a binding switch hides the previous binding's rows at once.\n  const [outcome, setOutcome] = useState<{ readonly search: MentionsConfig['search']; readonly results: readonly MentionResult[]; readonly failure: string | null }>();\n  const shown = outcome?.search === search ? outcome : undefined;\n  const results = shown?.results ?? [];\n  const failure = shown?.failure ?? null;\n  const [active, setActive] = useState(0);\n  const list = useRef<HTMLUListElement>(null);\n  const searcher = useRef(search); searcher.current = search;\n  useEffect(() => {\n    setActive(0);\n    const abort = new AbortController();\n    const timer = setTimeout(() => {\n      searcher.current(query, abort.signal).then(found => { if (!abort.signal.aborted) setOutcome({ search, results: found.slice(0, 8), failure: null }); },\n        cause => { if (!abort.signal.aborted) setOutcome({ search, results: [], failure: cause instanceof Error ? cause.message : labels.searchFailed }); });\n    }, 120);\n    return () => { clearTimeout(timer); abort.abort(); };\n  }, [query, search, generation]);\n  usePickerKeyboard({ count: results.length, activeIdx: active, setActiveIdx: setActive, listRef: list, onSelect: index => { const item = results[index]; if (item) onSelect(item.path); }, onDismiss });\n\n  if (results.length === 0 && !failure) return null;\n  return <ComposerSuggestions testId=\"mention-menu\" onDismiss={onDismiss}>\n    {failure ? <div role=\"alert\" data-testid=\"mention-error\" className=\"text-xs text-destructive\">{failure}</div>\n      : <ul ref={list} role=\"listbox\" aria-label={labels.workspaceFiles} className=\"m-0 flex max-h-[min(14rem,40dvh)] list-none flex-col overflow-y-auto p-0\">\n        {results.map((item, index) => {\n          const name = item.path.split('/').pop() ?? item.path;\n          const Icon = item.kind === 'directory' ? FolderIcon : FileTextIcon;\n          return <Item key={item.path} render={<li />} size=\"xs\" variant={index === active ? 'muted' : 'default'} role=\"option\" aria-selected={index === active} data-testid=\"mention-item\" data-path={item.path} title={item.path}\n            onMouseEnter={() => setActive(index)} onMouseDown={event => { event.preventDefault(); onSelect(item.path); }}\n            className=\"cursor-pointer flex-nowrap max-sm:min-h-11 pointer-coarse:min-h-11\">\n            <ItemMedia variant=\"icon\"><Icon aria-hidden=\"true\" /></ItemMedia>\n            <ItemContent className=\"min-w-0\"><ItemTitle>{highlight(name, query)}</ItemTitle>\n              <ItemDescription className=\"m-0 truncate\">{item.path}</ItemDescription></ItemContent>\n          </Item>;\n        })}\n      </ul>}\n  </ComposerSuggestions>;\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { FileTextIcon, FolderIcon } from 'lucide-react';\nimport { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport { usePickerKeyboard } from './picker-keyboard';\nimport type { MentionResult, MentionsConfig } from './config';\nimport { useChatText } from './labels';\n\n/**\n * The host's shadcn Popover above the composer, anchored to the nearest positioned ancestor's top edge and as wide as it.\n * Focus stays in the message box (the picker keyboard drives the rows); outside presses dismiss it.\n */\nexport function ComposerSuggestions({ testId, onDismiss, children }: { readonly testId: string; readonly onDismiss: () => void; readonly children: ReactNode }) {\n  return <Popover open modal={false} onOpenChange={open => { if (!open) onDismiss(); }}>\n    <PopoverTrigger nativeButton={false} render={<span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0\" />} />\n    <PopoverContent data-testid={testId} side=\"top\" align=\"start\" initialFocus={false} finalFocus={false} className=\"pi-chat w-(--anchor-width) max-w-[calc(100vw-1rem)]\">\n      {children}\n    </PopoverContent>\n  </Popover>;\n}\n\nfunction highlight(text: string, query: string) {\n  const at = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;\n  if (at < 0) return <>{text}</>;\n  return <>{text.slice(0, at)}<mark className=\"bg-transparent text-foreground underline underline-offset-2\">{text.slice(at, at + query.length)}</mark>{text.slice(at + query.length)}</>;\n}\n\n/** The `@` file picker, ported from v2's `MentionPicker`: debounced search, one highlighted row, name over path. */\nexport function MentionPicker({ query, search, generation, listLabel, renderOption, onSelect, onDismiss }: {\n  readonly query: string;\n  readonly listLabel?: MentionsConfig['listLabel'];\n  readonly renderOption?: MentionsConfig['renderOption'];\n  readonly generation?: MentionsConfig['generation'];\n  readonly search: MentionsConfig['search'];\n  readonly onSelect: (path: string) => void;\n  readonly onDismiss: () => void;\n}) {\n  const { labels } = useChatText();\n  // Results are tagged with the search function that produced them: a binding switch hides the previous binding's rows at once.\n  const [outcome, setOutcome] = useState<{ readonly search: MentionsConfig['search']; readonly results: readonly MentionResult[]; readonly failure: string | null }>();\n  const shown = outcome?.search === search ? outcome : undefined;\n  const results = shown?.results ?? [];\n  const failure = shown?.failure ?? null;\n  const [active, setActive] = useState(0);\n  const list = useRef<HTMLUListElement>(null);\n  const searcher = useRef(search); searcher.current = search;\n  useEffect(() => {\n    setActive(0);\n    const abort = new AbortController();\n    const timer = setTimeout(() => {\n      searcher.current(query, abort.signal).then(found => { if (!abort.signal.aborted) setOutcome({ search, results: found.slice(0, 8), failure: null }); },\n        cause => { if (!abort.signal.aborted) setOutcome({ search, results: [], failure: cause instanceof Error ? cause.message : labels.searchFailed }); });\n    }, 120);\n    return () => { clearTimeout(timer); abort.abort(); };\n  }, [query, search, generation]);\n  usePickerKeyboard({ count: results.length, activeIdx: active, setActiveIdx: setActive, listRef: list, onSelect: index => { const item = results[index]; if (item) onSelect(item.path); }, onDismiss });\n\n  if (results.length === 0 && !failure) return null;\n  return <ComposerSuggestions testId=\"mention-menu\" onDismiss={onDismiss}>\n    {failure ? <div role=\"alert\" data-testid=\"mention-error\" className=\"text-xs text-destructive\">{failure}</div>\n      : <ul ref={list} role=\"listbox\" aria-label={listLabel ?? labels.workspaceFiles} className=\"m-0 flex max-h-[min(14rem,40dvh)] list-none flex-col overflow-y-auto p-0\">\n        {results.map((item, index) => {\n          const name = item.label ?? item.path.split('/').pop() ?? item.path;\n          const Icon = item.kind === 'directory' ? FolderIcon : FileTextIcon;\n          return <Item key={item.path} render={<li />} size=\"xs\" variant={index === active ? 'muted' : 'default'} role=\"option\" aria-selected={index === active} data-testid=\"mention-item\" data-path={item.path} title={item.path}\n            onMouseEnter={() => setActive(index)} onMouseDown={event => { event.preventDefault(); onSelect(item.path); }}\n            className=\"cursor-pointer flex-nowrap max-sm:min-h-11 pointer-coarse:min-h-11\">\n            {renderOption ? renderOption(item, query) : <><ItemMedia variant=\"icon\"><Icon aria-hidden=\"true\" /></ItemMedia>\n            <ItemContent className=\"min-w-0\"><ItemTitle>{highlight(name, query)}</ItemTitle>\n              <ItemDescription className=\"m-0 truncate\">{item.path}</ItemDescription></ItemContent></>}\n          </Item>;\n        })}\n      </ul>}\n  </ComposerSuggestions>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/mention-menu.tsx"
     },
     {
       "path": "registry/pi-chat/message.tsx",
-      "content": "'use client';\n\nimport { useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ImageContent, ToolResultMessage, UserMessage } from '@earendil-works/pi-ai';\nimport { AlertCircleIcon, CircleSlashIcon, FileIcon, FileSpreadsheetIcon, FileTextIcon, ImageIcon, PresentationIcon } from 'lucide-react';\nimport { CopyButton } from './code-block';\nimport { Markdown } from './markdown';\nimport type { CommandMentions } from './markdown';\nimport { ArtifactCard } from './artifact-card';\nimport type { ArtifactsConfig } from './artifact';\nimport { ApprovalCard } from './approval-card';\nimport { QuestionCard } from './question-card';\nimport type { AnswerOutcome } from './question-card';\nimport { ActivityBlock } from './activity';\nimport type { ActivityState } from './activity';\nimport { Shimmer } from './shimmer';\nimport { ToolCard } from './tool';\nimport { thumbnail } from './composer';\nimport { displayName, fileKind, isUploadPath, pieces, visibleParts } from './config';\nimport type { FileKind, Piece, PreviewRead } from './config';\nimport { isFileBlock, segments } from './rows';\nimport type { DeriveOptions, Row } from './rows';\nimport { Button } from '@/components/ui/button';\nimport { BlockActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { useChatText } from './labels';\nimport type { ReplyRef } from './config';\nimport { Message, MessageContent, MessageFooter } from '@/components/ui/message';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from '@/components/ui/attachment';\nimport { Badge } from '@/components/ui/badge';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\n\nexport interface RowContext {\n  readonly developer: boolean;\n  readonly groupTool: DeriveOptions['groupTool'];\n  readonly commandMentions: CommandMentions | undefined;\n  readonly onOpenImage: ((image: ImageContent) => void) | undefined;\n  readonly onCopy: ((text: string) => Promise<void>) | undefined;\n  /** Which tokens of a sent message get a styled treatment (`@path` mentions, a leading `/skill`). */\n  readonly pieces: { readonly mentions: boolean; readonly uploads?: boolean; readonly skills: readonly string[]; readonly openMention?: ((path: string) => void) | undefined; readonly renderMention?: ((path: string) => ReactNode | undefined) | undefined;\n    readonly preview?: PreviewRead | undefined } | undefined;\n  readonly fileChanges?: boolean | undefined;\n  /** Opens a file card through the host's workspace opener. */\n  readonly openFile?: ((path: string) => void) | undefined;\n  readonly answer: ((questionId: string, answer: string) => Promise<AnswerOutcome>) | undefined;\n  readonly artifacts: { readonly open: ArtifactsConfig['open']; readonly isOpen?: ArtifactsConfig['isOpen'] | undefined; readonly kinds?: ArtifactsConfig['kinds'] } | undefined;\n  /** Replaces the default copy button under a settled reply (the ambient window adds feedback and the time); `host` holds the host's message actions. */\n  readonly replyActions?: ((reply: { readonly key: string; readonly text: string; readonly timestamp?: number | undefined }, host: ReactNode) => ReactNode) | undefined;\n  /** The host's actions for a settled reply (`messageActions`). */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  /** A line under a finished reply (not while it streams, runs a tool or waits to retry), after its actions (a host shows which model answered and how long it took). */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n  /** Fork the conversation after a settled reply (its last native entry): adds a Fork button next to Copy. */\n  readonly onFork?: ((entryId: string) => void) | undefined;\n}\n\nconst replyRef = (row: Extract<Row, { type: 'assistant' }>): ReplyRef => ({ key: row.key, text: row.text, entryId: row.entryId, timestamp: row.timestamp, model: row.model, durationMs: row.durationMs });\n\nfunction Image({ image, onOpenImage }: { readonly image: ImageContent; readonly onOpenImage: RowContext['onOpenImage'] }) {\n  const { labels } = useChatText();\n  const src = thumbnail(image.mimeType, image.data);\n  return <Attachment orientation=\"vertical\">\n    <AttachmentMedia variant={src ? 'image' : 'icon'}>{src ? <img src={src} alt={labels.imageAttachment} /> : <ImageIcon aria-hidden=\"true\" />}</AttachmentMedia>\n    <AttachmentContent><AttachmentTitle>{labels.imageAttachment}</AttachmentTitle></AttachmentContent>\n    <AttachmentTrigger data-testid=\"message-image\" disabled={!onOpenImage} aria-label={labels.openImage} onClick={() => onOpenImage?.(image)} />\n  </Attachment>;\n}\n\n/** A `@path` mention in a sent message: the host's own look when its `render` returns one, else the default chip (a button when it can be opened). */\nfunction UserMention({ path, text, open, render }: { readonly path: string; readonly text: string; readonly open: ((path: string) => void) | undefined; readonly render: ((path: string) => ReactNode | undefined) | undefined }) {\n  const custom = render?.(path);\n  if (custom !== undefined) return <>{custom}</>;\n  return open\n    ? <Button variant=\"secondary\" size=\"sm\" data-testid=\"message-mention\" data-path={path} aria-label={`Open ${path}`} onClick={() => open(path)}>{text}</Button>\n    : <Badge variant=\"secondary\" data-testid=\"message-mention\" data-path={path}>{text}</Badge>;\n}\n\n/** The icon a file card shows for its kind. */\nfunction FileGlyph({ kind }: { readonly kind: FileKind }) {\n  switch (kind) {\n    case 'image': return <ImageIcon aria-hidden=\"true\" />;\n    case 'sheet': return <FileSpreadsheetIcon aria-hidden=\"true\" />;\n    case 'slides': return <PresentationIcon aria-hidden=\"true\" />;\n    case 'document': return <FileTextIcon aria-hidden=\"true\" />;\n    default: return <FileIcon aria-hidden=\"true\" />;\n  }\n}\n\n/** A file a person sent (an `uploads/` mention): its icon or thumbnail, name and type. A button when it can be opened. */\nfunction FileCard({ path, open, preview, change }: { readonly path: string; readonly open: ((path: string) => void) | undefined; readonly preview: PreviewRead | undefined; readonly change?: 'created' | 'edited' }) {\n  const { labels } = useChatText();\n  const kind = fileKind(path), name = change ? path.split('/').pop() || path : displayName(path);\n  const [src, setSrc] = useState<string | undefined>();\n  // A thumbnail belongs to the provider that read it: a new provider, or a read that is refused or unavailable, shows the icon.\n  useEffect(() => {\n    setSrc(undefined);\n    if (kind !== 'image' || !preview) return;\n    const abort = new AbortController();\n    preview(path, abort.signal).then(\n      read => { if (!abort.signal.aborted) setSrc(read ? thumbnail(read.mimeType, read.data) : undefined); },\n      () => { if (!abort.signal.aborted) setSrc(undefined); });\n    return () => abort.abort();\n  }, [kind, path, preview]);\n  return <Attachment className=\"max-w-64\" {...(!open ? { 'data-testid': 'message-mention', 'data-path': path } : {})}>\n    <AttachmentMedia variant={src ? 'image' : 'icon'}>{src ? <img src={src} alt=\"\" /> : <FileGlyph kind={kind} />}</AttachmentMedia>\n    <AttachmentContent>\n      <AttachmentTitle>{name}</AttachmentTitle>\n      <AttachmentDescription>{change ? labels.fileChange[change] : labels.fileKind[kind]}</AttachmentDescription>\n    </AttachmentContent>\n    {open && <AttachmentTrigger data-testid=\"message-mention\" data-path={path} aria-label={labels.openFile(name)} onClick={() => open(path)} />}\n  </Attachment>;\n}\n\n/** The file cards of a message, above its text bubble. */\nfunction FileCards({ paths, open, preview }: { readonly paths: readonly string[]; readonly open: ((path: string) => void) | undefined; readonly preview: PreviewRead | undefined }) {\n  return <ul data-testid=\"message-files\" className=\"m-0 flex max-w-[85%] list-none flex-wrap justify-end gap-2 p-0\">\n    {paths.map(path => <li key={path} data-testid=\"message-file\"><FileCard path={path} open={open} preview={preview} /></li>)}\n  </ul>;\n}\n\n/**\n * A text part of a sent message. Its `uploads/` mentions become file cards above the bubble and leave the text; the message content keeps\n * them (only what is drawn changes).\n */\nfunction UserText({ text, context }: { readonly text: string; readonly context: RowContext }) {\n  const open = context.pieces?.openMention;\n  const render = context.pieces?.renderMention;\n  if (!context.pieces) return <Bubble variant=\"muted\" align=\"end\"><BubbleContent data-testid=\"user-text\"><span className=\"whitespace-pre-wrap\">{text}</span></BubbleContent></Bubble>;\n  const all = pieces(text, context.pieces);\n  const isFile = (piece: Piece) => piece.kind === 'mention' && isUploadPath(piece.value!);\n  const files = all.filter(isFile).map(piece => piece.value!);\n  const shown = files.length ? visibleParts(all, isFile) : all;\n  const empty = shown.every(piece => piece.kind === undefined && piece.text === '');\n  return <>\n    {files.length > 0 && <FileCards paths={files} open={context.openFile ?? open} preview={context.pieces.preview} />}\n    {!(files.length > 0 && empty) && <Bubble variant=\"muted\" align=\"end\"><BubbleContent data-testid=\"user-text\"><span className=\"whitespace-pre-wrap\">{shown.map((piece, at) => piece.kind === 'mention'\n      ? <UserMention key={at} path={piece.value!} text={piece.text} open={open} render={render} />\n      : piece.kind === 'skill' ? <Badge key={at} variant=\"secondary\" data-testid=\"message-skill\" data-skill={piece.value}>{piece.text}</Badge>\n      : piece.text)}</span></BubbleContent></Bubble>}\n  </>;\n}\n\nfunction UserBubble({ message, context }: { readonly message: UserMessage; readonly context: RowContext }) {\n  const parts = typeof message.content === 'string' ? [{ type: 'text' as const, text: message.content }] : message.content;\n  return <Message align=\"end\"><MessageContent>\n    {parts.map((part, index) => part.type === 'text' ? (isFileBlock(part.text) ? null : <UserText key={index} text={part.text} context={context} />)\n      : <Image key={index} image={part} onOpenImage={context.onOpenImage} />)}\n  </MessageContent></Message>;\n}\n\nfunction Notice({ tone, icon, children, testid }: { readonly tone: 'error' | 'muted'; readonly icon: ReactNode; readonly children: ReactNode; readonly testid: string }) {\n  return <Alert variant={tone === 'error' ? 'destructive' : 'default'} role={tone === 'error' ? 'alert' : 'status'} data-testid={testid}>\n    {icon}<AlertDescription>{children}</AlertDescription>\n  </Alert>;\n}\n\nfunction resultText(message: ToolResultMessage): string { return message.content.map(part => part.type === 'text' ? part.text : '').join('\\n'); }\n\nexport function RowView({ row, context: liveContext }: { readonly row: Row; readonly context: RowContext }) {\n  const context: RowContext = row.historical ? { ...liveContext, answer: undefined, onFork: undefined, messageActions: undefined, replyActions: undefined, commandMentions: undefined } : liveContext;\n  const { labels, icons } = useChatText();\n  switch (row.type) {\n    case 'user': return <article data-row-id={row.key} data-role=\"user\" aria-live={row.historical ? 'off' : undefined}><UserBubble message={row.message} context={context} /></article>;\n    case 'card': return <article data-row-id={row.key} data-role=\"event\">{row.card.content}</article>;\n    case 'event': return <article data-row-id={row.key} data-role=\"event\" className=\"text-center text-xs text-muted-foreground\">{labels.event(row.label)}</article>;\n    case 'system': return <article data-row-id={row.key} data-role=\"system\"><Collapsible>\n      <CollapsibleTrigger render={<Button variant=\"ghost\" />}>{labels.systemContext}</CollapsibleTrigger>\n      <CollapsibleContent><pre className=\"whitespace-pre-wrap\">{row.text}</pre></CollapsibleContent>\n    </Collapsible></article>;\n    case 'orphan-result': return <article data-row-id={row.key} data-role=\"toolResult\"><Notice tone=\"error\" testid=\"tool-error\" icon={<AlertCircleIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />}>\n      <strong className=\"font-semibold\">{labels.toolFailed(row.message.toolName)}</strong><span className=\"mt-1 block font-mono text-xs whitespace-pre-wrap\">{resultText(row.message)}</span></Notice></article>;\n    case 'assistant': {\n      const settled = !row.streaming;\n      const files = new Map<string, 'created' | 'edited'>();\n      if (context.fileChanges) for (const part of row.parts) {\n        if (part.kind !== 'tool' || part.entry.status !== 'completed') continue;\n        const { call, result } = part.entry;\n        const path = call.arguments['path'];\n        if (!result || result.isError || result.toolName !== call.name || (call.name !== 'write' && call.name !== 'edit') || typeof path !== 'string' || !path.trim()) continue;\n        const normalized = path.replace(/^(\\.\\/)+/, '');\n        if (normalized) files.set(normalized, files.get(normalized) === 'created' || call.name === 'write' ? 'created' : 'edited');\n      }\n      const chunks = segments(row.parts, context.groupTool);\n      const active = row.active === true || row.streaming;\n      const lastText = [...row.parts].reverse().find(part => part.kind === 'text');\n      const host = settled && row.text && context.messageActions\n        ? <BlockActions iconOnly actions={context.messageActions(replyRef(row))} testId=\"reply-action\" menuLabel={labels.moreActions} />\n        : null;\n      return <article data-row-id={row.key} data-role=\"assistant\" aria-live={row.historical ? 'off' : undefined} data-streaming={row.streaming ? 'true' : undefined} className=\"group/message\">\n        <Message><MessageContent>\n        <div className=\"flex flex-col gap-3\">\n          {chunks.map((chunk, at) => {\n            if (chunk.kind === 'activity') {\n              const failed = chunk.steps.some(step => step.kind === 'tool' && step.entry.status === 'failed');\n              const unfinished = chunk.steps.some(step => step.kind === 'tool' && step.entry.status === 'unfinished');\n              const state: ActivityState = failed || row.stopReason === 'error' ? 'failed' : row.stopReason === 'aborted' || (!active && unfinished) ? 'stopped' : active && at === chunks.length - 1 ? 'running' : 'done';\n              return <ActivityBlock key={chunk.key} steps={chunk.steps} state={state} streaming={row.streaming} developer={context.developer} {...(context.onOpenImage ? { onOpenImage: context.onOpenImage } : {})} />;\n            }\n            const part = chunk.part;\n            if (part.kind === 'text') return <Bubble key={part.key} variant=\"ghost\"><BubbleContent><Markdown text={part.text} streaming={row.streaming && part === lastText && row.parts[row.parts.length - 1] === part}\n              {...(settled && context.commandMentions ? { commandMentions: context.commandMentions } : {})} {...(context.onCopy ? { onCopy: context.onCopy } : {})} /></BubbleContent></Bubble>;\n            if (part.kind === 'thinking') return null; // reasoning is a step of an activity block\n            if (part.kind === 'approval') return <ApprovalCard key={part.key} call={part.call} result={part.result} questionId={part.questionId} answer={context.answer} summary={part.summary} decision={part.decision} live={part.live} />;\n            if (part.kind === 'question') return <QuestionCard key={part.key} call={part.call} result={part.result} questionId={part.questionId} answer={context.answer} live={part.live} />;\n            if (part.kind === 'artifact' && part.artifact && files.has(part.artifact.target.resource.path.replace(/^(\\.\\/)+/, ''))) return null;\n            if (part.kind === 'artifact') return <ArtifactCard key={part.key} artifact={part.artifact} title={part.title} {...(part.state === 'ready' ? {} : { pending: part.state })}\n              open={part.artifact !== undefined && (context.artifacts?.isOpen?.(part.artifact) ?? false)} onOpen={context.artifacts?.open} kinds={context.artifacts?.kinds} />;\n            return part.entry.custom ? <div key={part.key}>{part.entry.custom}</div> : <ToolCard key={part.key} entry={part.entry} {...(context.onOpenImage ? { onOpenImage: context.onOpenImage } : {})} />;\n          })}\n          {files.size > 0 && <ul data-testid=\"reply-files\" className=\"m-0 flex list-none flex-wrap gap-2 p-0\">\n            {[...files].map(([path, change]) => <li key={path} data-testid=\"message-file\"><FileCard path={path} change={change} open={context.openFile} preview={context.pieces?.preview} /></li>)}\n          </ul>}\n          {row.streaming && row.parts.length === 0 && <p data-testid=\"working\" className=\"m-0 text-sm\"><Shimmer>{labels.thinking}</Shimmer></p>}\n        </div>\n        {row.stopReason === 'error' && <Notice tone=\"error\" testid=\"response-error\" icon={<AlertCircleIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />}>{row.errorMessage ?? labels.responseFailed}</Notice>}\n        {row.stopReason === 'aborted' && <Notice tone=\"muted\" testid=\"interrupted\" icon={<CircleSlashIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />}>{labels.interrupted}</Notice>}\n        {settled && row.text && context.replyActions?.({ key: row.key, text: row.text, timestamp: row.timestamp }, host)}\n        {settled && row.text && !context.replyActions && <div className=\"mt-1 -ml-2 flex opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-coarse:opacity-100 max-sm:opacity-100 motion-reduce:transition-none\">\n          <CopyButton iconOnly text={row.text} label={labels.copyResponse} {...(context.onCopy ? { onCopy: context.onCopy } : {})} />\n          {context.onFork && row.entryId && <Button size=\"icon-sm\" variant=\"ghost\" aria-label={labels.fork} title={labels.forkHint} data-testid=\"fork-reply\"\n            onClick={() => context.onFork!(row.entryId!)}><icons.fork data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n          {host}</div>}\n        {settled && !row.active && row.text && context.replyFooter && <MessageFooter>{context.replyFooter(replyRef(row))}</MessageFooter>}\n        </MessageContent></Message>\n      </article>;\n    }\n  }\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ImageContent, ToolResultMessage, UserMessage } from '@earendil-works/pi-ai';\nimport { AlertCircleIcon, CircleSlashIcon, FileAudioIcon, FileIcon, FileSpreadsheetIcon, FileTextIcon, ImageIcon, PauseIcon, PlayIcon, PresentationIcon } from 'lucide-react';\nimport { CopyButton } from './code-block';\nimport { Markdown } from './markdown';\nimport type { CommandMentions } from './markdown';\nimport { ArtifactCard } from './artifact-card';\nimport type { ArtifactsConfig } from './artifact';\nimport { ApprovalCard } from './approval-card';\nimport { QuestionCard } from './question-card';\nimport type { AnswerOutcome } from './question-card';\nimport { ActivityBlock } from './activity';\nimport type { ActivityState } from './activity';\nimport { Shimmer } from './shimmer';\nimport { ToolCard } from './tool';\nimport { thumbnail } from './composer';\nimport { displayName, fileKind, isUploadPath, isVoicePath, pieces, visibleParts } from './config';\nimport type { AudioUrlRead, FileKind, Piece, PreviewRead } from './config';\nimport { voiceClock } from './voice-message';\nimport { Spinner } from '@/components/ui/spinner';\nimport { isFileBlock, segments, targetContent } from './rows';\nimport type { DeriveOptions, Row } from './rows';\nimport { Button } from '@/components/ui/button';\nimport { BlockActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { useChatText } from './labels';\nimport type { ReplyRef } from './config';\nimport { Message, MessageContent, MessageFooter } from '@/components/ui/message';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from '@/components/ui/attachment';\nimport { Badge } from '@/components/ui/badge';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\n\nexport interface RowContext {\n  readonly developer: boolean;\n  /** `presentation=\"natural\"`: no \"working\" shimmer in a reply (the chat shows one status instead). */\n  readonly natural?: boolean | undefined;\n  readonly groupTool: DeriveOptions['groupTool'];\n  readonly commandMentions: CommandMentions | undefined;\n  readonly onOpenImage: ((image: ImageContent) => void) | undefined;\n  readonly onCopy: ((text: string) => Promise<void>) | undefined;\n  /** Which tokens of a sent message get a styled treatment (`@path` mentions, a leading `/skill`). */\n  readonly pieces: { readonly mentions: boolean; readonly uploads?: boolean; readonly skills: readonly string[]; readonly openMention?: ((path: string) => void) | undefined; readonly renderMention?: ((path: string) => ReactNode | undefined) | undefined;\n    readonly preview?: PreviewRead | undefined; readonly audioUrl?: AudioUrlRead | undefined } | undefined;\n  readonly fileChanges?: boolean | undefined;\n  /** Opens a file card through the host's workspace opener. */\n  readonly openFile?: ((path: string) => void) | undefined;\n  readonly answer: ((questionId: string, answer: string) => Promise<AnswerOutcome>) | undefined;\n  readonly artifacts: { readonly open: ArtifactsConfig['open']; readonly isOpen?: ArtifactsConfig['isOpen'] | undefined; readonly kinds?: ArtifactsConfig['kinds'] } | undefined;\n  /** Replaces the default copy button under a settled reply (the ambient window adds feedback and the time); `host` holds the host's message actions. */\n  readonly replyActions?: ((reply: { readonly key: string; readonly text: string; readonly timestamp?: number | undefined }, host: ReactNode) => ReactNode) | undefined;\n  /** The host's actions for a settled reply (`messageActions`). */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  readonly historicalMessageActions?: boolean | undefined;\n  /** Host-owned per-answer unread indicator; rendering never marks an answer seen. */\n  readonly unread?: ((reply: ReplyRef) => ReactNode) | undefined;\n  readonly replyError?: ((reply: ReplyRef) => ReactNode) | undefined;\n  /** A line under a finished reply (not while it streams, runs a tool or waits to retry), after its actions (a host shows which model answered and how long it took). */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n  /** Fork the conversation after a settled reply (its last native entry): adds a Fork button next to Copy. */\n  readonly onFork?: ((entryId: string) => void) | undefined;\n}\n\nconst replyRef = (row: Extract<Row, { type: 'assistant' }>): ReplyRef => ({ key: row.key, text: row.text, entryId: row.entryId, timestamp: row.timestamp, model: row.model, durationMs: row.durationMs });\n\nfunction Image({ image, onOpenImage }: { readonly image: ImageContent; readonly onOpenImage: RowContext['onOpenImage'] }) {\n  const { labels } = useChatText();\n  const src = thumbnail(image.mimeType, image.data);\n  return <Attachment orientation=\"vertical\">\n    <AttachmentMedia variant={src ? 'image' : 'icon'}>{src ? <img src={src} alt={labels.imageAttachment} /> : <ImageIcon aria-hidden=\"true\" />}</AttachmentMedia>\n    <AttachmentContent><AttachmentTitle>{labels.imageAttachment}</AttachmentTitle></AttachmentContent>\n    <AttachmentTrigger data-testid=\"message-image\" disabled={!onOpenImage} aria-label={labels.openImage} onClick={() => onOpenImage?.(image)} />\n  </Attachment>;\n}\n\n/** Inline sent mention; workspace openers and host renderers keep their existing authority. */\nfunction UserMention({ path, text, open, render }: { readonly path: string; readonly text: string; readonly open: ((path: string) => void) | undefined; readonly render: ((path: string) => ReactNode | undefined) | undefined }) {\n  const custom = render?.(path);\n  if (custom !== undefined) return <>{custom}</>;\n  return open\n    ? <span role=\"link\" tabIndex={0} className=\"font-medium text-primary\" data-testid=\"message-mention\" data-path={path} aria-label={`Open ${path}`} onClick={() => open(path)} onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); open(path); } }}>{text}</span>\n    : <span className=\"font-medium text-primary\" data-testid=\"message-mention\" data-path={path}>{text}</span>;\n}\n\n/** The icon a file card shows for its kind. */\nfunction FileGlyph({ kind }: { readonly kind: FileKind }) {\n  switch (kind) {\n    case 'image': return <ImageIcon aria-hidden=\"true\" />;\n    case 'sheet': return <FileSpreadsheetIcon aria-hidden=\"true\" />;\n    case 'audio': return <FileAudioIcon aria-hidden=\"true\" />;\n    case 'slides': return <PresentationIcon aria-hidden=\"true\" />;\n    case 'document': return <FileTextIcon aria-hidden=\"true\" />;\n    default: return <FileIcon aria-hidden=\"true\" />;\n  }\n}\n\n/** A file a person sent (an `uploads/` mention): its icon or thumbnail, name and type. A button when it can be opened. */\nfunction FileCard({ path, open, preview, change }: { readonly path: string; readonly open: ((path: string) => void) | undefined; readonly preview: PreviewRead | undefined; readonly change?: 'created' | 'edited' }) {\n  const { labels } = useChatText();\n  const kind = fileKind(path), name = change ? path.split('/').pop() || path : displayName(path);\n  const [src, setSrc] = useState<string | undefined>();\n  // A thumbnail belongs to the provider that read it: a new provider, or a read that is refused or unavailable, shows the icon.\n  useEffect(() => {\n    setSrc(undefined);\n    if (kind !== 'image' || !preview) return;\n    const abort = new AbortController();\n    preview(path, abort.signal).then(\n      read => { if (!abort.signal.aborted) setSrc(read ? thumbnail(read.mimeType, read.data) : undefined); },\n      () => { if (!abort.signal.aborted) setSrc(undefined); });\n    return () => abort.abort();\n  }, [kind, path, preview]);\n  return <Attachment className=\"max-w-64\" {...(!open ? { 'data-testid': 'message-mention', 'data-path': path } : {})}>\n    <AttachmentMedia variant={src ? 'image' : 'icon'}>{src ? <img src={src} alt=\"\" /> : <FileGlyph kind={kind} />}</AttachmentMedia>\n    <AttachmentContent>\n      <AttachmentTitle>{name}</AttachmentTitle>\n      <AttachmentDescription>{change ? labels.fileChange[change] : labels.fileKind[kind]}</AttachmentDescription>\n    </AttachmentContent>\n    {open && <AttachmentTrigger data-testid=\"message-mention\" data-path={path} aria-label={labels.openFile(name)} onClick={() => open(path)} />}\n  </Attachment>;\n}\n\n/** The file cards of a message, above its text bubble. */\nfunction FileCards({ paths, open, preview }: { readonly paths: readonly string[]; readonly open: ((path: string) => void) | undefined; readonly preview: PreviewRead | undefined }) {\n  return <ul data-testid=\"message-files\" className=\"m-0 flex max-w-[85%] list-none flex-wrap justify-end gap-2 p-0\">\n    {paths.map(path => <li key={path} data-testid=\"message-file\"><FileCard path={path} open={open} preview={preview} /></li>)}\n  </ul>;\n}\n\n/** Retained audio is read only on Play, through the same authorized workspace preview as file cards. */\nexport function VoiceBubble({ path, transcript, preview, audioUrl, align = 'end' }: { readonly path: string; readonly transcript: ReactNode; readonly preview: PreviewRead | undefined; readonly audioUrl: AudioUrlRead | undefined; readonly align?: 'start' | 'end' }) {\n  const { labels } = useChatText();\n  const audio = useRef<HTMLAudioElement>(null), work = useRef<AbortController | null>(null), loadingRequest = useRef(false);\n  const [playing, setPlaying] = useState(false), [loading, setLoading] = useState(false), [failed, setFailed] = useState(false), [duration, setDuration] = useState<number>();\n  const source = useRef<string | undefined>(undefined), loader = useRef<() => Promise<boolean>>(async () => false);\n  useEffect(() => {\n    const element = audio.current;\n    let objectUrl: string | undefined;\n    source.current = undefined; loadingRequest.current = false; setPlaying(false); setLoading(false); setFailed(false); setDuration(undefined);\n    const release = () => { if (objectUrl) { URL.revokeObjectURL(objectUrl); objectUrl = undefined; } };\n    const abort = new AbortController(); work.current = abort;\n    const load = async () => {\n      release();\n      const signed = await audioUrl?.(path, abort.signal);\n      if (abort.signal.aborted) return;\n      if (signed) {\n        const url = new URL(signed, window.location.href);\n        if (url.protocol !== 'https:' && url.protocol !== 'http:') throw new Error('Unsupported audio URL');\n        source.current = url.href;\n      } else {\n        const read = await preview?.(path, abort.signal);\n        if (abort.signal.aborted) return;\n        if (!read || !/^audio\\/(?:webm|ogg|mp4|m4a|x-m4a|mpeg|mp3|wav|x-wav)(?:;|$)/i.test(read.mimeType)) throw new Error('Audio unavailable');\n        const bytes = Uint8Array.from(atob(read.data), character => character.charCodeAt(0));\n        // MediaRecorder WebM often has no finite metadata duration; decode only these already-requested bytes.\n        try {\n          if (typeof OfflineAudioContext === 'function') void new OfflineAudioContext(1, 1, 48_000).decodeAudioData(bytes.slice().buffer).then(buffer => {\n            if (!abort.signal.aborted && Number.isFinite(buffer.duration)) setDuration(Math.round(buffer.duration));\n          }).catch(() => {});\n        } catch { /* Optional duration decoding must not prevent native playback. */ }\n        objectUrl = URL.createObjectURL(new Blob([bytes], { type: read.mimeType })); source.current = objectUrl;\n      }\n      if (element && source.current) element.src = source.current;\n    };\n    // A loader belongs to this path/provider epoch, not to a later row with the same DOM node.\n    loader.current = async () => { await load(); return !abort.signal.aborted; };\n    return () => { abort.abort(); if (work.current === abort) work.current = null; element?.pause(); element?.removeAttribute('src'); element?.load(); source.current = undefined; release(); };\n  }, [path, preview, audioUrl]);\n  const toggle = async () => {\n    const element = audio.current, abort = work.current;\n    if (!element || !abort || loadingRequest.current) return;\n    if (!element.paused) { element.pause(); return; }\n    loadingRequest.current = true; setFailed(false); setLoading(true);\n    try {\n      if (!source.current && !await loader.current()) return;\n      if (!abort.signal.aborted) await element.play();\n    } catch { if (!abort.signal.aborted) setFailed(true); }\n    finally { if (work.current === abort && !abort.signal.aborted) { loadingRequest.current = false; setLoading(false); } }\n  };\n  return <Bubble variant=\"muted\" align={align} data-testid=\"voice-bubble\"><BubbleContent>\n    <div className=\"flex items-center gap-2\">\n      <Button variant=\"ghost\" size=\"icon\" data-testid=\"voice-play\" aria-label={playing ? labels.voicePause : labels.voicePlay} disabled={loading || (!preview && !audioUrl)} onClick={() => { void toggle(); }}>\n        {loading ? <Spinner data-icon=\"inline-start\" aria-hidden=\"true\" /> : playing ? <PauseIcon data-icon=\"inline-start\" aria-hidden=\"true\" /> : <PlayIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}\n      </Button>\n      <span data-testid=\"voice-duration\">{duration === undefined ? '--:--' : voiceClock(duration)}</span>\n      <audio ref={audio} preload=\"none\" onPlay={() => { setPlaying(true); setFailed(false); }} onPause={() => setPlaying(false)} onEnded={() => {\n        setPlaying(false); const element = audio.current;\n        if (element && !Number.isFinite(element.duration) && Number.isFinite(element.currentTime)) setDuration(Math.round(element.currentTime));\n      }} onError={() => { setFailed(true); setPlaying(false); source.current = undefined; }} onDurationChange={() => {\n        const element = audio.current; if (element && Number.isFinite(element.duration)) setDuration(Math.round(element.duration));\n      }} onLoadedMetadata={() => {\n        const element = audio.current; if (element && Number.isFinite(element.duration)) setDuration(Math.round(element.duration));\n      }} />\n    </div>\n    {failed && <p role=\"alert\">{labels.voicePlayFailed}</p>}\n    {transcript && <div data-testid=\"user-text\" className=\"whitespace-pre-wrap\">{transcript}</div>}\n  </BubbleContent></Bubble>;\n}\n\n/**\n * A text part of a sent message. Its `uploads/` mentions become file cards above the bubble and leave the text; the message content keeps\n * them (only what is drawn changes).\n */\nexport function MessageText({ text, context, align = 'end' }: { readonly text: string; readonly context: Pick<RowContext, 'pieces' | 'openFile'>; readonly align?: 'start' | 'end' }) {\n  const target = targetContent(text);\n  if (target) return <>\n    <Badge variant=\"secondary\" data-testid=\"message-target\" title={JSON.stringify(target.target)} className=\"max-w-full truncate\">{target.label}</Badge>\n    <MessageText text={target.speech} context={context} align={align} />\n  </>;\n  const open = context.pieces?.openMention;\n  const render = context.pieces?.renderMention;\n  const styledUploads = Boolean(context.pieces?.mentions || context.pieces?.uploads);\n  const all = pieces(text, { mentions: context.pieces?.mentions ?? false, uploads: true, skills: context.pieces?.skills ?? [] }).map((piece): Piece =>\n    !styledUploads && piece.kind === 'mention' && isUploadPath(piece.value!) && !isVoicePath(piece.value!) ? { text: piece.text } : piece);\n  const isFile = (piece: Piece) => piece.kind === 'mention' && isUploadPath(piece.value!);\n  const files = all.filter(isFile).map(piece => piece.value!);\n  const voice = files.find(isVoicePath), cards = files.filter(path => path !== voice);\n  if (!context.pieces && !voice) return <Bubble variant=\"muted\" align={align}><BubbleContent data-testid=\"user-text\"><span className=\"whitespace-pre-wrap\">{text}</span></BubbleContent></Bubble>;\n  const shown = files.length ? visibleParts(all, isFile) : all;\n  const empty = shown.every(piece => piece.kind === undefined && piece.text === '');\n  const content = shown.map((piece, at) => piece.kind === 'mention'\n    ? <UserMention key={at} path={piece.value!} text={piece.text} open={open} render={render} />\n    : piece.kind === 'skill' ? <Badge key={at} variant=\"secondary\" data-testid=\"message-skill\" data-skill={piece.value}>{piece.text}</Badge>\n    : piece.text);\n  return <>\n    {cards.length > 0 && <FileCards paths={cards} open={context.openFile ?? open} preview={context.pieces?.preview} />}\n    {voice ? <VoiceBubble path={voice} transcript={empty ? null : content} preview={context.pieces?.preview} audioUrl={context.pieces?.audioUrl} align={align} />\n      : !(files.length > 0 && empty) && <Bubble variant=\"muted\" align={align}><BubbleContent data-testid=\"user-text\"><span className=\"whitespace-pre-wrap\">{content}</span></BubbleContent></Bubble>}\n  </>;\n}\n\nfunction UserBubble({ message, context, align = 'end' }: { readonly message: UserMessage; readonly context: RowContext; readonly align?: 'start' | 'end' }) {\n  const parts = typeof message.content === 'string' ? [{ type: 'text' as const, text: message.content }] : message.content;\n  return <Message align={align}><MessageContent>\n    {parts.map((part, index) => part.type === 'text' ? (isFileBlock(part.text) ? null : <MessageText key={index} text={part.text} context={context} align={align} />)\n      : <Image key={index} image={part} onOpenImage={context.onOpenImage} />)}\n  </MessageContent></Message>;\n}\n\nfunction Notice({ tone, icon, children, testid }: { readonly tone: 'error' | 'muted'; readonly icon: ReactNode; readonly children: ReactNode; readonly testid: string }) {\n  return <Alert variant={tone === 'error' ? 'destructive' : 'default'} role={tone === 'error' ? 'alert' : 'status'} data-testid={testid}>\n    {icon}<AlertDescription>{children}</AlertDescription>\n  </Alert>;\n}\n\nfunction resultText(message: ToolResultMessage): string { return message.content.map(part => part.type === 'text' ? part.text : '').join('\\n'); }\n\nexport function RowView({ row, context }: { readonly row: Row; readonly context: RowContext }) {\n  return <RowBody row={row} context={context} />;\n}\n\nfunction RowBody({ row, context: liveContext }: { readonly row: Row; readonly context: RowContext }) {\n  const context: RowContext = row.historical ? { ...liveContext, answer: undefined, onFork: undefined, messageActions: liveContext.historicalMessageActions ? liveContext.messageActions : undefined, replyActions: undefined, commandMentions: undefined } : liveContext;\n  const { labels, icons } = useChatText();\n  const renderMention = useMemo(() => context.pieces?.mentions ? (path: string, text: string) => <UserMention path={path} text={text} open={context.pieces?.openMention} render={context.pieces?.renderMention} /> : undefined, [context.pieces]);\n  switch (row.type) {\n    case 'user': return <article data-row-id={row.key} data-role=\"user\" aria-live={row.historical ? 'off' : undefined}><UserBubble message={row.message} context={context} /></article>;\n    case 'card': return <article data-row-id={row.key} data-role=\"event\">{row.card.content}</article>;\n    case 'event': return <article data-row-id={row.key} data-role=\"event\" className=\"text-center text-xs text-muted-foreground\">{labels.event(row.label)}</article>;\n    case 'system': return <article data-row-id={row.key} data-role=\"system\"><Collapsible>\n      <CollapsibleTrigger render={<Button variant=\"ghost\" />}>{labels.systemContext}</CollapsibleTrigger>\n      <CollapsibleContent><pre className=\"whitespace-pre-wrap\">{row.text}</pre></CollapsibleContent>\n    </Collapsible></article>;\n    case 'orphan-result': return <article data-row-id={row.key} data-role=\"toolResult\"><Notice tone=\"error\" testid=\"tool-error\" icon={<AlertCircleIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />}>\n      <strong className=\"font-semibold\">{labels.toolFailed(row.message.toolName)}</strong><span className=\"mt-1 block font-mono text-xs whitespace-pre-wrap\">{resultText(row.message)}</span></Notice></article>;\n    case 'assistant': {\n      const settled = !row.streaming;\n      const nativeActions = settled;\n      const files = new Map<string, 'created' | 'edited'>();\n      if (context.fileChanges) for (const part of row.parts) {\n        if (part.kind !== 'tool' || part.entry.status !== 'completed') continue;\n        const { call, result } = part.entry;\n        const path = call.arguments['path'];\n        if (!result || result.isError || result.toolName !== call.name || (call.name !== 'write' && call.name !== 'edit') || typeof path !== 'string' || !path.trim()) continue;\n        const normalized = path.replace(/^(\\.\\/)+/, '');\n        if (normalized) files.set(normalized, files.get(normalized) === 'created' || call.name === 'write' ? 'created' : 'edited');\n      }\n      const chunks = segments(row.parts, context.groupTool);\n      const active = row.active === true || row.streaming;\n      const lastText = [...row.parts].reverse().find(part => part.kind === 'text');\n      const host = nativeActions && row.text && context.messageActions\n        ? <BlockActions iconOnly actions={context.messageActions(replyRef(row))} testId=\"reply-action\" menuLabel={labels.moreActions} />\n        : null;\n      const unread = nativeActions && row.text ? context.unread?.(replyRef(row)) : null;\n      const footer = nativeActions && !row.active && row.text ? context.replyFooter?.(replyRef(row)) : null;\n      return <article data-row-id={row.key} data-role=\"assistant\" aria-live={row.historical ? 'off' : undefined} data-streaming={row.streaming ? 'true' : undefined} className=\"group/message\">\n        <Message><MessageContent>\n        <div className=\"flex flex-col gap-3\">\n          {chunks.map((chunk, at) => {\n            if (chunk.kind === 'activity') {\n              const failed = chunk.steps.some(step => step.kind === 'tool' && step.entry.status === 'failed');\n              const unfinished = chunk.steps.some(step => step.kind === 'tool' && step.entry.status === 'unfinished');\n              const state: ActivityState = failed || row.stopReason === 'error' ? 'failed' : row.stopReason === 'aborted' || (!active && unfinished) ? 'stopped' : active && at === chunks.length - 1 ? 'running' : 'done';\n              return <ActivityBlock key={chunk.key} steps={chunk.steps} state={state} streaming={row.streaming} developer={context.developer} {...(context.onOpenImage ? { onOpenImage: context.onOpenImage } : {})} />;\n            }\n            const part = chunk.part;\n            if (part.kind === 'card') return <div key={part.key}>{part.content}</div>;\n            if (part.kind === 'text') return <Bubble key={part.key} variant=\"ghost\"><BubbleContent><Markdown text={part.text} renderMention={renderMention} streaming={row.streaming && part === lastText && row.parts[row.parts.length - 1] === part}\n              {...(settled && context.commandMentions ? { commandMentions: context.commandMentions } : {})} {...(context.onCopy ? { onCopy: context.onCopy } : {})} /></BubbleContent></Bubble>;\n            if (part.kind === 'thinking') return null; // reasoning is a step of an activity block\n            if (part.kind === 'approval') return <ApprovalCard key={part.key} call={part.call} result={part.result} questionId={part.questionId} answer={context.answer} summary={part.summary} decision={part.decision} live={part.live} />;\n            if (part.kind === 'question') return <QuestionCard key={part.key} call={part.call} result={part.result} questionId={part.questionId} answer={context.answer} live={part.live} />;\n            if (part.kind === 'artifact' && part.artifact && files.has(part.artifact.target.resource.path.replace(/^(\\.\\/)+/, ''))) return null;\n            if (part.kind === 'artifact') return <ArtifactCard key={part.key} artifact={part.artifact} title={part.title} {...(part.state === 'ready' ? {} : { pending: part.state })}\n              open={part.artifact !== undefined && (context.artifacts?.isOpen?.(part.artifact) ?? false)} onOpen={context.artifacts?.open} kinds={context.artifacts?.kinds} />;\n            return part.entry.custom ? <div key={part.key}>{part.entry.custom}</div> : <ToolCard key={part.key} entry={part.entry} {...(context.onOpenImage ? { onOpenImage: context.onOpenImage } : {})} />;\n          })}\n          {files.size > 0 && <ul data-testid=\"reply-files\" className=\"m-0 flex list-none flex-wrap gap-2 p-0\">\n            {[...files].map(([path, change]) => <li key={path} data-testid=\"message-file\"><FileCard path={path} change={change} open={context.openFile} preview={context.pieces?.preview} /></li>)}\n          </ul>}\n          {row.streaming && row.parts.length === 0 && !context.natural && <p data-testid=\"working\" className=\"m-0 text-sm\"><Shimmer>{labels.thinking}</Shimmer></p>}\n        </div>\n        {row.stopReason === 'error' && <Notice tone=\"error\" testid=\"response-error\" icon={<AlertCircleIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />}>{context.replyError?.(replyRef(row)) ?? row.errorMessage ?? labels.responseFailed}</Notice>}\n        {row.stopReason === 'aborted' && <Notice tone=\"muted\" testid=\"interrupted\" icon={<CircleSlashIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />}>{labels.interrupted}</Notice>}\n        {unread != null && unread !== false && <div data-testid=\"reply-unread\" className=\"flex flex-col items-start\">{unread}</div>}\n        {nativeActions && row.text && context.replyActions?.({ key: row.key, text: row.text, timestamp: row.timestamp }, host)}\n        {nativeActions && row.text && !context.replyActions && <div className=\"mt-1 -ml-2 flex opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 pointer-coarse:opacity-100 max-sm:opacity-100 motion-reduce:transition-none\">\n          <CopyButton iconOnly text={row.text} label={labels.copyResponse} {...(context.onCopy ? { onCopy: context.onCopy } : {})} />\n          {context.onFork && row.entryId && <Button size=\"icon-sm\" variant=\"ghost\" aria-label={labels.fork} title={labels.forkHint} data-testid=\"fork-reply\"\n            onClick={() => context.onFork!(row.entryId!)}><icons.fork data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n          {host}</div>}\n        {footer != null && footer !== false && <MessageFooter>{footer}</MessageFooter>}\n        </MessageContent></Message>\n      </article>;\n    }\n  }\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/message.tsx"
     },
     {
       "path": "registry/pi-chat/notice.tsx",
-      "content": "'use client';\n\nimport type { ReactNode } from 'react';\nimport type { NativeChatSnapshot } from '@hachej/boring-ui-kit/native-chat';\nimport { Button } from '@/components/ui/button';\nimport { Alert } from '@/components/ui/alert';\nimport { useChatText } from './labels';\n\nexport function Notice({ tone = 'error', children, testid }: { readonly tone?: 'error' | 'info'; readonly children: ReactNode; readonly testid?: string }) {\n  return <Alert variant={tone === 'error' ? 'destructive' : 'default'} role={tone === 'error' ? 'alert' : 'status'} {...(testid ? { 'data-testid': testid } : {})}\n    className=\"flex flex-wrap items-center gap-2\">{children}</Alert>;\n}\n\n/** What went wrong with sending or stopping, and the recovery for an unknown submission. Shared by every chat surface. */\nexport function ChatNotices({ state, error, onReconcile, onRetry }: {\n  readonly state: Pick<NativeChatSnapshot, 'send' | 'stop'>;\n  readonly error: string | null;\n  readonly onReconcile: () => void;\n  readonly onRetry: () => void;\n}) {\n  const { labels } = useChatText();\n  return <>\n    {error && <Notice testid=\"chat-error\">{error}</Notice>}\n    {state.send.kind === 'blocked' && <Notice testid=\"send-blocked\">{state.send.reason}</Notice>}\n    {state.send.kind === 'unknown' && <Notice testid=\"send-unknown\"><span className=\"flex-1\">{labels.sendUnknown}</span>\n      <Button size=\"sm\" variant=\"outline\" onClick={onReconcile}>{labels.checkSubmission}</Button>\n      <Button size=\"sm\" variant=\"outline\" onClick={onRetry}>{labels.retrySame}</Button></Notice>}\n    {state.stop === 'requested' && <Notice tone=\"info\" testid=\"stop-requested\">{labels.stopRequested}</Notice>}\n    {state.stop === 'unconfirmed' && <Notice testid=\"stop-unconfirmed\">{labels.stopUnconfirmed}</Notice>}\n  </>;\n}\n",
+      "content": "'use client';\n\nimport type { ReactNode } from 'react';\nimport type { ChatSnapshot } from '@hachej/boring-ui-kit/native-chat';\nimport { Button } from '@/components/ui/button';\nimport { Alert } from '@/components/ui/alert';\nimport { Shimmer } from './shimmer';\nimport { useChatText } from './labels';\n\nexport function Notice({ tone = 'error', children, testid }: { readonly tone?: 'error' | 'info'; readonly children: ReactNode; readonly testid?: string }) {\n  return <Alert variant={tone === 'error' ? 'destructive' : 'default'} role={tone === 'error' ? 'alert' : 'status'} {...(testid ? { 'data-testid': testid } : {})}\n    className=\"flex flex-wrap items-center gap-2\">{children}</Alert>;\n}\n\n/** What went wrong with sending or stopping, and the recovery for an unknown submission. Shared by every chat surface. */\nexport function ChatNotices({ state, error, onReconcile, onRetry, natural = false }: {\n  readonly state: Pick<ChatSnapshot, 'send' | 'stop'>;\n  readonly error: string | null;\n  readonly onReconcile: () => void;\n  readonly onRetry: () => void;\n  /** `presentation=\"natural\"`: a blocked send shows a plain label, not the controller's reason. */\n  readonly natural?: boolean;\n}) {\n  const { labels } = useChatText();\n  return <>\n    {error && <Notice testid=\"chat-error\">{error}</Notice>}\n    {state.send.kind === 'blocked' && <Notice testid=\"send-blocked\">{natural ? labels.sendUnavailable : state.send.reason}</Notice>}\n    {state.send.kind === 'unknown' && <Notice testid=\"send-unknown\"><span className=\"flex-1\">{'reason' in state.send ? state.send.reason : labels.sendUnknown}</span>\n      <Button size=\"sm\" variant=\"outline\" onClick={onReconcile}>{labels.checkSubmission}</Button>\n      {(!('retryable' in state.send) || state.send.retryable) && <Button size=\"sm\" variant=\"outline\" onClick={onRetry}>{labels.retrySame}</Button>}</Notice>}\n    {state.stop === 'requested' && <Notice tone=\"info\" testid=\"stop-requested\">{labels.stopRequested}</Notice>}\n    {state.stop === 'unconfirmed' && <Notice testid=\"stop-unconfirmed\">{labels.stopUnconfirmed}</Notice>}\n  </>;\n}\n\n/** `presentation=\"natural\"`: whether the one \"preparing\" status shows. Any work (a run, a retry, a compaction) counts, except a confirmed stop with no run left; a question waiting for the person does not. */\nexport function preparing(input: { readonly natural: boolean; readonly waitingForAnswer: boolean; readonly run: unknown; readonly retry: unknown; readonly compacting: boolean; readonly stop: ChatSnapshot['stop'] }): boolean {\n  const { natural, waitingForAnswer, run, retry, compacting, stop } = input;\n  return natural && !waitingForAnswer && Boolean(run || retry || compacting) && !(stop === 'confirmed' && !run);\n}\n\n/** The one status line of natural presentation. */\nexport function PreparingStatus({ children }: { readonly children?: ReactNode }) {\n  const { labels } = useChatText();\n  return <p role=\"status\" data-testid=\"preparing\" className=\"m-0 flex items-center gap-2 px-1 text-xs text-muted-foreground\"><Shimmer>{children ?? labels.preparing}</Shimmer></p>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/notice.tsx"
     },
     {
       "path": "registry/pi-chat/pi-chat.tsx",
-      "content": "'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { Loader2Icon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { MessageScroller, MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton } from '@/components/ui/message-scroller';\nimport { BlockActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { Composer } from './composer';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport { ConversationFiles } from './conversation-files';\nimport type { ConversationsConfig } from './config';\nimport { EmptyState } from './empty-state';\nimport type { Suggestion } from './empty-state';\nimport { ConversationHistory, TranscriptHistory } from './history';\nimport { RowView } from './message';\nimport { MessageQueue } from './queue';\nimport { ChatNotices, Notice } from './notice';\nimport { Shimmer } from './shimmer';\nimport { useChatSession, useTranscript } from './session';\nimport { useChatDraft } from './use-chat-draft';\nimport { useChatPlacement } from './use-remote-chat';\nimport type { ChatPlacement } from './use-remote-chat';\nimport type { ChatFeatureProps, FilesHandler } from './session';\nimport { ChatTextProvider, useChatText, useMergedText } from './labels';\nimport { chatTextFor } from './locale';\nimport type { ChatLocale } from './locale';\nimport type { ChatIcons, ChatLabels } from './labels';\nimport { cn } from '../utils/utils';\n\nexport type { PiChatActions } from './session';\nexport type { ChatCard, Mode } from './rows';\nexport type { AnswerOutcome } from './question-card';\nexport { artifactKey, artifactKind, collectArtifacts, detectArtifact, parseArtifact, typeLabel } from './artifact';\nexport type { ArtifactDescriptor, ArtifactKind, ArtifactKindViewProps, ArtifactsConfig, ArtifactTarget, ArtifactType } from './artifact';\nexport { QuestionCard, formAnswer, parseQuestion, ASK_USER_TOOL } from './question-card';\nexport type { FormQuestion } from './question-card';\nexport { ChatTextProvider } from './labels';\nexport type { CommandMention, CommandMentions } from './markdown';\nexport type { Suggestion } from './empty-state';\nexport { ConversationList, relativeTime } from './history';\nexport { defaultChatIcons, defaultChatLabels } from './labels';\nexport type { ChatIcons, ChatLabels } from './labels';\nexport { frenchChatLabels } from './labels-fr';\nexport { chatTextFor } from './locale';\nexport type { ChatLocale } from './locale';\nexport { BlockActions } from '../button/actions';\nexport { useChatDraft } from './use-chat-draft';\nexport { useConversations } from './use-conversations';\nexport { RunCard, parseRun } from './run-card';\nexport type { RunRecord, RunStatus } from './run-card';\nexport type { BlockAction, BlockIcon } from '../button/actions';\nexport type { AttachmentsConfig, ConversationItem, ConversationsConfig, EffortConfig, FileKind, MentionResult, MentionsConfig, ModelConfig, ModelRef, PasteToFile, PreviewRead, ReplyRef, SlashApi, SlashCommand, SlashConfig, SlashSkill, UploadResult } from './config';\n\nexport interface PiChatProps extends ChatFeatureProps {\n  readonly controller: NativeChatController;\n  /** Where this chat is shown, reported with each submit (advisory, never authority). `docked` by default; a host that floats or tucks the same chat in a drawer says `floating`. */\n  readonly placement?: ChatPlacement | undefined;\n  /** Every word the chat shows (title, placeholder, buttons, notices, empty states): a partial object over `defaultChatLabels`. */\n  /** The chat's language: `en` (default) or `fr`. `labels` override any of its words. */\n  readonly locale?: ChatLocale | undefined;\n  readonly labels?: Partial<ChatLabels> | undefined;\n  /** The chat's icons (send, stop, history, attach, …): any component taking `className`, over `defaultChatIcons`. */\n  readonly icons?: Partial<ChatIcons> | undefined;\n  /** The agent's avatar (an image or an icon) before the title in the header, and in the empty state instead of the agent icon. */\n  readonly avatar?: ReactNode;\n  /** Host actions in the header beside History: `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids `chat-action-<id>`, the menu `chat-action-more`. */\n  readonly headerActions?: readonly BlockAction[] | undefined;\n  /** `false` lets the host supply one shared header around chat and viewers. Default true. */\n  readonly header?: boolean;\n  readonly className?: string;\n  /** Pad the chat's bottom by how far it reaches below the visual viewport (the phone's soft keyboard). Default true; `false` for a host that already follows the keyboard itself, such as a bottom drawer whose lower part sits off screen by design. */\n  readonly keyboardInset?: boolean;\n  readonly decisions?: ReactNode;\n  readonly controls?: ReactNode;\n  /** Host controls at the end of the composer bar (for example a microphone), like AmbientChat's tools slot. */\n  readonly tools?: ReactNode;\n  /** Host content under the composer (for example a collapsed list of the person's requests). Absent: nothing is shown. */\n  readonly belowComposer?: ReactNode;\n  /** Rendered before the title in the header (for example a menu button on narrow screens). */\n  readonly headerStart?: ReactNode;\n  readonly onFiles?: FilesHandler;\n  /** Shown instead of the default empty state before the first message. */\n  readonly emptyState?: ReactNode;\n  readonly suggestions?: readonly Suggestion[];\n  /** Past conversations. The header's History button then opens a searchable list with the open one marked and a New action. Omit it and History pages through the earlier records of this conversation. */\n  readonly conversations?: ConversationsConfig;\n  /**\n   * `false`: the host shows `conversations` itself (for example the `pi-app` sessions pane), so History pages through the earlier records of this\n   * conversation while replies keep their Fork button (`conversations.fork`). Default `true`: History opens the list.\n   */\n  readonly historyList?: boolean;\n  /** Show the header History button. Default true; paging remains available through the controller. */\n  readonly showHistory?: boolean;\n  /** Empty desktop composition. `centered` puts the composer beneath the greeting; `docked` keeps the former layout. Phones always dock it. */\n  readonly emptyLayout?: 'centered' | 'docked';\n  /** Two-row reference composer by default. Explicitly select `pill`, `stacked` or `inline` for the earlier layouts. */\n  readonly composerLayout?: ComposerProps['layout'];\n  /** A conversation title, separate from the agent name, with optional click-to-rename. */\n  readonly conversationTitle?: string | undefined;\n  readonly onRenameTitle?: ((title: string) => void | Promise<void>) | undefined;\n  /** Show the header connection badge. Default false; connection state still controls actions and failures stay visible. */\n  readonly showConnectionStatus?: boolean;\n  /** The optional annotate toggle and notes chip in the composer (the registry `feedback` item's `useComposerFeedback`). Omit it and nothing changes. */\n  readonly feedback?: ComposerFeedback;\n  /** Keeps the composer's half-typed message in localStorage under this key (a conversation id), across reloads and tabs; see `useChatDraft`. Omit it and nothing is stored. */\n  readonly draftKey?: string | undefined;\n}\n\nconst PAGE = 60, MORE = 40;\n\n/** Borrows a concrete native controller; unmount releases presentation and uploads only. */\nexport function PiChat(props: PiChatProps) {\n  const active = useRef(props.controller); active.current = props.controller;\n  const [mount, setMount] = useState({ controller: props.controller, sequence: 0 });\n  if (mount.controller !== props.controller) setMount({ controller: props.controller, sequence: mount.sequence + 1 });\n  const text = useMergedText(props.labels, props.icons, chatTextFor(props.locale));\n  return <ChatTextProvider value={text}><MessageScrollerProvider key={mount.sequence} autoScroll><PiChatSession {...props} activeController={active} /></MessageScrollerProvider></ChatTextProvider>;\n}\n\nfunction ConnectionBadge({ kind }: { readonly kind: string }) {\n  const { labels } = useChatText();\n  const live = kind === 'connected';\n  return <Badge variant={live ? 'outline' : 'secondary'} data-testid=\"connection\" data-state={kind} role=\"status\">\n    {live ? labels.live : kind === 'connecting' || kind === 'idle' ? labels.connecting : labels.reconnecting}\n  </Badge>;\n}\n\nfunction PiChatSession({ controller, placement = 'docked', mode = 'expert', className, keyboardInset = true, actions, avatar, headerActions, header = true, decisions, controls, tools, belowComposer, composerChips, headerStart, renderEntry, renderTool, groupTool, commandMentions,\n  onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept = 'image/*', emptyState, suggestions, messageActions, replyFooter, slash, mentions, attachments, model, effort, artifacts, conversations, historyList = true, showHistory = true, showConnectionStatus = false, emptyLayout = 'centered', composerLayout = 'card', conversationTitle, onRenameTitle, feedback, draftKey, onOpenFile, fileChanges, pasteToFile, activeController: active }: PiChatProps & { readonly activeController: { readonly current: NativeChatController } }) {\n  const { labels, icons } = useChatText();\n  useChatDraft(controller, draftKey);\n  useChatPlacement(controller, placement);\n  const { title } = labels;\n  const [pickingConversation, setPickingConversation] = useState(false);\n  const scrollToBottom = useRef<() => void>(() => {});\n  // A reply's Fork button calls the host's latest `fork`; the row context changes only when forking is switched on or off.\n  const fork = useRef(conversations?.fork); fork.current = conversations?.fork;\n  const canFork = Boolean(conversations?.fork);\n  const rowExtras = useMemo(() => canFork ? { onFork: (entryId: string) => { void fork.current?.(entryId).catch(() => {}); } } : undefined, [canFork]);\n  const session = useChatSession({ controller, activeController: active, mode, actions, renderEntry, renderTool, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend: () => scrollToBottom.current(), feedback, rowExtras, onOpenFile, fileChanges, pasteToFile, composerChips });\n  const { state, derived, rows, queued, queueActions, working, waitingForAnswer, connected, error, act, textarea, rowContext, composer, files, loading } = session;\n  const empty = session.empty;\n  const { pinned, retry } = derived;\n  const transcript = useTranscript(rows, PAGE, MORE, { state: state.history, connected: !state.disposed && connected, load: controller.loadEarlier });\n  const { stick, hidden } = transcript;\n  scrollToBottom.current = () => { transcript.reset(); void stick.scrollToBottom('instant'); };\n  const visible = transcript.visible(rows);\n  const { barStart, barNote } = session.pickers();\n  const connectionKind = state.connection.kind;\n  const [renamingTitle, setRenamingTitle] = useState(false);\n  const [titleError, setTitleError] = useState(false);\n  const page = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const viewport = globalThis.visualViewport;\n    if (!keyboardInset || !viewport) return;\n    const element = page.current;\n    if (!element) return;\n    const measure = () => element.style.setProperty('--composer-keyboard-inset', `${Math.max(0, element.getBoundingClientRect().bottom - viewport.height - viewport.offsetTop)}px`);\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);\n    observer?.observe(element);\n    measure(); viewport.addEventListener('resize', measure); viewport.addEventListener('scroll', measure);\n    return () => { observer?.disconnect(); viewport.removeEventListener('resize', measure); viewport.removeEventListener('scroll', measure); };\n  }, []);\n\n  return <section ref={page} data-boring=\"pi-chat\" data-connection={connectionKind} data-empty={empty && !loading ? emptyLayout : undefined} aria-label={title} className={cn('pi-chat relative box-border flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-background text-foreground ', keyboardInset && 'max-[641px]:pb-(--composer-keyboard-inset)', empty && emptyLayout === 'centered' && 'min-[641px]:justify-center', className)}>\n    {header && <header className={cn(empty && emptyLayout === 'centered' && 'min-[641px]:absolute min-[641px]:inset-x-0 min-[641px]:top-0', 'flex h-13 shrink-0 items-center gap-2 px-3 sm:gap-3 sm:px-4')}>\n      {headerStart}\n      {avatar && <Avatar data-testid=\"chat-avatar\" className=\"overflow-hidden\"><AvatarFallback className=\"*:max-h-full *:max-w-full\">{avatar}</AvatarFallback></Avatar>}\n      {renamingTitle && onRenameTitle ? <form className=\"min-w-0 flex-1\" onSubmit={event => { event.preventDefault(); const value = new FormData(event.currentTarget).get('title')?.toString().trim(); if (value) { setTitleError(false); void Promise.resolve().then(() => onRenameTitle(value)).catch(() => setTitleError(true)); } setRenamingTitle(false); }}>\n        <Input name=\"title\" aria-label={labels.conversationName} maxLength={200} autoFocus defaultValue={conversationTitle ?? title} onBlur={() => setRenamingTitle(false)} onKeyDown={event => { if (event.key === 'Escape') setRenamingTitle(false); }} className=\"w-full min-w-0\" />\n      </form> : <h2 className=\"m-0 min-w-0 flex-1 truncate font-(family-name:--chat-display) text-sm font-medium tracking-tight max-[641px]:text-center\">{onRenameTitle ? <Button variant=\"ghost\" className=\"max-w-full\" onClick={() => setRenamingTitle(true)}><span className=\"truncate\">{conversationTitle ?? title}</span></Button> : conversationTitle ?? title}</h2>}\n      {showHistory && conversations && historyList && <Button variant=\"ghost\" size=\"sm\" data-testid=\"history-open\" aria-haspopup=\"dialog\" aria-expanded={pickingConversation} disabled={state.disposed}\n        onClick={() => setPickingConversation(open => !open)}><icons.history data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.history}</Button>}\n      <BlockActions actions={headerActions} testId=\"chat-action\" menuLabel={labels.moreActions} />\n      {showConnectionStatus && <ConnectionBadge kind={connectionKind} />}\n      {controls}\n    </header>}\n\n    {titleError && <p role=\"alert\" className=\"m-0 shrink-0 px-4 py-2 text-sm text-destructive\">{labels.actionFailed}</p>}\n    {decisions && <><div data-boring=\"required-decisions\" className=\"shrink-0 px-4 py-2\">{decisions}</div><Separator /></>}\n    {pinned.length > 0 && <><aside aria-label={labels.requiredActions} className=\"shrink-0 space-y-2 px-4 py-2\">{pinned.map(card => <div key={card.key}>{card.content}</div>)}</aside><Separator /></>}\n    {(connectionKind === 'error' || connectionKind === 'closed') && <div className=\"shrink-0 px-4 pt-2\">\n      <Notice tone={connectionKind === 'error' ? 'error' : 'info'} testid=\"connection-notice\">\n        <span className=\"flex-1\">{connectionKind === 'error' ? labels.loadFailed : labels.disconnected}</span>\n        {!state.disposed && <Button size=\"sm\" variant=\"outline\" onClick={() => act(controller.connect)}><icons.reconnect data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.reconnect}</Button>}\n      </Notice></div>}\n    {pickingConversation && conversations && historyList && <ConversationHistory conversations={conversations} onClose={() => setPickingConversation(false)} />}\n\n    <div data-testid=\"conversation-content\" className={cn('relative min-h-0 flex-1', empty && emptyLayout === 'centered' && 'min-[641px]:min-h-60 min-[641px]:flex-none')}>\n      <MessageScroller>\n        <MessageScrollerViewport ref={stick.scrollRef} data-testid=\"transcript-scroll\" aria-label={labels.messages} className=\"scrollbar-thumb-border scrollbar-track-transparent\">\n          {!empty && <TranscriptHistory history={state.history} connected={!state.disposed && connected} onLoad={transcript.reveal} sentinelRef={transcript.sentinelRef} hidden={hidden} loaded={transcript.loaded} />}\n          <div className=\"mx-auto w-full max-w-[720px] px-4 pt-6 pb-8 sm:px-6\">\n          <MessageScrollerContent aria-label={labels.messages} aria-live=\"polite\" data-testid=\"transcript\">\n            {visible.map(row => <MessageScrollerItem key={row.key} messageId={row.key} className=\"[content-visibility:visible]\"><RowView row={row} context={rowContext} /></MessageScrollerItem>)}\n          </MessageScrollerContent>\n          </div>\n        </MessageScrollerViewport>\n        {!empty && !stick.isAtBottom && <MessageScrollerButton data-testid=\"jump-latest\" aria-label={labels.jumpToLatest} title={labels.jumpToLatest} onClick={transcript.reset}><icons.jumpToLatest aria-hidden=\"true\" /></MessageScrollerButton>}\n      </MessageScroller>\n      {(empty || loading) && <div className=\"pointer-events-none absolute inset-0\">\n        <div className=\"pointer-events-auto h-full\">\n          {loading ? <p role=\"status\" data-testid=\"loading\" className=\"flex h-full items-center justify-center gap-2 text-sm text-muted-foreground\"><Loader2Icon className=\"size-4 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{labels.loading}</p>\n            : emptyState ?? <EmptyState title={title} description={labels.emptyDescription} {...(avatar ? { avatar } : {})} {...(suggestions ? { suggestions } : {})} onSelect={text => { controller.setText(text); textarea.current?.focus(); }} />}\n        </div></div>}\n    </div>\n\n    <footer data-testid=\"composer-dock\" className=\"shrink-0 px-4 pt-2 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6\">\n      <div className=\"mx-auto w-full max-w-[720px] space-y-2\">\n        <div aria-live=\"polite\" className=\"space-y-2 empty:hidden\">\n          {working && <p role=\"status\" data-testid=\"agent-status\" className=\"m-0 flex items-center gap-2 px-1 text-xs text-muted-foreground\">\n            <Shimmer active={!waitingForAnswer}>{waitingForAnswer ? labels.waitingForAnswer : retry ? labels.retryPending : labels.agentWorking}</Shimmer></p>}\n          {derived.compacting && <p role=\"status\" className=\"m-0 px-1 text-xs text-muted-foreground\">{labels.compacting}</p>}\n          <ChatNotices state={state} error={error} onReconcile={() => act(controller.reconcile)} onRetry={() => act(controller.retrySameRequest)} />\n        </div>\n        <div>\n          <ConversationFiles files={files} />\n          <MessageQueue items={queued} sending={state.outbox} withdraw={actions?.withdraw} actions={queueActions} />\n          <Composer {...composer} layout={composerLayout} placeholder={labels.placeholder === 'Message the agent…' ? `Message ${title}…` : labels.placeholder} barStart={barStart} barNote={barNote} barEnd={tools} />\n          {belowComposer !== undefined && <div data-testid=\"below-composer\" className=\"pt-2\">{belowComposer}</div>}\n        </div>\n      </div>\n    </footer>\n  </section>;\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { Loader2Icon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { MessageScroller, MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton } from '@/components/ui/message-scroller';\nimport { BlockActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { Composer } from './composer';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport { ConversationFiles } from './conversation-files';\nimport type { ConversationsConfig, VoiceMessageConfig } from './config';\nimport { useVoiceMessage } from './use-voice-message';\nimport type { PendingVoice } from './use-voice-message';\nimport { displayName } from './config';\nimport { PendingVoiceBubble, VoiceMessageButton } from './voice-message';\nimport { EmptyState } from './empty-state';\nimport type { Suggestion } from './empty-state';\nimport { ConversationHistory, TranscriptHistory } from './history';\nimport { RowView } from './message';\nimport type { Row } from './rows';\nimport { MessageQueue } from './queue';\nimport { ChatNotices, Notice, PreparingStatus, preparing } from './notice';\nimport { Shimmer } from './shimmer';\nimport { useChatSession, useTranscript } from './session';\nimport { useChatDraft } from './use-chat-draft';\nimport { useChatPlacement } from './use-remote-chat';\nimport type { ChatPlacement } from './use-remote-chat';\nimport type { ChatFeatureProps, FilesHandler } from './session';\nimport { ChatTextProvider, useChatText, useMergedText } from './labels';\nimport { chatTextFor } from './locale';\nimport type { ChatLocale } from './locale';\nimport type { ChatIcons, ChatLabels } from './labels';\nimport { cn } from '../utils/utils';\n\nexport type { PiChatActions } from './session';\nexport type { ChatCard, Mode } from './rows';\nexport type { AnswerOutcome } from './question-card';\nexport { artifactKey, artifactKind, collectArtifacts, detectArtifact, parseArtifact, typeLabel } from './artifact';\nexport type { ArtifactDescriptor, ArtifactKind, ArtifactKindViewProps, ArtifactsConfig, ArtifactTarget, ArtifactType } from './artifact';\nexport { QuestionCard, formAnswer, parseQuestion, ASK_USER_TOOL } from './question-card';\nexport type { FormQuestion } from './question-card';\nexport { ChatTextProvider } from './labels';\nexport type { CommandMention, CommandMentions } from './markdown';\nexport type { Suggestion } from './empty-state';\nexport { ConversationList, relativeTime } from './history';\nexport { defaultChatIcons, defaultChatLabels } from './labels';\nexport type { ChatIcons, ChatLabels } from './labels';\nexport { frenchChatLabels } from './labels-fr';\nexport { chatTextFor } from './locale';\nexport type { ChatLocale } from './locale';\nexport { BlockActions } from '../button/actions';\nexport { useChatDraft } from './use-chat-draft';\nexport { useConversations } from './use-conversations';\nexport type { ChatController, ChatSnapshot } from '@hachej/boring-ui-kit/native-chat';\nexport { MessageText, VoiceBubble } from './message';\nexport { Markdown } from './markdown';\nexport { useTranscript } from './session';\nexport { RunCard, parseRun } from './run-card';\nexport type { RunRecord, RunStatus } from './run-card';\nexport type { BlockAction, BlockIcon } from '../button/actions';\nexport type { AudioUrlRead, VoiceMessageConfig, AttachmentsConfig, ConversationItem, ConversationsConfig, EffortConfig, FileKind, MentionResult, MentionsConfig, ModelConfig, ModelRef, PasteToFile, PreviewRead, ReplyRef, SlashApi, SlashCommand, SlashConfig, SlashSkill, UploadResult } from './config';\n\nexport interface ChatTimeline {\n  readonly count: number;\n  readonly render: (context: { readonly focusComposer: () => void; readonly openFile?: ((path: string) => void) | undefined; readonly pendingVoice?: ReactNode }) => ReactNode;\n  readonly afterSend?: () => void;\n}\n\nexport interface PiChatProps extends ChatFeatureProps {\n  /** Optional host transcript. Absent: native rows, history and scroll behavior are unchanged. */\n  readonly timeline?: ChatTimeline | undefined;\n  /** Authorized host errors may provide their own message. */\n  readonly renderConnectionError?: ((error: unknown) => ReactNode) | undefined;\n  readonly controller: ChatController;\n  /** Where this chat is shown, reported with each submit (advisory, never authority). `docked` by default; a host that floats or tucks the same chat in a drawer says `floating`. */\n  readonly placement?: ChatPlacement | undefined;\n  /** Every word the chat shows (title, placeholder, buttons, notices, empty states): a partial object over `defaultChatLabels`. */\n  /** The chat's language: `en` (default) or `fr`. `labels` override any of its words. */\n  readonly locale?: ChatLocale | undefined;\n  readonly labels?: Partial<ChatLabels> | undefined;\n  /** The chat's icons (send, stop, history, attach, …): any component taking `className`, over `defaultChatIcons`. */\n  readonly icons?: Partial<ChatIcons> | undefined;\n  /** The agent's avatar (an image or an icon) before the title in the header, and in the empty state instead of the agent icon. */\n  readonly avatar?: ReactNode;\n  /** Host actions in the header beside History: `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids `chat-action-<id>`, the menu `chat-action-more`. */\n  readonly headerActions?: readonly BlockAction[] | undefined;\n  /** `false` lets the host supply one shared header around chat and viewers. Default true. */\n  readonly header?: boolean;\n  readonly className?: string;\n  /** Pad the chat's bottom by how far it reaches below the visual viewport (the phone's soft keyboard). Default true; `false` for a host that already follows the keyboard itself, such as a bottom drawer whose lower part sits off screen by design. */\n  readonly keyboardInset?: boolean;\n  readonly decisions?: ReactNode;\n  readonly controls?: ReactNode;\n  /** Host controls at the end of the composer bar (for example a microphone), like AmbientChat's tools slot. */\n  readonly tools?: ReactNode;\n  /** Hold-to-send one retained audio upload plus transcript. Omit to keep the existing composer unchanged. */\n  readonly voiceMessage?: VoiceMessageConfig | undefined;\n  /** Local voice rows owned by the shell's shared microphone; rendered with the native transcript, never the composer. */\n  readonly pendingVoice?: readonly PendingVoice[] | undefined;\n  /** Host content under the composer (for example a collapsed list of the person's requests). Absent: nothing is shown. */\n  readonly belowComposer?: ReactNode;\n  /** Rendered before the title in the header (for example a menu button on narrow screens). */\n  readonly headerStart?: ReactNode;\n  readonly onFiles?: FilesHandler;\n  /** Shown instead of the default empty state before the first message. */\n  readonly emptyState?: ReactNode;\n  readonly suggestions?: readonly Suggestion[];\n  /** Past conversations. The header's History button then opens a searchable list with the open one marked and a New action. Omit it and History pages through the earlier records of this conversation. */\n  readonly conversations?: ConversationsConfig;\n  /**\n   * `false`: the host shows `conversations` itself (for example the `pi-app` sessions pane), so History pages through the earlier records of this\n   * conversation while replies keep their Fork button (`conversations.fork`). Default `true`: History opens the list.\n   */\n  readonly historyList?: boolean;\n  /** Show the header History button. Default true; paging remains available through the controller. */\n  readonly showHistory?: boolean;\n  /** Empty desktop composition. `centered` puts the composer beneath the greeting; `docked` keeps the former layout. Phones always dock it. */\n  readonly emptyLayout?: 'centered' | 'docked';\n  /** Two-row reference composer by default. Explicitly select `pill`, `stacked` or `inline` for the earlier layouts. */\n  readonly composerLayout?: ComposerProps['layout'];\n  /** A conversation title, separate from the agent name, with optional click-to-rename. */\n  readonly conversationTitle?: string | undefined;\n  readonly onRenameTitle?: ((title: string) => void | Promise<void>) | undefined;\n  /** Show the header connection badge. Default false; connection state still controls actions and failures stay visible. */\n  readonly showConnectionStatus?: boolean;\n  /** The optional annotate toggle and notes chip in the composer (the registry `feedback` item's `useComposerFeedback`). Omit it and nothing changes. */\n  readonly feedback?: ComposerFeedback;\n  /** Keeps the composer's half-typed message in localStorage under this key (a conversation id), across reloads and tabs; see `useChatDraft`. Omit it and nothing is stored. */\n  readonly draftKey?: string | undefined;\n}\n\nconst PAGE = 60, MORE = 40;\ntype TranscriptRow = { readonly key: string; readonly kind: 'native'; readonly row: Row }\n  | { readonly key: string; readonly kind: 'voice'; readonly voice: PendingVoice };\n\n/** Borrows a concrete native controller; unmount releases presentation and uploads only. */\nexport function PiChat(props: PiChatProps) {\n  const active = useRef(props.controller); active.current = props.controller;\n  const [mount, setMount] = useState({ controller: props.controller, sequence: 0 });\n  if (mount.controller !== props.controller) setMount({ controller: props.controller, sequence: mount.sequence + 1 });\n  const text = useMergedText(props.labels, props.icons, chatTextFor(props.locale));\n  return <ChatTextProvider value={text}><MessageScrollerProvider key={mount.sequence} autoScroll><PiChatSession {...props} activeController={active} /></MessageScrollerProvider></ChatTextProvider>;\n}\n\nfunction ConnectionBadge({ kind }: { readonly kind: string }) {\n  const { labels } = useChatText();\n  const live = kind === 'connected';\n  return <Badge variant={live ? 'outline' : 'secondary'} data-testid=\"connection\" data-state={kind} role=\"status\">\n    {live ? labels.live : kind === 'connecting' || kind === 'idle' ? labels.connecting : labels.reconnecting}\n  </Badge>;\n}\n\nfunction PiChatSession({ controller, placement = 'docked', mode = 'expert', presentation, className, keyboardInset = true, actions, avatar, headerActions, header = true, decisions, controls, tools, voiceMessage, pendingVoice, belowComposer, composerChips, composerHeader, composerHasContent, onPickFiles, timeline, renderConnectionError, headerStart, renderEntry, hideLine, displayLimit, historicalMessageActions, unread, replyError, renderTool, groupTool, commandMentions,\n  onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept = 'image/*', emptyState, suggestions, messageActions, replyFooter, slash, mentions, attachments, model, effort, artifacts, conversations, historyList = true, showHistory = true, showConnectionStatus = false, emptyLayout = 'centered', composerLayout = 'card', conversationTitle, onRenameTitle, feedback, draftKey, onOpenFile, fileChanges, pasteToFile, activeController: active }: PiChatProps & { readonly activeController: { readonly current: ChatController } }) {\n  const { labels, icons } = useChatText();\n  useChatDraft(controller, draftKey);\n  useChatPlacement(controller, placement);\n  const { title } = labels;\n  const [pickingConversation, setPickingConversation] = useState(false);\n  const scrollToBottom = useRef<() => void>(() => {});\n  const voice = useVoiceMessage({ controller, config: voiceMessage, attachments, labels, activeController: active, admitted: () => timeline ? timeline.afterSend?.() : scrollToBottom.current() });\n  // A reply's Fork button calls the host's latest `fork`; the row context changes only when forking is switched on or off.\n  const fork = useRef(conversations?.fork); fork.current = conversations?.fork;\n  const canFork = Boolean(conversations?.fork);\n  const rowExtras = useMemo(() => canFork ? { onFork: (entryId: string) => { void fork.current?.(entryId).catch(() => {}); } } : undefined, [canFork]);\n  const session = useChatSession({ controller, activeController: active, mode, presentation, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend: () => timeline ? timeline.afterSend?.() : scrollToBottom.current(), feedback, rowExtras, onOpenFile, fileChanges, pasteToFile, composerChips, composerHeader, composerHasContent, onPickFiles });\n  const { state, derived, rows, queued, queueActions, working, waitingForAnswer, connected, error, act, textarea, rowContext, composer, files, loading } = session;\n  const voiceRows = pendingVoice ?? voice.pending;\n  const transcriptRows: readonly TranscriptRow[] = [\n    ...rows.map(row => ({ key: row.key, kind: 'native' as const, row })),\n    ...voiceRows.map(voice => ({ key: `voice:${voice.id}`, kind: 'voice' as const, voice })),\n  ];\n  const pendingRows = voiceRows.map(item => <MessageScrollerItem key={`voice:${item.id}`} messageId={`voice:${item.id}`} data-local-voice=\"\" className=\"[content-visibility:visible]\"><PendingVoiceBubble pending={item} /></MessageScrollerItem>);\n  const empty = (timeline ? timeline.count === 0 : session.empty) && voiceRows.length === 0;\n  const conversationFiles = new Map(files.map(file => [file.id, file]));\n  for (const item of voiceRows) if (item.path && !conversationFiles.has(`file:${item.path}`)) {\n    const path = item.path, open = onOpenFile ?? mentions?.open;\n    conversationFiles.set(`file:${path}`, { id: `file:${path}`, name: displayName(path), open: open ? () => open(path) : undefined });\n  }\n  const { pinned, retry } = derived;\n  const showPreparing = preparing({ natural: session.natural, waitingForAnswer, run: derived.run, retry, compacting: derived.compacting, stop: state.stop });\n  const transcript = useTranscript(transcriptRows, displayLimit ?? PAGE, MORE, { state: state.history, connected: !state.disposed && connected, load: controller.loadEarlier }, displayLimit === undefined);\n  const { stick, hidden } = transcript;\n  scrollToBottom.current = () => { transcript.reset(); void stick.scrollToBottom('instant'); };\n  const visible = transcript.visible(transcriptRows);\n  const { barStart, barNote } = session.pickers();\n  const connectionKind = state.connection.kind;\n  const [renamingTitle, setRenamingTitle] = useState(false);\n  const [titleError, setTitleError] = useState(false);\n  const page = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const viewport = globalThis.visualViewport;\n    if (!keyboardInset || !viewport) return;\n    const element = page.current;\n    if (!element) return;\n    const measure = () => element.style.setProperty('--composer-keyboard-inset', `${Math.max(0, element.getBoundingClientRect().bottom - viewport.height - viewport.offsetTop)}px`);\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);\n    observer?.observe(element);\n    measure(); viewport.addEventListener('resize', measure); viewport.addEventListener('scroll', measure);\n    return () => { observer?.disconnect(); viewport.removeEventListener('resize', measure); viewport.removeEventListener('scroll', measure); };\n  }, []);\n\n  return <section ref={page} data-boring=\"pi-chat\" data-connection={connectionKind} data-empty={empty && !loading ? emptyLayout : undefined} aria-label={title} className={cn('pi-chat relative box-border flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-background text-foreground ', keyboardInset && 'max-[641px]:pb-(--composer-keyboard-inset)', empty && emptyLayout === 'centered' && 'min-[641px]:justify-center', className)}>\n    {header && <header className={cn(empty && emptyLayout === 'centered' && 'min-[641px]:absolute min-[641px]:inset-x-0 min-[641px]:top-0', 'flex h-13 shrink-0 items-center gap-2 px-3 sm:gap-3 sm:px-4')}>\n      {headerStart}\n      {avatar && <Avatar data-testid=\"chat-avatar\" className=\"overflow-hidden\"><AvatarFallback className=\"*:max-h-full *:max-w-full\">{avatar}</AvatarFallback></Avatar>}\n      {renamingTitle && onRenameTitle ? <form className=\"min-w-0 flex-1\" onSubmit={event => { event.preventDefault(); const value = new FormData(event.currentTarget).get('title')?.toString().trim(); if (value) { setTitleError(false); void Promise.resolve().then(() => onRenameTitle(value)).catch(() => setTitleError(true)); } setRenamingTitle(false); }}>\n        <Input name=\"title\" aria-label={labels.conversationName} maxLength={200} autoFocus defaultValue={conversationTitle ?? title} onBlur={() => setRenamingTitle(false)} onKeyDown={event => { if (event.key === 'Escape') setRenamingTitle(false); }} className=\"w-full min-w-0\" />\n      </form> : <h2 className=\"m-0 min-w-0 flex-1 truncate font-(family-name:--chat-display) text-sm font-medium tracking-tight max-[641px]:text-center\">{onRenameTitle ? <Button variant=\"ghost\" className=\"max-w-full\" onClick={() => setRenamingTitle(true)}><span className=\"truncate\">{conversationTitle ?? title}</span></Button> : conversationTitle ?? title}</h2>}\n      {showHistory && conversations && historyList && <Button variant=\"ghost\" size=\"sm\" data-testid=\"history-open\" aria-haspopup=\"dialog\" aria-expanded={pickingConversation} disabled={state.disposed}\n        onClick={() => setPickingConversation(open => !open)}><icons.history data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.history}</Button>}\n      <BlockActions actions={headerActions} testId=\"chat-action\" menuLabel={labels.moreActions} />\n      {showConnectionStatus && <ConnectionBadge kind={connectionKind} />}\n      {controls}\n    </header>}\n\n    {titleError && <p role=\"alert\" className=\"m-0 shrink-0 px-4 py-2 text-sm text-destructive\">{labels.actionFailed}</p>}\n    {decisions && <><div data-boring=\"required-decisions\" className=\"shrink-0 px-4 py-2\">{decisions}</div><Separator /></>}\n    {pinned.length > 0 && <><aside aria-label={labels.requiredActions} className=\"shrink-0 space-y-2 px-4 py-2\">{pinned.map(card => <div key={card.key}>{card.content}</div>)}</aside><Separator /></>}\n    {(connectionKind === 'error' || connectionKind === 'closed') && <div className=\"shrink-0 px-4 pt-2\">\n      <Notice tone={connectionKind === 'error' ? 'error' : 'info'} testid=\"connection-notice\">\n        <span className=\"flex-1\">{connectionKind === 'error' ? state.connection.kind === 'error' && renderConnectionError ? renderConnectionError(state.connection.error) : labels.loadFailed : labels.disconnected}</span>\n        {!state.disposed && <Button size=\"sm\" variant=\"outline\" onClick={() => act(controller.connect)}><icons.reconnect data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.reconnect}</Button>}\n      </Notice></div>}\n    {pickingConversation && conversations && historyList && <ConversationHistory conversations={conversations} onClose={() => setPickingConversation(false)} />}\n\n    <div data-testid=\"conversation-content\" className={cn('relative min-h-0 flex-1', empty && emptyLayout === 'centered' && 'min-[641px]:min-h-60 min-[641px]:flex-none')}>\n      {timeline ? timeline.render({ focusComposer: () => textarea.current?.focus(), openFile: onOpenFile ?? mentions?.open, pendingVoice: pendingRows }) : <MessageScroller>\n        <MessageScrollerViewport ref={stick.scrollRef} data-testid=\"transcript-scroll\" aria-label={labels.messages} className=\"min-h-0 flex-1 scrollbar-thumb-border scrollbar-track-transparent\">\n          {!empty && <TranscriptHistory history={state.history} connected={!state.disposed && connected} onLoad={transcript.reveal} sentinelRef={transcript.sentinelRef} hidden={hidden} loaded={transcript.loaded} />}\n          <div className=\"mx-auto w-full max-w-[720px] px-4 pt-6 pb-8 sm:px-6\">\n          <MessageScrollerContent aria-label={labels.messages} aria-live=\"polite\" data-testid=\"transcript\">\n            {visible.map(item => <MessageScrollerItem key={item.key} messageId={item.key} data-local-voice={item.kind === 'voice' ? '' : undefined} className=\"[content-visibility:visible]\">{item.kind === 'native' ? <RowView row={item.row} context={rowContext} /> : <PendingVoiceBubble pending={item.voice} />}</MessageScrollerItem>)}\n          </MessageScrollerContent>\n          </div>\n        </MessageScrollerViewport>\n        {!empty && <div data-testid=\"transcript-navigation\" className=\"flex h-12 shrink-0 items-center justify-center\">{!stick.isAtBottom && <MessageScrollerButton className=\"static inset-auto translate-x-0\" data-testid=\"jump-latest\" aria-label={labels.jumpToLatest} title={labels.jumpToLatest} onClick={transcript.reset}><icons.jumpToLatest aria-hidden=\"true\" /></MessageScrollerButton>}</div>}\n      </MessageScroller>}\n      {(empty || loading) && <div className=\"pointer-events-none absolute inset-0\">\n        <div className=\"pointer-events-auto h-full\">\n          {loading ? <p role=\"status\" data-testid=\"loading\" className=\"flex h-full items-center justify-center gap-2 text-sm text-muted-foreground\"><Loader2Icon className=\"size-4 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{labels.loading}</p>\n            : emptyState ?? <EmptyState title={title} description={labels.emptyDescription} {...(avatar ? { avatar } : {})} {...(suggestions ? { suggestions } : {})} onSelect={text => { controller.setText(text); textarea.current?.focus(); }} />}\n        </div></div>}\n    </div>\n\n    <footer data-testid=\"composer-dock\" className=\"shrink-0 px-4 pt-2 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6\">\n      <div className=\"mx-auto w-full max-w-[720px] space-y-2\">\n        <div {...(session.natural ? {} : { 'aria-live': 'polite' as const })} className=\"space-y-2 empty:hidden\">\n          {session.natural ? showPreparing && <PreparingStatus>{derived.stageStatus}</PreparingStatus> : working && <p role=\"status\" data-testid=\"agent-status\" className=\"m-0 flex items-center gap-2 px-1 text-xs text-muted-foreground\">\n            <Shimmer active={!waitingForAnswer}>{waitingForAnswer ? labels.waitingForAnswer : retry ? labels.retryPending : labels.agentWorking}</Shimmer></p>}\n          {!session.natural && derived.compacting && <p role=\"status\" className=\"m-0 px-1 text-xs text-muted-foreground\">{labels.compacting}</p>}\n          <ChatNotices natural={session.natural} state={state} error={error} onReconcile={() => act(controller.reconcile)} onRetry={() => act(controller.retrySameRequest)} />\n        </div>\n        <div>\n          <ConversationFiles files={[...conversationFiles.values()]} />\n          <MessageQueue items={queued} sending={state.outbox} withdraw={actions?.withdraw} actions={queueActions} />\n          {voice.problem && <p role=\"alert\" data-testid=\"voice-message-problem\">{voice.problem}</p>}\n          <Composer {...composer} layout={composerLayout} placeholder={labels.placeholder === 'Message the agent…' ? `Message ${title}…` : labels.placeholder} barStart={barStart} barNote={barNote} barEnd={voiceMessage ? <>{tools}<VoiceMessageButton voice={voice} disabled={state.disposed || !connected || state.send.kind === 'unknown'} /></> : tools} />\n          {belowComposer !== undefined && <div data-testid=\"below-composer\" className=\"pt-2\">{belowComposer}</div>}\n        </div>\n      </div>\n    </footer>\n  </section>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/pi-chat.tsx"
     },
@@ -161,19 +169,19 @@
     },
     {
       "path": "registry/pi-chat/queue.tsx",
-      "content": "'use client';\n\nimport { useState } from 'react';\nimport type { ChatDraft } from '@hachej/boring-ui-kit/native-chat';\nimport { CornerDownRightIcon, EllipsisIcon, ListEndIcon, PencilIcon, RouteIcon, Trash2Icon } from 'lucide-react';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Spinner } from '@/components/ui/spinner';\nimport { TraceIcon, TraceLine, TraceTitle } from '@/components/ui/trace';\nimport { Button } from '@/components/ui/button';\nimport { isFileBlock, type QueuedMessage } from './rows';\nimport { defaultChatLabels, useChatText } from './labels';\n\nexport type { QueuedMessage } from './rows';\n\n/** Display text of a queued submission: the text parts of its content, plus a count of images. */\nexport function queuedText(item: QueuedMessage, imagesLabel: (count: number) => string = defaultChatLabels.images): string {\n  const content = item.content as unknown;\n  if (typeof content === 'string') return content;\n  if (!Array.isArray(content)) return '';\n  const parts = content as readonly { type?: unknown; text?: unknown }[];\n  const text = parts.flatMap(part => part?.type === 'text' && typeof part.text === 'string' && !isFileBlock(part.text) ? [part.text] : []).join('\\n');\n  const images = parts.filter(part => part?.type === 'image').length;\n  return images ? `${text}${text ? '\\n' : ''}${imagesLabel(images)}` : text;\n}\n\n/** What a queued message can be taken back for. Both take the message out of the queue first and throw when it is too late. */\nexport interface QueueActions {\n  /** Take it out of the queue and put its text (and images) back in the composer. */\n  readonly edit?: ((item: QueuedMessage) => Promise<void>) | undefined;\n  /** Take it out of the queue and send it into the running turn now. */\n  readonly steer?: ((item: QueuedMessage) => Promise<void>) | undefined;\n}\n\n/** The \"…\" button of one queued message: a small menu of the secondary actions (Edit). */\nfunction QueueEditAction({ disabled, onEdit }: { readonly disabled: boolean; readonly onEdit: () => void }) {\n  const { labels } = useChatText();\n  return <DropdownMenu>\n    <DropdownMenuTrigger render={<Button variant=\"ghost\" size=\"icon\" />} data-testid=\"queue-more\" aria-label={labels.moreActions} title={labels.more} disabled={disabled}>\n      <EllipsisIcon data-icon=\"inline-start\" aria-hidden=\"true\" />\n    </DropdownMenuTrigger>\n    <DropdownMenuContent side=\"top\" align=\"end\" data-testid=\"queue-menu\">\n      <DropdownMenuItem data-testid=\"queue-edit\" onClick={onEdit}><PencilIcon aria-hidden=\"true\" />{labels.edit}</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>;\n}\n\n/**\n * Messages sent while the agent was working, waiting for Pi to place them, drawn as a slim tab tucked behind the top edge of the composer\n * (render it directly above `Composer`; the composer overlaps its bottom). One row per message: icon, text, Steer, remove and a \"…\" menu\n * (Edit). The choice is made here, per message, never in the composer. Rows leave on their own once Pi starts them. `sending` are messages\n * sent from the composer that wait for the previous send to be confirmed (the controller's `outbox`): shown last, without actions.\n */\nexport function MessageQueue({ items, sending = [], withdraw, actions }: {\n  readonly items: readonly QueuedMessage[];\n  readonly sending?: readonly ChatDraft[] | undefined;\n  readonly withdraw?: ((id: QueuedMessage['id']) => Promise<unknown>) | undefined;\n  readonly actions?: QueueActions | undefined;\n}) {\n  const { labels } = useChatText();\n  const [failed, setFailed] = useState<string | undefined>();\n  const [busy, setBusy] = useState<ReadonlySet<string>>(new Set());\n  if (!items.length && !sending.length) return null;\n  async function run(item: QueuedMessage, work: () => Promise<unknown>) {\n    const id = String(item.id);\n    setFailed(undefined); setBusy(current => new Set(current).add(id));\n    try { await work(); }\n    catch (cause) { setFailed(cause instanceof Error ? cause.message : labels.queueFailed); }\n    finally { setBusy(current => { const next = new Set(current); next.delete(id); return next; }); }\n  }\n  const remove = (item: QueuedMessage) => run(item, async () => {\n    const outcome = await withdraw!(item.id);\n    if (outcome === 'already_placed' || outcome === 'settled') throw new Error(labels.tooLateToRemove);\n  });\n  return <section data-testid=\"queue\" aria-label={labels.queuedMessages} className=\"relative mx-3 -mb-3 pb-3\">\n    <Card><CardContent><ul className=\"m-0 flex list-none flex-col gap-2 p-0\">\n      {items.map(item => {\n        const working = busy.has(String(item.id));\n        const steering = item.mode === 'steer';\n        return <li key={String(item.id)} data-testid=\"queue-item\" data-mode={item.mode} className=\"flex min-h-10 items-center gap-1.5\">\n          <TraceLine status=\"pending\" className=\"flex-1\">\n            <TraceIcon>{steering ? <RouteIcon /> : <ListEndIcon />}</TraceIcon>\n            <TraceTitle><span className=\"sr-only\">{steering ? labels.steering : labels.queued}: </span><span data-testid=\"queue-text\">{queuedText(item, labels.images)}</span></TraceTitle>\n          </TraceLine>\n          {!steering && actions?.steer && <Button variant=\"ghost\" size=\"sm\" data-testid=\"queue-steer\" title={labels.steerHint} disabled={working} onClick={() => { void run(item, () => actions.steer!(item)); }}>\n            <CornerDownRightIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.steer}</Button>}\n          {steering && <span className=\"shrink-0 px-1 text-xs text-muted-foreground\">{labels.steering}</span>}\n          <Button variant=\"ghost\" size=\"icon\" data-testid=\"queue-cancel\" aria-label={labels.removeQueued} title={labels.removeHint} disabled={!withdraw || working} onClick={() => { void remove(item); }}>\n            <Trash2Icon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n          {actions?.edit && <QueueEditAction disabled={working} onEdit={() => { void run(item, () => actions.edit!(item)); }} />}\n        </li>;\n      })}\n      {sending.map((draft, index) => <li key={`sending-${index}`} data-testid=\"queue-sending\" className=\"flex min-h-10 items-center gap-1.5\">\n        <TraceLine status=\"running\" className=\"flex-1\">\n          <TraceIcon><Spinner aria-hidden=\"true\" /></TraceIcon>\n          <TraceTitle data-testid=\"queue-text\">{draft.text}{draft.attachments.length ? `${draft.text ? '\\n' : ''}${labels.images(draft.attachments.length)}` : ''}</TraceTitle>\n        </TraceLine>\n        <span className=\"shrink-0 px-1 text-xs text-muted-foreground\">{labels.sending}</span>\n      </li>)}\n    </ul></CardContent></Card>\n    {failed && <Alert variant=\"destructive\" data-testid=\"queue-error\"><AlertDescription>{failed}</AlertDescription></Alert>}\n  </section>;\n}\n",
+      "content": "'use client';\n\nimport { useState } from 'react';\nimport type { ChatDraft } from '@hachej/boring-ui-kit/native-chat';\nimport { CornerDownRightIcon, EllipsisIcon, ListEndIcon, PencilIcon, RouteIcon, Trash2Icon } from 'lucide-react';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Spinner } from '@/components/ui/spinner';\nimport { TraceIcon, TraceLine, TraceTitle } from '@/components/ui/trace';\nimport { Button } from '@/components/ui/button';\nimport { isFileBlock, type QueuedMessage } from './rows';\nimport { defaultChatLabels, useChatText } from './labels';\n\nexport type { QueuedMessage } from './rows';\n\n/** Display text of a queued submission: the text parts of its content, plus a count of images. */\nexport function queuedText(item: QueuedMessage, imagesLabel: (count: number) => string = defaultChatLabels.images): string {\n  const content = item.content as unknown;\n  if (typeof content === 'string') return content;\n  if (!Array.isArray(content)) return '';\n  const parts = content as readonly { type?: unknown; text?: unknown }[];\n  const text = parts.flatMap(part => part?.type === 'text' && typeof part.text === 'string' && !isFileBlock(part.text) ? [part.text] : []).join('\\n');\n  const images = parts.filter(part => part?.type === 'image').length;\n  return images ? `${text}${text ? '\\n' : ''}${imagesLabel(images)}` : text;\n}\n\n/** What a queued message can be taken back for. Both take the message out of the queue first and throw when it is too late. */\nexport interface QueueActions {\n  /** Take it out of the queue and put its text (and images) back in the composer. */\n  readonly edit?: ((item: QueuedMessage) => Promise<void>) | undefined;\n  /** Take it out of the queue and send it into the running turn now. */\n  readonly steer?: ((item: QueuedMessage) => Promise<void>) | undefined;\n}\n\n/** The \"…\" button of one queued message: a small menu of the secondary actions (Edit). */\nfunction QueueEditAction({ disabled, onEdit }: { readonly disabled: boolean; readonly onEdit: () => void }) {\n  const { labels } = useChatText();\n  return <DropdownMenu>\n    <DropdownMenuTrigger render={<Button variant=\"ghost\" size=\"icon\" />} data-testid=\"queue-more\" aria-label={labels.moreActions} title={labels.more} disabled={disabled}>\n      <EllipsisIcon data-icon=\"inline-start\" aria-hidden=\"true\" />\n    </DropdownMenuTrigger>\n    <DropdownMenuContent side=\"top\" align=\"end\" data-testid=\"queue-menu\">\n      <DropdownMenuGroup><DropdownMenuItem data-testid=\"queue-edit\" onClick={onEdit}><PencilIcon aria-hidden=\"true\" />{labels.edit}</DropdownMenuItem></DropdownMenuGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>;\n}\n\n/**\n * Messages sent while the agent was working, waiting for Pi to place them, drawn as a slim tab tucked behind the top edge of the composer\n * (render it directly above `Composer`; the composer overlaps its bottom). One row per message: icon, text, Steer, remove and a \"…\" menu\n * (Edit). The choice is made here, per message, never in the composer. Rows leave on their own once Pi starts them. `sending` are messages\n * sent from the composer that wait for the previous send to be confirmed (the controller's `outbox`): shown last, without actions.\n */\nexport function MessageQueue({ items, sending = [], withdraw, actions }: {\n  readonly items: readonly QueuedMessage[];\n  readonly sending?: readonly ChatDraft[] | undefined;\n  readonly withdraw?: ((id: QueuedMessage['id']) => Promise<unknown>) | undefined;\n  readonly actions?: QueueActions | undefined;\n}) {\n  const { labels } = useChatText();\n  const [failed, setFailed] = useState<string | undefined>();\n  const [busy, setBusy] = useState<ReadonlySet<string>>(new Set());\n  if (!items.length && !sending.length) return null;\n  async function run(item: QueuedMessage, work: () => Promise<unknown>) {\n    const id = String(item.id);\n    setFailed(undefined); setBusy(current => new Set(current).add(id));\n    try { await work(); }\n    catch (cause) { setFailed(cause instanceof Error ? cause.message : labels.queueFailed); }\n    finally { setBusy(current => { const next = new Set(current); next.delete(id); return next; }); }\n  }\n  const remove = (item: QueuedMessage) => run(item, async () => {\n    const outcome = await withdraw!(item.id);\n    if (outcome === 'already_placed' || outcome === 'settled') throw new Error(labels.tooLateToRemove);\n  });\n  return <section data-testid=\"queue\" aria-label={labels.queuedMessages} className=\"relative mx-3 -mb-3 pb-3\">\n    <Card size=\"sm\"><CardContent><ul className=\"m-0 flex list-none flex-col p-0\">\n      {items.map(item => {\n        const working = busy.has(String(item.id));\n        const steering = item.mode === 'steer';\n        return <li key={String(item.id)} data-testid=\"queue-item\" data-mode={item.mode} className=\"flex min-h-10 items-center gap-1.5\">\n          <TraceLine status=\"pending\" className=\"min-w-0 flex-1\">\n            <TraceIcon>{steering ? <RouteIcon /> : <ListEndIcon />}</TraceIcon>\n            <TraceTitle><span className=\"sr-only\">{steering ? labels.steering : labels.queued}: </span><span data-testid=\"queue-text\">{queuedText(item, labels.images)}</span></TraceTitle>\n          </TraceLine>\n          {!steering && actions?.steer && <Button variant=\"ghost\" size=\"icon\" data-testid=\"queue-steer\" aria-label={labels.steer} title={labels.steerHint} disabled={working} onClick={() => { void run(item, () => actions.steer!(item)); }}>\n            <CornerDownRightIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n          <Button variant=\"ghost\" size=\"icon\" data-testid=\"queue-cancel\" aria-label={labels.removeQueued} title={labels.removeHint} disabled={!withdraw || working} onClick={() => { void remove(item); }}>\n            <Trash2Icon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n          {actions?.edit && <QueueEditAction disabled={working} onEdit={() => { void run(item, () => actions.edit!(item)); }} />}\n        </li>;\n      })}\n      {sending.map((draft, index) => <li key={`sending-${index}`} data-testid=\"queue-sending\" className=\"flex min-h-10 items-center gap-1.5\">\n        <TraceLine status=\"running\" className=\"min-w-0 flex-1\">\n          <TraceIcon><Spinner aria-hidden=\"true\" /></TraceIcon>\n          <TraceTitle data-testid=\"queue-text\">{draft.text}{draft.attachments.length ? `${draft.text ? '\\n' : ''}${labels.images(draft.attachments.length)}` : ''}</TraceTitle>\n        </TraceLine>\n        <span className=\"shrink-0 px-1 text-xs text-muted-foreground\">{labels.sending}</span>\n      </li>)}\n    </ul></CardContent></Card>\n    {failed && <Alert variant=\"destructive\" data-testid=\"queue-error\"><AlertDescription>{failed}</AlertDescription></Alert>}\n  </section>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/queue.tsx"
     },
     {
       "path": "registry/pi-chat/rows.ts",
-      "content": "import type { ReactNode } from 'react';\nimport type { ConversationView, EntryRecord, InboxItem, JsonObject } from '@earendil-works/pi-durable';\nimport type { JsonValue } from '@earendil-works/chord';\nimport type { AssistantMessage, Message, ToolCall, ToolResultMessage, UserMessage } from '@earendil-works/pi-ai';\nimport type { ToolEntry, ToolStatus } from './tool';\nimport { ASK_USER_TOOL } from './question-card';\nimport { PRESENT_TOOL, artifactKey, detectArtifact, pendingId, pendingTitle } from './artifact';\nimport type { ArtifactDescriptor, ArtifactsConfig } from './artifact';\n\n/** The host adds file content for `@path` mentions as parts that start like this; the message already shows the mention itself. */\nexport const isFileBlock = (text: string): boolean => text.startsWith('<file path=\"');\n\n/** A submission waiting in the native inbox (steer or follow-up); `queuedMessages` reads them from the view, the queue renders them. */\nexport type QueuedMessage = Extract<InboxItem, { readonly mode: 'steer' | 'followUp' }>;\n\n/*\n * The one message model is the native Pi view: entries (with their model messages) plus the live `pi.live` document.\n * This module turns a view into display rows with these semantics: tool calls are matched with tool results, expert mode hides successful tool details, the live\n * generation is appended as a streaming row whose key matches the row its committed message will take.\n */\n/** `required` pins the card above the transcript. `inline` (tool cards) keeps it in place in expert mode too, like the\n * question and artifact cards; other custom tool cards show only in developer mode or on failure. */\nexport interface ChatCard { readonly content: ReactNode; readonly required?: boolean; readonly inline?: boolean }\nexport type Mode = 'expert' | 'developer';\nexport type StreamPart = { readonly type: 'text'; readonly text: string } | { readonly type: 'thinking'; readonly thinking: string } | ToolCall;\n\nexport type Part =\n  | { readonly kind: 'text'; readonly key: string; readonly text: string }\n  | { readonly kind: 'thinking'; readonly key: string; readonly text: string; readonly streaming: boolean }\n  | { readonly kind: 'question'; readonly key: string; readonly call: ToolCall; readonly result: ToolResultMessage | undefined; readonly live: boolean; readonly questionId: string | undefined }\n  | { readonly kind: 'approval'; readonly key: string; readonly call: ToolCall; readonly result: ToolResultMessage | undefined; readonly live: boolean; /** The bound question ID the answer must use (as for `question`). */ readonly questionId: string | undefined; /** The one-line summary `requireApproval` published for this call. */ readonly summary: string; /** The decision it recorded, once made. */ readonly decision?: ApprovalDecision; /** The call's own step, shown in the activity block once it has a result. */ readonly entry?: ToolEntry }\n  | { readonly kind: 'artifact'; readonly key: string; readonly call: ToolCall; readonly state: 'presenting' | 'ready'; readonly artifact: ArtifactDescriptor | undefined; readonly title: string | undefined; /** Set when the host's `detect` found the descriptor: the call stays a step of the activity block too. */ readonly entry?: ToolEntry }\n  | { readonly kind: 'tool'; readonly key: string; readonly entry: ToolEntry };\n\nexport type Row = (\n  | { readonly key: string; readonly type: 'user'; readonly message: UserMessage }\n  | { readonly key: string; readonly type: 'assistant'; readonly parts: readonly Part[]; readonly streaming: boolean; /** The turn is still running (the last row while a run is active). */ readonly active?: boolean; readonly stopReason?: AssistantMessage['stopReason']; readonly errorMessage?: string; readonly text: string; /** When the reply was written (the last round of a merged turn), in ms. Absent while it streams. */ readonly timestamp?: number; /** The model that wrote the last round of the reply. */ readonly model?: { readonly provider: string; readonly modelId: string }; /** How long the last round took to answer, in ms (Pi's `durationMs`). */ readonly durationMs?: number; /** The native entry of its last committed round: where a fork of the conversation after this reply starts. */ readonly entryId?: string }\n  | { readonly key: string; readonly type: 'orphan-result'; readonly message: ToolResultMessage }\n  | { readonly key: string; readonly type: 'system'; readonly text: string }\n  | { readonly key: string; readonly type: 'event'; readonly label: string }\n  | { readonly key: string; readonly type: 'card'; readonly card: ChatCard }) & { readonly historical?: boolean };\n\nexport function object(value: JsonValue | undefined): JsonObject | undefined {\n  return value !== null && typeof value === 'object' && !Array.isArray(value) ? value : undefined;\n}\nexport function streamParts(value: JsonValue | undefined): StreamPart[] {\n  if (!Array.isArray(value)) return [];\n  return value.flatMap((item): StreamPart[] => {\n    const part = object(item);\n    if (part?.['type'] === 'text' && typeof part['text'] === 'string') return [{ type: 'text', text: part['text'] }];\n    if (part?.['type'] === 'thinking' && typeof part['thinking'] === 'string') return [{ type: 'thinking', thinking: part['thinking'] }];\n    const args = object(part?.['arguments']);\n    if (part?.['type'] === 'toolCall' && typeof part['id'] === 'string' && typeof part['name'] === 'string' && args) return [{ type: 'toolCall', id: part['id'], name: part['name'], arguments: args }];\n    return [];\n  });\n}\n\nexport function queuedMessages(view: ConversationView | undefined): QueuedMessage[] {\n  const items = object(view?.docs['pi.inbox'])?.['items'];\n  if (!Array.isArray(items)) return [];\n  return items.filter((item): item is QueuedMessage => {\n    const value = object(item as JsonValue);\n    return value !== undefined && (value['mode'] === 'steer' || value['mode'] === 'followUp') && value['id'] !== undefined;\n  });\n}\n\nexport interface Derived {\n  readonly rows: readonly Row[];\n  /** Required entry and tool cards: pinned above the transcript. */\n  readonly pinned: readonly { readonly key: string; readonly content: ReactNode }[];\n  readonly run: JsonObject | undefined;\n  readonly retry: JsonObject | undefined;\n  readonly compacting: boolean;\n}\nexport interface DeriveOptions {\n  readonly mode: Mode;\n  readonly renderEntry: ((entry: EntryRecord) => ChatCard | undefined) | undefined;\n  readonly renderTool: ((call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined) | undefined;\n  readonly groupTool: ((call: ToolCall, result: ToolResultMessage) => boolean) | undefined;\n  /** Turn artifact tool results into cards (`detect` recognises descriptors the tool result does not carry itself). */\n  readonly artifacts?: { readonly detect?: ArtifactsConfig['detect'] | undefined } | undefined;\n}\n\n/** Key of `{ summary, decision? }` in a gated call's details: `APPROVAL_DETAILS` of `@hachej/boring-agent/approval` (a contract test keeps them equal). */\nexport const APPROVAL_DETAILS = 'boring.approval';\nexport type ApprovalDecision = 'approved' | 'denied' | 'cancelled';\n/** The approval record a gated call publishes: its summary and, once made, the decision (`approved`, `denied` or `cancelled`). */\nconst approvalRecord = (details: unknown): { summary: string; decision?: ApprovalDecision } | undefined => {\n  const record = object(object(details as JsonValue | undefined)?.[APPROVAL_DETAILS]);\n  const summary = record?.['summary'], decision = record?.['decision'];\n  if (typeof summary !== 'string' || !summary.trim()) return undefined;\n  return { summary: summary.trim(), ...(decision === 'approved' || decision === 'denied' || decision === 'cancelled' ? { decision } : {}) };\n};\n\nconst textOf = (message: Message): string => message.role === 'assistant' ? message.content.flatMap(part => part.type === 'text' ? [part.text] : []).join('\\n') : '';\n\nexport function derive(view: ConversationView | undefined, options: DeriveOptions): Derived {\n  const { mode, renderEntry, renderTool } = options;\n  const developer = mode === 'developer';\n  const live = object(view?.docs['pi.live']);\n  const run = object(live?.['run']), generation = object(live?.['generation']);\n  const liveMessage = object(generation?.['message']), retry = object(generation?.['retry']);\n  const taskId = run?.['taskId'];\n\n  // Pass 1: match each result to its preceding invocation. Model call IDs may be reused.\n  type Item = { readonly key: string; readonly entry: EntryRecord; readonly message?: Message; readonly card?: ChatCard };\n  const items: Item[] = [], results = new Map<ToolCall, ToolResultMessage>(), counts = new Map<number, number>(), questionIds = new Map<ToolCall, string>();\n  const pendingCalls = new Map<string, ToolCall>();\n  for (const entry of view?.entries ?? []) {\n    const custom = renderEntry?.(entry);\n    const card = custom && (developer || custom.required) ? custom : undefined;\n    if (card) items.push({ key: `entry:${entry.id}`, entry, card });\n    if (!entry.model?.length) { if (!card && developer) items.push({ key: `entry:${entry.id}`, entry }); continue; }\n    for (const [index, message] of entry.model.entries()) {\n      if (message.role === 'assistant') for (const part of message.content) if (part.type === 'toolCall') { pendingCalls.set(part.id, part); questionIds.set(part, JSON.stringify([entry.id, part.id])); }\n      if (message.role === 'toolResult') {\n        const call = pendingCalls.get(message.toolCallId);\n        if (call) { results.set(call, message); pendingCalls.delete(message.toolCallId); }\n      }\n      let key = `entry:${entry.id}:${index}`;\n      if (message.role === 'assistant' && entry.byTaskId !== undefined) {\n        const ordinal = counts.get(entry.byTaskId) ?? 0; counts.set(entry.byTaskId, ordinal + 1);\n        key = `assistant:${entry.byTaskId}:${ordinal}`;\n      }\n      if (!card) items.push({ key, entry, message });\n    }\n  }\n  const matched = new Set(results.values());\n\n  const pinned: { key: string; content: ReactNode }[] = [];\n  for (const item of items) if (item.card?.required) pinned.push({ key: item.key, content: item.card.content });\n\n  const status = (result: ToolResultMessage | undefined): ToolStatus => result ? (result.isError ? 'failed' : 'completed') : run ? 'running' : 'unfinished';\n  function toolPart(call: ToolCall, key: string, committed: boolean): Part | undefined {\n    const result = results.get(call);\n    if (call.name === ASK_USER_TOOL) return { kind: 'question', key, call, result, live: !committed, questionId: questionIds.get(call) };\n    // A call gated by `requireApproval` identifies itself: it publishes its summary under APPROVAL_DETAILS before it asks.\n    const record = approvalRecord(result ? result.details : (Array.isArray(live?.['tools']) ? live['tools'] : []).map(object).find(slot => slot?.['callId'] === call.id)?.['details']);\n    if (record) return { kind: 'approval', key, call, result, live: !committed, questionId: questionIds.get(call), summary: record.summary, ...(record.decision ? { decision: record.decision } : {}), ...(result ? { entry: { key: `${key}:step`, call, result, status: status(result) } } : {}) };\n    if (options.artifacts) {\n      // A finished call that carries a descriptor becomes a card; a running `present` shows an \"opening\" card. A failed call stays an ordinary (failed) tool step.\n      const artifact = result ? detectArtifact(call, result, options.artifacts.detect) : undefined;\n      if (artifact) {\n        // A tool whose own result carries the descriptor is replaced by its card; a host-detected card is shown in addition to the step.\n        const own = result && detectArtifact(call, result);\n        return { kind: 'artifact', key, call, state: 'ready', artifact, title: artifact.title, ...(own ? {} : { entry: { key, call, result, status: status(result) } }) };\n      }\n      if (!result && run && call.name === PRESENT_TOOL) {\n        return { kind: 'artifact', key, call, state: 'presenting', artifact: undefined, title: pendingTitle(call) };\n      }\n    }\n    const custom = committed ? renderTool?.(call, result) : undefined;\n    if (custom?.required) { pinned.push({ key, content: custom.content }); return undefined; }\n    if (custom && (developer || result?.isError || custom.inline)) return { kind: 'tool', key, entry: { key, call, result, status: status(result), custom: custom.content } };\n    // A host that folds only some calls (`groupTool`) keeps the rest as cards, which expert mode hides unless they failed.\n    if (!developer && !result?.isError && options.groupTool && !(result && safe(options.groupTool, { key, call, result, status: status(result) }))) return undefined;\n    return { kind: 'tool', key, entry: { key, call, result, status: status(result) } };\n  }\n  function partsOf(content: readonly StreamPart[], rowKey: string, streaming: boolean, committed: boolean): Part[] {\n    const parts: Part[] = [];\n    for (const [index, part] of content.entries()) {\n      if (part.type === 'text') { if (part.text.length) parts.push({ kind: 'text', key: `${rowKey}:text:${index}`, text: part.text }); }\n      else if (part.type === 'thinking') { if (developer && part.thinking.length) parts.push({ kind: 'thinking', key: `${rowKey}:thinking:${index}`, text: part.thinking, streaming: streaming && index === content.length - 1 }); }\n      else { const made = toolPart(part, `${rowKey}:tool:${index}`, committed); if ((made?.kind === 'artifact' || made?.kind === 'approval') && made.entry) parts.push({ kind: 'tool', key: `${made.key}:step`, entry: made.entry }); if (made) parts.push(made); }\n    }\n    return parts;\n  }\n\n  // Pass 2: rows.\n  const rows: Row[] = [];\n  for (const item of items) {\n    if (item.card) { if (!item.card.required) rows.push({ key: item.key, type: 'card', card: item.card }); continue; }\n    const message = item.message;\n    if (!message) { if (developer) rows.push({ key: item.key, type: 'event', label: item.entry.kind }); continue; }\n    if (message.role === 'system') {\n      if (developer) rows.push({ key: item.key, type: 'system', text: typeof message.content === 'string' ? message.content : message.content.map(part => part.text).join('\\n') });\n    } else if (message.role === 'toolResult') {\n      // A result with its call is shown on the call's card. Only an unmatched failure gets its own row.\n      if (message.isError && !matched.has(message)) rows.push({ key: item.key, type: 'orphan-result', message });\n    } else if (message.role === 'user') rows.push({ key: item.key, type: 'user', message });\n    else {\n      const parts = partsOf(message.content, item.key, false, true);\n      const interrupted = message.stopReason === 'error' || message.stopReason === 'aborted';\n      if (parts.length || interrupted) rows.push({ key: item.key, type: 'assistant', parts, streaming: false, stopReason: message.stopReason, ...(message.errorMessage ? { errorMessage: message.errorMessage } : {}), text: textOf(message), ...replyMeta(message), entryId: String(item.entry.id) });\n      else {\n        // A final round with nothing to show adds no content, but it is still the round that ended the reply: its model, time and entry replace the earlier round's.\n        const previous = rows[rows.length - 1];\n        if (previous?.type === 'assistant' && !previous.stopReason?.match(/^(error|aborted)$/)) {\n          const { timestamp: _t, model: _m, durationMs: _d, ...rest } = previous;\n          rows[rows.length - 1] = { ...rest, ...replyMeta(message), entryId: String(item.entry.id) };\n        }\n      }\n    }\n  }\n  if (typeof taskId === 'number' && liveMessage) {\n    const key = `assistant:${taskId}:${counts.get(taskId) ?? 0}`, content = streamParts(liveMessage['content']);\n    rows.push({ key, type: 'assistant', parts: partsOf(content, key, true, false), streaming: true, text: '' });\n  }\n  const merged = mergeTurns(rows).map(row => row.type === 'assistant' && options.artifacts ? { ...row, parts: oneCardPerArtifact(row.parts) } : row);\n  const last = merged[merged.length - 1];\n  if (run && last?.type === 'assistant') merged[merged.length - 1] = { ...last, active: true };\n  return { rows: merged, pinned, run, retry, compacting: Array.isArray(live?.['compactions']) && live['compactions'].length > 0 };\n}\n\n/** What a reply reports about the model round that wrote it, read from Pi's own message (each field only when it is there). */\nexport function replyMeta(message: AssistantMessage): { readonly timestamp?: number; readonly model?: { readonly provider: string; readonly modelId: string }; readonly durationMs?: number } {\n  return {\n    ...(typeof message.timestamp === 'number' ? { timestamp: message.timestamp } : {}),\n    ...(typeof message.provider === 'string' && typeof message.model === 'string' ? { model: { provider: message.provider, modelId: message.model } } : {}),\n    ...(typeof message.durationMs === 'number' ? { durationMs: message.durationMs } : {}),\n  };\n}\n\n/**\n * Pi commits one assistant message per model round, so a turn with tool use is several messages in a row.\n * They read as one answer: merge consecutive assistant rows (unless one ended in an error or stop) so tool calls\n * group across rounds and the turn has a single copy action. The first row's key is kept, so identity is stable.\n */\nfunction mergeTurns(rows: readonly Row[]): Row[] {\n  const out: Row[] = [];\n  for (const row of rows) {\n    const last = out[out.length - 1];\n    if (last?.type === 'assistant' && row.type === 'assistant' && !last.stopReason?.match(/^(error|aborted)$/)) {\n      out[out.length - 1] = { key: last.key, type: 'assistant', parts: [...last.parts, ...row.parts], streaming: row.streaming,\n        ...(row.stopReason ? { stopReason: row.stopReason } : {}), ...(row.errorMessage ? { errorMessage: row.errorMessage } : {}),\n        text: [last.text, row.text].filter(Boolean).join('\\n\\n'), ...(row.timestamp !== undefined ? { timestamp: row.timestamp } : {}), ...(row.model ? { model: row.model } : {}), ...(row.durationMs !== undefined ? { durationMs: row.durationMs } : {}),\n        ...(row.entryId !== undefined ? { entryId: row.entryId } : last.entryId !== undefined ? { entryId: last.entryId } : {}) };\n    } else out.push(row);\n  }\n  return out;\n}\n\n/**\n * A turn that revises an artifact several times shows one card for it: the last version, at the place of the last step.\n * A running `present` of a file already shown takes over the title of its card.\n */\nfunction oneCardPerArtifact(parts: readonly Part[]): Part[] {\n  const idOf = (part: Part) => part.kind === 'artifact' ? part.artifact ? artifactKey(part.artifact) : (part.state === 'presenting' ? pendingId(part.call) : undefined) : undefined;\n  const last = new Map<string, number>();\n  for (const [index, part] of parts.entries()) { const id = idOf(part); if (id !== undefined) last.set(id, index); }\n  const out: Part[] = [];\n  for (const [index, part] of parts.entries()) {\n    const id = idOf(part);\n    if (id === undefined || last.get(id) === index) {\n      if (part.kind === 'artifact' && part.artifact === undefined && part.title === undefined && id !== undefined) {\n        const earlier = parts.find(other => other.kind === 'artifact' && other.artifact !== undefined && artifactKey(other.artifact) === id);\n        if (earlier?.kind === 'artifact') { out.push({ ...part, title: earlier.title }); continue; }\n      }\n      out.push(part);\n    }\n  }\n  return out;\n}\n\n/** One step of an activity block: a default tool call or a stretch of reasoning. */\nexport type Step = { readonly kind: 'tool'; readonly key: string; readonly entry: ToolEntry }\n  | { readonly kind: 'thinking'; readonly key: string; readonly text: string; readonly streaming: boolean };\n/** An assistant turn is text parts and activity blocks: one block per uninterrupted run of steps. */\nexport type Segment = { readonly kind: 'part'; readonly part: Part } | { readonly kind: 'activity'; readonly key: string; readonly steps: readonly Step[] };\nexport function segments(parts: readonly Part[], groupTool: DeriveOptions['groupTool']): Segment[] {\n  const out: Segment[] = [];\n  let run: Step[] = [];\n  const flush = () => {\n    const first = run[0];\n    if (first) out.push({ kind: 'activity', key: `activity:${first.key}`, steps: run });\n    run = [];\n  };\n  for (const part of parts) {\n    if (part.kind === 'thinking') run.push({ kind: 'thinking', key: part.key, text: part.text, streaming: part.streaming });\n    else if (part.kind === 'tool' && !part.entry.custom && (!groupTool || safe(groupTool, part.entry))) run.push({ kind: 'tool', key: part.key, entry: part.entry });\n    else { flush(); out.push({ kind: 'part', part }); }\n  }\n  flush();\n  return out;\n}\nfunction safe(groupTool: NonNullable<DeriveOptions['groupTool']>, entry: ToolEntry): boolean {\n  try { return entry.result !== undefined && !entry.result.isError && groupTool(entry.call, entry.result) === true; } catch { return false; }\n}\n",
+      "content": "import type { ReactNode } from 'react';\nimport type { ConversationView, EntryRecord, InboxItem, JsonObject } from '@earendil-works/pi-durable';\nimport type { JsonValue } from '@earendil-works/chord';\nimport type { AssistantMessage, Message, ToolCall, ToolResultMessage, UserMessage } from '@earendil-works/pi-ai';\nimport type { ToolEntry, ToolStatus } from './tool';\nimport { ASK_USER_TOOL } from './question-card';\nimport { PRESENT_TOOL, artifactKey, detectArtifact, pendingId, pendingTitle } from './artifact';\nimport type { ArtifactDescriptor, ArtifactsConfig } from './artifact';\n\n/** The host adds file content for `@path` mentions as parts that start like this; the message already shows the mention itself. */\nexport const isFileBlock = (text: string): boolean => text.startsWith('<file path=\"');\n\n/** A marked app context stays in the native message; presentation collapses only a valid leading target block to a chip. */\nexport function targetContent(text: string): { readonly target: JsonObject; readonly speech: string; readonly label: string } | undefined {\n  if (!text.startsWith('<target>')) return;\n  const end = text.indexOf('</target>');\n  if (end < 0 || text.slice(end + 9, end + 11) !== '\\n\\n') return;\n  const json = text.slice(8, end);\n  if (new TextEncoder().encode(json).length > 1024) return;\n  try {\n    const target = object(JSON.parse(json));\n    if (!target) return;\n    const label = Object.entries(target).map(([key, value]) => typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ? `${key}: ${value}` : key).join(' · ') || 'Target';\n    return { target, speech: text.slice(end + 11), label };\n  } catch { return; }\n}\n\n/** A submission waiting in the native inbox (steer or follow-up); `queuedMessages` reads them from the view, the queue renders them. */\nexport type QueuedMessage = Extract<InboxItem, { readonly mode: 'steer' | 'followUp' }>;\n\n/*\n * The one message model is the native Pi view: entries (with their model messages) plus the live `pi.live` document.\n * This module turns a view into display rows with these semantics: tool calls are matched with tool results, expert mode hides successful tool details, the live\n * generation is appended as a streaming row whose key matches the row its committed message will take.\n */\n/** `required` pins the card above the transcript. `inline` keeps an entry/tool card in place in expert mode too;\n * inline entries remain part of the answer. Other custom tool cards show only in developer mode or on failure. */\nexport interface ChatCard { readonly content: ReactNode; readonly required?: boolean; readonly inline?: boolean; /** Host stage wording for the single natural status; null clears it. */ readonly status?: ReactNode }\nexport type Mode = 'expert' | 'developer';\nexport type StreamPart = { readonly type: 'text'; readonly text: string } | { readonly type: 'thinking'; readonly thinking: string } | ToolCall;\n\nexport type Part =\n  | { readonly kind: 'card'; readonly key: string; readonly content: ReactNode }\n  | { readonly kind: 'text'; readonly key: string; readonly text: string }\n  | { readonly kind: 'thinking'; readonly key: string; readonly text: string; readonly streaming: boolean }\n  | { readonly kind: 'question'; readonly key: string; readonly call: ToolCall; readonly result: ToolResultMessage | undefined; readonly live: boolean; readonly questionId: string | undefined }\n  | { readonly kind: 'approval'; readonly key: string; readonly call: ToolCall; readonly result: ToolResultMessage | undefined; readonly live: boolean; /** The bound question ID the answer must use (as for `question`). */ readonly questionId: string | undefined; /** The one-line summary `requireApproval` published for this call. */ readonly summary: string; /** The decision it recorded, once made. */ readonly decision?: ApprovalDecision; /** The call's own step, shown in the activity block once it has a result. */ readonly entry?: ToolEntry }\n  | { readonly kind: 'artifact'; readonly key: string; readonly call: ToolCall; readonly state: 'presenting' | 'ready'; readonly artifact: ArtifactDescriptor | undefined; readonly title: string | undefined; /** Set when the host's `detect` found the descriptor: the call stays a step of the activity block too. */ readonly entry?: ToolEntry }\n  | { readonly kind: 'tool'; readonly key: string; readonly entry: ToolEntry };\n\nexport type Row = (\n  | { readonly key: string; readonly type: 'user'; readonly message: UserMessage }\n  | { readonly key: string; readonly type: 'assistant'; readonly parts: readonly Part[]; readonly streaming: boolean; /** The turn is still running (the last row while a run is active). */ readonly active?: boolean; readonly stopReason?: AssistantMessage['stopReason']; readonly errorMessage?: string; readonly text: string; /** When the reply was written (the last round of a merged turn), in ms. Absent while it streams. */ readonly timestamp?: number; /** The model that wrote the last round of the reply. */ readonly model?: { readonly provider: string; readonly modelId: string }; /** Sum of the merged rounds' native `durationMs`, when recorded. */ readonly durationMs?: number; /** The native entry of its last committed round: where a fork of the conversation after this reply starts. */ readonly entryId?: string }\n  | { readonly key: string; readonly type: 'orphan-result'; readonly message: ToolResultMessage }\n  | { readonly key: string; readonly type: 'system'; readonly text: string }\n  | { readonly key: string; readonly type: 'event'; readonly label: string }\n  | { readonly key: string; readonly type: 'card'; readonly card: ChatCard }) & { readonly historical?: boolean };\n\nexport function object(value: JsonValue | undefined): JsonObject | undefined {\n  return value !== null && typeof value === 'object' && !Array.isArray(value) ? value : undefined;\n}\nexport function streamParts(value: JsonValue | undefined): StreamPart[] {\n  if (!Array.isArray(value)) return [];\n  return value.flatMap((item): StreamPart[] => {\n    const part = object(item);\n    if (part?.['type'] === 'text' && typeof part['text'] === 'string') return [{ type: 'text', text: part['text'] }];\n    if (part?.['type'] === 'thinking' && typeof part['thinking'] === 'string') return [{ type: 'thinking', thinking: part['thinking'] }];\n    const args = object(part?.['arguments']);\n    if (part?.['type'] === 'toolCall' && typeof part['id'] === 'string' && typeof part['name'] === 'string' && args) return [{ type: 'toolCall', id: part['id'], name: part['name'], arguments: args }];\n    return [];\n  });\n}\n\nexport function queuedMessages(view: ConversationView | undefined): QueuedMessage[] {\n  const items = object(view?.docs['pi.inbox'])?.['items'];\n  if (!Array.isArray(items)) return [];\n  return items.filter((item): item is QueuedMessage => {\n    const value = object(item as JsonValue);\n    return value !== undefined && (value['mode'] === 'steer' || value['mode'] === 'followUp') && value['id'] !== undefined;\n  });\n}\n\nexport interface Derived {\n  readonly rows: readonly Row[];\n  /** Required entry and tool cards: pinned above the transcript. */\n  readonly pinned: readonly { readonly key: string; readonly content: ReactNode }[];\n  readonly run: JsonObject | undefined;\n  readonly retry: JsonObject | undefined;\n  readonly compacting: boolean;\n  readonly stageStatus?: ReactNode;\n}\nexport interface DeriveOptions {\n  readonly mode: Mode;\n  /** Complete assistant lines to omit. With live text, the unfinished last line waits for its newline or settlement. */\n  readonly hideLine?: ((line: string) => boolean) | undefined;\n  readonly renderEntry: ((entry: EntryRecord) => ChatCard | undefined) | undefined;\n  readonly renderTool: ((call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined) | undefined;\n  readonly groupTool: ((call: ToolCall, result: ToolResultMessage) => boolean) | undefined;\n  /** Turn artifact tool results into cards (`detect` recognises descriptors the tool result does not carry itself). */\n  readonly artifacts?: { readonly detect?: ArtifactsConfig['detect'] | undefined } | undefined;\n  /** `natural` shows only what a non-developer reads: their messages, the assistant's prose and the question, approval and artifact cards. Tool steps, reasoning, system rows and raw error text are left out of the rows (the entries stay as they are). */\n  readonly presentation?: 'natural' | undefined;\n}\n\n/** Key of `{ summary, decision? }` in a gated call's details: `APPROVAL_DETAILS` of `@hachej/boring-agent/approval` (a contract test keeps them equal). */\nexport const APPROVAL_DETAILS = 'boring.approval';\nexport type ApprovalDecision = 'approved' | 'denied' | 'cancelled';\n/** The approval record a gated call publishes: its summary and, once made, the decision (`approved`, `denied` or `cancelled`). */\nconst approvalRecord = (details: unknown): { summary: string; decision?: ApprovalDecision } | undefined => {\n  const record = object(object(details as JsonValue | undefined)?.[APPROVAL_DETAILS]);\n  const summary = record?.['summary'], decision = record?.['decision'];\n  if (typeof summary !== 'string' || !summary.trim()) return undefined;\n  return { summary: summary.trim(), ...(decision === 'approved' || decision === 'denied' || decision === 'cancelled' ? { decision } : {}) };\n};\n\nfunction visibleText(text: string, streaming: boolean, hideLine: DeriveOptions['hideLine']): string {\n  if (!hideLine) return text;\n  const lines = text.match(/[^\\n]*\\n|[^\\n]+$/g) ?? [];\n  return lines.filter(line => (!streaming || line.endsWith('\\n')) && !hideLine(line.replace(/\\r?\\n$/, ''))).join('');\n}\nconst textOf = (parts: readonly Part[]): string => parts.flatMap(part => part.kind === 'text' ? [part.text] : []).join('\\n');\n\nexport function derive(view: ConversationView | undefined, options: DeriveOptions): Derived {\n  const { mode, renderEntry, renderTool } = options;\n  const natural = options.presentation === 'natural';\n  const developer = mode === 'developer' && !natural;\n  const live = object(view?.docs['pi.live']);\n  const run = object(live?.['run']), generation = object(live?.['generation']);\n  const liveMessage = object(generation?.['message']), retry = object(generation?.['retry']);\n  const taskId = run?.['taskId'];\n\n  // Pass 1: match each result to its preceding invocation. Model call IDs may be reused.\n  type Item = { readonly key: string; readonly entry: EntryRecord; readonly message?: Message; readonly card?: ChatCard };\n  let stageStatus: ReactNode;\n  const items: Item[] = [], results = new Map<ToolCall, ToolResultMessage>(), counts = new Map<number, number>(), questionIds = new Map<ToolCall, string>();\n  const pendingCalls = new Map<string, ToolCall>();\n  for (const entry of view?.entries ?? []) {\n    const custom = renderEntry?.(entry);\n    if (custom && 'status' in custom) stageStatus = custom.status;\n    const card = custom && (developer || custom.required || custom.inline) ? custom : undefined;\n    if (card) items.push({ key: `entry:${entry.id}`, entry, card });\n    if (!entry.model?.length) { if (!card && developer) items.push({ key: `entry:${entry.id}`, entry }); continue; }\n    for (const [index, message] of entry.model.entries()) {\n      if (message.role === 'assistant') for (const part of message.content) if (part.type === 'toolCall') { pendingCalls.set(part.id, part); questionIds.set(part, JSON.stringify([entry.id, part.id])); }\n      if (message.role === 'toolResult') {\n        const call = pendingCalls.get(message.toolCallId);\n        if (call) { results.set(call, message); pendingCalls.delete(message.toolCallId); }\n      }\n      let key = `entry:${entry.id}:${index}`;\n      if (message.role === 'assistant' && entry.byTaskId !== undefined) {\n        const ordinal = counts.get(entry.byTaskId) ?? 0; counts.set(entry.byTaskId, ordinal + 1);\n        key = `assistant:${entry.byTaskId}:${ordinal}`;\n      }\n      if (!card) items.push({ key, entry, message });\n    }\n  }\n  const matched = new Set(results.values());\n\n  const pinned: { key: string; content: ReactNode }[] = [];\n  for (const item of items) if (item.card?.required) pinned.push({ key: item.key, content: item.card.content });\n\n  const status = (result: ToolResultMessage | undefined): ToolStatus => result ? (result.isError ? 'failed' : 'completed') : run ? 'running' : 'unfinished';\n  function toolPart(call: ToolCall, key: string, committed: boolean): Part | undefined {\n    const result = results.get(call);\n    if (call.name === ASK_USER_TOOL) return { kind: 'question', key, call, result, live: !committed, questionId: questionIds.get(call) };\n    // A call gated by `requireApproval` identifies itself: it publishes its summary under APPROVAL_DETAILS before it asks.\n    const record = approvalRecord(result ? result.details : (Array.isArray(live?.['tools']) ? live['tools'] : []).map(object).find(slot => slot?.['callId'] === call.id)?.['details']);\n    if (record) return { kind: 'approval', key, call, result, live: !committed, questionId: questionIds.get(call), summary: record.summary, ...(record.decision ? { decision: record.decision } : {}), ...(result ? { entry: { key: `${key}:step`, call, result, status: status(result) } } : {}) };\n    if (options.artifacts) {\n      // A finished call that carries a descriptor becomes a card; a running `present` shows an \"opening\" card. A failed call stays an ordinary (failed) tool step.\n      const artifact = result ? detectArtifact(call, result, options.artifacts.detect) : undefined;\n      if (artifact) {\n        // A tool whose own result carries the descriptor is replaced by its card; a host-detected card is shown in addition to the step.\n        const own = result && detectArtifact(call, result);\n        return { kind: 'artifact', key, call, state: 'ready', artifact, title: artifact.title, ...(own ? {} : { entry: { key, call, result, status: status(result) } }) };\n      }\n      if (!result && run && call.name === PRESENT_TOOL) {\n        return { kind: 'artifact', key, call, state: 'presenting', artifact: undefined, title: pendingTitle(call) };\n      }\n    }\n    const custom = committed ? renderTool?.(call, result) : undefined;\n    if (custom?.required) { pinned.push({ key, content: custom.content }); return undefined; }\n    if (natural) return undefined;\n    if (custom && (developer || result?.isError || custom.inline)) return { kind: 'tool', key, entry: { key, call, result, status: status(result), custom: custom.content } };\n    // A host that folds only some calls (`groupTool`) keeps the rest as cards, which expert mode hides unless they failed.\n    if (!developer && !result?.isError && options.groupTool && !(result && safe(options.groupTool, { key, call, result, status: status(result) }))) return undefined;\n    return { kind: 'tool', key, entry: { key, call, result, status: status(result) } };\n  }\n  function partsOf(content: readonly StreamPart[], rowKey: string, streaming: boolean, committed: boolean): Part[] {\n    const parts: Part[] = [];\n    for (const [index, part] of content.entries()) {\n      if (part.type === 'text') { const text = visibleText(part.text, streaming && index === content.length - 1, options.hideLine); if (text.length) parts.push({ kind: 'text', key: `${rowKey}:text:${index}`, text }); }\n      else if (part.type === 'thinking') { if (developer && part.thinking.length) parts.push({ kind: 'thinking', key: `${rowKey}:thinking:${index}`, text: part.thinking, streaming: streaming && index === content.length - 1 }); }\n      else { const made = toolPart(part, `${rowKey}:tool:${index}`, committed); if (!natural && (made?.kind === 'artifact' || made?.kind === 'approval') && made.entry) parts.push({ kind: 'tool', key: `${made.key}:step`, entry: made.entry }); if (made) parts.push(made); }\n    }\n    return parts;\n  }\n\n  // Pass 2: rows.\n  const rows: Row[] = [];\n  for (const item of items) {\n    if (item.card) { if (!item.card.required) rows.push({ key: item.key, type: 'card', card: item.card }); continue; }\n    const message = item.message;\n    if (!message) { if (developer) rows.push({ key: item.key, type: 'event', label: item.entry.kind }); continue; }\n    if (message.role === 'system') {\n      if (developer) rows.push({ key: item.key, type: 'system', text: typeof message.content === 'string' ? message.content : message.content.map(part => part.text).join('\\n') });\n    } else if (message.role === 'toolResult') {\n      // A result with its call is shown on the call's card. Only an unmatched failure gets its own row.\n      if (!natural && message.isError && !matched.has(message)) rows.push({ key: item.key, type: 'orphan-result', message });\n    } else if (message.role === 'user') rows.push({ key: item.key, type: 'user', message });\n    else {\n      const parts = partsOf(message.content, item.key, false, true);\n      // Empty/tool-only rounds still contribute their native metadata to the answer.\n      rows.push({ key: item.key, type: 'assistant', parts, streaming: false, stopReason: message.stopReason, ...(message.errorMessage && !natural ? { errorMessage: message.errorMessage } : {}), text: textOf(parts), ...replyMeta(message), entryId: String(item.entry.id) });\n    }\n  }\n  if (typeof taskId === 'number' && liveMessage) {\n    const key = `assistant:${taskId}:${counts.get(taskId) ?? 0}`, content = streamParts(liveMessage['content']);\n    const parts = partsOf(content, key, true, false);\n    if (!natural || parts.length) rows.push({ key, type: 'assistant', parts, streaming: true, text: textOf(parts) });\n  }\n  const merged = mergeTurns(rows).filter(row => row.type !== 'assistant' || row.parts.length || row.stopReason === 'error' || row.stopReason === 'aborted' || row.streaming && !natural).map(row => row.type === 'assistant' && options.artifacts ? { ...row, parts: oneCardPerArtifact(row.parts) } : row);\n  const last = merged[merged.length - 1];\n  if (run && last?.type === 'assistant') merged[merged.length - 1] = { ...last, active: true };\n  return { rows: merged, pinned, run, retry, stageStatus, compacting: Array.isArray(live?.['compactions']) && live['compactions'].length > 0 };\n}\n\n/** What a reply reports about the model round that wrote it, read from Pi's own message (each field only when it is there). */\nexport function replyMeta(message: AssistantMessage): { readonly timestamp?: number; readonly model?: { readonly provider: string; readonly modelId: string }; readonly durationMs?: number } {\n  return {\n    ...(typeof message.timestamp === 'number' ? { timestamp: message.timestamp } : {}),\n    ...(typeof message.provider === 'string' && typeof message.model === 'string' ? { model: { provider: message.provider, modelId: message.model } } : {}),\n    ...(typeof message.durationMs === 'number' ? { durationMs: message.durationMs } : {}),\n  };\n}\n\n/**\n * Pi commits one assistant message per model round, so a turn with tool use is several messages in a row.\n * They read as one answer: merge consecutive assistant rows (unless one ended in an error or stop) so tool calls\n * group across rounds and the turn has a single copy action. The first row's key is kept, so identity is stable.\n */\nfunction mergeTurns(rows: readonly Row[]): Row[] {\n  const out: Row[] = [];\n  for (const row of rows) {\n    const last = out[out.length - 1];\n    if (last?.type === 'assistant' && row.type === 'card' && row.card.inline) {\n      out[out.length - 1] = { ...last, parts: [...last.parts, { kind: 'card', key: row.key, content: row.card.content }] };\n    } else if (last?.type === 'assistant' && row.type === 'assistant' && !last.stopReason?.match(/^(error|aborted)$/)) {\n      out[out.length - 1] = { key: last.key, type: 'assistant', parts: [...last.parts, ...row.parts], streaming: row.streaming,\n        ...(row.stopReason ? { stopReason: row.stopReason } : {}), ...(row.errorMessage ? { errorMessage: row.errorMessage } : {}),\n        text: [last.text, row.text].filter(Boolean).join('\\n\\n'), ...(row.timestamp !== undefined ? { timestamp: row.timestamp } : {}), ...(row.model ? { model: row.model } : {}), ...(last.durationMs !== undefined || row.durationMs !== undefined ? { durationMs: (last.durationMs ?? 0) + (row.durationMs ?? 0) } : {}),\n        ...(row.entryId !== undefined ? { entryId: row.entryId } : last.entryId !== undefined ? { entryId: last.entryId } : {}) };\n    } else out.push(row);\n  }\n  return out;\n}\n\n/**\n * A turn that revises an artifact several times shows one card for it: the last version, at the place of the last step.\n * A running `present` of a file already shown takes over the title of its card.\n */\nfunction oneCardPerArtifact(parts: readonly Part[]): Part[] {\n  const idOf = (part: Part) => part.kind === 'artifact' ? part.artifact ? artifactKey(part.artifact) : (part.state === 'presenting' ? pendingId(part.call) : undefined) : undefined;\n  const last = new Map<string, number>();\n  for (const [index, part] of parts.entries()) { const id = idOf(part); if (id !== undefined) last.set(id, index); }\n  const out: Part[] = [];\n  for (const [index, part] of parts.entries()) {\n    const id = idOf(part);\n    if (id === undefined || last.get(id) === index) {\n      if (part.kind === 'artifact' && part.artifact === undefined && part.title === undefined && id !== undefined) {\n        const earlier = parts.find(other => other.kind === 'artifact' && other.artifact !== undefined && artifactKey(other.artifact) === id);\n        if (earlier?.kind === 'artifact') { out.push({ ...part, title: earlier.title }); continue; }\n      }\n      out.push(part);\n    }\n  }\n  return out;\n}\n\n/** One step of an activity block: a default tool call or a stretch of reasoning. */\nexport type Step = { readonly kind: 'tool'; readonly key: string; readonly entry: ToolEntry }\n  | { readonly kind: 'thinking'; readonly key: string; readonly text: string; readonly streaming: boolean };\n/** An assistant turn is text parts and activity blocks: one block per uninterrupted run of steps. */\nexport type Segment = { readonly kind: 'part'; readonly part: Part } | { readonly kind: 'activity'; readonly key: string; readonly steps: readonly Step[] };\nexport function segments(parts: readonly Part[], groupTool: DeriveOptions['groupTool']): Segment[] {\n  const out: Segment[] = [];\n  let run: Step[] = [];\n  const flush = () => {\n    const first = run[0];\n    if (first) out.push({ kind: 'activity', key: `activity:${first.key}`, steps: run });\n    run = [];\n  };\n  for (const part of parts) {\n    if (part.kind === 'thinking') run.push({ kind: 'thinking', key: part.key, text: part.text, streaming: part.streaming });\n    else if (part.kind === 'tool' && !part.entry.custom && (!groupTool || safe(groupTool, part.entry))) run.push({ kind: 'tool', key: part.key, entry: part.entry });\n    else { flush(); out.push({ kind: 'part', part }); }\n  }\n  flush();\n  return out;\n}\nfunction safe(groupTool: NonNullable<DeriveOptions['groupTool']>, entry: ToolEntry): boolean {\n  try { return entry.result !== undefined && !entry.result.isError && groupTool(entry.call, entry.result) === true; } catch { return false; }\n}\n",
       "type": "registry:lib",
       "target": "components/pi-chat/rows.ts"
     },
     {
       "path": "registry/pi-chat/session.tsx",
-      "content": "'use client';\n\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport type { ChatAttachment, ChatHistoryState, NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps, PendingUpload } from './composer';\nimport type { ConversationFile } from './conversation-files';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, ModelRef, PastedText, PasteToFile, SlashConfig } from './config';\nimport { displayName, looksLikeMarkdown, mentionToken, pieces } from './config';\nimport { ModelEffortPicker } from './pickers';\nimport type { CommandMentions } from './markdown';\nimport type { RowContext } from './message';\nimport type { QueueActions, QueuedMessage } from './queue';\nimport type { AnswerOutcome } from './question-card';\nimport type { ArtifactsConfig } from './artifact';\nimport { derive, isFileBlock, object, queuedMessages } from './rows';\nimport type { ChatCard, Mode, Row } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  readonly renderTool?: (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined;\n  readonly groupTool?: (call: ToolCall, result: ToolResultMessage) => boolean;\n  readonly commandMentions?: CommandMentions;\n  readonly onOpenImage?: (image: ImageContent) => void;\n  readonly onCopy?: (text: string) => Promise<void>;\n  readonly onComposerKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n  readonly fileAccept?: string;\n  /** Optional pills at the left of the composer's controls row. */\n  readonly composerChips?: ComposerProps['chips'];\n  /** `/` menu of host commands and skills. Omit it and `/` is just text. */\n  readonly slash?: SlashConfig;\n  /** Show successful native write/edit paths as file cards under each reply. Off by default: only hosts with workspace file tools should opt in. */\n  readonly fileChanges?: boolean;\n  /** Opens a file from an upload or write/edit card. Falls back to mentions.open. */\n  readonly onOpenFile?: (path: string) => void;\n  /** Pastes above these limits become a file through `attachments` (on by default, 2000 characters or 40 lines). Needs `attachments`. */\n  readonly pasteToFile?: PasteToFile;\n  /** `@` workspace file mentions: a picker, composer chips and styled mentions in sent messages. */\n  readonly mentions?: MentionsConfig;\n  /** Attach button, paste and drop through the host's upload. Takes the place of `onFiles` and `fileAccept`. */\n  readonly attachments?: AttachmentsConfig;\n  /** Model picker in the composer bar. The current model comes from the view's `pi.agent` document. */\n  readonly model?: ModelConfig;\n  /** Thinking level picker in the composer bar. The current level comes from the view's `pi.agent` document. */\n  readonly effort?: EffortConfig;\n  /** Artifact cards: tool results that carry a descriptor become a card that opens the artifact in the host's panel. Omit it and nothing changes. */\n  readonly artifacts?: ArtifactsConfig;\n  /**\n   * Host actions under each settled reply, beside Copy (and Fork): `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `reply-action-<id>`, the menu `reply-action-more`.\n   */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  /** A line under each settled reply (for example the model that answered and the time it took), for the host to show to some people only. */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n}\n\n\nexport type FilesHandler = (files: readonly File[], target: Pick<ReturnType<NativeChatController['getSnapshot']>, 'identity' | 'conversationId'> & { readonly signal: AbortSignal }) => Promise<readonly ChatAttachment[]>;\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: NativeChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: NativeChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** Runs after a message was accepted for sending (for example to scroll to the bottom). */\n  readonly afterSend?: (() => void) | undefined;\n  /** Extra attributes of the row context a surface needs (for example per-reply actions). */\n  readonly rowExtras?: Partial<RowContext> | undefined;\n  /** The optional annotate toggle: when notes are pending (`count` > 0), Send attaches them to the message first. */\n  readonly feedback?: ComposerFeedback | undefined;\n}\n\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController: active, mode, actions, renderEntry, renderTool, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, onOpenFile, fileChanges, pasteToFile, composerChips } = options;\n  const { labels } = useChatText();\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const [error, setError] = useState<string | null>(null);\n  const [uploading, setUploading] = useState(0);\n  const [picked, setPicked] = useState<readonly string[]>([]);\n  const [pending, setPending] = useState<readonly PendingUpload[]>([]);\n  const [changing, setChanging] = useState<'model' | 'effort' | null>(null);\n  const [changeError, setChangeError] = useState<string | null>(null);\n  const [optimistic, setOptimistic] = useState<{ readonly model?: ModelRef; readonly effort?: string }>({});\n  const uploadIds = useRef(0);\n  const uploads = useRef(new Set<AbortController>()), mounted = useRef(false);\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const current = () => mounted.current && active.current === controller && !controller.getSnapshot().disposed;\n  useEffect(() => {\n    mounted.current = true;\n    // A controller disposed before mount throws synchronously; the chat then renders its disposed state.\n    if (!controller.getSnapshot().disposed) void controller.connect().catch(cause => { if (current()) setError(cause instanceof Error ? cause.message : labels.connectionFailed); });\n    return () => { mounted.current = false; for (const upload of uploads.current) upload.abort(); uploads.current.clear(); };\n  }, [controller]);\n\n  const developer = mode === 'developer';\n  // Only the recogniser takes part in deriving rows; which card is open changes without rebuilding them.\n  const artifactDetect = useMemo(() => artifacts ? { detect: artifacts.detect } : undefined, [Boolean(artifacts), artifacts?.detect]); // eslint-disable-line react-hooks/exhaustive-deps\n  const derived = useMemo(() => derive(state.view, { mode, renderEntry, renderTool, groupTool, artifacts: artifactDetect }), [state.view, mode, renderEntry, renderTool, groupTool, artifactDetect]);\n  const queued = useMemo(() => queuedMessages(state.view), [state.view]);\n  const { run } = derived;\n  const earlier = useMemo<readonly Row[]>(() => {\n    if (!state.view || !('entries' in state.history)) return [];\n    const activeIds = new Set(state.view.entries.map(entry => entry.id));\n    const entries = state.history.entries.filter(entry => !activeIds.has(entry.id));\n    return derive({ ...state.view, entries, docs: {} }, { mode, renderEntry: undefined, renderTool: undefined, groupTool: undefined, artifacts: artifactDetect }).rows\n      .map(row => ({ ...row, key: `history:${row.key}`, historical: true }));\n  }, [state.view, state.history, mode, artifactDetect]);\n  const rows = useMemo(() => [...earlier, ...derived.rows], [earlier, derived.rows]);\n  const files = useMemo(() => {\n    const found = new Map<string, ConversationFile>();\n    const open = onOpenFile ?? mentions?.open;\n    const add = (path: string) => {\n      const normalized = path.replace(/^\\.\\//, '');\n      const id = `file:${normalized}`;\n      if (!found.has(id)) found.set(id, { id, name: displayName(normalized), open: open ? () => open(normalized) : undefined });\n    };\n    for (const path of picked) add(path);\n    for (const item of state.draft.attachments) found.set(`draft:${item.id}`, { id: `draft:${item.id}`, name: item.name, open: onOpenImage ? () => onOpenImage(item.content) : undefined });\n    for (const row of derived.rows) {\n      if (row.type === 'user') {\n        const content = typeof row.message.content === 'string' ? [{ type: 'text' as const, text: row.message.content }] : row.message.content;\n        for (const [index, part] of content.entries()) {\n          if (part.type === 'text' && !isFileBlock(part.text)) for (const piece of pieces(part.text, { mentions: true, skills: [] })) { if (piece.kind === 'mention' && piece.value) add(piece.value); }\n          if (part.type === 'image') { const id = `image:${row.key}:${index}`; found.set(id, { id, name: labels.imageAttachment, open: onOpenImage ? () => onOpenImage(part) : undefined }); }\n        }\n      }\n      if (row.type !== 'assistant') continue;\n      for (const part of row.parts) {\n        if (part.kind === 'artifact' && part.artifact) {\n          const artifact = part.artifact, id = `file:${artifact.target.resource.path.replace(/^\\.\\//, '')}`;\n          found.set(id, { id, name: displayName(artifact.target.resource.path), open: artifacts ? () => artifacts.open(artifact) : undefined });\n        }\n        if (part.kind === 'tool' && part.entry.result && !part.entry.result.isError && ['read', 'write', 'edit'].includes(part.entry.call.name)) {\n          const path = part.entry.call.arguments['path'];\n          if (typeof path === 'string') add(path);\n        }\n      }\n    }\n    return [...found.values()];\n  }, [rows, picked, state.draft.attachments, artifacts, onOpenFile, mentions?.open, onOpenImage, labels.imageAttachment]);\n\n  const report = (cause: unknown) => { if (current()) setError(cause instanceof Error ? cause.message : labels.actionFailedShort); };\n  const act = (action: () => Promise<unknown>) => {\n    setError(null);\n    try { void action().catch(report); } catch (cause) { report(cause); }\n  };\n  // A send being confirmed does not block the next one: the controller empties the composer at once and queues the next message behind it.\n  // Only a submission whose outcome is unknown blocks, until it is checked or retried.\n  const unconfirmed = state.send.kind === 'unknown';\n  const connected = state.connection.kind === 'connected';\n  const sendBlocked = uploading > 0 || state.disposed || !connected || unconfirmed;\n  /** Puts a message back into the composer ahead of whatever is there now (nothing is dropped). */\n  const putBack = (text: string, images: readonly ChatAttachment[]) => {\n    if (controller.getSnapshot().disposed) return;\n    const draft = controller.getSnapshot().draft;\n    controller.setText([text, draft.text].filter(value => value.trim()).join('\\n'));\n    if (images.length) controller.setAttachments([...images, ...draft.attachments.filter(item => !images.some(image => image.id === item.id))]);\n  };\n  const working = Boolean(run);\n  const waitingForAnswer = derived.rows.some(row => row.type === 'assistant' && row.parts.some(part => (part.kind === 'question' || part.kind === 'approval') && !part.live && !part.result));\n  const send = () => {\n    if (sendBlocked || !current()) return;\n    const attach = feedback && feedback.count > 0 ? feedback.attach : undefined;\n    if (attach) {\n      // The pending feedback goes with this message: the host attaches it to the text, then the native send reads the draft.\n      act(async () => {\n        // Like any send, the composer empties at once; the person's own text comes back if the feedback or the message is refused.\n        const typed = controller.getSnapshot().draft;\n        controller.setText(''); controller.setAttachments([]);\n        let attached: Awaited<ReturnType<typeof attach>>;\n        try { attached = await attach(typed.text); }\n        catch (cause) { putBack(typed.text, typed.attachments); throw cause; }\n        if (attached.kind === 'refused') { putBack(typed.text, typed.attachments); throw new Error(attached.reason); }\n        if (!current()) { putBack(typed.text, typed.attachments); return; }\n        const submission = await controller.send('followUp', { text: attached.text, attachments: typed.attachments, restore: { text: typed.text, attachments: typed.attachments } });\n        if (submission) feedback?.sent();\n      });\n      afterSend?.();\n      textarea.current?.focus();\n      return;\n    }\n    act(() => controller.send('followUp'));\n    afterSend?.();\n    textarea.current?.focus();\n  };\n  // A queued message is taken back (withdrawn) before it is edited or steered; if Pi already placed it, that is reported and nothing is lost.\n  async function takeBack(item: QueuedMessage) {\n    if (!actions?.withdraw) throw new Error(labels.queueLocked);\n    const outcome = await actions.withdraw(item.id);\n    if (outcome === 'already_placed' || outcome === 'settled') throw new Error(labels.tooLate);\n  }\n  const queuedContent = (item: QueuedMessage) => {\n    const parts = Array.isArray(item.content) ? item.content as readonly { type?: unknown; text?: unknown; data?: unknown; mimeType?: unknown }[] : [];\n    const text = typeof item.content === 'string' ? item.content : parts.flatMap(part => part?.type === 'text' && typeof part.text === 'string' && !isFileBlock(part.text) ? [part.text] : []).join('\\n');\n    const images: ChatAttachment[] = parts.flatMap((part, index) => part?.type === 'image' && typeof part.data === 'string' && typeof part.mimeType === 'string'\n      ? [{ id: `queued-${String(item.id)}-${index}`, name: `image-${index + 1}`, content: { type: 'image' as const, data: part.data, mimeType: part.mimeType } }] : []);\n    return { text, images };\n  };\n  const queueActions: QueueActions | undefined = actions?.withdraw ? {\n    edit: async item => {\n      await takeBack(item);\n      const { text, images } = queuedContent(item), draft = controller.getSnapshot().draft;\n      controller.setText(draft.text.trim() ? `${text}\\n${draft.text}` : text);\n      if (images.length) controller.setAttachments([...draft.attachments, ...images]);\n      textarea.current?.focus();\n    },\n    steer: async item => {\n      if (sendBlocked) throw new Error(labels.waitToSteer);\n      await takeBack(item);\n      const { text, images } = queuedContent(item);\n      // Sent as explicit content, so the person's own draft is never touched; a refused steer comes back into the composer (the controller\n      // puts it back), an unknown one is held for checking.\n      try {\n        const submission = await controller.send('steer', { text, attachments: images });\n        if (!submission && current() && controller.getSnapshot().send.kind === 'blocked') setError(labels.steerRefused);\n      } catch (cause) { putBack(text, images); if (current()) setError(cause instanceof Error ? cause.message : labels.steerFailed); }\n    },\n  } : undefined;\n  const addMentions = (paths: readonly string[]) => {\n    const text = controller.getSnapshot().draft.text;\n    controller.setText(`${text}${text && !/\\s$/.test(text) ? ' ' : ''}${paths.map(mentionToken).join(' ')} `);\n    setPicked(value => [...new Set([...value, ...paths])]);\n  };\n  /** Uploads files; `restore` (a pasted text) is what their pending cards undo: it abandons the upload and puts the text back. */\n  async function upload(files: readonly File[], paste?: { readonly restore: () => void; readonly after: string }) {\n    if ((!onFiles && !attachments) || !files.length || !current()) return;\n    const abort = new AbortController(); uploads.current.add(abort); setUploading(value => value + 1);\n    const ids = files.map(() => `upload-${++uploadIds.current}`);\n    const settle = (failure?: string) => setPending(items => failure === undefined ? items.filter(item => !ids.includes(item.id))\n      : items.map(item => ids.includes(item.id) ? { ...item, state: 'failed', error: failure } : item));\n    const cancel = paste && (() => { abort.abort(); setPending(items => items.filter(item => !ids.includes(item.id))); paste.restore(); });\n    setPending(items => [...items, ...files.map((file, index): PendingUpload => ({ id: ids[index]!, name: file.name, state: 'uploading',\n      ...(cancel && paste ? { cancel, restoreWhile: paste.after } : {}) }))]);\n    try {\n      let added: readonly ChatAttachment[] = [];\n      let paths: string[] = [];\n      if (attachments) {\n        for (const result of await attachments.upload([...files], abort.signal)) {\n          if (result.image) added = [...added, { id: `image-${Date.now()}-${++uploadIds.current}`, name: result.name, content: { type: 'image', data: result.image.data, mimeType: result.image.mimeType } }];\n          else if (result.path) paths = [...paths, result.path];\n        }\n      } else added = await onFiles!(files, { identity: state.identity, conversationId: state.conversationId, signal: abort.signal });\n      if (current() && !abort.signal.aborted) {\n        if (added.length) controller.setAttachments([...controller.getSnapshot().draft.attachments, ...added]);\n        if (paths.length) addMentions(paths);\n        settle();\n      }\n    } catch (cause) { if (!abort.signal.aborted) { settle(cause instanceof Error ? cause.message : labels.uploadFailedShort); if (!attachments) report(cause); } }\n    finally { uploads.current.delete(abort); if (current()) setUploading(value => value - 1); }\n  }\n  /** A paste the composer took: saved as a file under `uploads/` (Send then references it). Cancelling puts the text back where it was pasted. */\n  const pasteText = (paste: PastedText) => {\n    if (!attachments || !current()) return;\n    const at = new Date(), two = (value: number) => String(value).padStart(2, '0');\n    const stamp = `${at.getFullYear()}-${two(at.getMonth() + 1)}-${two(at.getDate())} ${two(at.getHours())}-${two(at.getMinutes())}-${two(at.getSeconds())}`;\n    const markdown = looksLikeMarkdown(paste.text);\n    const file = new File([paste.text], `${labels.pastedFileName(stamp)}${markdown ? '.md' : '.txt'}`, { type: markdown ? 'text/markdown' : 'text/plain' });\n    // The pasted text replaces its selection when the paste is accepted, so the draft shows what is left. Restoring inserts the text at\n    // the same place and deletes nothing: whatever was typed since stays.\n    const draft = controller.getSnapshot().draft.text;\n    const start = Math.min(paste.start, draft.length), end = Math.min(Math.max(paste.end, start), draft.length);\n    const after = `${draft.slice(0, start)}${draft.slice(end)}`;\n    controller.setText(after);\n    const restore = () => {\n      if (!current()) return;\n      const now = controller.getSnapshot().draft.text;\n      const at = Math.min(start, now.length);\n      controller.setText(`${now.slice(0, at)}${paste.text}${now.slice(at)}`);\n      textarea.current?.focus();\n    };\n    void upload([file], { restore, after });\n  };\n  const agentDoc = object(state.view?.docs['pi.agent']);\n  const currentModel = object(agentDoc?.['model']);\n  const viewModel: ModelRef | undefined = typeof currentModel?.['provider'] === 'string' && typeof currentModel['modelId'] === 'string' ? { provider: currentModel['provider'], modelId: currentModel['modelId'] } : undefined;\n  const viewEffort = typeof agentDoc?.['thinkingLevel'] === 'string' ? agentDoc['thinkingLevel'] : undefined;\n  // Show the accepted choice until the watch delivers it, so the label does not flicker back.\n  useEffect(() => {\n    const same = optimistic.model && viewModel && optimistic.model.provider === viewModel.provider && optimistic.model.modelId === viewModel.modelId;\n    if (same || (optimistic.effort !== undefined && optimistic.effort === viewEffort)) setOptimistic(value => ({ ...(same ? {} : value.model ? { model: value.model } : {}), ...(optimistic.effort === viewEffort ? {} : value.effort ? { effort: value.effort } : {}) }));\n  }, [optimistic, viewModel?.provider, viewModel?.modelId, viewEffort]);\n  useEffect(() => { if (!state.draft.text) setPicked(value => value.length ? [] : value); }, [state.draft.text]);\n  async function change(kind: 'model' | 'effort', apply: () => Promise<void>, accepted: () => void, rejected: () => void) {\n    if (changing || !current()) return;\n    setChanging(kind); setChangeError(null);\n    try { await apply(); if (current()) accepted(); }\n    catch (cause) { if (current()) { rejected(); setChangeError(cause instanceof Error && cause.message ? cause.message : labels.changeRefused); } }\n    finally { if (current()) setChanging(null); }\n  }\n  const activateMention = (command: { readonly name: string; readonly behavior: 'execute' | 'insert' }) => {\n    if (!current() || controller.getSnapshot().connection.kind !== 'connected') return;\n    const catalog = commandMentions;\n    const selected = catalog?.commands.find(item => item.name === command.name && item.behavior === command.behavior);\n    if (catalog && selected) act(async () => catalog.onActivate({ name: selected.name, behavior: selected.behavior }));\n  };\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: activateMention } : undefined,\n    answer: actions?.answer,\n    artifacts: artifacts ? { open: artifacts.open, isOpen: artifacts.isOpen, kinds: artifacts.kinds } : undefined,\n    messageActions,\n    replyFooter,\n    pieces: slash?.skills?.length || mentions || attachments ? { mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.render, preview: mentions?.preview } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }), [developer, groupTool, onOpenImage, onCopy, onOpenFile, fileChanges, commandMentions, actions?.answer, slash?.skills, mentions, mentions?.open, mentions?.render, mentions?.preview, attachments, artifacts?.open, artifacts?.isOpen, artifacts?.kinds, messageActions, replyFooter, rowExtras]);\n\n  /** The model-and-effort pill and the note that reports a refused change. */\n  const pickers = () => {\n    const disabled = changing !== null || state.disposed || !connected;\n    const barStart = model || effort ? <ModelEffortPicker model={model} effort={effort} currentModel={optimistic.model ?? viewModel} currentEffort={optimistic.effort ?? viewEffort} disabled={disabled} busy={changing}\n      onModel={next => void change('model', () => model!.change(next), () => setOptimistic(value => ({ ...value, model: next })), () => {})}\n      onEffort={next => void change('effort', () => effort!.change(next), () => setOptimistic(value => ({ ...value, effort: next })), () => {})} /> : undefined;\n    const barNote = changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${changeError} (${labels.dismissHint})`} onClick={() => setChangeError(null)}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const empty = connected && !state.view?.entries.length && !rows.length;\n  const loading = (state.connection.kind === 'idle' || state.connection.kind === 'connecting') && !state.view;\n\n  /** Everything `Composer` needs from the session; a surface adds its layout and slots. */\n  const composer = {\n    text: state.draft.text, onText: (text: string) => controller.setText(text), onKeyDown: onComposerKeyDown, textareaRef: textarea,\n    attachments: state.draft.attachments.map(item => ({ id: item.id, name: item.name, mimeType: item.content.mimeType, data: item.content.data })),\n    onRemoveAttachment: (id: string) => controller.setAttachments(controller.getSnapshot().draft.attachments.filter(item => item.id !== id)),\n    working, sendBlocked, disabled: state.disposed, stopRequested: state.stop === 'requested',\n    onSend: send, onStop: () => act(controller.stop),\n    uploading: uploading > 0, canAttach: Boolean(onFiles || attachments), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void upload(files); },\n    slash, onSlashError: report, mentions, mentionPaths: picked, onMentionPicked: (path: string) => setPicked(value => value.includes(path) ? value : [...value, path]),\n    uploads: pending, onDismissUpload: (id: string) => setPending(items => items.filter(item => item.id !== id)),\n    onPasteText: attachments ? pasteText : undefined, pasteToFile,\n    feedback, chips: composerChips,\n  };\n\n  return { state, derived, rows, queued, queueActions, working, waitingForAnswer, connected, sendBlocked, error, setError, report, act, current, textarea, rowContext, composer, files, pickers, empty, loading, developer };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\n/** One scroll root for current and archived rows. Native paging stays in the borrowed controller. */\nexport function useTranscript(rows: readonly Row[], page = 60, more = 40, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }) {\n  const [limit, setLimit] = useState(page);\n  const [sentinel, setSentinel] = useState<HTMLDivElement | null>(null);\n  const [loaded, setLoaded] = useState(0);\n  const pending = useRef(false);\n  const anchor = useRef<{ readonly length: number; readonly limit: number } | undefined>(undefined);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  const stick = { scrollRef: setScroller, scrollToBottom, isAtBottom: !scrollable.end };\n  const hidden = Math.max(0, rows.length - limit);\n  const reveal = useCallback(() => {\n    if (pending.current || anchor.current) return;\n    const state = history?.state;\n    if (hidden === 0 && (!history?.connected || !state || state.kind === 'disabled' || state.kind === 'loading' || state.kind === 'ready' && !state.hasMore)) return;\n    anchor.current = { length: rows.length, limit };\n    if (hidden > 0) setLimit(value => value + more);\n    else if (history) {\n      pending.current = true;\n      void Promise.resolve().then(history.load).catch(() => { anchor.current = undefined; }).finally(() => { pending.current = false; });\n    }\n  }, [hidden, history?.state, history?.connected, history?.load, rows.length, limit, more]);\n  useLayoutEffect(() => {\n    const saved = anchor.current;\n    if (!scroller || !saved || history?.state.kind === 'loading') return;\n    const added = Math.max(0, rows.length - saved.length);\n    if (limit < saved.limit + added) { setLimit(saved.limit + added); return; }\n    anchor.current = undefined;\n    setLoaded(count => count + Math.max(0, Math.min(rows.length, limit) - Math.min(saved.length, saved.limit)));\n  }, [rows, limit, scroller, history?.state]);\n  useEffect(() => {\n    if (!scroller || !sentinel || typeof IntersectionObserver === 'undefined' || history?.state.kind === 'loading' || history?.state.kind === 'error') return;\n    const observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting) && (scroller.scrollHeight <= scroller.clientHeight || scrollable.start)) reveal();\n    }, { root: scroller, rootMargin: '240px 0px 0px' });\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [scroller, sentinel, reveal, scrollable.start, history?.state]);\n  return { stick, hidden, reveal, sentinelRef: setSentinel, loaded, visible: <T,>(items: readonly T[]): readonly T[] => hidden ? items.slice(hidden) : items, reset: () => { anchor.current = undefined; setLimit(page); } };\n}\n",
+      "content": "'use client';\n\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport type { ChatAttachment, ChatHistoryState } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps, PendingUpload } from './composer';\nimport type { ConversationFile } from './conversation-files';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, ModelRef, PastedText, PasteToFile, SlashConfig } from './config';\nimport { displayName, looksLikeMarkdown, mentionToken, pieces } from './config';\nimport { ModelEffortPicker } from './pickers';\nimport type { CommandMentions } from './markdown';\nimport type { RowContext } from './message';\nimport type { QueueActions, QueuedMessage } from './queue';\nimport type { AnswerOutcome } from './question-card';\nimport type { ArtifactsConfig } from './artifact';\nimport { derive, isFileBlock, object, queuedMessages } from './rows';\nimport type { ChatCard, Mode, Row } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  /** `natural` shows only messages, replies and question, approval and artifact cards, with one \"Preparing…\" status while the agent works: no tool steps, reasoning, file discovery or raw error text. Omit it and nothing changes. */\n  readonly presentation?: 'natural';\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  /** Omit complete assistant lines from display, copy and actions. Live trailing fragments wait for a newline or settlement. Not transport redaction. */\n  readonly hideLine?: (line: string) => boolean;\n  /** Initial number of displayed rows (default 60). An explicit limit uses Show earlier, not automatic paging; nothing is deleted. */\n  readonly displayLimit?: number;\n  /** Explicitly enable messageActions for paged history too; other historical controls remain inert. */\n  readonly historicalMessageActions?: boolean;\n  /** Host-rendered unread indicator, keyed by the reply. The host owns seen state and its persistence. */\n  readonly unread?: (reply: ReplyRef) => ReactNode;\n  /** Message inside the single native response-error notice. Null/undefined keeps the default; native status and metadata stay unchanged. */\n  readonly replyError?: (reply: ReplyRef) => ReactNode;\n  readonly renderTool?: (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined;\n  readonly groupTool?: (call: ToolCall, result: ToolResultMessage) => boolean;\n  readonly commandMentions?: CommandMentions;\n  readonly onOpenImage?: (image: ImageContent) => void;\n  readonly onCopy?: (text: string) => Promise<void>;\n  readonly onComposerKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n  readonly fileAccept?: string;\n  /** Optional pills at the left of the composer's controls row. */\n  readonly composerChips?: ComposerProps['chips'];\n  /** Contextual host content above the input, for example a removable quote. */\n  readonly composerHeader?: ReactNode;\n  /** Host-owned content participates in send readiness without native image attachments. */\n  readonly composerHasContent?: boolean;\n  /** Retain files for the host's send operation instead of uploading immediately. */\n  readonly onPickFiles?: (files: readonly File[]) => void;\n  /** `/` menu of host commands and skills. Omit it and `/` is just text. */\n  readonly slash?: SlashConfig;\n  /** Show successful native write/edit paths as file cards under each reply. Off by default: only hosts with workspace file tools should opt in. */\n  readonly fileChanges?: boolean;\n  /** Opens a file from an upload or write/edit card. Falls back to mentions.open. */\n  readonly onOpenFile?: (path: string) => void;\n  /** Pastes above these limits become a file through `attachments` (on by default, 2000 characters or 40 lines). Needs `attachments`. */\n  readonly pasteToFile?: PasteToFile;\n  /** `@` workspace file mentions: a picker, composer chips and styled mentions in sent messages. */\n  readonly mentions?: MentionsConfig;\n  /** Attach button, paste and drop through the host's upload. Takes the place of `onFiles` and `fileAccept`. */\n  readonly attachments?: AttachmentsConfig;\n  /** Model picker in the composer bar. The current model comes from the view's `pi.agent` document. */\n  readonly model?: ModelConfig;\n  /** Thinking level picker in the composer bar. The current level comes from the view's `pi.agent` document. */\n  readonly effort?: EffortConfig;\n  /** Artifact cards: tool results that carry a descriptor become a card that opens the artifact in the host's panel. Omit it and nothing changes. */\n  readonly artifacts?: ArtifactsConfig;\n  /**\n   * Host actions under each settled reply, beside Copy (and Fork): `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `reply-action-<id>`, the menu `reply-action-more`.\n   */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  /** A line under each settled reply (for example the model that answered and the time it took), for the host to show to some people only. */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n}\n\n\nexport type FilesHandler = (files: readonly File[], target: Pick<ReturnType<ChatController['getSnapshot']>, 'identity' | 'conversationId'> & { readonly signal: AbortSignal }) => Promise<readonly ChatAttachment[]>;\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: ChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: ChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** Runs after a message was accepted for sending (for example to scroll to the bottom). */\n  readonly afterSend?: (() => void) | undefined;\n  /** Extra attributes of the row context a surface needs (for example per-reply actions). */\n  readonly rowExtras?: Partial<RowContext> | undefined;\n  /** The optional annotate toggle: when notes are pending (`count` > 0), Send attaches them to the message first. */\n  readonly feedback?: ComposerFeedback | undefined;\n}\n\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController: active, mode, presentation, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, onOpenFile, fileChanges, pasteToFile, composerChips, composerHeader, composerHasContent, onPickFiles } = options;\n  const { labels } = useChatText();\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const [error, setError] = useState<string | null>(null);\n  const [uploading, setUploading] = useState(0);\n  const [picked, setPicked] = useState<readonly string[]>([]);\n  const [pending, setPending] = useState<readonly PendingUpload[]>([]);\n  const [changing, setChanging] = useState<'model' | 'effort' | null>(null);\n  const [changeError, setChangeError] = useState<string | null>(null);\n  const [optimistic, setOptimistic] = useState<{ readonly model?: ModelRef; readonly effort?: string }>({});\n  const uploadIds = useRef(0);\n  const uploads = useRef(new Set<AbortController>()), mounted = useRef(false);\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const current = () => mounted.current && active.current === controller && !controller.getSnapshot().disposed;\n  useEffect(() => {\n    mounted.current = true;\n    // A controller disposed before mount throws synchronously; the chat then renders its disposed state.\n    if (!controller.getSnapshot().disposed) void controller.connect().catch(cause => { if (current()) setError(cause instanceof Error ? cause.message : labels.connectionFailed); });\n    return () => { mounted.current = false; for (const upload of uploads.current) upload.abort(); uploads.current.clear(); };\n  }, [controller]);\n\n  const natural = presentation === 'natural';\n  const developer = mode === 'developer' && !natural;\n  // Only the recogniser takes part in deriving rows; which card is open changes without rebuilding them.\n  const artifactDetect = useMemo(() => artifacts ? { detect: artifacts.detect } : undefined, [Boolean(artifacts), artifacts?.detect]); // eslint-disable-line react-hooks/exhaustive-deps\n  const derived = useMemo(() => derive(state.view, { mode, presentation, hideLine, renderEntry, renderTool, groupTool, artifacts: artifactDetect }), [state.view, mode, presentation, hideLine, renderEntry, renderTool, groupTool, artifactDetect]);\n  const queued = useMemo(() => queuedMessages(state.view), [state.view]);\n  const { run } = derived;\n  const earlier = useMemo<readonly Row[]>(() => {\n    if (!state.view || !('entries' in state.history)) return [];\n    const activeIds = new Set(state.view.entries.map(entry => entry.id));\n    const entries = state.history.entries.filter(entry => !activeIds.has(entry.id));\n    return derive({ ...state.view, entries, docs: {} }, { mode, presentation, hideLine, renderEntry: undefined, renderTool: undefined, groupTool: undefined, artifacts: artifactDetect }).rows\n      .map(row => ({ ...row, key: `history:${row.key}`, historical: true }));\n  }, [state.view, state.history, mode, presentation, hideLine, artifactDetect]);\n  const rows = useMemo(() => [...earlier, ...derived.rows], [earlier, derived.rows]);\n  const files = useMemo(() => {\n    const found = new Map<string, ConversationFile>();\n    const open = onOpenFile ?? mentions?.open;\n    const add = (path: string) => {\n      const normalized = path.replace(/^\\.\\//, '');\n      const id = `file:${normalized}`;\n      if (!found.has(id)) found.set(id, { id, name: displayName(normalized), open: open ? () => open(normalized) : undefined });\n    };\n    for (const path of picked) add(path);\n    for (const item of state.draft.attachments) found.set(`draft:${item.id}`, { id: `draft:${item.id}`, name: item.name, open: onOpenImage ? () => onOpenImage(item.content) : undefined });\n    for (const row of derived.rows) {\n      if (row.type === 'user') {\n        const content = typeof row.message.content === 'string' ? [{ type: 'text' as const, text: row.message.content }] : row.message.content;\n        for (const [index, part] of content.entries()) {\n          if (part.type === 'text' && !isFileBlock(part.text)) for (const piece of pieces(part.text, { mentions: true, skills: [] })) { if (piece.kind === 'mention' && piece.value) add(piece.value); }\n          if (part.type === 'image') { const id = `image:${row.key}:${index}`; found.set(id, { id, name: labels.imageAttachment, open: onOpenImage ? () => onOpenImage(part) : undefined }); }\n        }\n      }\n      if (row.type !== 'assistant') continue;\n      for (const part of row.parts) {\n        if (part.kind === 'artifact' && part.artifact) {\n          const artifact = part.artifact, id = `file:${artifact.target.resource.path.replace(/^\\.\\//, '')}`;\n          found.set(id, { id, name: displayName(artifact.target.resource.path), open: artifacts ? () => artifacts.open(artifact) : undefined });\n        }\n        if (!natural && part.kind === 'tool' && part.entry.result && !part.entry.result.isError && ['read', 'write', 'edit'].includes(part.entry.call.name)) {\n          const path = part.entry.call.arguments['path'];\n          if (typeof path === 'string') add(path);\n        }\n      }\n    }\n    return [...found.values()];\n  }, [rows, picked, state.draft.attachments, artifacts, onOpenFile, mentions?.open, onOpenImage, labels.imageAttachment]);\n\n  const report = (cause: unknown) => { if (current()) setError(cause instanceof Error ? cause.message : labels.actionFailedShort); };\n  const act = (action: () => Promise<unknown>) => {\n    setError(null);\n    try { void action().catch(report); } catch (cause) { report(cause); }\n  };\n  // A send being confirmed does not block the next one: the controller empties the composer at once and queues the next message behind it.\n  // Only a submission whose outcome is unknown blocks, until it is checked or retried.\n  const unconfirmed = state.send.kind === 'unknown';\n  const connected = state.connection.kind === 'connected';\n  const sendBlocked = uploading > 0 || state.disposed || !connected || unconfirmed;\n  /** Puts a message back into the composer ahead of whatever is there now (nothing is dropped). */\n  const putBack = (text: string, images: readonly ChatAttachment[]) => {\n    if (controller.getSnapshot().disposed) return;\n    const draft = controller.getSnapshot().draft;\n    controller.setText([text, draft.text].filter(value => value.trim()).join('\\n'));\n    if (images.length) controller.setAttachments([...images, ...draft.attachments.filter(item => !images.some(image => image.id === item.id))]);\n  };\n  const working = Boolean(run);\n  const waitingForAnswer = derived.rows.some(row => row.type === 'assistant' && row.parts.some(part => (part.kind === 'question' || part.kind === 'approval') && !part.live && !part.result));\n  const send = () => {\n    if (sendBlocked || !current()) return;\n    const attach = feedback && feedback.count > 0 ? feedback.attach : undefined;\n    if (attach) {\n      // The pending feedback goes with this message: the host attaches it to the text, then the native send reads the draft.\n      act(async () => {\n        // Like any send, the composer empties at once; the person's own text comes back if the feedback or the message is refused.\n        const typed = controller.getSnapshot().draft;\n        controller.setText(''); controller.setAttachments([]);\n        let attached: Awaited<ReturnType<typeof attach>>;\n        try { attached = await attach(typed.text); }\n        catch (cause) { putBack(typed.text, typed.attachments); throw cause; }\n        if (attached.kind === 'refused') { putBack(typed.text, typed.attachments); throw new Error(attached.reason); }\n        if (!current()) { putBack(typed.text, typed.attachments); return; }\n        const submission = await controller.send('followUp', { text: attached.text, attachments: typed.attachments, restore: { text: typed.text, attachments: typed.attachments } });\n        if (submission) feedback?.sent();\n      });\n      afterSend?.();\n      textarea.current?.focus();\n      return;\n    }\n    act(() => controller.send('followUp'));\n    afterSend?.();\n    textarea.current?.focus();\n  };\n  // A queued message is taken back (withdrawn) before it is edited or steered; if Pi already placed it, that is reported and nothing is lost.\n  async function takeBack(item: QueuedMessage) {\n    if (!actions?.withdraw) throw new Error(labels.queueLocked);\n    const outcome = await actions.withdraw(item.id);\n    if (outcome === 'already_placed' || outcome === 'settled') throw new Error(labels.tooLate);\n  }\n  const queuedContent = (item: QueuedMessage) => {\n    const parts = Array.isArray(item.content) ? item.content as readonly { type?: unknown; text?: unknown; data?: unknown; mimeType?: unknown }[] : [];\n    const text = typeof item.content === 'string' ? item.content : parts.flatMap(part => part?.type === 'text' && typeof part.text === 'string' && !isFileBlock(part.text) ? [part.text] : []).join('\\n');\n    const images: ChatAttachment[] = parts.flatMap((part, index) => part?.type === 'image' && typeof part.data === 'string' && typeof part.mimeType === 'string'\n      ? [{ id: `queued-${String(item.id)}-${index}`, name: `image-${index + 1}`, content: { type: 'image' as const, data: part.data, mimeType: part.mimeType } }] : []);\n    return { text, images };\n  };\n  const queueActions: QueueActions | undefined = actions?.withdraw ? {\n    edit: async item => {\n      await takeBack(item);\n      const { text, images } = queuedContent(item), draft = controller.getSnapshot().draft;\n      controller.setText(draft.text.trim() ? `${text}\\n${draft.text}` : text);\n      if (images.length) controller.setAttachments([...draft.attachments, ...images]);\n      textarea.current?.focus();\n    },\n    steer: async item => {\n      if (sendBlocked) throw new Error(labels.waitToSteer);\n      await takeBack(item);\n      const { text, images } = queuedContent(item);\n      // Sent as explicit content, so the person's own draft is never touched; a refused steer comes back into the composer (the controller\n      // puts it back), an unknown one is held for checking.\n      try {\n        const submission = await controller.send('steer', { text, attachments: images });\n        if (!submission && current() && controller.getSnapshot().send.kind === 'blocked') setError(labels.steerRefused);\n      } catch (cause) { putBack(text, images); if (current()) setError(cause instanceof Error ? cause.message : labels.steerFailed); }\n    },\n  } : undefined;\n  const addMentions = (paths: readonly string[]) => {\n    const text = controller.getSnapshot().draft.text;\n    controller.setText(`${text}${text && !/\\s$/.test(text) ? ' ' : ''}${paths.map(mentionToken).join(' ')} `);\n    setPicked(value => [...new Set([...value, ...paths])]);\n  };\n  /** Uploads files; `restore` (a pasted text) is what their pending cards undo: it abandons the upload and puts the text back. */\n  async function upload(files: readonly File[], paste?: { readonly restore: () => void; readonly after: string }) {\n    if (!files.length || !current()) return;\n    if (onPickFiles) { onPickFiles(files); return; }\n    if (!onFiles && !attachments) return;\n    const abort = new AbortController(); uploads.current.add(abort); setUploading(value => value + 1);\n    const ids = files.map(() => `upload-${++uploadIds.current}`);\n    const settle = (failure?: string) => setPending(items => failure === undefined ? items.filter(item => !ids.includes(item.id))\n      : items.map(item => ids.includes(item.id) ? { ...item, state: 'failed', error: failure } : item));\n    const cancel = paste && (() => { abort.abort(); setPending(items => items.filter(item => !ids.includes(item.id))); paste.restore(); });\n    setPending(items => [...items, ...files.map((file, index): PendingUpload => ({ id: ids[index]!, name: file.name, state: 'uploading',\n      ...(cancel && paste ? { cancel, restoreWhile: paste.after } : {}) }))]);\n    try {\n      let added: readonly ChatAttachment[] = [];\n      let paths: string[] = [];\n      if (attachments) {\n        for (const result of await attachments.upload([...files], abort.signal)) {\n          if (result.image) added = [...added, { id: `image-${Date.now()}-${++uploadIds.current}`, name: result.name, content: { type: 'image', data: result.image.data, mimeType: result.image.mimeType } }];\n          else if (result.path) paths = [...paths, result.path];\n        }\n      } else added = await onFiles!(files, { identity: state.identity, conversationId: state.conversationId, signal: abort.signal });\n      if (current() && !abort.signal.aborted) {\n        if (added.length) controller.setAttachments([...controller.getSnapshot().draft.attachments, ...added]);\n        if (paths.length) addMentions(paths);\n        settle();\n      }\n    } catch (cause) { if (!abort.signal.aborted) { settle(cause instanceof Error ? cause.message : labels.uploadFailedShort); if (!attachments) report(cause); } }\n    finally { uploads.current.delete(abort); if (current()) setUploading(value => value - 1); }\n  }\n  /** A paste the composer took: saved as a file under `uploads/` (Send then references it). Cancelling puts the text back where it was pasted. */\n  const pasteText = (paste: PastedText) => {\n    if (!attachments || !current()) return;\n    const at = new Date(), two = (value: number) => String(value).padStart(2, '0');\n    const stamp = `${at.getFullYear()}-${two(at.getMonth() + 1)}-${two(at.getDate())} ${two(at.getHours())}-${two(at.getMinutes())}-${two(at.getSeconds())}`;\n    const markdown = looksLikeMarkdown(paste.text);\n    const file = new File([paste.text], `${labels.pastedFileName(stamp)}${markdown ? '.md' : '.txt'}`, { type: markdown ? 'text/markdown' : 'text/plain' });\n    // The pasted text replaces its selection when the paste is accepted, so the draft shows what is left. Restoring inserts the text at\n    // the same place and deletes nothing: whatever was typed since stays.\n    const draft = controller.getSnapshot().draft.text;\n    const start = Math.min(paste.start, draft.length), end = Math.min(Math.max(paste.end, start), draft.length);\n    const after = `${draft.slice(0, start)}${draft.slice(end)}`;\n    controller.setText(after);\n    const restore = () => {\n      if (!current()) return;\n      const now = controller.getSnapshot().draft.text;\n      const at = Math.min(start, now.length);\n      controller.setText(`${now.slice(0, at)}${paste.text}${now.slice(at)}`);\n      textarea.current?.focus();\n    };\n    void upload([file], { restore, after });\n  };\n  const agentDoc = object(state.view?.docs['pi.agent']);\n  const currentModel = object(agentDoc?.['model']);\n  const viewModel: ModelRef | undefined = typeof currentModel?.['provider'] === 'string' && typeof currentModel['modelId'] === 'string' ? { provider: currentModel['provider'], modelId: currentModel['modelId'] } : undefined;\n  const viewEffort = typeof agentDoc?.['thinkingLevel'] === 'string' ? agentDoc['thinkingLevel'] : undefined;\n  // Show the accepted choice until the watch delivers it, so the label does not flicker back.\n  useEffect(() => {\n    const same = optimistic.model && viewModel && optimistic.model.provider === viewModel.provider && optimistic.model.modelId === viewModel.modelId;\n    if (same || (optimistic.effort !== undefined && optimistic.effort === viewEffort)) setOptimistic(value => ({ ...(same ? {} : value.model ? { model: value.model } : {}), ...(optimistic.effort === viewEffort ? {} : value.effort ? { effort: value.effort } : {}) }));\n  }, [optimistic, viewModel?.provider, viewModel?.modelId, viewEffort]);\n  useEffect(() => { if (!state.draft.text) setPicked(value => value.length ? [] : value); }, [state.draft.text]);\n  async function change(kind: 'model' | 'effort', apply: () => Promise<void>, accepted: () => void, rejected: () => void) {\n    if (changing || !current()) return;\n    setChanging(kind); setChangeError(null);\n    try { await apply(); if (current()) accepted(); }\n    catch (cause) { if (current()) { rejected(); setChangeError(cause instanceof Error && cause.message ? cause.message : labels.changeRefused); } }\n    finally { if (current()) setChanging(null); }\n  }\n  const activateMention = (command: { readonly name: string; readonly behavior: 'execute' | 'insert' }) => {\n    if (!current() || controller.getSnapshot().connection.kind !== 'connected') return;\n    const catalog = commandMentions;\n    const selected = catalog?.commands.find(item => item.name === command.name && item.behavior === command.behavior);\n    if (catalog && selected) act(async () => catalog.onActivate({ name: selected.name, behavior: selected.behavior }));\n  };\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, natural, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: activateMention } : undefined,\n    answer: actions?.answer,\n    artifacts: artifacts ? { open: artifacts.open, isOpen: artifacts.isOpen, kinds: artifacts.kinds } : undefined,\n    messageActions, historicalMessageActions, unread, replyError,\n    replyFooter,\n    pieces: slash?.skills?.length || mentions || attachments ? { mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.renderSent ?? mentions?.render, preview: mentions?.preview, audioUrl: mentions?.audioUrl } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }), [controller, developer, natural, groupTool, onOpenImage, onCopy, onOpenFile, fileChanges, commandMentions, actions?.answer, slash?.skills, mentions, mentions?.open, mentions?.render, mentions?.renderSent, mentions?.preview, mentions?.audioUrl, attachments, artifacts?.open, artifacts?.isOpen, artifacts?.kinds, messageActions, historicalMessageActions, unread, replyError, replyFooter, rowExtras]);\n\n  /** The model-and-effort pill and the note that reports a refused change. */\n  const pickers = () => {\n    const disabled = changing !== null || state.disposed || !connected;\n    const barStart = model || effort ? <ModelEffortPicker model={model} effort={effort} currentModel={optimistic.model ?? viewModel} currentEffort={optimistic.effort ?? viewEffort} disabled={disabled} busy={changing}\n      onModel={next => void change('model', () => model!.change(next), () => setOptimistic(value => ({ ...value, model: next })), () => {})}\n      onEffort={next => void change('effort', () => effort!.change(next), () => setOptimistic(value => ({ ...value, effort: next })), () => {})} /> : undefined;\n    const barNote = changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${changeError} (${labels.dismissHint})`} onClick={() => setChangeError(null)}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const empty = connected && !state.view?.entries.length && !rows.length;\n  const loading = (state.connection.kind === 'idle' || state.connection.kind === 'connecting') && !state.view;\n\n  /** Everything `Composer` needs from the session; a surface adds its layout and slots. */\n  const composer = {\n    text: state.draft.text, onText: (text: string) => controller.setText(text), onKeyDown: onComposerKeyDown, textareaRef: textarea,\n    attachments: state.draft.attachments.map(item => ({ id: item.id, name: item.name, mimeType: item.content.mimeType, data: item.content.data })),\n    onRemoveAttachment: (id: string) => controller.setAttachments(controller.getSnapshot().draft.attachments.filter(item => item.id !== id)),\n    working, sendBlocked, disabled: state.disposed, stopRequested: state.stop === 'requested',\n    onSend: send, onStop: () => act(controller.stop),\n    hasFiles: Boolean(composerHasContent),\n    uploading: uploading > 0, canAttach: Boolean(onPickFiles || onFiles || attachments), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void upload(files); },\n    slash, onSlashError: report, mentions, mentionPaths: picked, onMentionPicked: (path: string) => setPicked(value => value.includes(path) ? value : [...value, path]),\n    uploads: pending, onDismissUpload: (id: string) => setPending(items => items.filter(item => item.id !== id)),\n    onPasteText: attachments ? pasteText : undefined, pasteToFile,\n    quote: composerHeader,\n    feedback, chips: composerChips,\n  };\n\n  return { state, derived, rows, queued, queueActions, working, waitingForAnswer, connected, sendBlocked, error, setError, report, act, current, textarea, rowContext, composer, files, pickers, empty, loading, developer, natural };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\n/** One scroll root for current and archived rows. Native paging stays in the borrowed controller. */\nexport function useTranscript(rows: readonly { readonly key: string }[], page = 60, more = 40, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }, automatic = true) {\n  if (!Number.isSafeInteger(page) || page < 1) throw new TypeError('Chat displayLimit must be a positive integer');\n  const [limit, setLimit] = useState(page);\n  const [sentinel, setSentinel] = useState<HTMLDivElement | null>(null);\n  const [loaded, setLoaded] = useState(0);\n  const pending = useRef(false);\n  const anchor = useRef<{ readonly length: number; readonly limit: number } | undefined>(undefined);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  const stick = { scrollRef: setScroller, scrollToBottom, isAtBottom: !scrollable.end };\n  const hidden = Math.max(0, rows.length - limit);\n  const reveal = useCallback(() => {\n    if (pending.current || anchor.current) return;\n    const state = history?.state;\n    if (hidden === 0 && (!history?.connected || !state || state.kind === 'disabled' || state.kind === 'loading' || state.kind === 'ready' && !state.hasMore)) return;\n    anchor.current = { length: rows.length, limit };\n    if (hidden > 0) setLimit(value => value + more);\n    else if (history) {\n      pending.current = true;\n      void Promise.resolve().then(history.load).catch(() => { anchor.current = undefined; }).finally(() => { pending.current = false; });\n    }\n  }, [hidden, history?.state, history?.connected, history?.load, rows.length, limit, more]);\n  useLayoutEffect(() => {\n    const saved = anchor.current;\n    if (!scroller || !saved || history?.state.kind === 'loading') return;\n    const added = Math.max(0, rows.length - saved.length);\n    if (limit < saved.limit + added) { setLimit(saved.limit + added); return; }\n    anchor.current = undefined;\n    setLoaded(count => count + Math.max(0, Math.min(rows.length, limit) - Math.min(saved.length, saved.limit)));\n  }, [rows, limit, scroller, history?.state]);\n  useEffect(() => {\n    if (!automatic || !scroller || !sentinel || typeof IntersectionObserver === 'undefined' || history?.state.kind === 'loading' || history?.state.kind === 'error') return;\n    const observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting) && (scroller.scrollHeight <= scroller.clientHeight || scrollable.start)) reveal();\n    }, { root: scroller, rootMargin: '240px 0px 0px' });\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [automatic, scroller, sentinel, reveal, scrollable.start, history?.state]);\n  const revealTo = (key: string) => { const index = rows.findIndex(row => row.key === key); if (index >= 0) setLimit(value => Math.max(value, rows.length - index)); };\n  return { stick, hidden, reveal, revealTo, sentinelRef: setSentinel, loaded, visible: <T,>(items: readonly T[]): readonly T[] => hidden ? items.slice(hidden) : items, reset: () => { anchor.current = undefined; setLimit(page); } };\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/session.tsx"
     },
@@ -191,31 +199,31 @@
     },
     {
       "path": "registry/pi-chat/tool.tsx",
-      "content": "'use client';\n\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { WrenchIcon } from 'lucide-react';\nimport { TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from '@/components/ui/trace';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport { defaultChatLabels, useChatText } from './labels';\nimport type { ChatLabels } from './labels';\n\nexport type ToolStatus = 'running' | 'completed' | 'failed' | 'unfinished';\nexport interface ToolEntry { readonly key: string; readonly call: ToolCall; readonly result: ToolResultMessage | undefined; readonly status: ToolStatus; readonly custom?: ReactNode }\n\nconst STATUS_LABEL = { running: 'toolRunning', completed: 'toolCompleted', failed: 'toolFailedStatus', unfinished: 'toolUnfinished' } as const satisfies Record<ToolStatus, keyof ChatLabels>;\nconst PREVIEW_KEYS = ['path', 'file_path', 'filePath', 'command', 'query', 'pattern', 'name', 'url', 'id'];\n\n/** A short hint of what the call acts on, shown next to its name. */\nexport function preview(args: ToolCall['arguments']): string {\n  const values = args as Record<string, unknown>;\n  for (const key of PREVIEW_KEYS) { const value = values[key]; if (typeof value === 'string' && value) return value.replace(/\\s+/g, ' ').slice(0, 90); }\n  const first = Object.values(values).find(value => typeof value === 'string' && value);\n  return typeof first === 'string' ? first.replace(/\\s+/g, ' ').slice(0, 90) : '';\n}\n\nfunction Section({ title, children }: { readonly title: string; readonly children: ReactNode }) {\n  return <div className=\"space-y-1.5\"><h4 className=\"m-0 text-xs font-medium tracking-wider text-muted-foreground uppercase\">{title}</h4>{children}</div>;\n}\n\n/** A short live label for a call: \"Reading notes/consultation.md\", \"Running bash\", \"Running working_git\" (`labels.toolActivity`). */\nexport function liveLabel(call: ToolCall, labels: Pick<ChatLabels, 'toolActivity'> = defaultChatLabels): string {\n  return labels.toolActivity(call.name, preview(call.arguments));\n}\n\n/** One Trace step. Failures open by default; quiet successful steps have no disclosure. */\nexport function ToolCard({ entry, onOpenImage, details = true }: { readonly entry: ToolEntry; readonly details?: boolean; readonly onOpenImage?: (image: Extract<ToolResultMessage['content'][number], { type: 'image' }>) => void }) {\n  const { labels } = useChatText();\n  const { call, result, status } = entry;\n  const [chosen, setChosen] = useState<boolean | undefined>();\n  const open = details && (chosen ?? status === 'failed');\n  const hint = preview(call.arguments);\n  const line = <TraceLine {...(status === 'running' ? { status: 'running' } : status === 'failed' ? { status: 'error' } : {})}>\n    <TraceIcon><WrenchIcon /></TraceIcon>\n    <TraceTitle><span data-testid=\"tool-name\">{call.name}</span>{hint && ` · ${hint}`}</TraceTitle>\n    <TraceDescription data-testid=\"tool-status\">{labels[STATUS_LABEL[status]]}</TraceDescription>\n  </TraceLine>;\n  return <TraceCollapsible data-testid=\"tool-card\" data-boring=\"tool-card\" data-status={status} data-tool={call.name} data-call-id={call.id} open={open} onOpenChange={setChosen}>\n    {details ? <TraceCollapsibleTrigger className=\"min-h-8 max-sm:min-h-11 pointer-coarse:min-h-11\">{line}</TraceCollapsibleTrigger> : line}\n    {details && <TraceCollapsibleContent><div data-testid=\"tool-details\" className=\"flex flex-col gap-3\">\n      <Section title={labels.arguments}><Card><CardContent><pre className=\"m-0 max-h-60 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere]\">{JSON.stringify(call.arguments, null, 2)}</pre></CardContent></Card></Section>\n      {result && <Section title={result.isError ? labels.error : labels.result}>\n        <Alert variant={result.isError ? 'destructive' : 'default'} role={result.isError ? 'alert' : 'status'}><AlertDescription>\n          {result.content.map((part, index) => part.type === 'text'\n            ? <pre key={index} className=\"m-0 max-h-72 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere]\">{part.text}</pre>\n            : <Button key={index} variant=\"outline\" size=\"sm\" disabled={!onOpenImage} onClick={() => onOpenImage?.(part)}>{labels.openImageResult}</Button>)}\n          {result.content.length === 0 && <span>{labels.emptyResult}</span>}\n        </AlertDescription></Alert></Section>}\n    </div></TraceCollapsibleContent>}\n  </TraceCollapsible>;\n}\n\n",
+      "content": "'use client';\n\nimport { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { WrenchIcon } from 'lucide-react';\nimport { TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from '@/components/ui/trace';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport { defaultChatLabels, useChatText } from './labels';\nimport type { ChatLabels } from './labels';\n\nexport type ToolStatus = 'running' | 'completed' | 'failed' | 'unfinished';\nexport interface ToolEntry { readonly key: string; readonly call: ToolCall; readonly result: ToolResultMessage | undefined; readonly status: ToolStatus; readonly custom?: ReactNode }\n\nconst STATUS_LABEL = { running: 'toolRunning', completed: 'toolCompleted', failed: 'toolFailedStatus', unfinished: 'toolUnfinished' } as const satisfies Record<ToolStatus, keyof ChatLabels>;\nconst PREVIEW_KEYS = ['path', 'file_path', 'filePath', 'command', 'query', 'pattern', 'name', 'url', 'id'];\n\n/** A short hint of what the call acts on, shown next to its name. */\nexport function preview(args: ToolCall['arguments']): string {\n  const values = args as Record<string, unknown>;\n  for (const key of PREVIEW_KEYS) { const value = values[key]; if (typeof value === 'string' && value) return value.replace(/\\s+/g, ' ').slice(0, 90); }\n  const first = Object.values(values).find(value => typeof value === 'string' && value);\n  return typeof first === 'string' ? first.replace(/\\s+/g, ' ').slice(0, 90) : '';\n}\n\nfunction Section({ title, children }: { readonly title: string; readonly children: ReactNode }) {\n  return <div className=\"space-y-1.5\"><h4 className=\"m-0 text-xs font-medium tracking-wider text-muted-foreground uppercase\">{title}</h4>{children}</div>;\n}\n\n/** A short live label for a call: \"Reading notes/consultation.md\", \"Running bash\", \"Running working_git\" (`labels.toolActivity`). */\nexport function liveLabel(call: ToolCall, labels: Pick<ChatLabels, 'toolActivity'> = defaultChatLabels): string {\n  return labels.toolActivity(call.name, preview(call.arguments));\n}\n\n/** One Trace step. Failures open by default; quiet successful steps have no disclosure. */\nexport function ToolCard({ entry, onOpenImage, details = true }: { readonly entry: ToolEntry; readonly details?: boolean; readonly onOpenImage?: (image: Extract<ToolResultMessage['content'][number], { type: 'image' }>) => void }) {\n  const { labels } = useChatText();\n  const [chosen, setChosen] = useState<boolean | undefined>();\n  const { call, result, status } = entry;\n  const open = details && (chosen ?? status === 'failed');\n  const hint = preview(call.arguments);\n  const line = <TraceLine {...(status === 'running' ? { status: 'running' } : status === 'failed' ? { status: 'error' } : {})}>\n    <TraceIcon><WrenchIcon /></TraceIcon>\n    <TraceTitle><span data-testid=\"tool-name\">{call.name}</span>{hint && ` · ${hint}`}</TraceTitle>\n    <TraceDescription data-testid=\"tool-status\">{labels[STATUS_LABEL[status]]}</TraceDescription>\n  </TraceLine>;\n  return <TraceCollapsible data-testid=\"tool-card\" data-boring=\"tool-card\" data-status={status} data-tool={call.name} data-call-id={call.id} open={open} onOpenChange={setChosen}>\n    {details ? <TraceCollapsibleTrigger className=\"min-h-8 max-sm:min-h-11 pointer-coarse:min-h-11\">{line}</TraceCollapsibleTrigger> : line}\n    {details && <TraceCollapsibleContent><div data-testid=\"tool-details\" className=\"flex flex-col gap-3\">\n      <Section title={labels.arguments}><Card><CardContent><pre className=\"m-0 max-h-60 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere]\">{JSON.stringify(call.arguments, null, 2)}</pre></CardContent></Card></Section>\n      {result && <Section title={result.isError ? labels.error : labels.result}>\n        <Alert variant={result.isError ? 'destructive' : 'default'} role={result.isError ? 'alert' : 'status'}><AlertDescription>\n          {result.content.map((part, index) => part.type === 'text'\n            ? <pre key={index} className=\"m-0 max-h-72 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere]\">{part.text}</pre>\n            : <Button key={index} variant=\"outline\" size=\"sm\" disabled={!onOpenImage} onClick={() => onOpenImage?.(part)}>{labels.openImageResult}</Button>)}\n          {result.content.length === 0 && <span>{labels.emptyResult}</span>}\n        </AlertDescription></Alert></Section>}\n    </div></TraceCollapsibleContent>}\n  </TraceCollapsible>;\n}\n\n",
       "type": "registry:component",
       "target": "components/pi-chat/tool.tsx"
     },
     {
       "path": "registry/pi-chat/use-remote-chat.ts",
-      "content": "import { useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { createNativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatIdentity, NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { createRemoteChat } from '@hachej/boring-ui-kit/remote-chat';\nimport type { RemoteChat, RemoteChatOptions } from '@hachej/boring-ui-kit/remote-chat';\nimport type { PiChatActions } from './session';\n\n// ---- Placement: where the chat is shown, reported by the component that shows it and sent with each submit (see `useRemoteChat`).\n// `PiChat` reports `docked`, `AmbientChat` (also a docked chat floated by its divider) reports `floating`. Advisory for the model, never\n// authority. See docs/architecture/PAGE-TOOLS.md (PLACE-1..3).\nexport type ChatPlacement = 'docked' | 'floating';\n\n// Keyed by controller (a page can hold several chats; floating or docking keeps the controller, PLACE-3). Each mounted presenter has its own\n// registration, so unmounting one never clears another's; the latest surviving registration wins.\nconst placements = new WeakMap<NativeChatController, { readonly placement: ChatPlacement }[]>();\n\n/** Reports the placement of the chat showing `controller` while the caller is mounted. */\nexport function useChatPlacement(controller: NativeChatController, placement: ChatPlacement): void {\n  useLayoutEffect(() => {\n    const entry = { placement };\n    const list = placements.get(controller) ?? [];\n    placements.set(controller, [...list, entry]);\n    return () => {\n      const rest = (placements.get(controller) ?? []).filter(item => item !== entry);\n      if (rest.length) placements.set(controller, rest); else placements.delete(controller);\n    };\n  }, [controller, placement]);\n}\n\nexport function readChatPlacement(controller: NativeChatController | undefined): ChatPlacement | undefined {\n  return controller ? placements.get(controller)?.at(-1)?.placement : undefined;\n}\n\nexport type RemoteChatState =\n  | { readonly status: 'connecting'; readonly conversationId: string | undefined }\n  | { readonly status: 'offline'; readonly conversationId: string | undefined; readonly error: string }\n  | { readonly status: 'ready'; readonly conversationId: string; readonly controller: NativeChatController; readonly actions: PiChatActions; readonly configure: RemoteChat['configure'] };\n\n/**\n * One native chat controller per selected conversation over the host's chat transport (`createChatTransportHandler` of\n * `@hachej/boring-agent/chat-transport`). `endpoint(id)` names the transport URL of a conversation; `fetch` is the host's authenticated fetch.\n * The remote chat reopens a dropped stream itself (the controller reads `reconnecting` meanwhile); it never means the task stopped.\n * A failed connect retries every second. The previous conversation's controller is never handed out: it is disposed on change.\n */\nexport function useRemoteChat({ conversationId, endpoint, fetch, identity, requestContext, transport, webSocket }: {\n  readonly conversationId: string | undefined;\n  readonly endpoint: (conversationId: string) => string | URL;\n  readonly fetch: (request: Request) => Promise<Response>;\n  readonly identity: ChatIdentity | undefined;\n  /**\n   * The current screen context, read at each submit (for example `readAgentContext` of the app-shell item). The submit's `context` is this\n   * value as it is (so a host reading `name` and `params` keeps working) plus `placement`: `docked` or `floating`, reported by the chat.\n   */\n  readonly requestContext?: () => Readonly<Record<string, unknown>> | undefined;\n  /** `websocket`: one hibernation-friendly socket instead of the HTTP watch stream, falling back to HTTP (see `createRemoteChat`). Read when a conversation connects. */\n  readonly transport?: RemoteChatOptions['transport'];\n  readonly webSocket?: RemoteChatOptions['webSocket'];\n}): RemoteChatState {\n  const url = conversationId === undefined ? undefined : String(endpoint(conversationId));\n  const key = JSON.stringify([conversationId, url, identity?.runtimeId, identity?.scopeId, identity?.principalId, transport]);\n  const binding = useMemo(() => ({ key, fetch, requestContext, webSocket }), [key]); // eslint-disable-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => { binding.fetch = fetch; binding.requestContext = requestContext; binding.webSocket = webSocket; }, [binding, fetch, requestContext, webSocket]);\n  const [stored, setStored] = useState<{ readonly binding: typeof binding; readonly chat: RemoteChatState }>();\n  useEffect(() => {\n    if (conversationId === undefined || !identity || url === undefined) return;\n    const setChat = (chat: RemoteChatState) => setStored({ binding, chat });\n    let disposed = false, controller: NativeChatController | undefined, remote: RemoteChat | undefined;\n    const context = () => {\n      const placement = readChatPlacement(controller), screen = binding.requestContext?.();\n      return placement || screen ? { ...screen, ...(placement && { placement }) } : undefined;\n    };\n    setChat({ status: 'connecting', conversationId });\n    void (async () => {\n      while (!disposed) {\n        try {\n          remote = await createRemoteChat({ endpoint: url, fetch: request => binding.fetch(request), requestContext: context, ...(transport ? { transport } : {}), ...(binding.webSocket ? { webSocket: binding.webSocket } : {}) });\n          if (disposed) return void remote.close();\n          controller = createNativeChatController({ identity, ...remote });\n          await controller.connect();\n          if (disposed) return void controller.dispose();\n          // Human-in-the-loop answers and queue withdrawal are optional on the transport: pass only what it offers.\n          const actions: { answer?: RemoteChat['answer']; withdraw?: RemoteChat['withdraw'] } = {};\n          if (typeof remote.answer === 'function') actions.answer = remote.answer;\n          if (typeof remote.withdraw === 'function') actions.withdraw = remote.withdraw;\n          setChat({ status: 'ready', controller, conversationId, actions, configure: remote.configure });\n          return;\n        } catch (error) {\n          controller?.dispose(); controller = undefined; void remote?.close(); remote = undefined;\n          if (disposed) return;\n          setChat({ status: 'offline', conversationId, error: String((error as Error)?.message ?? error) });\n          await new Promise(resolve => setTimeout(resolve, 1000));\n        }\n      }\n    })();\n    return () => { disposed = true; controller?.dispose(); void remote?.close(); };\n  }, [binding]); // eslint-disable-line react-hooks/exhaustive-deps\n  return identity && stored?.binding === binding ? stored.chat : { status: 'connecting', conversationId };\n}\n",
+      "content": "import { useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { createNativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatIdentity, NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { createRemoteChat } from '@hachej/boring-ui-kit/remote-chat';\nimport type { RemoteChat, RemoteChatOptions } from '@hachej/boring-ui-kit/remote-chat';\nimport type { PiChatActions } from './session';\n\n// ---- Placement: where the chat is shown, reported by the component that shows it and sent with each submit (see `useRemoteChat`).\n// `PiChat` reports `docked`, `AmbientChat` (also a docked chat floated by its divider) reports `floating`. Advisory for the model, never\n// authority. See docs/architecture/PAGE-TOOLS.md (PLACE-1..3).\nexport type ChatPlacement = 'docked' | 'floating';\n\n// Keyed by controller (a page can hold several chats; floating or docking keeps the controller, PLACE-3). Each mounted presenter has its own\n// registration, so unmounting one never clears another's; the latest surviving registration wins.\nconst placements = new WeakMap<ChatController, { readonly placement: ChatPlacement }[]>();\n\n/** Reports the placement of the chat showing `controller` while the caller is mounted. */\nexport function useChatPlacement(controller: ChatController, placement: ChatPlacement): void {\n  useLayoutEffect(() => {\n    const entry = { placement };\n    const list = placements.get(controller) ?? [];\n    placements.set(controller, [...list, entry]);\n    return () => {\n      const rest = (placements.get(controller) ?? []).filter(item => item !== entry);\n      if (rest.length) placements.set(controller, rest); else placements.delete(controller);\n    };\n  }, [controller, placement]);\n}\n\nexport function readChatPlacement(controller: ChatController | undefined): ChatPlacement | undefined {\n  return controller ? placements.get(controller)?.at(-1)?.placement : undefined;\n}\n\nexport type RemoteChatState =\n  | { readonly status: 'connecting'; readonly conversationId: string | undefined }\n  | { readonly status: 'offline'; readonly conversationId: string | undefined; readonly error: string }\n  | { readonly status: 'ready'; readonly conversationId: string; readonly controller: NativeChatController; readonly actions: PiChatActions; readonly configure: RemoteChat['configure'] };\n\n/**\n * One native chat controller per selected conversation over the host's chat transport (`createChatTransportHandler` of\n * `@hachej/boring-agent/chat-transport`). `endpoint(id)` names the transport URL of a conversation; `fetch` is the host's authenticated fetch.\n * The remote chat reopens a dropped stream itself (the controller reads `reconnecting` meanwhile); it never means the task stopped.\n * A failed connect retries every second. The previous conversation's controller is never handed out: it is disposed on change.\n */\nexport function useRemoteChat({ conversationId, endpoint, fetch, identity, requestContext, transport, webSocket }: {\n  readonly conversationId: string | undefined;\n  readonly endpoint: (conversationId: string) => string | URL;\n  readonly fetch: (request: Request) => Promise<Response>;\n  readonly identity: ChatIdentity | undefined;\n  /**\n   * The current screen context, read at each submit (for example `readAgentContext` of the app-shell item). The submit's `context` is this\n   * value as it is (so a host reading `name` and `params` keeps working) plus `placement`: `docked` or `floating`, reported by the chat.\n   */\n  readonly requestContext?: () => Readonly<Record<string, unknown>> | undefined;\n  /** `websocket`: one hibernation-friendly socket instead of the HTTP watch stream, falling back to HTTP (see `createRemoteChat`). Read when a conversation connects. */\n  readonly transport?: RemoteChatOptions['transport'];\n  readonly webSocket?: RemoteChatOptions['webSocket'];\n}): RemoteChatState {\n  const url = conversationId === undefined ? undefined : String(endpoint(conversationId));\n  const key = JSON.stringify([conversationId, url, identity?.runtimeId, identity?.scopeId, identity?.principalId, transport]);\n  const binding = useMemo(() => ({ key, fetch, requestContext, webSocket }), [key]); // eslint-disable-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => { binding.fetch = fetch; binding.requestContext = requestContext; binding.webSocket = webSocket; }, [binding, fetch, requestContext, webSocket]);\n  const [stored, setStored] = useState<{ readonly binding: typeof binding; readonly chat: RemoteChatState }>();\n  useEffect(() => {\n    if (conversationId === undefined || !identity || url === undefined) return;\n    const setChat = (chat: RemoteChatState) => setStored({ binding, chat });\n    let disposed = false, controller: NativeChatController | undefined, remote: RemoteChat | undefined;\n    const context = () => {\n      const placement = readChatPlacement(controller), screen = binding.requestContext?.();\n      return placement || screen ? { ...screen, ...(placement && { placement }) } : undefined;\n    };\n    setChat({ status: 'connecting', conversationId });\n    void (async () => {\n      while (!disposed) {\n        try {\n          remote = await createRemoteChat({ endpoint: url, fetch: request => binding.fetch(request), requestContext: context, ...(transport ? { transport } : {}), ...(binding.webSocket ? { webSocket: binding.webSocket } : {}) });\n          if (disposed) return void remote.close();\n          controller = createNativeChatController({ identity, ...remote });\n          await controller.connect();\n          if (disposed) return void controller.dispose();\n          // Human-in-the-loop answers and queue withdrawal are optional on the transport: pass only what it offers.\n          const actions: { answer?: RemoteChat['answer']; withdraw?: RemoteChat['withdraw'] } = {};\n          if (typeof remote.answer === 'function') actions.answer = remote.answer;\n          if (typeof remote.withdraw === 'function') actions.withdraw = remote.withdraw;\n          setChat({ status: 'ready', controller, conversationId, actions, configure: remote.configure });\n          return;\n        } catch (error) {\n          controller?.dispose(); controller = undefined; void remote?.close(); remote = undefined;\n          if (disposed) return;\n          setChat({ status: 'offline', conversationId, error: String((error as Error)?.message ?? error) });\n          await new Promise(resolve => setTimeout(resolve, 1000));\n        }\n      }\n    })();\n    return () => { disposed = true; controller?.dispose(); void remote?.close(); };\n  }, [binding]); // eslint-disable-line react-hooks/exhaustive-deps\n  return identity && stored?.binding === binding ? stored.chat : { status: 'connecting', conversationId };\n}\n",
       "type": "registry:hook",
       "target": "components/pi-chat/use-remote-chat.ts"
     },
     {
       "path": "registry/pi-chat/use-chat-draft.ts",
-      "content": "'use client';\n\nimport { useEffect, useRef } from 'react';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\n\nconst PREFIX = 'pi-chat:draft:';\n\n/** The stored draft: a string, `null` when the key is missing, `undefined` when storage is unavailable (missing, blocked or throwing). */\nfunction read(storageKey: string): string | null | undefined {\n  try {\n    const storage = globalThis.localStorage;\n    return storage ? storage.getItem(storageKey) : undefined;\n  } catch { return undefined; }\n}\nfunction write(storageKey: string, text: string): void {\n  try { if (text) globalThis.localStorage?.setItem(storageKey, text); else globalThis.localStorage?.removeItem(storageKey); } catch { /* the composer still holds the text */ }\n}\n\n/**\n * Keeps the composer's half-typed message (the controller's draft) per conversation in localStorage, so it survives a reload and shows in\n * every tab on the same conversation (the `storage` event). The draft is emptied when a message is sent, and a refused send puts the text back,\n * which is written again. Without `key` nothing happens. Storage that is missing or throws only means the draft is not kept.\n *\n * On mount the conversation's saved draft replaces the composer's text; text already in the composer and not yet saved is written at once.\n * On a change of `key` (same controller) the composer shows the new conversation's saved draft, or an empty one, so no text moves across.\n */\nexport function useChatDraft(controller: NativeChatController, key: string | undefined): void {\n  // The key the hook last loaded; a different key on a later run is a conversation switch, not a first mount.\n  const loaded = useRef<string | undefined>(undefined);\n  useEffect(() => {\n    if (key === undefined || controller.getSnapshot().disposed) return;\n    const storageKey = PREFIX + key;\n    const switched = loaded.current !== undefined && loaded.current !== key;\n    loaded.current = key;\n    const stored = read(storageKey);\n    const current = controller.getSnapshot().draft.text;\n    // The text last known to be in storage; a write happens only when the composer's text differs from it.\n    let saved: string;\n    if (stored) {\n      if (stored !== current) controller.setText(stored);\n      saved = stored;\n    } else if (switched) {\n      // The new conversation has no saved draft (or storage is unavailable): the old conversation's text must not stay.\n      if (current) controller.setText('');\n      saved = '';\n    } else {\n      saved = current;\n      if (stored === null && current) write(storageKey, current);\n    }\n    const persist = () => {\n      if (controller.getSnapshot().disposed) return;\n      const text = controller.getSnapshot().draft.text;\n      if (text === saved) return;\n      saved = text;\n      write(storageKey, text);\n    };\n    const unsubscribe = controller.subscribe(persist);\n    // Another tab changed this conversation's draft (or cleared all storage: `key` is null). Adopting it does not write it back.\n    // Unavailable storage is not a missing draft: the composer keeps its text.\n    const onStorage = (event: StorageEvent) => {\n      if (event.key !== null && event.key !== storageKey) return;\n      if (controller.getSnapshot().disposed) return;\n      const next = read(storageKey);\n      if (next === undefined) return;\n      const text = next ?? '';\n      saved = text;\n      if (text !== controller.getSnapshot().draft.text) controller.setText(text);\n    };\n    globalThis.addEventListener?.('storage', onStorage);\n    return () => {\n      unsubscribe();\n      globalThis.removeEventListener?.('storage', onStorage);\n    };\n  }, [controller, key]);\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useRef } from 'react';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\n\nconst PREFIX = 'pi-chat:draft:';\n\n/** The stored draft: a string, `null` when the key is missing, `undefined` when storage is unavailable (missing, blocked or throwing). */\nfunction read(storageKey: string): string | null | undefined {\n  try {\n    const storage = globalThis.localStorage;\n    return storage ? storage.getItem(storageKey) : undefined;\n  } catch { return undefined; }\n}\nfunction write(storageKey: string, text: string): void {\n  try { if (text) globalThis.localStorage?.setItem(storageKey, text); else globalThis.localStorage?.removeItem(storageKey); } catch { /* the composer still holds the text */ }\n}\n\n/**\n * Keeps the composer's half-typed message (the controller's draft) per conversation in localStorage, so it survives a reload and shows in\n * every tab on the same conversation (the `storage` event). The draft is emptied when a message is sent, and a refused send puts the text back,\n * which is written again. Without `key` nothing happens. Storage that is missing or throws only means the draft is not kept.\n *\n * On mount the conversation's saved draft replaces the composer's text; text already in the composer and not yet saved is written at once.\n * On a change of `key` (same controller) the composer shows the new conversation's saved draft, or an empty one, so no text moves across.\n */\nexport function useChatDraft(controller: ChatController, key: string | undefined): void {\n  // The key the hook last loaded; a different key on a later run is a conversation switch, not a first mount.\n  const loaded = useRef<string | undefined>(undefined);\n  useEffect(() => {\n    if (key === undefined || controller.getSnapshot().disposed) return;\n    const storageKey = PREFIX + key;\n    const switched = loaded.current !== undefined && loaded.current !== key;\n    loaded.current = key;\n    const stored = read(storageKey);\n    const current = controller.getSnapshot().draft.text;\n    // The text last known to be in storage; a write happens only when the composer's text differs from it.\n    let saved: string;\n    if (stored) {\n      if (stored !== current) controller.setText(stored);\n      saved = stored;\n    } else if (switched) {\n      // The new conversation has no saved draft (or storage is unavailable): the old conversation's text must not stay.\n      if (current) controller.setText('');\n      saved = '';\n    } else {\n      saved = current;\n      if (stored === null && current) write(storageKey, current);\n    }\n    const persist = () => {\n      if (controller.getSnapshot().disposed) return;\n      const text = controller.getSnapshot().draft.text;\n      if (text === saved) return;\n      saved = text;\n      write(storageKey, text);\n    };\n    const unsubscribe = controller.subscribe(persist);\n    // Another tab changed this conversation's draft (or cleared all storage: `key` is null). Adopting it does not write it back.\n    // Unavailable storage is not a missing draft: the composer keeps its text.\n    const onStorage = (event: StorageEvent) => {\n      if (event.key !== null && event.key !== storageKey) return;\n      if (controller.getSnapshot().disposed) return;\n      const next = read(storageKey);\n      if (next === undefined) return;\n      const text = next ?? '';\n      saved = text;\n      if (text !== controller.getSnapshot().draft.text) controller.setText(text);\n    };\n    globalThis.addEventListener?.('storage', onStorage);\n    return () => {\n      unsubscribe();\n      globalThis.removeEventListener?.('storage', onStorage);\n    };\n  }, [controller, key]);\n}\n",
       "type": "registry:hook",
       "target": "components/pi-chat/use-chat-draft.ts"
     },
     {
       "path": "registry/pi-chat/labels.ts",
-      "content": "/*\n * Every word the chat shows, and the icons it draws, as plain data. A host passes a partial `labels` (and `icons`) object to `PiChat`\n * (or `AmbientChat`, `AgentWorkspace`): what it leaves out keeps the default below. Strings that need a value are functions. No i18n\n * framework: an app that translates passes its own object per language.\n */\nimport { createContext, createElement, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { ArrowDownIcon, ArrowUpIcon, GitForkIcon, HistoryIcon, ListEndIcon, MessagesSquareIcon, PaperclipIcon, PlusIcon, RefreshCwIcon, SquareIcon } from 'lucide-react';\nimport type { BlockIcon } from '../button/actions';\nimport { withDefaults } from '../utils/utils';\n\nconst TOOL_VERBS: Readonly<Record<string, string>> = { read: 'Reading', write: 'Writing', edit: 'Editing', ls: 'Listing', list_files: 'Listing', find: 'Searching', grep: 'Searching', load_skill: 'Loading skill', bash: 'Running bash' };\nconst TOOL_NOUNS: Readonly<Record<string, string>> = { bash: 'command', read: 'read', write: 'write', edit: 'edit', find: 'find', grep: 'search', ls: 'list' };\n\nconst EFFORT_NAMES: Readonly<Record<string, string>> = { off: 'Off', minimal: 'Minimal', low: 'Low', medium: 'Medium', high: 'High', xhigh: 'Extra high', max: 'Max' };\nconst EFFORT_DETAILS: Readonly<Record<string, string>> = { off: 'No extra reasoning', minimal: 'Barely any reasoning', low: 'Light reasoning', medium: 'Balanced reasoning', high: 'Deep reasoning', xhigh: 'Deeper reasoning', max: 'Maximum reasoning' };\n\nexport const defaultChatLabels = {\n  // Header and transcript\n  /** The chat's name: the header title, the region's name and the empty state's title. */\n  title: 'Conversation',\n  history: 'History',\n  artifacts: 'Artifacts',\n  search: 'Search',\n  live: 'Live',\n  connecting: 'Connecting…',\n  reconnecting: 'Reconnecting…',\n  loadFailed: 'Conversation could not be loaded.',\n  disconnected: 'Disconnected. Last observed messages remain visible.',\n  reconnect: 'Reconnect',\n  requiredActions: 'Required conversation actions',\n  messages: 'Messages',\n  showEarlier: 'Show earlier messages',\n  loading: 'Loading conversation…',\n  emptyDescription: 'Start a conversation.',\n  jumpToLatest: 'Jump to latest',\n  agentWorking: 'Agent is working',\n  waitingForAnswer: 'Waiting for your answer',\n  retryPending: 'Native retry pending',\n  compacting: 'Native context compaction in progress',\n  /** The \"…\" menu of host actions (header, replies). */\n  moreActions: 'More actions',\n  // Notices\n  sendUnknown: 'Submission acknowledgement is unknown. The message is kept until you check or retry it.',\n  checkSubmission: 'Check original submission',\n  retrySame: 'Retry same request',\n  stopRequested: 'Stop requested. Waiting for native confirmation.',\n  stopUnconfirmed: 'Stop is unconfirmed. Work may still be running.',\n  steerRefused: 'The message could not be steered; it is back in the message box.',\n  tooLate: 'Too late: that message has already started.',\n  tooLateToRemove: 'Too late to remove: that message has already started.',\n  queueFailed: 'The message could not be changed.',\n  queueLocked: 'Queued messages cannot be changed here.',\n  waitToSteer: 'Wait for the current send to finish, then steer.',\n  steerFailed: 'The message could not be steered.',\n  connectionFailed: 'Connection failed',\n  actionFailedShort: 'Action failed',\n  uploadFailedShort: 'Upload failed',\n  changeRefused: 'The change was refused',\n  dismissHint: 'click to dismiss',\n  // Composer\n  placeholder: 'Message the agent…',\n  placeholderWorking: 'Queue a message…',\n  messageInput: 'Message',\n  send: 'Send',\n  sendHint: 'Send (Enter)',\n  stop: 'Stop',\n  queue: 'Queue',\n  add: 'Add',\n  attachFiles: 'Attach files',\n  commands: 'Commands',\n  annotate: 'Annotate',\n  annotateHint: 'Annotate: click what you want to comment on (Esc to stop)',\n  annotateNotes: (count: number) => `${count} ${count === 1 ? 'note' : 'notes'}`,\n  annotateClear: 'Remove the notes',\n  remove: (name: string) => `Remove ${name}`,\n  dismiss: (name: string) => `Dismiss ${name}`,\n  uploading: (name: string) => `Uploading ${name}…`,\n  uploadFailed: (name: string, error: string | undefined) => `${name}: ${error ?? 'upload failed'}`,\n  preparingAttachments: 'Preparing attachments…',\n  preparingAttachmentsShort: 'Preparing attachments',\n  mentionedFiles: 'Mentioned files',\n  uploads: 'Uploads',\n  attachments: 'Attachments',\n  /** The type line of a file card in a sent message. */\n  fileKind: { document: 'Document', image: 'Image', pdf: 'PDF', sheet: 'Spreadsheet', slides: 'Presentation', file: 'File' },\n  openFile: (name: string) => `Open ${name}`,\n  fileChange: { created: 'Created', edited: 'Edited' },\n  /** The name of a pasted text file: the words and the time it was pasted. */\n  pastedFileName: (stamp: string) => `Pasted text ${stamp}`,\n  restorePaste: 'Put the pasted text back in the message',\n  searchCommands: 'Search commands',\n  filterBySource: 'Filter by source',\n  allSources: 'All',\n  noCommands: 'No matching commands.',\n  /** A `/` menu filter chip: `skills`, `built-in` or a plugin's name. */\n  slashGroup: (group: string) => group,\n  skillBadge: 'skill',\n  workspaceFiles: 'Workspace files',\n  searchFailed: 'Search failed',\n  model: 'Model',\n  effort: 'Effort',\n  effortDefault: 'Default',\n  modelAndEffort: 'Model and effort',\n  modelSummary: (model: string | undefined, effort: string | undefined) => [model && `Model: ${model}`, effort && `Effort: ${effort}`].filter(Boolean).join(', '),\n  /** A thinking level's name and short description in the picker. */\n  effortName: (level: string) => EFFORT_NAMES[level] ?? level,\n  effortDetail: (level: string): string | undefined => EFFORT_DETAILS[level],\n  // Voice input (the microphone button beside the composer)\n  voiceRecord: 'Record a message',\n  voiceStop: 'Stop recording',\n  voiceCancel: 'Cancel recording',\n  voiceTranscribing: 'Transcribing…',\n  voiceNothingHeard: 'Nothing was heard. Try again.',\n  voiceTranscribeFailed: 'The recording could not be transcribed. Try again.',\n  voiceDenied: 'Microphone blocked. Allow it for this site in the browser, then press record again.',\n  voiceNoMicrophone: 'No microphone found. Connect one, then press record again.',\n  voiceBusy: 'The microphone is busy or could not be opened. Close other apps using it and try again.',\n  voiceInsecure: 'Recording needs a secure page (https or localhost).',\n  voiceUnsupported: 'This browser cannot record audio here.',\n  voiceStartFailed: 'The microphone could not be started.',\n  // Queue\n  queuedMessages: 'Queued messages',\n  steer: 'Steer',\n  steerHint: 'Send this into the running turn now',\n  steering: 'Steering',\n  queued: 'Queued',\n  removeQueued: 'Remove queued message',\n  removeHint: 'Remove',\n  more: 'More',\n  edit: 'Edit',\n  sending: 'Sending',\n  images: (count: number) => `[${count} image${count === 1 ? '' : 's'}]`,\n  // Conversation list and history\n  historyDialog: 'Conversation history',\n  newConversation: 'New',\n  untitled: 'New conversation',\n  closeHistory: 'Close history',\n  close: 'Close',\n  earlierInConversation: 'Earlier messages in this conversation',\n  searchConversations: 'Search conversations',\n  archived: 'Archived',\n  current: 'Current',\n  noMatch: (query: string) => `No conversation matches “${query}”.`,\n  noArchived: 'No archived conversations.',\n  noConversations: 'No conversations yet.',\n  loadingConversations: 'Loading conversations…',\n  actionFailed: 'That did not work. Try again.',\n  rename: 'Rename',\n  renameItem: (title: string) => `Rename ${title}`,\n  conversationName: 'Conversation name',\n  save: 'Save',\n  archive: 'Archive',\n  restore: 'Restore',\n  archiveItem: (title: string, archived: boolean) => `${archived ? 'Restore' : 'Archive'} ${title}`,\n  delete: 'Delete',\n  deleteItem: (title: string) => `Delete ${title}`,\n  keep: 'Keep conversation',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  previousWeek: 'Previous 7 days',\n  older: 'Older',\n  conversations: 'Conversations',\n  earlierMessages: 'Earlier messages',\n  readOnly: '(read-only)',\n  retry: 'Retry',\n  loadingShort: 'Loading…',\n  loadEarlier: 'Load earlier',\n  loadEarlierMessages: 'Load earlier messages',\n  earlierMessagesLoaded: (count: number) => `${count} earlier messages loaded`,\n  returnToConversation: 'Return to active conversation',\n  historyFailed: 'Conversation history could not be loaded. The previous page remains visible.',\n  loadPage: 'Load a page to browse earlier messages.',\n  noRecords: 'No records in this history page.',\n  beginning: 'Start of conversation',\n  justNow: 'now',\n  roleSystem: 'System',\n  roleToolResult: (tool: string, failed: boolean) => `Tool result: ${tool}${failed ? ' (failed)' : ''}`,\n  roleUser: 'You',\n  roleAssistant: (outcome: 'ok' | 'interrupted' | 'failed'): string => outcome === 'interrupted' ? 'Assistant (interrupted)' : outcome === 'failed' ? 'Assistant (failed)' : 'Assistant',\n  roleEvent: 'Event',\n  contextBoundary: 'Context boundary',\n  // Messages\n  copy: 'Copy',\n  copied: 'Copied',\n  copyFailed: 'Copy failed',\n  failed: 'Failed',\n  copyResponse: 'Copy response',\n  copyCode: 'Copy code',\n  fork: 'Fork from here',\n  forkHint: 'Fork from here: a new conversation with the messages up to this reply',\n  responseFailed: 'The response failed',\n  interrupted: 'Response interrupted',\n  thinking: 'Thinking…',\n  openImage: 'Open image attachment',\n  imageAttachment: 'Image attachment',\n  systemContext: 'System context',\n  toolFailed: (tool: string) => `${tool} failed`,\n  event: (label: string) => `Event: ${label}`,\n  // Activity and tools\n  reasoning: 'Reasoning',\n  thinkingStep: 'Thinking',\n  steps: (count: number) => `${count} ${count === 1 ? 'step' : 'steps'}`,\n  toolRunning: 'Running',\n  toolCompleted: 'Completed',\n  toolFailedStatus: 'Failed',\n  toolUnfinished: 'No result',\n  arguments: 'Arguments',\n  result: 'Result',\n  error: 'Error',\n  openImageResult: 'Open image result',\n  emptyResult: 'Empty result',\n  /** The live line of a running tool call; `hint` is what it acts on (a path, a command), possibly empty. */\n  toolActivity: (tool: string, hint: string) => {\n    const verb = TOOL_VERBS[tool] ?? `Running ${tool}`;\n    return hint ? `${verb}${tool === 'bash' ? ':' : ''} ${hint}` : verb;\n  },\n  /** How a tool is named in a finished activity summary (\"Used read ×3 · command\"). */\n  toolNoun: (tool: string) => TOOL_NOUNS[tool] ?? tool,\n  // Approval and question cards\n  approvalNeeded: 'Approval needed',\n  needsApproval: 'Needs your approval',\n  approve: 'Approve',\n  deny: 'Deny',\n  approved: 'Approved',\n  denied: 'Denied',\n  notDecided: 'Not decided: the run was stopped',\n  wantsToRun: 'The agent wants to run',\n  decision: 'Decision',\n  stillWritingCall: 'The agent is still writing this call…',\n  decidingUnavailable: 'Deciding is not available in this view.',\n  decisionSent: (approved: boolean) => `${approved ? 'Approved.' : 'Denied.'} Waiting for the agent…`,\n  decisionRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This call was already decided.' : 'This call is no longer waiting for a decision.',\n  decisionNotSent: 'The decision could not be sent.',\n  waitingForAgent: 'Waiting for the agent…',\n  question: 'Question',\n  questionForYou: 'Question for you',\n  notAnswered: 'Not answered',\n  answered: 'Answered',\n  askedQuestion: 'The agent asked a question.',\n  answerOptions: 'Answer options',\n  ownAnswer: 'Or type your own answer',\n  typeAnswer: 'Type your answer',\n  yourAnswerInput: 'Your answer',\n  /** A question of a form left blank, in the answer sent to the agent. */\n  skipped: '(no answer)',\n  answer: 'Answer',\n  stillWritingQuestion: 'The agent is still writing this question…',\n  answeringUnavailable: 'Answering is not available in this view.',\n  answerRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This question was already answered.' : 'This question is no longer waiting for an answer.',\n  answerNotSent: 'The answer could not be sent.',\n  yourAnswer: 'Your answer:',\n  // Run card (a headless run: `runs/<id>`)\n  run: 'Run',\n  runStatus: (status: 'queued' | 'running' | 'completed' | 'failed'): string => ({ queued: 'Queued', running: 'Running', completed: 'Completed', failed: 'Failed' })[status],\n  runElapsed: (time: string) => `Running for ${time}`,\n  runDuration: (time: string) => `Took ${time}`,\n  runRefresh: 'Refresh',\n  runNotLoaded: 'The run could not be loaded.',\n  // Artifact cards\n  artifact: 'Artifact',\n  opening: 'Opening…',\n  viewing: 'Viewing',\n  version: (ordinal: number) => `Version ${ordinal}`,\n  runCommand: (name: string, execute: boolean) => `${execute ? 'Run' : 'Insert'} /${name} command`,\n  taskStatus: 'Task status',\n  activityFailed: (count: number, tools: string) => `${count > 1 ? `${count} steps failed` : 'Step failed'}: ${tools}`,\n  activityUsed: (summary: string, stopped: boolean) => `${stopped ? 'Stopped · ' : 'Used '}${summary}`,\n  activityThought: 'Thought it through',\n  activityMany: (steps: number) => `Worked through ${steps} steps`,\n  open: 'Open',\n  openArtifact: (title: string, version: number | undefined) => version === undefined ? `Open ${title}` : `Open ${title}, version ${version}`,\n};\n\nexport type ChatLabels = typeof defaultChatLabels;\n\n/** The chat's icons. Any component that takes `className` (every lucide icon does). */\nexport const defaultChatIcons = {\n  /** The agent's glyph in the empty state (the header shows the host's `avatar`, if any). */\n  agent: MessagesSquareIcon as BlockIcon,\n  send: ArrowUpIcon as BlockIcon,\n  stop: SquareIcon as BlockIcon,\n  history: HistoryIcon as BlockIcon,\n  newChat: PlusIcon as BlockIcon,\n  add: PlusIcon as BlockIcon,\n  attach: PaperclipIcon as BlockIcon,\n  queue: ListEndIcon as BlockIcon,\n  jumpToLatest: ArrowDownIcon as BlockIcon,\n  reconnect: RefreshCwIcon as BlockIcon,\n  fork: GitForkIcon as BlockIcon,\n};\n\nexport type ChatIcons = typeof defaultChatIcons;\n\n/** What the chat's pieces read: the merged labels and icons. */\nexport interface ChatText { readonly labels: ChatLabels; readonly icons: ChatIcons }\n/** The defaults, as `useMergedText`'s base. */\nexport const defaultChatText: ChatText = { labels: defaultChatLabels, icons: defaultChatIcons };\nconst DEFAULT_TEXT = defaultChatText;\nconst ChatTextContext = createContext<ChatText>(DEFAULT_TEXT);\n\n/** The labels and icons of the surrounding chat (the defaults outside one). */\nexport const useChatText = (): ChatText => useContext(ChatTextContext);\n\n/** Merges the host's partial labels and icons over the defaults (or over `base`), keeping one object while they do not change. */\nexport function useMergedText<L extends ChatLabels = ChatLabels, I extends ChatIcons = ChatIcons>(labels: Partial<L> | undefined, icons: Partial<I> | undefined,\n  base: { readonly labels: L; readonly icons: I } = DEFAULT_TEXT as { readonly labels: L; readonly icons: I }): { readonly labels: L; readonly icons: I } {\n  return useMemo(() => ({ labels: withDefaults(base.labels, labels), icons: withDefaults(base.icons, icons) }), [labels, icons, base]);\n}\n\n/** Provides the chat's labels and icons to everything inside (composer, queue, rows, history). */\nexport function ChatTextProvider({ value, children }: { readonly value: ChatText; readonly children: ReactNode }) {\n  return createElement(ChatTextContext.Provider, { value }, children);\n}\n",
+      "content": "/*\n * Every word the chat shows, and the icons it draws, as plain data. A host passes a partial `labels` (and `icons`) object to `PiChat`\n * (or `AmbientChat`, `AgentWorkspace`): what it leaves out keeps the default below. Strings that need a value are functions. No i18n\n * framework: an app that translates passes its own object per language.\n */\nimport { createContext, createElement, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { ArrowDownIcon, ArrowUpIcon, CameraIcon, GitForkIcon, HistoryIcon, ListEndIcon, MessagesSquareIcon, PaperclipIcon, PlusIcon, RefreshCwIcon, SquareIcon } from 'lucide-react';\nimport type { BlockIcon } from '../button/actions';\nimport { withDefaults } from '../utils/utils';\n\nconst TOOL_VERBS: Readonly<Record<string, string>> = { read: 'Reading', write: 'Writing', edit: 'Editing', ls: 'Listing', list_files: 'Listing', find: 'Searching', grep: 'Searching', load_skill: 'Loading skill', bash: 'Running bash' };\nconst TOOL_NOUNS: Readonly<Record<string, string>> = { bash: 'command', read: 'read', write: 'write', edit: 'edit', find: 'find', grep: 'search', ls: 'list' };\n\nconst EFFORT_NAMES: Readonly<Record<string, string>> = { off: 'Off', minimal: 'Minimal', low: 'Low', medium: 'Medium', high: 'High', xhigh: 'Extra high', max: 'Max' };\nconst EFFORT_DETAILS: Readonly<Record<string, string>> = { off: 'No extra reasoning', minimal: 'Barely any reasoning', low: 'Light reasoning', medium: 'Balanced reasoning', high: 'Deep reasoning', xhigh: 'Deeper reasoning', max: 'Maximum reasoning' };\n\nexport const defaultChatLabels = {\n  // Header and transcript\n  /** The chat's name: the header title, the region's name and the empty state's title. */\n  title: 'Conversation',\n  history: 'History',\n  artifacts: 'Artifacts',\n  search: 'Search',\n  live: 'Live',\n  connecting: 'Connecting…',\n  reconnecting: 'Reconnecting…',\n  loadFailed: 'Conversation could not be loaded.',\n  disconnected: 'Disconnected. Last observed messages remain visible.',\n  reconnect: 'Reconnect',\n  requiredActions: 'Required conversation actions',\n  messages: 'Messages',\n  showEarlier: 'Show earlier messages',\n  loading: 'Loading conversation…',\n  emptyDescription: 'Start a conversation.',\n  jumpToLatest: 'Jump to latest',\n  agentWorking: 'Agent is working',\n  waitingForAnswer: 'Waiting for your answer',\n  retryPending: 'Native retry pending',\n  compacting: 'Native context compaction in progress',\n  /** The one status of `presentation=\"natural\"` while the agent works (any tool, retry or compaction), instead of the activity wording above. */\n  preparing: 'Preparing…',\n  /** In `presentation=\"natural\"`, replaces the controller's own reason when a send is blocked. */\n  sendUnavailable: 'Sending is not available right now.',\n  /** The \"…\" menu of host actions (header, replies). */\n  moreActions: 'More actions',\n  // Notices\n  sendUnknown: 'Submission acknowledgement is unknown. The message is kept until you check or retry it.',\n  checkSubmission: 'Check original submission',\n  retrySame: 'Retry same request',\n  stopRequested: 'Stop requested. Waiting for native confirmation.',\n  stopUnconfirmed: 'Stop is unconfirmed. Work may still be running.',\n  steerRefused: 'The message could not be steered; it is back in the message box.',\n  tooLate: 'Too late: that message has already started.',\n  tooLateToRemove: 'Too late to remove: that message has already started.',\n  queueFailed: 'The message could not be changed.',\n  queueLocked: 'Queued messages cannot be changed here.',\n  waitToSteer: 'Wait for the current send to finish, then steer.',\n  steerFailed: 'The message could not be steered.',\n  connectionFailed: 'Connection failed',\n  actionFailedShort: 'Action failed',\n  uploadFailedShort: 'Upload failed',\n  changeRefused: 'The change was refused',\n  dismissHint: 'click to dismiss',\n  // Composer\n  placeholder: 'Message the agent…',\n  placeholderWorking: 'Queue a message…',\n  messageInput: 'Message',\n  send: 'Send',\n  sendHint: 'Send (Enter)',\n  stop: 'Stop',\n  queue: 'Queue',\n  add: 'Add',\n  attachFiles: 'Attach files',\n  takePhoto: 'Take a photo',\n  cameraShoot: 'Take the photo',\n  cameraClose: 'Close the camera',\n  cameraUnavailable: 'The camera cannot open on this page.',\n  cameraFallback: \"Use the phone's camera\",\n  commands: 'Commands',\n  annotate: 'Annotate',\n  annotateHint: 'Annotate: click what you want to comment on (Esc to stop)',\n  annotateNotes: (count: number) => `${count} ${count === 1 ? 'note' : 'notes'}`,\n  annotateClear: 'Remove the notes',\n  remove: (name: string) => `Remove ${name}`,\n  dismiss: (name: string) => `Dismiss ${name}`,\n  uploading: (name: string) => `Uploading ${name}…`,\n  uploadFailed: (name: string, error: string | undefined) => `${name}: ${error ?? 'upload failed'}`,\n  preparingAttachments: 'Preparing attachments…',\n  preparingAttachmentsShort: 'Preparing attachments',\n  mentionedFiles: 'Mentioned files',\n  uploads: 'Uploads',\n  attachments: 'Attachments',\n  /** The type line of a file card in a sent message. */\n  fileKind: { document: 'Document', image: 'Image', pdf: 'PDF', sheet: 'Spreadsheet', slides: 'Presentation', audio: 'Audio', file: 'File' },\n  openFile: (name: string) => `Open ${name}`,\n  fileChange: { created: 'Created', edited: 'Edited' },\n  /** The name of a pasted text file: the words and the time it was pasted. */\n  pastedFileName: (stamp: string) => `Pasted text ${stamp}`,\n  restorePaste: 'Put the pasted text back in the message',\n  searchCommands: 'Search commands',\n  filterBySource: 'Filter by source',\n  allSources: 'All',\n  noCommands: 'No matching commands.',\n  /** A `/` menu filter chip: `skills`, `built-in` or a plugin's name. */\n  slashGroup: (group: string) => group,\n  skillBadge: 'skill',\n  workspaceFiles: 'Workspace files',\n  searchFailed: 'Search failed',\n  model: 'Model',\n  effort: 'Effort',\n  effortDefault: 'Default',\n  modelAndEffort: 'Model and effort',\n  modelSummary: (model: string | undefined, effort: string | undefined) => [model && `Model: ${model}`, effort && `Effort: ${effort}`].filter(Boolean).join(', '),\n  /** A thinking level's name and short description in the picker. */\n  effortName: (level: string) => EFFORT_NAMES[level] ?? level,\n  effortDetail: (level: string): string | undefined => EFFORT_DETAILS[level],\n  // Voice input (the microphone button beside the composer)\n  voiceRecord: 'Record a message',\n  voiceHold: 'Hold to record, release to send',\n  voiceRecording: 'Recording',\n  voicePreparing: 'Preparing voice message…',\n  voiceAudioOnly: 'Send audio only',\n  voiceDiscard: 'Discard',\n  voicePlay: 'Play voice message',\n  voicePause: 'Pause voice message',\n  voicePlayFailed: 'The audio could not be played. Try again.',\n  voiceBlocked: 'Not sent. Review the chat notice before trying again.',\n  voiceUnconfirmed: 'Message admission is unconfirmed. Use the chat notice to reconcile.',\n  voiceStop: 'Stop recording',\n  voiceCancel: 'Cancel recording',\n  voiceTranscribing: 'Transcribing…',\n  voiceNothingHeard: 'Nothing was heard. Try again.',\n  voiceTranscribeFailed: 'The recording could not be transcribed. Try again.',\n  voiceDenied: 'Microphone blocked. Allow it for this site in the browser, then press record again.',\n  voiceNoMicrophone: 'No microphone found. Connect one, then press record again.',\n  voiceBusy: 'The microphone is busy or could not be opened. Close other apps using it and try again.',\n  voiceInsecure: 'Recording needs a secure page (https or localhost).',\n  voiceUnsupported: 'This browser cannot record audio here.',\n  voiceStartFailed: 'The microphone could not be started.',\n  // Queue\n  queuedMessages: 'Queued messages',\n  steer: 'Steer',\n  steerHint: 'Send this into the running turn now',\n  steering: 'Steering',\n  queued: 'Queued',\n  removeQueued: 'Remove queued message',\n  removeHint: 'Remove',\n  more: 'More',\n  edit: 'Edit',\n  sending: 'Sending',\n  images: (count: number) => `[${count} image${count === 1 ? '' : 's'}]`,\n  // Conversation list and history\n  historyDialog: 'Conversation history',\n  newConversation: 'New',\n  untitled: 'New conversation',\n  closeHistory: 'Close history',\n  close: 'Close',\n  earlierInConversation: 'Earlier messages in this conversation',\n  searchConversations: 'Search conversations',\n  archived: 'Archived',\n  current: 'Current',\n  noMatch: (query: string) => `No conversation matches “${query}”.`,\n  noArchived: 'No archived conversations.',\n  noConversations: 'No conversations yet.',\n  loadingConversations: 'Loading conversations…',\n  actionFailed: 'That did not work. Try again.',\n  rename: 'Rename',\n  renameItem: (title: string) => `Rename ${title}`,\n  conversationName: 'Conversation name',\n  save: 'Save',\n  archive: 'Archive',\n  restore: 'Restore',\n  archiveItem: (title: string, archived: boolean) => `${archived ? 'Restore' : 'Archive'} ${title}`,\n  delete: 'Delete',\n  deleteItem: (title: string) => `Delete ${title}`,\n  keep: 'Keep conversation',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  previousWeek: 'Previous 7 days',\n  older: 'Older',\n  conversations: 'Conversations',\n  earlierMessages: 'Earlier messages',\n  readOnly: '(read-only)',\n  retry: 'Retry',\n  loadingShort: 'Loading…',\n  loadEarlier: 'Load earlier',\n  loadEarlierMessages: 'Load earlier messages',\n  earlierMessagesLoaded: (count: number) => `${count} earlier messages loaded`,\n  returnToConversation: 'Return to active conversation',\n  historyFailed: 'Conversation history could not be loaded. The previous page remains visible.',\n  loadPage: 'Load a page to browse earlier messages.',\n  noRecords: 'No records in this history page.',\n  beginning: 'Start of conversation',\n  justNow: 'now',\n  roleSystem: 'System',\n  roleToolResult: (tool: string, failed: boolean) => `Tool result: ${tool}${failed ? ' (failed)' : ''}`,\n  roleUser: 'You',\n  roleAssistant: (outcome: 'ok' | 'interrupted' | 'failed'): string => outcome === 'interrupted' ? 'Assistant (interrupted)' : outcome === 'failed' ? 'Assistant (failed)' : 'Assistant',\n  roleEvent: 'Event',\n  contextBoundary: 'Context boundary',\n  // Messages\n  copy: 'Copy',\n  copied: 'Copied',\n  copyFailed: 'Copy failed',\n  failed: 'Failed',\n  copyResponse: 'Copy response',\n  copyCode: 'Copy code',\n  fork: 'Fork from here',\n  forkHint: 'Fork from here: a new conversation with the messages up to this reply',\n  responseFailed: 'The response failed',\n  interrupted: 'Response interrupted',\n  thinking: 'Thinking…',\n  openImage: 'Open image attachment',\n  imageAttachment: 'Image attachment',\n  systemContext: 'System context',\n  toolFailed: (tool: string) => `${tool} failed`,\n  event: (label: string) => `Event: ${label}`,\n  // Activity and tools\n  reasoning: 'Reasoning',\n  thinkingStep: 'Thinking',\n  steps: (count: number) => `${count} ${count === 1 ? 'step' : 'steps'}`,\n  toolRunning: 'Running',\n  toolCompleted: 'Completed',\n  toolFailedStatus: 'Failed',\n  toolUnfinished: 'No result',\n  arguments: 'Arguments',\n  result: 'Result',\n  error: 'Error',\n  openImageResult: 'Open image result',\n  emptyResult: 'Empty result',\n  /** The live line of a running tool call; `hint` is what it acts on (a path, a command), possibly empty. */\n  toolActivity: (tool: string, hint: string) => {\n    const verb = TOOL_VERBS[tool] ?? `Running ${tool}`;\n    return hint ? `${verb}${tool === 'bash' ? ':' : ''} ${hint}` : verb;\n  },\n  /** How a tool is named in a finished activity summary (\"Used read ×3 · command\"). */\n  toolNoun: (tool: string) => TOOL_NOUNS[tool] ?? tool,\n  // Approval and question cards\n  approvalNeeded: 'Approval needed',\n  needsApproval: 'Needs your approval',\n  approve: 'Approve',\n  deny: 'Deny',\n  approved: 'Approved',\n  denied: 'Denied',\n  notDecided: 'Not decided: the run was stopped',\n  wantsToRun: 'The agent wants to run',\n  decision: 'Decision',\n  stillWritingCall: 'The agent is still writing this call…',\n  decidingUnavailable: 'Deciding is not available in this view.',\n  decisionSent: (approved: boolean) => `${approved ? 'Approved.' : 'Denied.'} Waiting for the agent…`,\n  decisionRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This call was already decided.' : 'This call is no longer waiting for a decision.',\n  decisionNotSent: 'The decision could not be sent.',\n  waitingForAgent: 'Waiting for the agent…',\n  question: 'Question',\n  questionForYou: 'Question for you',\n  notAnswered: 'Not answered',\n  answered: 'Answered',\n  askedQuestion: 'The agent asked a question.',\n  answerOptions: 'Answer options',\n  ownAnswer: 'Or type your own answer',\n  typeAnswer: 'Type your answer',\n  yourAnswerInput: 'Your answer',\n  /** A question of a form left blank, in the answer sent to the agent. */\n  skipped: '(no answer)',\n  answer: 'Answer',\n  stillWritingQuestion: 'The agent is still writing this question…',\n  answeringUnavailable: 'Answering is not available in this view.',\n  answerRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This question was already answered.' : 'This question is no longer waiting for an answer.',\n  answerNotSent: 'The answer could not be sent.',\n  yourAnswer: 'Your answer:',\n  // Run card (a headless run: `runs/<id>`)\n  run: 'Run',\n  runStatus: (status: 'queued' | 'running' | 'completed' | 'failed'): string => ({ queued: 'Queued', running: 'Running', completed: 'Completed', failed: 'Failed' })[status],\n  runElapsed: (time: string) => `Running for ${time}`,\n  runDuration: (time: string) => `Took ${time}`,\n  runRefresh: 'Refresh',\n  runNotLoaded: 'The run could not be loaded.',\n  // Artifact cards\n  artifact: 'Artifact',\n  opening: 'Opening…',\n  viewing: 'Viewing',\n  version: (ordinal: number) => `Version ${ordinal}`,\n  runCommand: (name: string, execute: boolean) => `${execute ? 'Run' : 'Insert'} /${name} command`,\n  taskStatus: 'Task status',\n  activityFailed: (count: number, tools: string) => `${count > 1 ? `${count} steps failed` : 'Step failed'}: ${tools}`,\n  activityUsed: (summary: string, stopped: boolean) => `${stopped ? 'Stopped · ' : 'Used '}${summary}`,\n  activityThought: 'Thought it through',\n  activityMany: (steps: number) => `Worked through ${steps} steps`,\n  open: 'Open',\n  openArtifact: (title: string, version: number | undefined) => version === undefined ? `Open ${title}` : `Open ${title}, version ${version}`,\n};\n\nexport type ChatLabels = typeof defaultChatLabels;\n\n/** The chat's icons. Any component that takes `className` (every lucide icon does). */\nexport const defaultChatIcons = {\n  /** The agent's glyph in the empty state (the header shows the host's `avatar`, if any). */\n  agent: MessagesSquareIcon as BlockIcon,\n  send: ArrowUpIcon as BlockIcon,\n  stop: SquareIcon as BlockIcon,\n  history: HistoryIcon as BlockIcon,\n  newChat: PlusIcon as BlockIcon,\n  add: PlusIcon as BlockIcon,\n  attach: PaperclipIcon as BlockIcon,\n  camera: CameraIcon as BlockIcon,\n  queue: ListEndIcon as BlockIcon,\n  jumpToLatest: ArrowDownIcon as BlockIcon,\n  reconnect: RefreshCwIcon as BlockIcon,\n  fork: GitForkIcon as BlockIcon,\n};\n\nexport type ChatIcons = typeof defaultChatIcons;\n\n/** What the chat's pieces read: the merged labels and icons. */\nexport interface ChatText { readonly labels: ChatLabels; readonly icons: ChatIcons }\n/** The defaults, as `useMergedText`'s base. */\nexport const defaultChatText: ChatText = { labels: defaultChatLabels, icons: defaultChatIcons };\nconst DEFAULT_TEXT = defaultChatText;\nconst ChatTextContext = createContext<ChatText>(DEFAULT_TEXT);\n\n/** The labels and icons of the surrounding chat (the defaults outside one). */\nexport const useChatText = (): ChatText => useContext(ChatTextContext);\n\n/** Merges the host's partial labels and icons over the defaults (or over `base`), keeping one object while they do not change. */\nexport function useMergedText<L extends ChatLabels = ChatLabels, I extends ChatIcons = ChatIcons>(labels: Partial<L> | undefined, icons: Partial<I> | undefined,\n  base: { readonly labels: L; readonly icons: I } = DEFAULT_TEXT as { readonly labels: L; readonly icons: I }): { readonly labels: L; readonly icons: I } {\n  return useMemo(() => ({ labels: withDefaults(base.labels, labels), icons: withDefaults(base.icons, icons) }), [labels, icons, base]);\n}\n\n/** Provides the chat's labels and icons to everything inside (composer, queue, rows, history). */\nexport function ChatTextProvider({ value, children }: { readonly value: ChatText; readonly children: ReactNode }) {\n  return createElement(ChatTextContext.Provider, { value }, children);\n}\n",
       "type": "registry:lib",
       "target": "components/pi-chat/labels.ts"
     },
     {
       "path": "registry/pi-chat/labels-fr.ts",
-      "content": "/* The chat's words in French, the `locale=\"fr\"` base of `PiChat`, `AmbientChat` and `AgentWorkspace`. Typed as `ChatLabels`, so a key added in English must be added here too. */\nimport type { ChatLabels } from './labels';\n\nconst TOOL_VERBS: Readonly<Record<string, string>> = { read: 'Lecture', write: 'Écriture', edit: 'Modification', ls: 'Liste', list_files: 'Liste', find: 'Recherche', grep: 'Recherche', load_skill: 'Chargement de la compétence', bash: 'Exécution bash' };\nconst TOOL_NOUNS: Readonly<Record<string, string>> = { bash: 'commande', read: 'lecture', write: 'écriture', edit: 'modification', find: 'recherche', grep: 'recherche', ls: 'liste' };\nconst EFFORT_NAMES: Readonly<Record<string, string>> = { off: 'Désactivé', minimal: 'Minimal', low: 'Faible', medium: 'Moyen', high: 'Élevé', xhigh: 'Très élevé', max: 'Maximum' };\nconst EFFORT_DETAILS: Readonly<Record<string, string>> = { off: 'Sans réflexion supplémentaire', minimal: 'Presque aucune réflexion', low: 'Réflexion légère', medium: 'Réflexion équilibrée', high: 'Réflexion approfondie', xhigh: 'Réflexion très approfondie', max: 'Réflexion maximale' };\n\nexport const frenchChatLabels: ChatLabels = {\n  title: 'Conversation',\n  history: 'Historique',\n  artifacts: 'Fichiers',\n  search: 'Rechercher',\n  live: 'En direct',\n  connecting: 'Connexion…',\n  reconnecting: 'Reconnexion…',\n  loadFailed: 'La conversation n’a pas pu être chargée.',\n  disconnected: 'Déconnecté. Les derniers messages reçus restent affichés.',\n  reconnect: 'Se reconnecter',\n  requiredActions: 'Actions requises dans la conversation',\n  messages: 'Messages',\n  showEarlier: 'Afficher les messages précédents',\n  loading: 'Chargement de la conversation…',\n  emptyDescription: 'Commencez une conversation.',\n  jumpToLatest: 'Aller au dernier message',\n  agentWorking: 'L’agent travaille',\n  waitingForAnswer: 'En attente de votre réponse',\n  retryPending: 'Nouvelle tentative en attente',\n  compacting: 'Résumé du contexte en cours',\n  moreActions: 'Plus d’actions',\n  sendUnknown: 'L’envoi n’est pas confirmé. Le message est conservé jusqu’à ce que vous le vérifiiez ou le renvoyiez.',\n  checkSubmission: 'Vérifier l’envoi',\n  retrySame: 'Renvoyer la même demande',\n  stopRequested: 'Arrêt demandé. En attente de confirmation.',\n  stopUnconfirmed: 'Arrêt non confirmé. Le travail continue peut-être.',\n  steerRefused: 'Le message n’a pas pu être ajouté en cours de réponse ; il est revenu dans la zone de saisie.',\n  tooLate: 'Trop tard : ce message a déjà commencé.',\n  tooLateToRemove: 'Trop tard pour le retirer : ce message a déjà commencé.',\n  queueFailed: 'Le message n’a pas pu être modifié.',\n  queueLocked: 'Les messages en attente ne peuvent pas être modifiés ici.',\n  waitToSteer: 'Attendez la fin de l’envoi en cours, puis réessayez.',\n  steerFailed: 'Le message n’a pas pu être ajouté en cours de réponse.',\n  connectionFailed: 'Échec de la connexion',\n  actionFailedShort: 'Échec de l’action',\n  uploadFailedShort: 'Échec de l’envoi',\n  changeRefused: 'La modification a été refusée',\n  dismissHint: 'cliquez pour fermer',\n  placeholder: 'Écrivez à l’agent…',\n  placeholderWorking: 'Mettre un message en attente…',\n  messageInput: 'Message',\n  send: 'Envoyer',\n  sendHint: 'Envoyer (Entrée)',\n  stop: 'Arrêter',\n  queue: 'Mettre en attente',\n  add: 'Ajouter',\n  attachFiles: 'Joindre des fichiers',\n  // Voice input (the microphone button beside the composer)\n  voiceRecord: 'Enregistrer un message',\n  voiceStop: 'Arrêter l’enregistrement',\n  voiceCancel: 'Annuler l’enregistrement',\n  voiceTranscribing: 'Transcription…',\n  voiceNothingHeard: 'Rien n’a été entendu. Réessayez.',\n  voiceTranscribeFailed: 'L’enregistrement n’a pas pu être transcrit. Réessayez.',\n  voiceDenied: 'Microphone bloqué. Autorisez-le pour ce site dans le navigateur, puis appuyez de nouveau sur enregistrer.',\n  voiceNoMicrophone: 'Aucun microphone trouvé. Branchez-en un, puis appuyez de nouveau sur enregistrer.',\n  voiceBusy: 'Le microphone est occupé ou n’a pas pu être ouvert. Fermez les autres applications qui l’utilisent et réessayez.',\n  voiceInsecure: 'L’enregistrement exige une page sécurisée (https ou localhost).',\n  voiceUnsupported: 'Ce navigateur ne peut pas enregistrer le son ici.',\n  voiceStartFailed: 'Le microphone n’a pas pu être démarré.',\n  commands: 'Commandes',\n  annotate: 'Annoter',\n  annotateHint: 'Annoter : cliquez sur ce que vous voulez commenter (Échap pour arrêter)',\n  annotateNotes: count => `${count} ${count === 1 ? 'note' : 'notes'}`,\n  annotateClear: 'Retirer les notes',\n  remove: name => `Retirer ${name}`,\n  dismiss: name => `Fermer ${name}`,\n  uploading: name => `Envoi de ${name}…`,\n  uploadFailed: (name, error) => `${name} : ${error ?? 'échec de l’envoi'}`,\n  preparingAttachments: 'Préparation des pièces jointes…',\n  preparingAttachmentsShort: 'Préparation des pièces jointes',\n  mentionedFiles: 'Fichiers mentionnés',\n  uploads: 'Envois',\n  attachments: 'Pièces jointes',\n  fileKind: { document: 'Document', image: 'Image', pdf: 'PDF', sheet: 'Tableur', slides: 'Présentation', file: 'Fichier' },\n  openFile: name => `Ouvrir ${name}`,\n  fileChange: { created: 'Créé', edited: 'Modifié' },\n  pastedFileName: stamp => `Texte collé ${stamp}`,\n  restorePaste: 'Remettre le texte collé dans le message',\n  searchCommands: 'Rechercher une commande',\n  filterBySource: 'Filtrer par source',\n  allSources: 'Toutes',\n  noCommands: 'Aucune commande ne correspond.',\n  slashGroup: group => group === 'skills' ? 'compétences' : group === 'built-in' ? 'intégrées' : group,\n  skillBadge: 'compétence',\n  workspaceFiles: 'Fichiers de l’espace',\n  searchFailed: 'La recherche a échoué',\n  model: 'Modèle',\n  effort: 'Effort',\n  effortDefault: 'Par défaut',\n  modelAndEffort: 'Modèle et effort',\n  modelSummary: (model, effort) => [model && `Modèle : ${model}`, effort && `Effort : ${effort}`].filter(Boolean).join(', '),\n  effortName: level => EFFORT_NAMES[level] ?? level,\n  effortDetail: level => EFFORT_DETAILS[level],\n  queuedMessages: 'Messages en attente',\n  steer: 'Envoyer maintenant',\n  steerHint: 'Ajouter ce message à la réponse en cours',\n  steering: 'Envoi en cours de réponse',\n  queued: 'En attente',\n  removeQueued: 'Retirer le message en attente',\n  removeHint: 'Retirer',\n  more: 'Plus',\n  edit: 'Modifier',\n  sending: 'Envoi',\n  images: count => `[${count} image${count === 1 ? '' : 's'}]`,\n  historyDialog: 'Historique des conversations',\n  newConversation: 'Nouvelle',\n  untitled: 'Nouvelle conversation',\n  closeHistory: 'Fermer l’historique',\n  close: 'Fermer',\n  earlierInConversation: 'Messages précédents de cette conversation',\n  searchConversations: 'Rechercher une conversation',\n  archived: 'Archivées',\n  current: 'En cours',\n  noMatch: query => `Aucune conversation ne correspond à « ${query} ».`,\n  noArchived: 'Aucune conversation archivée.',\n  noConversations: 'Aucune conversation pour le moment.',\n  loadingConversations: 'Chargement des conversations…',\n  actionFailed: 'Cela n’a pas fonctionné. Réessayez.',\n  rename: 'Renommer',\n  renameItem: title => `Renommer ${title}`,\n  conversationName: 'Nom de la conversation',\n  save: 'Enregistrer',\n  archive: 'Archiver',\n  restore: 'Restaurer',\n  archiveItem: (title, archived) => `${archived ? 'Restaurer' : 'Archiver'} ${title}`,\n  delete: 'Supprimer',\n  deleteItem: title => `Supprimer ${title}`,\n  keep: 'Garder la conversation',\n  today: 'Aujourd’hui',\n  yesterday: 'Hier',\n  previousWeek: 'Les 7 derniers jours',\n  older: 'Plus anciennes',\n  conversations: 'Conversations',\n  earlierMessages: 'Messages précédents',\n  readOnly: '(lecture seule)',\n  retry: 'Réessayer',\n  loadingShort: 'Chargement…',\n  loadEarlier: 'Charger les précédents',\n  loadEarlierMessages: 'Charger les messages précédents',\n  earlierMessagesLoaded: count => `${count} messages précédents chargés`,\n  returnToConversation: 'Revenir à la conversation en cours',\n  historyFailed: 'L’historique n’a pas pu être chargé. La page précédente reste affichée.',\n  loadPage: 'Chargez une page pour parcourir les messages précédents.',\n  noRecords: 'Aucun élément sur cette page d’historique.',\n  beginning: 'Début de la conversation.',\n  justNow: 'à l’instant',\n  roleSystem: 'Système',\n  roleToolResult: (tool, failed) => `Résultat de l’outil : ${tool}${failed ? ' (échec)' : ''}`,\n  roleUser: 'Vous',\n  roleAssistant: outcome => outcome === 'interrupted' ? 'Assistant (interrompu)' : outcome === 'failed' ? 'Assistant (échec)' : 'Assistant',\n  roleEvent: 'Événement',\n  contextBoundary: 'Limite du contexte',\n  copy: 'Copier',\n  copied: 'Copié',\n  copyFailed: 'Échec de la copie',\n  failed: 'Échec',\n  copyResponse: 'Copier la réponse',\n  copyCode: 'Copier le code',\n  fork: 'Repartir d’ici',\n  forkHint: 'Repartir d’ici : une nouvelle conversation avec les messages jusqu’à cette réponse',\n  responseFailed: 'La réponse a échoué',\n  interrupted: 'Réponse interrompue',\n  thinking: 'Réflexion…',\n  openImage: 'Ouvrir l’image jointe',\n  imageAttachment: 'Image jointe',\n  systemContext: 'Contexte système',\n  toolFailed: tool => `Échec de ${tool}`,\n  event: label => `Événement : ${label}`,\n  reasoning: 'Réflexion',\n  thinkingStep: 'Réflexion',\n  steps: count => `${count} ${count === 1 ? 'étape' : 'étapes'}`,\n  toolRunning: 'En cours',\n  toolCompleted: 'Terminé',\n  toolFailedStatus: 'Échec',\n  toolUnfinished: 'Sans résultat',\n  arguments: 'Arguments',\n  result: 'Résultat',\n  error: 'Erreur',\n  openImageResult: 'Ouvrir l’image du résultat',\n  emptyResult: 'Résultat vide',\n  toolActivity: (tool, hint) => {\n    const verb = TOOL_VERBS[tool] ?? `Exécution de ${tool}`;\n    return hint ? `${verb}${tool === 'bash' ? ' :' : ''} ${hint}` : verb;\n  },\n  toolNoun: tool => TOOL_NOUNS[tool] ?? tool,\n  approvalNeeded: 'Approbation requise',\n  needsApproval: 'Votre approbation est nécessaire',\n  approve: 'Approuver',\n  deny: 'Refuser',\n  approved: 'Approuvé',\n  denied: 'Refusé',\n  notDecided: 'Non décidé : l’exécution a été arrêtée',\n  wantsToRun: 'L’agent souhaite exécuter',\n  decision: 'Décision',\n  stillWritingCall: 'L’agent est encore en train d’écrire cet appel…',\n  decidingUnavailable: 'La décision n’est pas disponible dans cette vue.',\n  decisionSent: approved => `${approved ? 'Approuvé.' : 'Refusé.'} En attente de l’agent…`,\n  decisionRefused: kind => kind === 'denied' ? 'Cette réponse n’a pas été acceptée.' : kind === 'conflict' ? 'Cet appel a déjà été décidé.' : 'Cet appel n’attend plus de décision.',\n  decisionNotSent: 'La décision n’a pas pu être envoyée.',\n  waitingForAgent: 'En attente de l’agent…',\n  question: 'Question',\n  questionForYou: 'Une question pour vous',\n  notAnswered: 'Sans réponse',\n  answered: 'Répondu',\n  askedQuestion: 'L’agent a posé une question.',\n  answerOptions: 'Réponses possibles',\n  ownAnswer: 'Ou écrivez votre propre réponse',\n  typeAnswer: 'Écrivez votre réponse',\n  yourAnswerInput: 'Votre réponse',\n  run: 'Exécution',\n  runStatus: status => ({ queued: 'En attente', running: 'En cours', completed: 'Terminée', failed: 'Échouée' })[status],\n  runElapsed: time => `En cours depuis ${time}`,\n  runDuration: time => `Durée : ${time}`,\n  runRefresh: 'Actualiser',\n  runNotLoaded: 'L’exécution n’a pas pu être chargée.',\n  skipped: '(pas de réponse)',\n  answer: 'Répondre',\n  stillWritingQuestion: 'L’agent est encore en train d’écrire cette question…',\n  answeringUnavailable: 'La réponse n’est pas disponible dans cette vue.',\n  answerRefused: kind => kind === 'denied' ? 'Cette réponse n’a pas été acceptée.' : kind === 'conflict' ? 'Cette question a déjà reçu une réponse.' : 'Cette question n’attend plus de réponse.',\n  answerNotSent: 'La réponse n’a pas pu être envoyée.',\n  yourAnswer: 'Votre réponse :',\n  artifact: 'Document',\n  opening: 'Ouverture…',\n  viewing: 'Affiché',\n  version: ordinal => `Version ${ordinal}`,\n  runCommand: (name, execute) => `${execute ? 'Exécuter' : 'Insérer'} la commande /${name}`,\n  taskStatus: 'État de la tâche',\n  activityFailed: (count, tools) => `${count > 1 ? `${count} étapes ont échoué` : 'Une étape a échoué'} : ${tools}`,\n  activityUsed: (summary, stopped) => `${stopped ? 'Arrêté · ' : 'Utilisé : '}${summary}`,\n  activityThought: 'Réflexion terminée',\n  activityMany: steps => `${steps} étapes réalisées`,\n  open: 'Ouvrir',\n  openArtifact: (title, version) => version === undefined ? `Ouvrir ${title}` : `Ouvrir ${title}, version ${version}`,\n};\n",
+      "content": "/* The chat's words in French, the `locale=\"fr\"` base of `PiChat`, `AmbientChat` and `AgentWorkspace`. Typed as `ChatLabels`, so a key added in English must be added here too. */\nimport type { ChatLabels } from './labels';\n\nconst TOOL_VERBS: Readonly<Record<string, string>> = { read: 'Lecture', write: 'Écriture', edit: 'Modification', ls: 'Liste', list_files: 'Liste', find: 'Recherche', grep: 'Recherche', load_skill: 'Chargement de la compétence', bash: 'Exécution bash' };\nconst TOOL_NOUNS: Readonly<Record<string, string>> = { bash: 'commande', read: 'lecture', write: 'écriture', edit: 'modification', find: 'recherche', grep: 'recherche', ls: 'liste' };\nconst EFFORT_NAMES: Readonly<Record<string, string>> = { off: 'Désactivé', minimal: 'Minimal', low: 'Faible', medium: 'Moyen', high: 'Élevé', xhigh: 'Très élevé', max: 'Maximum' };\nconst EFFORT_DETAILS: Readonly<Record<string, string>> = { off: 'Sans réflexion supplémentaire', minimal: 'Presque aucune réflexion', low: 'Réflexion légère', medium: 'Réflexion équilibrée', high: 'Réflexion approfondie', xhigh: 'Réflexion très approfondie', max: 'Réflexion maximale' };\n\nexport const frenchChatLabels: ChatLabels = {\n  title: 'Conversation',\n  history: 'Historique',\n  artifacts: 'Fichiers',\n  search: 'Rechercher',\n  live: 'En direct',\n  connecting: 'Connexion…',\n  reconnecting: 'Reconnexion…',\n  loadFailed: 'La conversation n’a pas pu être chargée.',\n  disconnected: 'Déconnecté. Les derniers messages reçus restent affichés.',\n  reconnect: 'Se reconnecter',\n  requiredActions: 'Actions requises dans la conversation',\n  messages: 'Messages',\n  showEarlier: 'Afficher les messages précédents',\n  loading: 'Chargement de la conversation…',\n  emptyDescription: 'Commencez une conversation.',\n  jumpToLatest: 'Aller au dernier message',\n  agentWorking: 'L’agent travaille',\n  waitingForAnswer: 'En attente de votre réponse',\n  retryPending: 'Nouvelle tentative en attente',\n  compacting: 'Résumé du contexte en cours',\n  preparing: 'En préparation…',\n  sendUnavailable: 'L’envoi n’est pas disponible pour le moment.',\n  moreActions: 'Plus d’actions',\n  sendUnknown: 'L’envoi n’est pas confirmé. Le message est conservé jusqu’à ce que vous le vérifiiez ou le renvoyiez.',\n  checkSubmission: 'Vérifier l’envoi',\n  retrySame: 'Renvoyer la même demande',\n  stopRequested: 'Arrêt demandé. En attente de confirmation.',\n  stopUnconfirmed: 'Arrêt non confirmé. Le travail continue peut-être.',\n  steerRefused: 'Le message n’a pas pu être ajouté en cours de réponse ; il est revenu dans la zone de saisie.',\n  tooLate: 'Trop tard : ce message a déjà commencé.',\n  tooLateToRemove: 'Trop tard pour le retirer : ce message a déjà commencé.',\n  queueFailed: 'Le message n’a pas pu être modifié.',\n  queueLocked: 'Les messages en attente ne peuvent pas être modifiés ici.',\n  waitToSteer: 'Attendez la fin de l’envoi en cours, puis réessayez.',\n  steerFailed: 'Le message n’a pas pu être ajouté en cours de réponse.',\n  connectionFailed: 'Échec de la connexion',\n  actionFailedShort: 'Échec de l’action',\n  uploadFailedShort: 'Échec de l’envoi',\n  changeRefused: 'La modification a été refusée',\n  dismissHint: 'cliquez pour fermer',\n  placeholder: 'Écrivez à l’agent…',\n  placeholderWorking: 'Mettre un message en attente…',\n  messageInput: 'Message',\n  send: 'Envoyer',\n  sendHint: 'Envoyer (Entrée)',\n  stop: 'Arrêter',\n  queue: 'Mettre en attente',\n  add: 'Ajouter',\n  attachFiles: 'Joindre des fichiers',\n  takePhoto: 'Prendre une photo',\n  cameraShoot: 'Prendre la photo',\n  cameraClose: 'Fermer l’appareil photo',\n  cameraUnavailable: 'L’appareil photo ne peut pas s’ouvrir sur cette page.',\n  cameraFallback: 'Utiliser l’appareil photo du téléphone',\n  // Voice input (the microphone button beside the composer)\n  voiceRecord: 'Enregistrer un message',\n  voiceHold: 'Maintenir pour enregistrer, relâcher pour envoyer',\n  voiceRecording: 'Enregistrement',\n  voicePreparing: 'Préparation du message vocal…',\n  voiceAudioOnly: 'Envoyer l’audio seul',\n  voiceDiscard: 'Abandonner',\n  voicePlay: 'Lire',\n  voicePause: 'Mettre en pause',\n  voicePlayFailed: 'La lecture de l’audio a échoué. Réessayez.',\n  voiceBlocked: 'Non envoyé. Vérifiez l’avis de la conversation avant de réessayer.',\n  voiceUnconfirmed: 'L’envoi n’est pas confirmé. Vérifiez l’avis de la conversation.',\n  voiceStop: 'Arrêter l’enregistrement',\n  voiceCancel: 'Annuler l’enregistrement',\n  voiceTranscribing: 'Transcription…',\n  voiceNothingHeard: 'Rien n’a été entendu. Réessayez.',\n  voiceTranscribeFailed: 'L’enregistrement n’a pas pu être transcrit. Réessayez.',\n  voiceDenied: 'Microphone bloqué. Autorisez-le pour ce site dans le navigateur, puis appuyez de nouveau sur enregistrer.',\n  voiceNoMicrophone: 'Aucun microphone trouvé. Branchez-en un, puis appuyez de nouveau sur enregistrer.',\n  voiceBusy: 'Le microphone est occupé ou n’a pas pu être ouvert. Fermez les autres applications qui l’utilisent et réessayez.',\n  voiceInsecure: 'L’enregistrement exige une page sécurisée (https ou localhost).',\n  voiceUnsupported: 'Ce navigateur ne peut pas enregistrer le son ici.',\n  voiceStartFailed: 'Le microphone n’a pas pu être démarré.',\n  commands: 'Commandes',\n  annotate: 'Annoter',\n  annotateHint: 'Annoter : cliquez sur ce que vous voulez commenter (Échap pour arrêter)',\n  annotateNotes: count => `${count} ${count === 1 ? 'note' : 'notes'}`,\n  annotateClear: 'Retirer les notes',\n  remove: name => `Retirer ${name}`,\n  dismiss: name => `Fermer ${name}`,\n  uploading: name => `Envoi de ${name}…`,\n  uploadFailed: (name, error) => `${name} : ${error ?? 'échec de l’envoi'}`,\n  preparingAttachments: 'Préparation des pièces jointes…',\n  preparingAttachmentsShort: 'Préparation des pièces jointes',\n  mentionedFiles: 'Fichiers mentionnés',\n  uploads: 'Envois',\n  attachments: 'Pièces jointes',\n  fileKind: { document: 'Document', image: 'Image', pdf: 'PDF', sheet: 'Tableur', slides: 'Présentation', audio: 'Audio', file: 'Fichier' },\n  openFile: name => `Ouvrir ${name}`,\n  fileChange: { created: 'Créé', edited: 'Modifié' },\n  pastedFileName: stamp => `Texte collé ${stamp}`,\n  restorePaste: 'Remettre le texte collé dans le message',\n  searchCommands: 'Rechercher une commande',\n  filterBySource: 'Filtrer par source',\n  allSources: 'Toutes',\n  noCommands: 'Aucune commande ne correspond.',\n  slashGroup: group => group === 'skills' ? 'compétences' : group === 'built-in' ? 'intégrées' : group,\n  skillBadge: 'compétence',\n  workspaceFiles: 'Fichiers de l’espace',\n  searchFailed: 'La recherche a échoué',\n  model: 'Modèle',\n  effort: 'Effort',\n  effortDefault: 'Par défaut',\n  modelAndEffort: 'Modèle et effort',\n  modelSummary: (model, effort) => [model && `Modèle : ${model}`, effort && `Effort : ${effort}`].filter(Boolean).join(', '),\n  effortName: level => EFFORT_NAMES[level] ?? level,\n  effortDetail: level => EFFORT_DETAILS[level],\n  queuedMessages: 'Messages en attente',\n  steer: 'Envoyer maintenant',\n  steerHint: 'Ajouter ce message à la réponse en cours',\n  steering: 'Envoi en cours de réponse',\n  queued: 'En attente',\n  removeQueued: 'Retirer le message en attente',\n  removeHint: 'Retirer',\n  more: 'Plus',\n  edit: 'Modifier',\n  sending: 'Envoi',\n  images: count => `[${count} image${count === 1 ? '' : 's'}]`,\n  historyDialog: 'Historique des conversations',\n  newConversation: 'Nouvelle',\n  untitled: 'Nouvelle conversation',\n  closeHistory: 'Fermer l’historique',\n  close: 'Fermer',\n  earlierInConversation: 'Messages précédents de cette conversation',\n  searchConversations: 'Rechercher une conversation',\n  archived: 'Archivées',\n  current: 'En cours',\n  noMatch: query => `Aucune conversation ne correspond à « ${query} ».`,\n  noArchived: 'Aucune conversation archivée.',\n  noConversations: 'Aucune conversation pour le moment.',\n  loadingConversations: 'Chargement des conversations…',\n  actionFailed: 'Cela n’a pas fonctionné. Réessayez.',\n  rename: 'Renommer',\n  renameItem: title => `Renommer ${title}`,\n  conversationName: 'Nom de la conversation',\n  save: 'Enregistrer',\n  archive: 'Archiver',\n  restore: 'Restaurer',\n  archiveItem: (title, archived) => `${archived ? 'Restaurer' : 'Archiver'} ${title}`,\n  delete: 'Supprimer',\n  deleteItem: title => `Supprimer ${title}`,\n  keep: 'Garder la conversation',\n  today: 'Aujourd’hui',\n  yesterday: 'Hier',\n  previousWeek: 'Les 7 derniers jours',\n  older: 'Plus anciennes',\n  conversations: 'Conversations',\n  earlierMessages: 'Messages précédents',\n  readOnly: '(lecture seule)',\n  retry: 'Réessayer',\n  loadingShort: 'Chargement…',\n  loadEarlier: 'Charger les précédents',\n  loadEarlierMessages: 'Charger les messages précédents',\n  earlierMessagesLoaded: count => `${count} messages précédents chargés`,\n  returnToConversation: 'Revenir à la conversation en cours',\n  historyFailed: 'L’historique n’a pas pu être chargé. La page précédente reste affichée.',\n  loadPage: 'Chargez une page pour parcourir les messages précédents.',\n  noRecords: 'Aucun élément sur cette page d’historique.',\n  beginning: 'Début de la conversation.',\n  justNow: 'à l’instant',\n  roleSystem: 'Système',\n  roleToolResult: (tool, failed) => `Résultat de l’outil : ${tool}${failed ? ' (échec)' : ''}`,\n  roleUser: 'Vous',\n  roleAssistant: outcome => outcome === 'interrupted' ? 'Assistant (interrompu)' : outcome === 'failed' ? 'Assistant (échec)' : 'Assistant',\n  roleEvent: 'Événement',\n  contextBoundary: 'Limite du contexte',\n  copy: 'Copier',\n  copied: 'Copié',\n  copyFailed: 'Échec de la copie',\n  failed: 'Échec',\n  copyResponse: 'Copier la réponse',\n  copyCode: 'Copier le code',\n  fork: 'Repartir d’ici',\n  forkHint: 'Repartir d’ici : une nouvelle conversation avec les messages jusqu’à cette réponse',\n  responseFailed: 'La réponse a échoué',\n  interrupted: 'Réponse interrompue',\n  thinking: 'Réflexion…',\n  openImage: 'Ouvrir l’image jointe',\n  imageAttachment: 'Image jointe',\n  systemContext: 'Contexte système',\n  toolFailed: tool => `Échec de ${tool}`,\n  event: label => `Événement : ${label}`,\n  reasoning: 'Réflexion',\n  thinkingStep: 'Réflexion',\n  steps: count => `${count} ${count === 1 ? 'étape' : 'étapes'}`,\n  toolRunning: 'En cours',\n  toolCompleted: 'Terminé',\n  toolFailedStatus: 'Échec',\n  toolUnfinished: 'Sans résultat',\n  arguments: 'Arguments',\n  result: 'Résultat',\n  error: 'Erreur',\n  openImageResult: 'Ouvrir l’image du résultat',\n  emptyResult: 'Résultat vide',\n  toolActivity: (tool, hint) => {\n    const verb = TOOL_VERBS[tool] ?? `Exécution de ${tool}`;\n    return hint ? `${verb}${tool === 'bash' ? ' :' : ''} ${hint}` : verb;\n  },\n  toolNoun: tool => TOOL_NOUNS[tool] ?? tool,\n  approvalNeeded: 'Approbation requise',\n  needsApproval: 'Votre approbation est nécessaire',\n  approve: 'Approuver',\n  deny: 'Refuser',\n  approved: 'Approuvé',\n  denied: 'Refusé',\n  notDecided: 'Non décidé : l’exécution a été arrêtée',\n  wantsToRun: 'L’agent souhaite exécuter',\n  decision: 'Décision',\n  stillWritingCall: 'L’agent est encore en train d’écrire cet appel…',\n  decidingUnavailable: 'La décision n’est pas disponible dans cette vue.',\n  decisionSent: approved => `${approved ? 'Approuvé.' : 'Refusé.'} En attente de l’agent…`,\n  decisionRefused: kind => kind === 'denied' ? 'Cette réponse n’a pas été acceptée.' : kind === 'conflict' ? 'Cet appel a déjà été décidé.' : 'Cet appel n’attend plus de décision.',\n  decisionNotSent: 'La décision n’a pas pu être envoyée.',\n  waitingForAgent: 'En attente de l’agent…',\n  question: 'Question',\n  questionForYou: 'Une question pour vous',\n  notAnswered: 'Sans réponse',\n  answered: 'Répondu',\n  askedQuestion: 'L’agent a posé une question.',\n  answerOptions: 'Réponses possibles',\n  ownAnswer: 'Ou écrivez votre propre réponse',\n  typeAnswer: 'Écrivez votre réponse',\n  yourAnswerInput: 'Votre réponse',\n  run: 'Exécution',\n  runStatus: status => ({ queued: 'En attente', running: 'En cours', completed: 'Terminée', failed: 'Échouée' })[status],\n  runElapsed: time => `En cours depuis ${time}`,\n  runDuration: time => `Durée : ${time}`,\n  runRefresh: 'Actualiser',\n  runNotLoaded: 'L’exécution n’a pas pu être chargée.',\n  skipped: '(pas de réponse)',\n  answer: 'Répondre',\n  stillWritingQuestion: 'L’agent est encore en train d’écrire cette question…',\n  answeringUnavailable: 'La réponse n’est pas disponible dans cette vue.',\n  answerRefused: kind => kind === 'denied' ? 'Cette réponse n’a pas été acceptée.' : kind === 'conflict' ? 'Cette question a déjà reçu une réponse.' : 'Cette question n’attend plus de réponse.',\n  answerNotSent: 'La réponse n’a pas pu être envoyée.',\n  yourAnswer: 'Votre réponse :',\n  artifact: 'Document',\n  opening: 'Ouverture…',\n  viewing: 'Affiché',\n  version: ordinal => `Version ${ordinal}`,\n  runCommand: (name, execute) => `${execute ? 'Exécuter' : 'Insérer'} la commande /${name}`,\n  taskStatus: 'État de la tâche',\n  activityFailed: (count, tools) => `${count > 1 ? `${count} étapes ont échoué` : 'Une étape a échoué'} : ${tools}`,\n  activityUsed: (summary, stopped) => `${stopped ? 'Arrêté · ' : 'Utilisé : '}${summary}`,\n  activityThought: 'Réflexion terminée',\n  activityMany: steps => `${steps} étapes réalisées`,\n  open: 'Ouvrir',\n  openArtifact: (title, version) => version === undefined ? `Ouvrir ${title}` : `Ouvrir ${title}, version ${version}`,\n};\n",
       "type": "registry:lib",
       "target": "components/pi-chat/labels-fr.ts"
     },
@@ -236,6 +244,24 @@
       "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Item, ItemContent, ItemDescription, ItemFooter, ItemMedia, ItemTitle } from '@/components/ui/item';\nimport { Spinner } from '@/components/ui/spinner';\nimport { CheckIcon, CircleAlertIcon, RefreshCwIcon } from 'lucide-react';\nimport { CodeBlock } from './code-block';\nimport { Markdown } from './markdown';\nimport { useChatText } from './labels';\n\nexport type RunStatus = 'queued' | 'running' | 'completed' | 'failed';\n/** A headless run as the host's `GET _agent/<name>/runs/<id>` returns it. */\nexport interface RunRecord {\n  readonly id: string;\n  readonly status: RunStatus;\n  /** The structured result: shown as Markdown when it is text, as JSON otherwise. */\n  readonly output?: unknown;\n  /** The run's final text, shown as Markdown when there is no `output`. */\n  readonly text?: string | undefined;\n  readonly error?: string | undefined;\n  /** The agent's title. */\n  readonly agent?: string | undefined;\n  /** Epoch milliseconds or an ISO date. */\n  readonly startedAt?: number | string | undefined;\n  readonly finishedAt?: number | string | undefined;\n}\n\nconst STATUSES: readonly RunStatus[] = ['queued', 'running', 'completed', 'failed'];\nconst time = (value: unknown): number | undefined => typeof value === 'number' && Number.isFinite(value) ? value : typeof value === 'string' && Number.isFinite(Date.parse(value)) ? Date.parse(value) : undefined;\nconst optionalText = (value: unknown): string | undefined => typeof value === 'string' && value ? value : undefined;\n\n/** Reads a run record defensively (it comes over the network); undefined when it has no id or no known status. */\nexport function parseRun(value: unknown): RunRecord | undefined {\n  if (value === null || typeof value !== 'object') return undefined;\n  const record = value as Record<string, unknown>;\n  const { id, status } = record;\n  if ((typeof id !== 'string' || !id) || typeof status !== 'string' || !(STATUSES as readonly string[]).includes(status)) return undefined;\n  const startedAt = time(record['startedAt']), finishedAt = time(record['finishedAt']);\n  return { id, status: status as RunStatus, ...(record['output'] === undefined || record['output'] === null ? {} : { output: record['output'] }),\n    ...(optionalText(record['text']) ? { text: record['text'] as string } : {}), ...(optionalText(record['error']) ? { error: record['error'] as string } : {}),\n    ...(optionalText(record['agent']) ? { agent: record['agent'] as string } : {}), ...(startedAt === undefined ? {} : { startedAt }), ...(finishedAt === undefined ? {} : { finishedAt }) };\n}\n\n/** `42 s`, `3 min 5 s`, `1 h 2 min`. */\nconst span = (ms: number): string => {\n  const seconds = Math.max(0, Math.round(ms / 1000));\n  if (seconds < 60) return `${seconds} s`;\n  const minutes = Math.floor(seconds / 60);\n  if (minutes < 60) return `${minutes} min${seconds % 60 ? ` ${seconds % 60} s` : ''}`;\n  return `${Math.floor(minutes / 60)} h${minutes % 60 ? ` ${minutes % 60} min` : ''}`;\n};\n\n/**\n * A headless run (`POST _agent/<name>/runs` → `GET runs/<id>`) as a card: the agent's title, a status badge, a spinner while it is queued or\n * running with the elapsed time, then the duration and the output (or text) as Markdown, or the error. The host fetches: give `run` (a\n * record it keeps current), and optionally `fetchRun(id, signal)` to have the card poll every `pollMs` until the run settles and offer\n * Refresh. URLs are the host's (relative to its page). Render it from `renderTool` or `renderEntry`, or anywhere in the page.\n */\nexport function RunCard({ run: given, fetchRun, pollMs = 2000, now: clock = Date.now }: {\n  readonly run: RunRecord;\n  readonly fetchRun?: ((id: string, signal: AbortSignal) => Promise<unknown>) | undefined;\n  readonly pollMs?: number;\n  /** Test seam: the clock of the elapsed time. */\n  readonly now?: () => number;\n}) {\n  const { labels } = useChatText();\n  const [fetched, setFetched] = useState<RunRecord | undefined>();\n  const [failed, setFailed] = useState(false);\n  const run = fetched?.id === given.id ? fetched : given;\n  const settled = run.status === 'completed' || run.status === 'failed';\n  const [now, setNow] = useState(clock);\n  const latest = useRef(fetchRun); latest.current = fetchRun;\n\n  const refresh = (signal: AbortSignal) => latest.current?.(given.id, signal).then(value => {\n    if (signal.aborted) return;\n    const parsed = parseRun(value);\n    setFailed(!parsed);\n    if (parsed?.id === given.id) setFetched(parsed);\n  }).catch(() => { if (!signal.aborted) setFailed(true); });\n  const polling = Boolean(fetchRun) && !settled;\n  useEffect(() => {\n    if (!polling) return;\n    const abort = new AbortController();\n    void refresh(abort.signal);\n    const timer = setInterval(() => { void refresh(abort.signal); }, pollMs);\n    return () => { abort.abort(); clearInterval(timer); };\n  }, [polling, given.id, pollMs]); // eslint-disable-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    if (settled || run.startedAt === undefined) return;\n    const timer = setInterval(() => setNow(clock()), 1000);\n    return () => clearInterval(timer);\n  }, [settled, run.startedAt, clock]);\n\n  const started = time(run.startedAt), finished = time(run.finishedAt);\n  const timing = started === undefined ? undefined : finished !== undefined ? labels.runDuration(span(finished - started)) : settled ? undefined : labels.runElapsed(span(now - started));\n  const body = run.output !== undefined ? (typeof run.output === 'string' ? <Markdown text={run.output} /> : <CodeBlock code={JSON.stringify(run.output, null, 2)} language=\"json\" />)\n    : run.text ? <Markdown text={run.text} /> : undefined;\n\n  return <Item variant=\"outline\" size=\"sm\" render={<section />} data-testid=\"run-card\" data-state={run.status} data-run-id={run.id} aria-label={run.agent ?? labels.run} aria-busy={!settled} className=\"my-2 text-start\">\n    <ItemMedia variant=\"icon\">\n      {settled ? run.status === 'completed' ? <CheckIcon aria-hidden=\"true\" /> : <CircleAlertIcon aria-hidden=\"true\" /> : <Spinner data-testid=\"run-spinner\" aria-label={labels.runStatus(run.status)} />}\n    </ItemMedia>\n    <ItemContent className=\"min-w-0 basis-0\">\n      <ItemTitle className=\"line-clamp-none [overflow-wrap:anywhere]\">{run.agent ?? labels.run}</ItemTitle>\n      <ItemDescription className=\"line-clamp-none flex flex-wrap items-center gap-2\">\n        <Badge data-testid=\"run-status\" variant={run.status === 'failed' ? 'destructive' : run.status === 'completed' ? 'secondary' : 'outline'}>{labels.runStatus(run.status)}</Badge>\n        {timing && <span data-testid=\"run-time\">{timing}</span>}\n      </ItemDescription>\n    </ItemContent>\n    {fetchRun && <Button variant=\"ghost\" size=\"icon\" data-testid=\"run-refresh\" aria-label={labels.runRefresh} title={labels.runRefresh}\n      onClick={() => { void refresh(new AbortController().signal); }}><RefreshCwIcon aria-hidden=\"true\" /></Button>}\n    {(body || run.error || failed) && <ItemFooter className=\"flex-col items-stretch\">\n      {body && <div data-testid=\"run-output\" className=\"min-w-0\">{body}</div>}\n      {run.error && <Alert variant=\"destructive\" data-testid=\"run-error\"><AlertDescription>{run.error}</AlertDescription></Alert>}\n      {failed && <p role=\"alert\" className=\"m-0 text-sm text-destructive\">{labels.runNotLoaded}</p>}\n    </ItemFooter>}\n  </Item>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/run-card.tsx"
+    },
+    {
+      "path": "registry/pi-chat/use-hold-to-record.ts",
+      "content": "'use client';\n\nimport { useEffect, useRef } from 'react';\nimport type { KeyboardEvent, PointerEvent } from 'react';\n\nexport interface HoldToRecordActions {\n  readonly start: () => void;\n  readonly finish: () => void;\n  readonly cancel: () => void;\n}\n\n/** The immediate microphone and delayed shell trigger share cancellation, but retain ownership of their own held gesture. */\nexport function useRecordingCancellation(cancel: () => void) {\n  const latest = useRef(cancel); latest.current = cancel;\n  useEffect(() => {\n    const stop = () => latest.current();\n    const escape = (event: globalThis.KeyboardEvent) => { if (event.key === 'Escape') stop(); };\n    const hidden = () => { if (document.hidden) stop(); };\n    window.addEventListener('keydown', escape, true); window.addEventListener('blur', stop); document.addEventListener('visibilitychange', hidden);\n    return () => {\n      window.removeEventListener('keydown', escape, true); window.removeEventListener('blur', stop); document.removeEventListener('visibilitychange', hidden);\n      stop();\n    };\n  }, []);\n}\n\n/** Gesture policy shared by the chat and shell. Pointer cancellation keeps audio; deliberate slide/Escape/lost visibility discards it. */\nexport function useHoldToRecord(actions: HoldToRecordActions, disabled = false) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const latest = useRef({ actions, disabled }); latest.current = { actions, disabled };\n  const held = useRef<number | string | null>(null);\n  const cancel = () => { if (held.current === null) return; held.current = null; latest.current.actions.cancel(); };\n  useRecordingCancellation(cancel);\n  useEffect(() => {\n    const node = ref.current;\n    const keep = (event: Event) => { if (event.cancelable) event.preventDefault(); };\n    node?.addEventListener('touchstart', keep, { passive: false });\n    return () => node?.removeEventListener('touchstart', keep);\n  }, []);\n  const release = (event: PointerEvent<HTMLButtonElement>) => {\n    if (held.current !== event.pointerId) return;\n    held.current = null;\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);\n    latest.current.actions.finish();\n  };\n  const key = (event: KeyboardEvent<HTMLButtonElement>, down: boolean) => {\n    if (event.key !== ' ' && event.key !== 'Enter') return;\n    event.preventDefault();\n    if (down) {\n      if (event.repeat || latest.current.disabled || held.current !== null) return;\n      held.current = event.key; latest.current.actions.start();\n    } else if (held.current === event.key) { held.current = null; latest.current.actions.finish(); }\n  };\n  return {\n    ref,\n    onPointerDown: (event: PointerEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      if (event.button !== 0 || latest.current.disabled || held.current !== null) return;\n      held.current = event.pointerId; event.currentTarget.setPointerCapture?.(event.pointerId); latest.current.actions.start();\n    },\n    onPointerUp: release,\n    onPointerCancel: release,\n    onPointerMove: (event: PointerEvent<HTMLButtonElement>) => {\n      if (held.current !== event.pointerId) return;\n      const box = event.currentTarget.getBoundingClientRect(), slack = 24;\n      if (event.clientX < box.left - slack || event.clientX > box.right + slack || event.clientY < box.top - slack || event.clientY > box.bottom + slack) cancel();\n    },\n    onMouseDown: (event: { preventDefault: () => void }) => event.preventDefault(),\n    onContextMenu: (event: { preventDefault: () => void }) => event.preventDefault(),\n    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => key(event, true),\n    onKeyUp: (event: KeyboardEvent<HTMLButtonElement>) => key(event, false),\n    onBlur: cancel,\n  };\n}\n",
+      "type": "registry:hook",
+      "target": "components/pi-chat/use-hold-to-record.ts"
+    },
+    {
+      "path": "registry/pi-chat/use-voice-message.ts",
+      "content": "'use client';\n\nimport { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';\nimport { createVoiceCapture, DEFAULT_MAX_VOICE_MS } from '@hachej/boring-ui-kit/voice-capture';\nimport type { VoiceCapture, VoiceRecording, VoiceRefusal } from '@hachej/boring-ui-kit/voice-capture';\nimport type { ChatController, ChatDraft } from '@hachej/boring-ui-kit/native-chat';\nimport { isVoicePath, mentionToken } from './config';\nimport type { AttachmentsConfig, VoiceMessageConfig } from './config';\nimport type { ChatLabels } from './labels';\n\ntype Phase = 'starting' | 'recording' | 'processing' | 'transcribe-failed' | 'upload-failed' | 'sending' | 'unconfirmed' | 'blocked';\ninterface Attempt {\n  readonly id: number;\n  readonly controller: ChatController;\n  readonly target: string;\n  readonly transcribe: VoiceMessageConfig['transcribe'];\n  readonly upload: AttachmentsConfig['upload'] | undefined;\n  readonly abort: AbortController;\n  readonly capture: VoiceCapture;\n  readonly maxMs: number;\n  phase: Phase;\n  seconds: number;\n  file?: File;\n  path?: string;\n  transcript?: string;\n  requestId?: string;\n}\nexport interface PendingVoice {\n  readonly id: number;\n  readonly path: string | undefined;\n  readonly phase: Phase;\n  readonly seconds: number;\n  readonly retry: () => void;\n  readonly audioOnly: (() => void) | undefined;\n  readonly discard: () => void;\n}\nconst REFUSAL: Readonly<Record<VoiceRefusal, keyof Pick<ChatLabels, 'voiceDenied' | 'voiceNoMicrophone' | 'voiceBusy' | 'voiceInsecure' | 'voiceUnsupported' | 'voiceStartFailed'>>> = {\n  denied: 'voiceDenied', 'no-microphone': 'voiceNoMicrophone', busy: 'voiceBusy', insecure: 'voiceInsecure', unsupported: 'voiceUnsupported', failed: 'voiceStartFailed',\n};\nconst targetOf = (controller: ChatController) => {\n  const { identity, conversationId } = controller.getSnapshot();\n  return JSON.stringify([identity.runtimeId, identity.scopeId, identity.principalId, conversationId]);\n};\nconst noSubscribe = () => () => {};\n\n/** Local admission preparation only. Native send/reconcile owns the submission; uploaded bytes stay in the host workspace. */\nexport function useVoiceMessage({ controller, config, attachments, labels, admitted, activeController }: {\n  readonly controller: ChatController | undefined;\n  readonly config: VoiceMessageConfig | undefined;\n  readonly attachments?: AttachmentsConfig | undefined;\n  readonly labels: ChatLabels;\n  readonly admitted?: (() => void) | undefined;\n  readonly activeController?: { readonly current: ChatController } | undefined;\n}) {\n  const selected = config ? controller : undefined;\n  const readObservation = useCallback(() => {\n    if (!selected) return '';\n    const snapshot = selected.getSnapshot(), send = snapshot.send;\n    return JSON.stringify([targetOf(selected), snapshot.disposed, send.kind, 'attempt' in send ? send.attempt.requestId : undefined]);\n  }, [selected]);\n  const observation = useSyncExternalStore(selected?.subscribe ?? noSubscribe, readObservation, readObservation);\n  const latest = useRef({ controller, config, admitted, activeController }); latest.current = { controller, config, admitted, activeController };\n  const mounted = useRef(false), attempts = useRef<Attempt[]>([]), captureSequence = useRef(0);\n  const [, changed] = useState(0), [problem, setProblem] = useState<string>();\n  const update = () => changed(value => value + 1);\n  const valid = (item: Attempt) => mounted.current && attempts.current.includes(item) && latest.current.controller === item.controller && (!latest.current.activeController || latest.current.activeController.current === item.controller) && Boolean(latest.current.config) && !item.abort.signal.aborted && !item.controller.getSnapshot().disposed && targetOf(item.controller) === item.target;\n  const remove = (item: Attempt) => {\n    attempts.current = attempts.current.filter(current => current !== item);\n    item.abort.abort(); item.capture.cancel();\n    if (mounted.current) update();\n  };\n  const active = () => attempts.current.find(item => item.phase === 'starting' || item.phase === 'recording') ?? attempts.current.find(item => item.phase === 'processing' || item.phase === 'sending' || item.phase === 'unconfirmed');\n  const cancel = () => { const item = active(); if (item) remove(item); };\n  const clear = () => { for (const item of [...attempts.current]) remove(item); };\n  const target = selected ? targetOf(selected) : undefined;\n  useEffect(() => { mounted.current = true; return () => { mounted.current = false; clear(); }; }, []);\n  useEffect(() => { clear(); setProblem(undefined); }, [controller, target, Boolean(config)]);\n  useEffect(() => {\n    for (const item of [...attempts.current]) {\n      if (!valid(item)) { remove(item); continue; }\n      if (item.phase !== 'unconfirmed') continue;\n      const snapshot = selected?.getSnapshot();\n      if (snapshot?.send.kind === 'admitted' && 'attempt' in snapshot.send && snapshot.send.attempt.requestId === item.requestId) {\n        remove(item); latest.current.admitted?.();\n      } else if (snapshot?.send.kind === 'blocked') { item.phase = 'blocked'; update(); }\n    }\n  }, [selected, observation]);\n  const recording = active(), phase = recording?.phase ?? 'idle';\n  useEffect(() => {\n    const item = recording;\n    if (item?.phase !== 'recording') return;\n    const started = performance.now();\n    const timer = setInterval(() => { if (valid(item)) { item.seconds = Math.floor(Math.min(performance.now() - started, item.maxMs) / 1000); update(); } }, 250);\n    return () => clearInterval(timer);\n  }, [recording, phase]);\n\n  const send = async (item: Attempt, audioOnly = false) => {\n    if (!valid(item) || !item.path || item.phase === 'sending' || item.phase === 'unconfirmed') return;\n    const transcript = audioOnly ? '' : item.transcript ?? '';\n    const text = `${mentionToken(item.path)}${transcript ? ` ${transcript}` : ''}`;\n    const before = item.controller.getSnapshot();\n    if (before.send.kind === 'unknown') {\n      // This recording was never submitted. Do not bind it to another message's uncertain request.\n      const draft = item.controller.getSnapshot().draft.text;\n      if (transcript) item.controller.setText(`${draft}${draft && !/\\s$/.test(draft) ? ' ' : ''}${transcript}`);\n      item.phase = 'blocked'; update(); return;\n    }\n    item.phase = 'sending'; update();\n    let submittedDraft: ChatDraft | undefined;\n    try {\n      const pending = item.controller.send('followUp', { text, restore: { text: transcript } });\n      const after = item.controller.getSnapshot();\n      // Native send synchronously publishes this immutable draft in validation or at its outbox position; equal text is not identity.\n      submittedDraft = after.send.kind === 'validating' && (before.send.kind !== 'validating' || after.send.draft !== before.send.draft)\n        ? after.send.draft : after.outbox[before.outbox.length];\n      const result = await pending;\n      if (!valid(item)) return;\n      if (result) { remove(item); latest.current.admitted?.(); return; }\n    } catch { if (!valid(item)) return; }\n    const native = item.controller.getSnapshot().send;\n    if (native.kind === 'admitted' && 'attempt' in native && submittedDraft !== undefined && native.attempt.draft === submittedDraft) {\n      remove(item); latest.current.admitted?.(); return;\n    }\n    const ownUnknown = native.kind === 'unknown' && 'attempt' in native && submittedDraft !== undefined && native.attempt.draft === submittedDraft;\n    item.phase = native.kind === 'blocked' || (native.kind === 'unknown' && 'attempt' in native && !ownUnknown) ? 'blocked' : 'unconfirmed';\n    if (ownUnknown) item.requestId = native.attempt.requestId;\n    update();\n  };\n  const process = async (item: Attempt) => {\n    if (!valid(item) || !item.file) return;\n    item.phase = 'processing'; update();\n    // Cache each successful half independently: retrying transcription must not upload the same recording again.\n    await Promise.all([\n      item.path ? undefined : (async () => {\n        try {\n          const results = await item.upload?.([item.file!], item.abort.signal);\n          const path = results?.length === 1 ? results[0]?.path : undefined;\n          if (valid(item) && path && isVoicePath(path)) item.path = path;\n        } catch { /* Failed uploads remain pending for explicit retry. */ }\n      })(),\n      item.transcript !== undefined ? undefined : (async () => {\n        try { const text = (await item.transcribe(item.file!, item.abort.signal)).trim(); if (valid(item) && text) item.transcript = text; }\n        catch { /* Never send automatically when transcription fails. */ }\n      })(),\n    ]);\n    if (!valid(item)) return;\n    if (!item.path) { item.phase = 'upload-failed'; update(); }\n    else if (!item.transcript) { item.phase = 'transcribe-failed'; update(); }\n    else await send(item);\n  };\n  const finish = () => {\n    const item = active();\n    if (!item || !valid(item)) return;\n    if (item.phase === 'starting') { cancel(); return; }\n    if (item.phase !== 'recording') return;\n    item.phase = 'processing'; update();\n    void (async () => {\n      const recording: VoiceRecording | null = await item.capture.stop().catch(() => null);\n      if (!valid(item)) return;\n      if (!recording) { remove(item); setProblem(labels.voiceNothingHeard); update(); return; }\n      item.seconds = Math.max(0, Math.round((recording.endedAt - recording.startedAt) / 1000));\n      const type = recording.mimeType.split(';')[0]!, ext = type === 'audio/mp4' ? 'mp4' : type === 'audio/ogg' ? 'ogg' : 'webm';\n      const stamp = new Date().toISOString().replace(/[-:]/g, '').replace('T', '-').replace(/\\.(\\d+)Z$/, '-$1');\n      item.file = new File([recording.audio], `voice-${stamp}.${ext}`, { type });\n      await process(item);\n    })();\n  };\n  const start = () => {\n    if (!controller || !config || active() || controller.getSnapshot().disposed || controller.getSnapshot().send.kind === 'unknown') return;\n    captureSequence.current += 1; setProblem(undefined);\n    const maxMs = config.maxMs ?? DEFAULT_MAX_VOICE_MS;\n    const item: Attempt = { id: captureSequence.current, maxMs: Number.isFinite(maxMs) && maxMs > 0 ? maxMs : Infinity, controller, transcribe: config.transcribe.bind(config), upload: config.upload?.bind(config) ?? attachments?.upload.bind(attachments), target: targetOf(controller), abort: new AbortController(), capture: createVoiceCapture({ ...(config.maxMs !== undefined ? { maxMs: config.maxMs } : {}) }), phase: 'starting', seconds: 0 };\n    attempts.current = [...attempts.current, item]; update();\n    void item.capture.start().then(result => {\n      if (!valid(item)) { item.capture.cancel(); return; }\n      if (result.kind === 'refused') { remove(item); setProblem(result.code ? labels[REFUSAL[result.code]] : result.reason); update(); return; }\n      item.phase = 'recording'; update();\n    });\n  };\n  const item = active();\n  const pending: readonly PendingVoice[] = attempts.current.filter(item => item.phase !== 'starting' && item.phase !== 'recording').map(item => ({\n    id: item.id, path: item.path, phase: item.phase, seconds: item.seconds,\n    retry: () => { if (item.phase === 'upload-failed' || item.phase === 'transcribe-failed') void process(item); },\n    audioOnly: item.phase === 'transcribe-failed' && item.path ? () => { if (item.phase === 'transcribe-failed') void send(item, true); } : undefined,\n    discard: () => { if (valid(item)) remove(item); },\n  }));\n  return { canStart: Boolean(controller && config && !item && !controller.getSnapshot().disposed && controller.getSnapshot().send.kind !== 'unknown'), phase: item?.phase ?? 'idle', seconds: item?.seconds ?? 0, captureSequence: captureSequence.current, problem, pending, start, finish, cancel };\n}\n",
+      "type": "registry:hook",
+      "target": "components/pi-chat/use-voice-message.ts"
+    },
+    {
+      "path": "registry/pi-chat/voice-message.tsx",
+      "content": "'use client';\n\nimport { MicIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { Message, MessageContent } from '@/components/ui/message';\nimport { useChatText } from './labels';\nimport { useHoldToRecord } from './use-hold-to-record';\nimport type { PendingVoice, useVoiceMessage } from './use-voice-message';\n\nexport const voiceClock = (seconds: number) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;\n\nexport function VoiceMessageButton({ voice, disabled }: { readonly voice: ReturnType<typeof useVoiceMessage>; readonly disabled?: boolean }) {\n  const { labels } = useChatText();\n  const active = voice.phase === 'starting' || voice.phase === 'recording';\n  const blocked = !active && (disabled || voice.phase !== 'idle');\n  const hold = useHoldToRecord(voice, Boolean(blocked));\n  return <div className=\"flex items-center gap-2\"><Button {...hold} variant=\"ghost\" size=\"icon\" className=\"touch-none\" data-testid=\"voice-message-record\" data-state={voice.phase} disabled={blocked} aria-label={labels.voiceHold} title={labels.voiceHold} aria-pressed={voice.phase === 'recording'}>\n    <MicIcon data-icon=\"inline-start\" aria-hidden=\"true\" />\n  </Button>{(voice.phase === 'starting' || voice.phase === 'recording') && <span role=\"status\" data-testid=\"voice-recording\">{labels.voiceRecording} {voiceClock(voice.seconds)}</span>}</div>;\n}\n\nexport function PendingVoiceBubble({ pending }: { readonly pending: PendingVoice | undefined }) {\n  const { labels } = useChatText();\n  if (!pending) return null;\n  const failed = pending.phase === 'transcribe-failed' || pending.phase === 'upload-failed';\n  const blocked = pending.phase === 'blocked' || pending.phase === 'unconfirmed';\n  return <Message align=\"end\" data-testid=\"voice-pending\" data-voice-id={pending.id} data-state={pending.phase}><MessageContent><Bubble variant=\"muted\" align=\"end\" className={failed || blocked ? 'w-full max-w-full' : undefined}><BubbleContent>\n    <div role={failed ? 'alert' : 'status'} className=\"flex items-center gap-2\">\n      {!failed && !blocked && <Spinner aria-hidden=\"true\" />}\n      {Number.isFinite(pending.seconds) && pending.seconds > 0 && <span data-testid=\"voice-pending-duration\">{voiceClock(pending.seconds)}</span>}\n      <span>{pending.phase === 'upload-failed' ? labels.uploadFailedShort : pending.phase === 'transcribe-failed' ? labels.voiceTranscribeFailed : pending.phase === 'blocked' ? labels.voiceBlocked : pending.phase === 'unconfirmed' ? labels.voiceUnconfirmed : labels.voicePreparing}</span>\n    </div>\n    {(failed || blocked) && <div className=\"mt-2 grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2\">\n      {failed && <Button size=\"sm\" className=\"h-auto min-h-11 min-w-0 whitespace-normal\" variant=\"outline\" data-testid=\"voice-retry\" onClick={pending.retry}>{labels.retry}</Button>}\n      {pending.audioOnly && <Button size=\"sm\" className=\"h-auto min-h-11 min-w-0 whitespace-normal\" variant=\"outline\" data-testid=\"voice-audio-only\" onClick={pending.audioOnly}>{labels.voiceAudioOnly}</Button>}\n      {pending.phase !== 'unconfirmed' && <Button size=\"sm\" className=\"h-auto min-h-11 min-w-0 whitespace-normal\" variant=\"ghost\" data-testid=\"voice-discard\" onClick={pending.discard}>{labels.voiceDiscard}</Button>}\n    </div>}\n  </BubbleContent></Bubble></MessageContent></Message>;\n}\n",
+      "type": "registry:component",
+      "target": "components/pi-chat/voice-message.tsx"
     }
   ],
   "css": {
@@ -276,6 +302,10 @@
         ".pi-chat :is([data-slot=\"button\"], [data-slot=\"toggle\"], [class~=\"group/button\"], [class~=\"group/toggle\"])": {
           "min-height": "2.75rem",
           "min-width": "2.75rem"
+        },
+        ".pi-chat [data-testid=\"queue\"] button, .pi-chat button[data-testid=\"composer-queue\"]": {
+          "min-height": "3rem",
+          "min-width": "3rem"
         }
       }
     },