@hachej/boring-ui-kit 0.4.6 → 0.4.8

package/r/pi-chat.json

@@ -4,8 +4,9 @@
   "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.6",
-    "@hachej/boring-files@^0.4.6",
+    "@hachej/boring-ui-kit@^0.4.8",
+    "@hachej/boring-files@^0.4.8",
+    "@hachej/boring-feedback@^0.4.8",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "marked@^17.0.6",
@@ -20,8 +21,9 @@
     "zod@^4.6.5"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.6/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.6/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.8/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.8/r/button.json",
+    "dialog",
     "tooltip",
     "trace",
     "message",
@@ -91,7 +93,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 { 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",
+      "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 className=\"min-h-11 min-w-11\" 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"
     },
@@ -119,6 +121,24 @@
       "type": "registry:component",
       "target": "components/pi-chat/history.tsx"
     },
+    {
+      "path": "registry/pi-chat/image-viewer.tsx",
+      "content": "'use client';\n\nimport { useRef, useState } from 'react';\nimport type { PointerEvent } from 'react';\nimport type { ImageContent } from '@earendil-works/pi-ai';\nimport { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';\nimport { thumbnail } from './composer';\nimport { useChatText } from './labels';\nimport type { ChatLabels } from './labels';\n\ntype Point = { readonly x: number; readonly y: number };\ntype View = { readonly scale: number; readonly x: number; readonly y: number };\ntype Gesture = {\n  readonly pointers: Map<number, Point>;\n  basis: { readonly mode: 'pan' | 'pinch' | 'pinch-pan' | 'swipe'; readonly point: Point; readonly distance: number; readonly view: View } | undefined;\n  tap: { readonly at: number; readonly point: Point } | undefined;\n  view: View;\n  pointerType: string;\n};\nconst FIT: View = { scale: 1, x: 0, y: 0 };\nconst distance = (a: Point, b: Point) => Math.hypot(a.x - b.x, a.y - b.y);\nconst midpoint = (a: Point, b: Point): Point => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });\n\n/** Presentation only: local raster bytes, one message's gallery, and the host's native Dialog lifecycle. */\nexport function ImageViewer({ images, index, onIndexChange, onClose, labels: supplied, testId = 'image-viewer' }: {\n  readonly images: readonly ImageContent[]; readonly index: number; readonly onIndexChange: (index: number) => void; readonly onClose: () => void;\n  readonly labels?: ChatLabels | undefined; readonly testId?: string | undefined;\n}) {\n  const { labels: defaults } = useChatText();\n  const labels = supplied ?? defaults;\n  const src = images[index] && thumbnail(images[index]!.mimeType, images[index]!.data);\n  const move = (offset: number) => onIndexChange((index + offset + images.length) % images.length);\n  if (!src) return null;\n  return <Dialog open onOpenChange={open => { if (!open) onClose(); }}><DialogContent showCloseButton={false} aria-describedby={undefined} data-testid=\"image-viewer\"\n    className=\"pi-chat flex min-h-0 flex-col overflow-hidden max-sm:inset-0 max-sm:max-h-dvh max-sm:min-h-dvh max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[90dvh] sm:min-h-[80dvh] sm:max-w-5xl\"\n    onKeyDown={event => {\n      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); event.stopPropagation(); move(event.key === 'ArrowLeft' ? -1 : 1); }\n    }}>\n    <DialogTitle className=\"sr-only\">{labels.imageAttachment}</DialogTitle>\n    <div className=\"flex shrink-0 items-center justify-between gap-2 pt-[env(safe-area-inset-top)]\">\n      <span aria-live=\"polite\" data-testid=\"image-viewer-count\">{labels.imagePosition(index + 1, images.length)}</span>\n      <div className=\"flex items-center gap-2\">\n        {images.length > 1 && <>\n          <Button variant=\"ghost\" size=\"icon\" className=\"min-h-12! min-w-12!\" aria-label={labels.previousImage} onClick={() => move(-1)}><ChevronLeftIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n          <Button variant=\"ghost\" size=\"icon\" className=\"min-h-12! min-w-12!\" aria-label={labels.nextImage} onClick={() => move(1)}><ChevronRightIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n        </>}\n        <Button variant=\"ghost\" size=\"icon\" className=\"min-h-12! min-w-12!\" data-testid={`${testId}-close`} aria-label={labels.close} onClick={onClose}\n          onTouchEnd={event => {\n            // Pinch can suppress clicks; cancel the compatibility click before exposing the page beneath the close target.\n            const point = event.changedTouches[0], box = event.currentTarget.getBoundingClientRect();\n            if (point && point.clientX >= box.left && point.clientX <= box.right && point.clientY >= box.top && point.clientY <= box.bottom) { event.preventDefault(); onClose(); }\n          }}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n      </div>\n    </div>\n    <ImageSurface key={`${index}:${src}`} src={src} alt={labels.imagePosition(index + 1, images.length)} onClose={onClose} testId={testId} />\n  </DialogContent></Dialog>;\n}\n\nfunction ImageSurface({ src, alt, onClose, testId }: { readonly src: string; readonly alt: string; readonly onClose: () => void; readonly testId: string }) {\n  const [view, setView] = useState(FIT);\n  const image = useRef<HTMLImageElement>(null);\n  const gesture = useRef<Gesture>({ pointers: new Map(), basis: undefined, tap: undefined, view: FIT, pointerType: '' });\n  const update = (next: View) => { gesture.current.view = next; setView(next); };\n  const bounded = (scale: number, x: number, y: number, element: HTMLElement): View => {\n    const box = element.getBoundingClientRect();\n    const maxX = Math.max(0, ((image.current?.clientWidth || box.width) * scale - box.width) / 2), maxY = Math.max(0, ((image.current?.clientHeight || box.height) * scale - box.height) / 2);\n    return { scale, x: Math.max(-maxX, Math.min(maxX, x)), y: Math.max(-maxY, Math.min(maxY, y)) };\n  };\n  const zoom = (point: Point, element: HTMLElement) => {\n    const state = gesture.current;\n    state.tap = undefined;\n    if (state.view.scale > 1) { update(FIT); return; }\n    const box = element.getBoundingClientRect();\n    update(bounded(2, box.left + box.width / 2 - point.x, box.top + box.height / 2 - point.y, element));\n  };\n  const rebase = (mode?: 'pan' | 'pinch-pan') => {\n    const state = gesture.current, points = [...state.pointers.values()], first = points[0];\n    state.basis = first ? { mode: points.length > 1 ? 'pinch' : mode ?? (state.view.scale > 1 ? 'pan' : 'swipe'), point: points[1] ? midpoint(first, points[1]) : first,\n      distance: points[1] ? Math.max(1, distance(first, points[1])) : 0, view: state.view } : undefined;\n  };\n  const pointer = (event: PointerEvent<HTMLDivElement>) => ({ x: event.clientX, y: event.clientY });\n  const end = (event: PointerEvent<HTMLDivElement>, cancelled: boolean) => {\n    const state = gesture.current, basis = state.basis;\n    if (!state.pointers.has(event.pointerId) || !basis) return;\n    const point = pointer(event), dx = point.x - basis.point.x, dy = point.y - basis.point.y;\n    state.pointers.delete(event.pointerId);\n    if (!cancelled && basis.mode === 'swipe' && state.view.scale === 1 && dy > 96 && dy > Math.abs(dx) * 1.25) { onClose(); return; }\n    if (!cancelled && event.pointerType === 'touch' && basis.mode !== 'pinch' && basis.mode !== 'pinch-pan' && Math.hypot(dx, dy) < 12) {\n      if (state.tap && event.timeStamp - state.tap.at < 300 && distance(point, state.tap.point) < 24) zoom(point, event.currentTarget);\n      else state.tap = { at: event.timeStamp, point };\n    } else state.tap = undefined;\n    rebase(basis.mode === 'pinch' || basis.mode === 'pinch-pan' ? 'pinch-pan' : 'pan');\n  };\n  return <div data-testid=\"image-viewer-surface\" data-scale={view.scale} className=\"relative min-h-0 flex-1 touch-none overflow-hidden max-sm:-mx-4 max-sm:-mb-4\"\n    onDoubleClick={event => { if (gesture.current.pointerType === 'touch') return; event.preventDefault(); zoom({ x: event.clientX, y: event.clientY }, event.currentTarget); }}\n    onPointerDown={event => {\n      if (event.pointerType === 'mouse' && event.button !== 0) return;\n      event.preventDefault(); event.currentTarget.setPointerCapture?.(event.pointerId);\n      gesture.current.pointerType = event.pointerType; gesture.current.pointers.set(event.pointerId, pointer(event)); rebase();\n    }}\n    onPointerMove={event => {\n      const state = gesture.current;\n      if (!state.pointers.has(event.pointerId) || !state.basis) return;\n      event.preventDefault(); state.pointers.set(event.pointerId, pointer(event));\n      const points = [...state.pointers.values()], basis = state.basis, first = points[0]!;\n      if (points[1]) {\n        const centre = midpoint(first, points[1]), box = event.currentTarget.getBoundingClientRect();\n        const scale = Math.max(1, Math.min(5, basis.view.scale * distance(first, points[1]) / basis.distance)), ratio = scale / basis.view.scale;\n        update(bounded(scale, centre.x - box.left - box.width / 2 + (basis.view.x - basis.point.x + box.left + box.width / 2) * ratio,\n          centre.y - box.top - box.height / 2 + (basis.view.y - basis.point.y + box.top + box.height / 2) * ratio, event.currentTarget));\n      } else if (basis.mode === 'pan' || basis.mode === 'pinch-pan') update(bounded(basis.view.scale, basis.view.x + first.x - basis.point.x, basis.view.y + first.y - basis.point.y, event.currentTarget));\n    }}\n    onPointerUp={event => end(event, false)} onPointerCancel={event => end(event, true)} onLostPointerCapture={event => end(event, true)}>\n    <div className=\"absolute inset-0 flex items-center justify-center\">\n      <img ref={image} data-testid={`${testId}-image`} src={src} alt={alt} draggable={false} className=\"max-h-full max-w-full select-none object-contain\" style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }} />\n    </div>\n  </div>;\n}\n",
+      "type": "registry:component",
+      "target": "components/pi-chat/image-viewer.tsx"
+    },
+    {
+      "path": "registry/pi-chat/feedback-content.ts",
+      "content": "import { isHostObserved, parseFeedback } from '@hachej/boring-feedback/format';\nimport type { FeedbackReport } from '@hachej/boring-feedback/format';\n\nfunction pageReport(text: string): FeedbackReport | undefined {\n  if (!text.startsWith('---\\n')) return;\n  const parsed = parseFeedback(new TextEncoder().encode(text));\n  if (parsed.ok && isHostObserved(parsed.report.observed) && parsed.report.notes?.some(note => note.text.trim())) return parsed.report;\n}\n\n/** Only presentation changes: the native message retains the complete report and any words around its composer fence. */\nexport function feedbackContent(text: string): { readonly before: string; readonly after: string; readonly report: FeedbackReport } | undefined {\n  const report = pageReport(text);\n  if (report) return { before: '', after: '', report };\n  let open: { fence: string; start: number; body: number; report: boolean } | undefined;\n  // Track other code fences too: a report quoted inside an example is still ordinary user text.\n  for (const line of text.matchAll(/^ {0,3}(`{3,}|~{3,})([^\\n]*)(?:\\n|$)/gm)) {\n    const fence = line[1]!, info = line[2]!;\n    if (!open) {\n      open = { fence, start: line.index, body: line.index + line[0].length, report: line[0].startsWith('`') && info === 'markdown' };\n    } else if (fence[0] === open.fence[0] && fence.length >= open.fence.length && !info.trim()) {\n      const parsed = open.report ? pageReport(text.slice(open.body, line.index)) : undefined;\n      if (parsed) return { before: text.slice(0, open.start).trim(), after: text.slice(line.index + line[0].length).trim(), report: parsed };\n      open = undefined;\n    }\n  }\n}\n",
+      "type": "registry:lib",
+      "target": "components/pi-chat/feedback-content.ts"
+    },
+    {
+      "path": "registry/pi-chat/sent-feedback.tsx",
+      "content": "'use client';\n\nimport { ChevronDownIcon } from 'lucide-react';\nimport { readableElement } from '@hachej/boring-feedback/format';\nimport type { FeedbackReport } from '@hachej/boring-feedback/format';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { cn } from '../utils/utils';\nimport { useChatText } from './labels';\n\n/** Sent page comments are inert text, not live page targets or evidence that a change was accepted. */\nexport function SentFeedback({ report, align = 'end' }: { readonly report: FeedbackReport; readonly align?: 'start' | 'end' }) {\n  const { labels } = useChatText();\n  const notes = (report.notes ?? []).filter(note => note.text.trim());\n  if (!notes.length) return null;\n  const title = labels.feedbackSent(notes.length);\n  const long = notes.length > 3 || report.said.length + notes.reduce((length, note) => length + note.text.length, 0) > 400;\n  const content = <CardContent className=\"flex flex-col gap-3\">\n    {report.said && <p className=\"m-0 whitespace-pre-wrap [overflow-wrap:anywhere]\">{report.said}</p>}\n    <ol className=\"m-0 flex list-none flex-col gap-3 p-0\">\n      {notes.map((note, at) => {\n        const anchor = note.anchor === undefined ? undefined : report.anchors[note.anchor];\n        const target = typeof anchor?.fallback === 'string' ? readableElement(anchor.fallback).name : undefined;\n        return <li key={at} data-testid=\"message-feedback-note\" className=\"flex min-w-0 flex-col gap-1 [overflow-wrap:anywhere]\">\n          {target && <CardDescription>{target}</CardDescription>}<p className=\"m-0 whitespace-pre-wrap\">{note.text}</p>\n        </li>;\n      })}\n    </ol>\n  </CardContent>;\n  // CardHeader is an inline-size container; a collapsed card cannot size itself from its title.\n  const card = { size: 'sm' as const, 'data-testid': 'message-feedback', role: 'group', 'aria-label': title, className: cn('w-80 max-w-[85%]', align === 'end' && 'ml-auto') };\n  if (!long) return <Card {...card}><CardHeader><CardTitle>{title}</CardTitle></CardHeader>{content}</Card>;\n  return <Collapsible data-slot=\"card\" render={<Card {...card} />}>\n    <CardHeader><CardTitle><CollapsibleTrigger data-slot=\"button\" render={<Button variant=\"ghost\" className=\"group w-full justify-between whitespace-normal text-left\" />}>\n      {title}<ChevronDownIcon data-icon=\"inline-end\" aria-hidden=\"true\" className=\"group-aria-expanded:rotate-180\" />\n    </CollapsibleTrigger></CardTitle></CardHeader>\n    <CollapsibleContent>{content}</CollapsibleContent>\n  </Collapsible>;\n}\n",
+      "type": "registry:component",
+      "target": "components/pi-chat/sent-feedback.tsx"
+    },
     {
       "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 { 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",
@@ -133,7 +153,7 @@
     },
     {
       "path": "registry/pi-chat/message.tsx",
-      "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",
+      "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 { feedbackContent } from './feedback-content';\nimport { SentFeedback } from './sent-feedback';\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 { ImageViewer } from './image-viewer';\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 { cn } from '../utils/utils';\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  /** Host openers keep their single image argument; the workspace's default also accepts the message gallery. */\n  readonly onOpenImage: ((image: ImageContent, gallery?: readonly 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 ImageThumbnails({ images, onOpenImage }: { readonly images: readonly ImageContent[]; readonly onOpenImage: RowContext['onOpenImage'] }) {\n  const { labels } = useChatText();\n  if (!images.length) return null;\n  return <div data-testid=\"message-images\" data-slot=\"message-images\" className={cn('grid max-w-full gap-2', images.length === 1 ? 'w-60' : 'w-120 grid-cols-2')}>\n    {images.map((image, at) => <div key={at} className=\"relative min-h-12 min-w-12 self-start\">\n      <img src={thumbnail(image.mimeType, image.data)} alt={labels.imageAttachment} className=\"block h-auto w-full rounded-(--radius-xl)\" />\n      <Button variant=\"link\" className=\"absolute inset-0 h-auto min-h-12 min-w-12 w-full\" data-testid=\"message-image\" aria-label={images.length > 1 ? `${labels.openImage}, ${labels.imagePosition(at + 1, images.length)}` : labels.openImage} onClick={() => onOpenImage?.(image, images)} />\n    </div>)}\n  </div>;\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 feedback = feedbackContent(text);\n  if (feedback) return <>\n    {feedback.before && <MessageText text={feedback.before} context={context} align={align} />}\n    <SentFeedback report={feedback.report} align={align} />\n    {feedback.after && <MessageText text={feedback.after} 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, images, context, align = 'end' }: { readonly message: UserMessage; readonly images: readonly ImageContent[]; 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    <ImageThumbnails images={images} onOpenImage={context.onOpenImage} />\n    {parts.map((part, index) => part.type === 'text' ? (isFileBlock(part.text) ? null : <MessageText key={index} text={part.text} context={context} align={align} />)\n      : null)}\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\nfunction messageImages(row: Row): readonly ImageContent[] {\n  const images = (content: ToolResultMessage['content']) => content.flatMap(part => part.type === 'image' && thumbnail(part.mimeType, part.data) ? [part] : []);\n  if (row.type === 'user') return typeof row.message.content === 'string' ? [] : images(row.message.content);\n  if (row.type === 'orphan-result') return images(row.message.content);\n  return row.type === 'assistant' ? row.images?.filter(image => thumbnail(image.mimeType, image.data)) ?? row.parts.flatMap(part => part.kind === 'tool' && part.entry.result ? images(part.entry.result.content) : []) : [];\n}\n\nexport function RowView({ row, context }: { readonly row: Row; readonly context: RowContext }) {\n  const images = messageImages(row);\n  const [selection, setSelection] = useState<{ readonly index: number; readonly images: readonly ImageContent[]; readonly key: string; readonly opener: RowContext['onOpenImage'] }>();\n  const current = selection && selection.key === row.key && selection.opener === context.onOpenImage && selection.images.length === images.length\n    && selection.images.every((image, at) => image.mimeType === images[at]?.mimeType && image.data === images[at]?.data) ? selection : undefined;\n  useEffect(() => { if (selection && !current) setSelection(undefined); }, [selection, current]);\n  const openImage: NonNullable<RowContext['onOpenImage']> = image => {\n    if (!thumbnail(image.mimeType, image.data)) return;\n    if (context.onOpenImage) { context.onOpenImage(image, images); return; }\n    const index = images.indexOf(image);\n    if (index >= 0) setSelection({ index, images, key: row.key, opener: context.onOpenImage });\n  };\n  return <><RowBody row={row} images={images} context={{ ...context, onOpenImage: openImage }} />\n    {current && <ImageViewer images={images} index={current.index} onIndexChange={index => setSelection({ ...current, index })} onClose={() => setSelection(undefined)} />}\n  </>;\n}\n\nfunction RowBody({ row, images, context: liveContext }: { readonly row: Row; readonly images: readonly ImageContent[]; 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} images={images} 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><ImageThumbnails images={images} onOpenImage={context.onOpenImage} /></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          <ImageThumbnails images={images} onOpenImage={context.onOpenImage} />\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"
     },
@@ -175,7 +195,7 @@
     },
     {
       "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 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",
+      "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, ImageContent, 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[]; /** Native result images remain visible when their tool chrome is omitted. */ readonly images?: readonly ImageContent[]; 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  const imagesOf = (content: readonly StreamPart[]): ImageContent[] => content.flatMap(part => part.type === 'toolCall'\n    ? (results.get(part)?.content ?? []).filter((item): item is ImageContent => item.type === 'image') : []);\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), images = imagesOf(message.content);\n      // Empty/tool-only rounds still contribute their native metadata to the answer.\n      rows.push({ key: item.key, type: 'assistant', parts, ...(images.length ? { images } : {}), 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), images = imagesOf(content);\n    if (!natural || parts.length || images.length) rows.push({ key, type: 'assistant', parts, ...(images.length ? { images } : {}), streaming: true, text: textOf(parts) });\n  }\n  const merged = mergeTurns(rows).filter(row => row.type !== 'assistant' || row.parts.length || row.images?.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], ...((last.images?.length || row.images?.length) ? { images: [...(last.images ?? []), ...(row.images ?? [])] } : {}), 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"
     },
@@ -199,7 +219,7 @@
     },
     {
       "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 [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",
+      "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\" className=\"max-sm:min-h-12! pointer-coarse:min-h-12!\" 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"
     },
@@ -217,13 +237,13 @@
     },
     {
       "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, 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  artifactTypes: { markdown: 'Document', html: 'HTML page', svg: 'SVG image', code: 'Code', canvas: 'Canvas' },\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",
+      "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  feedbackSent: (count: number) => `${count} ${count === 1 ? 'comment' : 'comments'} on the page`,\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  imagePosition: (index: number, count: number) => `Image ${index} of ${count}`,\n  previousImage: 'Previous image',\n  nextImage: 'Next image',\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  artifactTypes: { markdown: 'Document', html: 'HTML page', svg: 'SVG image', code: 'Code', canvas: 'Canvas' },\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  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  artifactTypes: { markdown: 'Document', html: 'Page HTML', svg: 'Image SVG', code: 'Code', canvas: 'Canevas' },\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  feedbackSent: count => `${count} ${count === 1 ? 'commentaire' : 'commentaires'} sur la page`,\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  imagePosition: (index, count) => `Image ${index} sur ${count}`,\n  previousImage: 'Image précédente',\n  nextImage: 'Image suivante',\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  artifactTypes: { markdown: 'Document', html: 'Page HTML', svg: 'Image SVG', code: 'Code', canvas: 'Canevas' },\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"
     },
@@ -303,6 +323,10 @@
           "min-height": "2.75rem",
           "min-width": "2.75rem"
         },
+        ".pi-chat [data-testid=\"message-feedback\"] [data-slot=\"button\"]": {
+          "min-height": "3rem",
+          "min-width": "3rem"
+        },
         ".pi-chat [data-testid=\"queue\"] button, .pi-chat button[data-testid=\"composer-queue\"]": {
           "min-height": "3rem",
           "min-width": "3rem"