@hachej/boring-ui-kit 0.4.51 → 0.4.53

package/r/pi-chat.json

@@ -4,8 +4,8 @@
   "title": "Pi chat",
   "description": "A complete Tailwind chat over the borrowed native chat controller: composer, messages, one collapsible activity block per turn (tool calls and reasoning), message queue, history 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 question, approval, sub-agent and artifact cards are separate items (pi-chat-question, pi-chat-approval, pi-chat-subagent, pi-artifacts); without them a question or an approval shows a \"waiting for your answer\" notice, a sub-agent call is an ordinary tool step and no artifact is offered. The optional pi-ambient and pi-workspace blocks build on it.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.51",
-    "@hachej/boring-files@^0.4.51",
+    "@hachej/boring-ui-kit@^0.4.53",
+    "@hachej/boring-files@^0.4.53",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "@base-ui/react@1.9.0",
@@ -18,8 +18,8 @@
     "zod@^4.6.5"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/button.json"
   ],
   "files": [
     {
@@ -72,7 +72,7 @@
     },
     {
       "path": "registry/pi-chat/message.tsx",
-      "content": "'use client';\n\nimport { Fragment, memo, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ImageContent, ToolResultMessage, UserMessage } from '@earendil-works/pi-ai';\nimport type { JsonObject } from '@earendil-works/pi-durable';\nimport { AlertCircleIcon, CircleSlashIcon, ClockIcon, FileAudioIcon, FileIcon, FileSpreadsheetIcon, FileTextIcon, ImageIcon, ImageOffIcon, PauseIcon, PlayIcon, PresentationIcon } from 'lucide-react';\nimport { CopyButton } from './code-block';\nimport type { AnswerOutcome, ChatArtifactsConfig, ChatCards, CommandMentions } from './config';\nimport { ActivityBlock } from './activity';\nimport type { ActivityState } from './activity';\nimport { Shimmer } from './shimmer';\nimport { ToolCard } from './tool';\nimport { imageSource, thumbnail } from './composer';\nimport { ImageViewer } from './image-viewer';\nimport { displayName, fileKind, isUploadPath, isVoicePath, mentionKind, pieces, visibleParts } from '@hachej/boring-ui-kit/chat-text';\nimport type { FileKind, Piece } from '@hachej/boring-ui-kit/chat-text';\nimport type { AudioUrlRead, MentionsConfig, PreviewRead, SentContent } from './config';\nimport { voiceClock } from './config';\nimport { Spinner } from '@/components/ui/spinner';\nimport { isFileBlock, segments, targetContent, waits } 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 { AnsweredBy, ReplyRef } from './config';\nimport { Message, MessageContent, MessageFooter } from '@/components/ui/message';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { MessageScrollerItem } from '@/components/ui/message-scroller';\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\n/** One assistant text part, as `renderText` receives it. `streaming` is true while the model still writes it. */\nexport interface ChatTextPart {\n  readonly text: string;\n  readonly streaming: boolean;\n  /** Draws an `@path` mention (when mentions are on). */\n  readonly renderMention?: ((path: string, text: string) => ReactNode) | undefined;\n  /** The `/` commands a settled reply may turn into buttons. */\n  readonly commandMentions?: CommandMentions | undefined;\n  readonly onCopy?: ((text: string) => Promise<void>) | undefined;\n}\n/** The default text renderer: the reply as plain text. `markdownText` of `pi-chat-markdown` draws it as Markdown. */\nconst plainText = ({ text, streaming }: ChatTextPart): ReactNode =>\n  <div data-testid=\"message-text\" data-streaming={streaming ? 'true' : undefined} className=\"min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]\">{text}</div>;\n\nexport type { ChatCards } from './config';\n\nexport interface RowContext {\n  /** `messaging`: primary bubble for me, muted bubble for the reply, a tail on the first bubble of a run and the time inside (`PiChat messageStyle`). */\n  readonly messageStyle?: 'default' | 'messaging' | undefined;\n  readonly developer: boolean;\n  /** Draws an assistant text part. Default: plain text (`markdownText` of `pi-chat-markdown` draws Markdown). */\n  readonly renderText?: ((part: ChatTextPart) => ReactNode) | undefined;\n  readonly cards?: ChatCards | undefined;\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 kinds?: MentionsConfig['kinds']; 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 voiceReplay?: boolean | undefined;\n  /** A host's own card for a sent text (`PiChat sentContent`). */\n  readonly sentContent?: SentContent | undefined;\n  /** The host's words for a sent target chip (`PiChat targetLabel`). */\n  readonly targetLabel?: ((target: JsonObject) => string | 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: ChatArtifactsConfig['open']; readonly isOpen?: ChatArtifactsConfig['isOpen'] | undefined; readonly kinds?: ChatArtifactsConfig['kinds']; readonly Card: NonNullable<ChatArtifactsConfig['Card']> } | 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  /** Developer mode: the host's per-turn `answeredBy` for a reply; absent, the line under the reply names the message's own provider/model. */\n  readonly answeredBy?: ((reply: ReplyRef) => AnsweredBy | undefined) | 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\nfunction AnsweredByLine({ answered }: { readonly answered: AnsweredBy }) {\n  const { labels } = useChatText();\n  return <p data-testid=\"answered-by\" className=\"m-0 text-xs text-muted-foreground\">\n    {labels.answeredBy(`${answered.provider}/${answered.model}`)}\n    {answered.fallback && <span data-testid=\"answered-fallback\"> · {labels.answeredFallback(answered.fallback)}</span>}\n  </p>;\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      <MessageImage key={imageSource(image) ?? ''} image={image} alt={labels.imageAttachment} />\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/** One photo of a message; a linked photo the host no longer serves (a 404) shows a placeholder in its place. */\nfunction MessageImage({ image, alt }: { readonly image: ImageContent; readonly alt: string }) {\n  // Keyed by its source by the caller: a new source starts again, a failed one is not requested again on every render.\n  const src = imageSource(image);\n  const [failed, setFailed] = useState(false);\n  if (!src || failed) return <div data-testid=\"message-image-missing\" role=\"img\" aria-label={alt}\n    className=\"flex aspect-square w-full items-center justify-center rounded-(--radius-xl) bg-muted text-muted-foreground\"><ImageOffIcon aria-hidden=\"true\" /></div>;\n  return <img src={src} alt={alt} onError={() => setFailed(true)} className=\"block h-auto w-full rounded-(--radius-xl)\" />;\n}\n\n/** Inline sent mention; workspace openers and host renderers keep their existing authority. */\nexport function UserMention({ path, text, open, render, kinds }: { readonly path: string; readonly text: string; readonly open: ((path: string) => void) | undefined; readonly render: ((path: string) => ReactNode | undefined) | undefined; readonly kinds?: MentionsConfig['kinds'] }) {\n  const registered = mentionKind(path, { kinds });\n  const custom = registered ? registered.kind.renderSent?.(registered.path) : render?.(path);\n  if (custom !== undefined) return <>{custom}</>;\n  const label = registered ? registered.kind.label(registered.path) : text;\n  const activate = registered ? registered.kind.open ? () => registered.kind.open!(registered.path) : undefined : open ? () => open(path) : undefined;\n  const content = <>{registered?.kind.icon}{label}</>;\n  const className = 'inline-flex items-center gap-1 align-middle font-medium text-primary';\n  return activate\n    ? <span role=\"link\" tabIndex={0} className={className} data-testid=\"message-mention\" data-path={path} aria-label={`Open ${label}`} onClick={activate} onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); activate(); } }}>{content}</span>\n    : <span className={className} data-testid=\"message-mention\" data-path={path}>{content}</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 [thumb, setThumb] = useState<{ readonly path: string; readonly preview: PreviewRead; readonly src: 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  const src = kind === 'image' && thumb?.path === path && thumb.preview === preview ? thumb.src : undefined;\n  useEffect(() => {\n    if (kind !== 'image' || !preview) return;\n    const abort = new AbortController();\n    preview(path, abort.signal).then(\n      read => { if (!abort.signal.aborted) setThumb({ path, preview, src: read ? thumbnail(read.mimeType, read.data) : undefined }); },\n      () => { if (!abort.signal.aborted) setThumb({ path, preview, src: 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\ninterface VoiceBubbleProps {\n  readonly path: string; readonly transcript: ReactNode; readonly preview: PreviewRead | undefined; readonly audioUrl: AudioUrlRead | undefined; readonly align?: 'start' | 'end'; readonly replay?: boolean | undefined;\n}\n/** Voice messages show their transcript by default; the retained audio player is an explicit presentation choice. */\nexport function VoiceBubble({ replay = false, ...props }: VoiceBubbleProps) {\n  const { labels } = useChatText();\n  return replay ? <VoiceReplayBubble {...props} /> : <Bubble variant=\"muted\" align={props.align ?? 'end'} data-testid=\"voice-bubble\"><BubbleContent data-testid=\"user-text\" className=\"whitespace-pre-wrap\">{props.transcript ?? <span data-testid=\"voice-transcript-unavailable\">{labels.voiceTranscriptUnavailable}</span>}</BubbleContent></Bubble>;\n}\n\n/** Retained audio is read only on Play, through the same authorized workspace preview as file cards. */\nfunction VoiceReplayBubble({ path, transcript, preview, audioUrl, align = 'end' }: VoiceBubbleProps) {\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    // eslint-disable-next-line react-hooks/set-state-in-effect -- another recording or provider resets the player this effect owns, once per source\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 */\n/** `variant` picks the bubble: `muted` (the chat's user bubble) or `default` (the theme's primary, used for my own messages in a shared chat). */\n/** `decoration` sits inside the Bubble before its content (a tail); `header` and `footer` inside the content, around the text (a quote, the time). */\nexport function MessageText({ text, context, align = 'end', variant = 'muted', decoration, header, footer }: { readonly text: string; readonly context: Pick<RowContext, 'sentContent' | 'pieces' | 'openFile' | 'voiceReplay' | 'targetLabel'>; readonly align?: 'start' | 'end'; readonly variant?: 'muted' | 'default'; readonly decoration?: ReactNode; readonly header?: ReactNode; readonly footer?: ReactNode }) {\n  const framed = decoration !== undefined || header !== undefined || footer !== undefined;\n  const wrap = (body: ReactNode) => <Bubble variant={variant} align={align}>{decoration}<BubbleContent data-testid=\"user-text\" className={framed ? 'relative' : undefined}>{header}{body}{footer}</BubbleContent></Bubble>;\n  const target = targetContent(text);\n  if (target) return <>\n    <Badge variant=\"secondary\" data-testid=\"message-target\" className=\"max-w-full truncate\">{context.targetLabel?.(target.target) ?? target.label}</Badge>\n    <MessageText text={target.speech} context={context} align={align} variant={variant} decoration={decoration} header={header} footer={footer} />\n  </>;\n  const hosted = context.sentContent?.(text, align);\n  if (hosted) return <>\n    {hosted.before && <MessageText text={hosted.before} context={context} align={align} variant={variant} />}\n    {hosted.node}\n    {hosted.after && <MessageText text={hosted.after} context={context} align={align} variant={variant} />}\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 wrap(<span className=\"whitespace-pre-wrap\">{text}</span>);\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} kinds={context.pieces?.kinds} />\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} replay={context.voiceReplay} />\n      : !(files.length > 0 && empty) && wrap(<span className=\"whitespace-pre-wrap\">{content}</span>)}\n  </>;\n}\n\n/** A messenger's tail on the first bubble of a run. Its square part fills the bubble's top corner under the (positioned) content. */\nexport function BubbleTail({ side }: { readonly side: 'start' | 'end' }) {\n  return <svg data-testid=\"bubble-tail\" data-side={side} aria-hidden=\"true\" viewBox=\"0 0 22 14\" width=\"22\" height=\"14\"\n    className={`pointer-events-none absolute top-0 ${side === 'end' ? '-end-2 -scale-x-100 fill-primary' : '-start-2 fill-muted'}`}><path d=\"M0 0H22V14H8V9C8 5 5 2 0 0Z\" /></svg>;\n}\n/** Text whose last line leaves room for the time at the bottom right of the bubble (the spacer rides at the end of the last paragraph). */\nexport const clockRoom = \"[&_:is(p,li):last-child]:after:inline-block [&_:is(p,li):last-child]:after:w-14 [&_:is(p,li):last-child]:after:content-['']\";\n/** Room for a floating clock after plain inline text. */\nexport const ClockSpacer = () => <span aria-hidden=\"true\" className=\"inline-block w-14\" />;\n/**\n * The time inside a bubble (« 14:02 »). `floating` pins it bottom right over the room the text left; otherwise it sits in the line.\n * `text` and `title` replace the chat's own clock and date labels, and `className` the size (the shared chat brings its own).\n */\nexport function MessageClock({ at, tone, floating = true, pending = false, text, title, className }: { readonly at: string; readonly tone: 'muted' | 'primary'; readonly floating?: boolean; readonly pending?: boolean | undefined; readonly text?: string | undefined; readonly title?: string | undefined; readonly className?: string | undefined }) {\n  const { labels } = useChatText();\n  // Not confirmed by the host yet: a small clock where the time will be.\n  if (pending) return <span data-testid=\"message-pending\" role=\"img\" aria-label={labels.sending} title={labels.sending}\n    className={`${floating ? 'absolute end-3 bottom-1.5' : 'shrink-0 self-end'} leading-none ${tone === 'primary' ? 'opacity-80' : 'text-muted-foreground'}`}><ClockIcon aria-hidden=\"true\" className=\"size-3\" /></span>;\n  return <time data-testid=\"message-time\" dateTime={at} title={title ?? labels.messageTimestamp(at)}\n    className={cn(floating ? 'absolute end-3 bottom-1.5' : 'shrink-0 self-end', 'text-xs leading-none whitespace-nowrap tabular-nums', tone === 'primary' ? 'opacity-80' : 'text-muted-foreground', className)}>{text ?? labels.messageClock(at)}</time>;\n}\nconst isoAt = (ms: number | undefined) => ms !== undefined && Number.isFinite(ms) ? new Date(ms).toISOString() : undefined;\n\n// (A message just sent reads no file previews: the server's own row will, and the same file is not read twice.)\nfunction NotSent() {\n  const { labels } = useChatText();\n  return <p role=\"status\" data-testid=\"message-not-sent\" className=\"m-0 text-end text-xs text-destructive\">{labels.notSent}</p>;\n}\n\nfunction UserBubble({ message, images, context, align = 'end', lead = false, local }: { readonly message: UserMessage; readonly images: readonly ImageContent[]; readonly context: RowContext; readonly align?: 'start' | 'end'; readonly lead?: boolean; readonly local?: 'sending' | 'failed' | undefined }) {\n  const messaging = context.messageStyle === 'messaging', at = isoAt(message.timestamp);\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 : messaging\n        ? <MessageText key={index} text={part.text} context={context} align={align} variant=\"default\" decoration={lead ? <BubbleTail side=\"end\" /> : undefined}\n          footer={at ? <><ClockSpacer /><MessageClock at={at} tone=\"primary\" pending={local === 'sending'} /></> : undefined} />\n        : <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\n/**\n * A question or an approval waits for the person but this chat has no card for it (no `pi-chat-question` or `pi-chat-approval`): say so,\n * so the run is never silently blocked. It offers no answer UI.\n */\nfunction AnswerWaiting({ kind }: { readonly kind: 'question' | 'approval' }) {\n  const { labels } = useChatText();\n  return <Alert role=\"status\" data-testid=\"answer-waiting\" data-kind={kind}>\n    <AlertCircleIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" /><AlertDescription>{labels.waitingForAnswer}</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' && imageSource(part) ? [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 => imageSource(image)) ?? row.parts.flatMap(part => part.kind === 'tool' && part.entry.result ? images(part.entry.result.content) : []) : [];\n}\n\n/**\n * A run of transcript rows as one scroller item (`useRowChunks`). Memoized, like each row: a row renders again only when its own row\n * or the chat's row context changes, never on a scroll or another row's update. Pass stable callbacks (`messageActions`, `unread`…)\n * so the context stays the same.\n */\nexport const TranscriptChunk = memo(function TranscriptChunk({ rows, context }: { readonly rows: readonly Row[]; readonly context: RowContext }) {\n  return <MessageScrollerItem messageId={rows[0]!.key} data-transcript-chunk=\"\" className=\"flex flex-col [content-visibility:visible] [gap:inherit]\">\n    {rows.map(row => <TranscriptRow key={row.key} row={row} context={context} />)}\n  </MessageScrollerItem>;\n});\nconst TranscriptRow = memo(function TranscriptRow({ row, context }: { readonly row: Row; readonly context: RowContext }) {\n  return <div data-row-key={row.key} className=\"min-w-0 shrink-0\"><RowView row={row} context={context} /></div>;\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 && imageSource(image) === (images[at] && imageSource(images[at]))) ? selection : undefined;\n  // eslint-disable-next-line react-hooks/set-state-in-effect -- a stale selection (other row, opener or images) is dropped once, after commit\n  useEffect(() => { if (selection && !current) setSelection(undefined); }, [selection, current]);\n  const openImage: NonNullable<RowContext['onOpenImage']> = image => {\n    if (!imageSource(image)) 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} kinds={context.pieces?.kinds} /> : undefined, [context.pieces]);\n  switch (row.type) {\n    case 'user': return <article data-row-id={row.key} data-role=\"user\" data-send-state={row.local} aria-live={row.historical ? 'off' : undefined} className={row.local === 'sending' ? 'opacity-70' : undefined}><UserBubble message={row.message} images={images} context={row.local && context.pieces?.preview ? { ...context, pieces: { ...context.pieces, preview: undefined } } : context} lead={row.lead === true} local={row.local} />{row.local === 'failed' && <NotSent />}</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 { question: Question, approval: Approval } = context.cards ?? {};\n      const active = row.active === true || row.streaming;\n      const lastText = [...row.parts].reverse().find(part => part.kind === 'text');\n      const firstText = row.parts.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      const answered = context.developer ? context.answeredBy?.(replyRef(row)) ?? (row.model ? { provider: row.model.provider, model: row.model.modelId } : undefined) : undefined;\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') {\n              const text = (context.renderText ?? plainText)({ text: part.text, 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 } : {}) });\n              if (context.messageStyle !== 'messaging') return <Bubble key={part.key} variant=\"ghost\"><BubbleContent>{text}</BubbleContent></Bubble>;\n              const time = part === lastText ? isoAt(row.timestamp) : undefined;\n              return <Bubble key={part.key} variant=\"muted\" align=\"start\">{row.lead && part === firstText && <BubbleTail side=\"start\" />}\n                <BubbleContent data-testid=\"reply-text\" className=\"relative\"><div className={time ? clockRoom : undefined}>{text}</div>{time && <MessageClock at={time} tone=\"muted\" />}</BubbleContent></Bubble>;\n            }\n            if (part.kind === 'thinking') return null; // reasoning is a step of an activity block\n            if (part.kind === 'approval') return Approval ? <Approval 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              : waits(part) ? <AnswerWaiting key={part.key} kind=\"approval\" /> : null;\n            if (part.kind === 'subagent') return <Fragment key={part.key}>{part.content}</Fragment>;\n            if (part.kind === 'question') return Question ? <Question key={part.key} call={part.call} result={part.result} questionId={part.questionId} answer={context.answer} live={part.live} />\n              : waits(part) ? <AnswerWaiting key={part.key} kind=\"question\" /> : null;\n            if (part.kind === 'artifact') {\n              const { artifact } = part, artifacts = context.artifacts;\n              if (!artifacts || (artifact.path !== undefined && files.has(artifact.path.replace(/^(\\.\\/)+/, '')))) return null;\n              const descriptor = artifact.descriptor as never;\n              return <artifacts.Card key={part.key} artifact={artifact} open={artifact.state === 'ready' && (artifacts.isOpen?.(descriptor) ?? false)}\n                onOpen={artifact.state === 'ready' && artifacts.open ? () => artifacts.open(descriptor) : undefined} kinds={artifacts.kinds} />;\n            }\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-md: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        {answered && <AnsweredByLine answered={answered} />}\n        {footer != null && footer !== false && <MessageFooter>{footer}</MessageFooter>}\n        </MessageContent></Message>\n      </article>;\n    }\n  }\n}\n",
+      "content": "'use client';\n\nimport { Fragment, memo, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { ImageContent, ToolResultMessage, UserMessage } from '@earendil-works/pi-ai';\nimport type { JsonObject } from '@earendil-works/pi-durable';\nimport { AlertCircleIcon, CircleSlashIcon, ClockIcon, FileAudioIcon, FileIcon, FileSpreadsheetIcon, FileTextIcon, ImageIcon, ImageOffIcon, PauseIcon, PlayIcon, PresentationIcon } from 'lucide-react';\nimport { CopyButton } from './code-block';\nimport type { AnswerOutcome, ChatArtifactsConfig, ChatCards, CommandMentions } from './config';\nimport { ActivityBlock } from './activity';\nimport type { ActivityState } from './activity';\nimport { Shimmer } from './shimmer';\nimport { ToolCard } from './tool';\nimport { imageSource, thumbnail } from './composer';\nimport { ImageViewer } from './image-viewer';\nimport { displayName, fileKind, isUploadPath, isVoicePath, mentionKind, pieces, visibleParts } from '@hachej/boring-ui-kit/chat-text';\nimport type { FileKind, Piece } from '@hachej/boring-ui-kit/chat-text';\nimport type { AudioUrlRead, MentionsConfig, PreviewRead, SentContent } from './config';\nimport { voiceClock } from './config';\nimport { Spinner } from '@/components/ui/spinner';\nimport { isFileBlock, segments, targetContent, waits } from './rows';\nimport type { DeriveOptions, Row, Segment, Step } 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 { AnsweredBy, ReplyRef } from './config';\nimport { Message, MessageContent, MessageFooter } from '@/components/ui/message';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { MessageScrollerItem } from '@/components/ui/message-scroller';\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\n/** One assistant text part, as `renderText` receives it. `streaming` is true while the model still writes it. */\nexport interface ChatTextPart {\n  readonly text: string;\n  readonly streaming: boolean;\n  /** Draws an `@path` mention (when mentions are on). */\n  readonly renderMention?: ((path: string, text: string) => ReactNode) | undefined;\n  /** The `/` commands a settled reply may turn into buttons. */\n  readonly commandMentions?: CommandMentions | undefined;\n  readonly onCopy?: ((text: string) => Promise<void>) | undefined;\n}\n/** The default text renderer: the reply as plain text. `markdownText` of `pi-chat-markdown` draws it as Markdown. */\nconst plainText = ({ text, streaming }: ChatTextPart): ReactNode =>\n  <div data-testid=\"message-text\" data-streaming={streaming ? 'true' : undefined} className=\"min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]\">{text}</div>;\n\nexport type { ChatCards } from './config';\n\nexport interface RowContext {\n  /** `messaging`: primary bubble for me, muted bubble for the reply, a tail on the first bubble of a run and the time inside (`PiChat messageStyle`). */\n  readonly messageStyle?: 'default' | 'messaging' | undefined;\n  readonly developer: boolean;\n  /** Draws an assistant text part. Default: plain text (`markdownText` of `pi-chat-markdown` draws Markdown). */\n  readonly renderText?: ((part: ChatTextPart) => ReactNode) | undefined;\n  readonly cards?: ChatCards | undefined;\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 kinds?: MentionsConfig['kinds']; 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 voiceReplay?: boolean | undefined;\n  /** A host's own card for a sent text (`PiChat sentContent`). */\n  readonly sentContent?: SentContent | undefined;\n  /** The host's words for a sent target chip (`PiChat targetLabel`). */\n  readonly targetLabel?: ((target: JsonObject) => string | 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: ChatArtifactsConfig['open']; readonly isOpen?: ChatArtifactsConfig['isOpen'] | undefined; readonly kinds?: ChatArtifactsConfig['kinds']; readonly Card: NonNullable<ChatArtifactsConfig['Card']> } | 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  /** Developer mode: the host's per-turn `answeredBy` for a reply; absent, the line under the reply names the message's own provider/model. */\n  readonly answeredBy?: ((reply: ReplyRef) => AnsweredBy | undefined) | 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\nfunction AnsweredByLine({ answered }: { readonly answered: AnsweredBy }) {\n  const { labels } = useChatText();\n  return <p data-testid=\"answered-by\" className=\"m-0 text-xs text-muted-foreground\">\n    {labels.answeredBy(`${answered.provider}/${answered.model}`)}\n    {answered.fallback && <span data-testid=\"answered-fallback\"> · {labels.answeredFallback(answered.fallback)}</span>}\n  </p>;\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      <MessageImage key={imageSource(image) ?? ''} image={image} alt={labels.imageAttachment} />\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/** One photo of a message; a linked photo the host no longer serves (a 404) shows a placeholder in its place. */\nfunction MessageImage({ image, alt }: { readonly image: ImageContent; readonly alt: string }) {\n  // Keyed by its source by the caller: a new source starts again, a failed one is not requested again on every render.\n  const src = imageSource(image);\n  const [failed, setFailed] = useState(false);\n  if (!src || failed) return <div data-testid=\"message-image-missing\" role=\"img\" aria-label={alt}\n    className=\"flex aspect-square w-full items-center justify-center rounded-(--radius-xl) bg-muted text-muted-foreground\"><ImageOffIcon aria-hidden=\"true\" /></div>;\n  return <img src={src} alt={alt} onError={() => setFailed(true)} className=\"block h-auto w-full rounded-(--radius-xl)\" />;\n}\n\n/** Inline sent mention; workspace openers and host renderers keep their existing authority. */\nexport function UserMention({ path, text, open, render, kinds }: { readonly path: string; readonly text: string; readonly open: ((path: string) => void) | undefined; readonly render: ((path: string) => ReactNode | undefined) | undefined; readonly kinds?: MentionsConfig['kinds'] }) {\n  const registered = mentionKind(path, { kinds });\n  const custom = registered ? registered.kind.renderSent?.(registered.path) : render?.(path);\n  if (custom !== undefined) return <>{custom}</>;\n  const label = registered ? registered.kind.label(registered.path) : text;\n  const activate = registered ? registered.kind.open ? () => registered.kind.open!(registered.path) : undefined : open ? () => open(path) : undefined;\n  const content = <>{registered?.kind.icon}{label}</>;\n  const className = 'inline-flex items-center gap-1 align-middle font-medium text-primary';\n  return activate\n    ? <span role=\"link\" tabIndex={0} className={className} data-testid=\"message-mention\" data-path={path} aria-label={`Open ${label}`} onClick={activate} onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); activate(); } }}>{content}</span>\n    : <span className={className} data-testid=\"message-mention\" data-path={path}>{content}</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 [thumb, setThumb] = useState<{ readonly path: string; readonly preview: PreviewRead; readonly src: 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  const src = kind === 'image' && thumb?.path === path && thumb.preview === preview ? thumb.src : undefined;\n  useEffect(() => {\n    if (kind !== 'image' || !preview) return;\n    const abort = new AbortController();\n    preview(path, abort.signal).then(\n      read => { if (!abort.signal.aborted) setThumb({ path, preview, src: read ? thumbnail(read.mimeType, read.data) : undefined }); },\n      () => { if (!abort.signal.aborted) setThumb({ path, preview, src: 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\ninterface VoiceBubbleProps {\n  readonly path: string; readonly transcript: ReactNode; readonly preview: PreviewRead | undefined; readonly audioUrl: AudioUrlRead | undefined; readonly align?: 'start' | 'end'; readonly replay?: boolean | undefined;\n}\n/** Voice messages show their transcript by default; the retained audio player is an explicit presentation choice. */\nexport function VoiceBubble({ replay = false, ...props }: VoiceBubbleProps) {\n  const { labels } = useChatText();\n  return replay ? <VoiceReplayBubble {...props} /> : <Bubble variant=\"muted\" align={props.align ?? 'end'} data-testid=\"voice-bubble\"><BubbleContent data-testid=\"user-text\" className=\"whitespace-pre-wrap\">{props.transcript ?? <span data-testid=\"voice-transcript-unavailable\">{labels.voiceTranscriptUnavailable}</span>}</BubbleContent></Bubble>;\n}\n\n/** Retained audio is read only on Play, through the same authorized workspace preview as file cards. */\nfunction VoiceReplayBubble({ path, transcript, preview, audioUrl, align = 'end' }: VoiceBubbleProps) {\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    // eslint-disable-next-line react-hooks/set-state-in-effect -- another recording or provider resets the player this effect owns, once per source\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 */\n/** `variant` picks the bubble: `muted` (the chat's user bubble) or `default` (the theme's primary, used for my own messages in a shared chat). */\n/** `decoration` sits inside the Bubble before its content (a tail); `header` and `footer` inside the content, around the text (a quote, the time). */\nexport function MessageText({ text, context, align = 'end', variant = 'muted', decoration, header, footer }: { readonly text: string; readonly context: Pick<RowContext, 'sentContent' | 'pieces' | 'openFile' | 'voiceReplay' | 'targetLabel'>; readonly align?: 'start' | 'end'; readonly variant?: 'muted' | 'default'; readonly decoration?: ReactNode; readonly header?: ReactNode; readonly footer?: ReactNode }) {\n  const framed = decoration !== undefined || header !== undefined || footer !== undefined;\n  const wrap = (body: ReactNode) => <Bubble variant={variant} align={align}>{decoration}<BubbleContent data-testid=\"user-text\" className={framed ? 'relative' : undefined}>{header}{body}{footer}</BubbleContent></Bubble>;\n  const target = targetContent(text);\n  if (target) return <>\n    <Badge variant=\"secondary\" data-testid=\"message-target\" className=\"max-w-full truncate\">{context.targetLabel?.(target.target) ?? target.label}</Badge>\n    <MessageText text={target.speech} context={context} align={align} variant={variant} decoration={decoration} header={header} footer={footer} />\n  </>;\n  const hosted = context.sentContent?.(text, align);\n  if (hosted) return <>\n    {hosted.before && <MessageText text={hosted.before} context={context} align={align} variant={variant} />}\n    {hosted.node}\n    {hosted.after && <MessageText text={hosted.after} context={context} align={align} variant={variant} />}\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 wrap(<span className=\"whitespace-pre-wrap\">{text}</span>);\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} kinds={context.pieces?.kinds} />\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} replay={context.voiceReplay} />\n      : !(files.length > 0 && empty) && wrap(<span className=\"whitespace-pre-wrap\">{content}</span>)}\n  </>;\n}\n\n/** A messenger's tail on the first bubble of a run. Its square part fills the bubble's top corner under the (positioned) content. */\nexport function BubbleTail({ side }: { readonly side: 'start' | 'end' }) {\n  return <svg data-testid=\"bubble-tail\" data-side={side} aria-hidden=\"true\" viewBox=\"0 0 22 14\" width=\"22\" height=\"14\"\n    className={`pointer-events-none absolute top-0 ${side === 'end' ? '-end-2 -scale-x-100 fill-primary' : '-start-2 fill-muted'}`}><path d=\"M0 0H22V14H8V9C8 5 5 2 0 0Z\" /></svg>;\n}\n/** Text whose last line leaves room for the time at the bottom right of the bubble (the spacer rides at the end of the last paragraph). */\nexport const clockRoom = \"[&_:is(p,li):last-child]:after:inline-block [&_:is(p,li):last-child]:after:w-14 [&_:is(p,li):last-child]:after:content-['']\";\n/** Room for a floating clock after plain inline text. */\nexport const ClockSpacer = () => <span aria-hidden=\"true\" className=\"inline-block w-14\" />;\n/**\n * The time inside a bubble (« 14:02 »). `floating` pins it bottom right over the room the text left; otherwise it sits in the line.\n * `text` and `title` replace the chat's own clock and date labels, and `className` the size (the shared chat brings its own).\n */\nexport function MessageClock({ at, tone, floating = true, pending = false, text, title, className }: { readonly at: string; readonly tone: 'muted' | 'primary'; readonly floating?: boolean; readonly pending?: boolean | undefined; readonly text?: string | undefined; readonly title?: string | undefined; readonly className?: string | undefined }) {\n  const { labels } = useChatText();\n  // Not confirmed by the host yet: a small clock where the time will be.\n  if (pending) return <span data-testid=\"message-pending\" role=\"img\" aria-label={labels.sending} title={labels.sending}\n    className={`${floating ? 'absolute end-3 bottom-1.5' : 'shrink-0 self-end'} leading-none ${tone === 'primary' ? 'opacity-80' : 'text-muted-foreground'}`}><ClockIcon aria-hidden=\"true\" className=\"size-3\" /></span>;\n  return <time data-testid=\"message-time\" dateTime={at} title={title ?? labels.messageTimestamp(at)}\n    className={cn(floating ? 'absolute end-3 bottom-1.5' : 'shrink-0 self-end', 'text-xs leading-none whitespace-nowrap tabular-nums', tone === 'primary' ? 'opacity-80' : 'text-muted-foreground', className)}>{text ?? labels.messageClock(at)}</time>;\n}\nconst isoAt = (ms: number | undefined) => ms !== undefined && Number.isFinite(ms) ? new Date(ms).toISOString() : undefined;\n\n// (A message just sent reads no file previews: the server's own row will, and the same file is not read twice.)\nfunction NotSent() {\n  const { labels } = useChatText();\n  return <p role=\"status\" data-testid=\"message-not-sent\" className=\"m-0 text-end text-xs text-destructive\">{labels.notSent}</p>;\n}\n\nfunction UserBubble({ message, images, context, align = 'end', lead = false, local }: { readonly message: UserMessage; readonly images: readonly ImageContent[]; readonly context: RowContext; readonly align?: 'start' | 'end'; readonly lead?: boolean; readonly local?: 'sending' | 'failed' | undefined }) {\n  const messaging = context.messageStyle === 'messaging', at = isoAt(message.timestamp);\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 : messaging\n        ? <MessageText key={index} text={part.text} context={context} align={align} variant=\"default\" decoration={lead ? <BubbleTail side=\"end\" /> : undefined}\n          footer={at ? <><ClockSpacer /><MessageClock at={at} tone=\"primary\" pending={local === 'sending'} /></> : undefined} />\n        : <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\n/**\n * A question or an approval waits for the person but this chat has no card for it (no `pi-chat-question` or `pi-chat-approval`): say so,\n * so the run is never silently blocked. It offers no answer UI.\n */\nfunction AnswerWaiting({ kind }: { readonly kind: 'question' | 'approval' }) {\n  const { labels } = useChatText();\n  return <Alert role=\"status\" data-testid=\"answer-waiting\" data-kind={kind}>\n    <AlertCircleIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" /><AlertDescription>{labels.waitingForAnswer}</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' && imageSource(part) ? [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 => imageSource(image)) ?? row.parts.flatMap(part => part.kind === 'tool' && part.entry.result ? images(part.entry.result.content) : []) : [];\n}\n\n/**\n * A run of transcript rows as one scroller item (`useRowChunks`). Memoized, like each row: a row renders again only when its own row\n * or the chat's row context changes, never on a scroll or another row's update. Pass stable callbacks (`messageActions`, `unread`…)\n * so the context stays the same.\n */\nexport const TranscriptChunk = memo(function TranscriptChunk({ rows, context }: { readonly rows: readonly Row[]; readonly context: RowContext }) {\n  return <MessageScrollerItem messageId={rows[0]!.key} data-transcript-chunk=\"\" className=\"flex flex-col [content-visibility:visible] [gap:inherit]\">\n    {rows.map(row => <TranscriptRow key={row.key} row={row} context={context} />)}\n  </MessageScrollerItem>;\n});\nconst TranscriptRow = memo(function TranscriptRow({ row, context }: { readonly row: Row; readonly context: RowContext }) {\n  return <div data-row-key={row.key} className=\"min-w-0 shrink-0\"><RowView row={row} context={context} /></div>;\n});\n\nconst failedStep = (step: Step) => step.kind === 'tool' && step.entry.status === 'failed';\nconst finishedStep = (step: Step) => step.kind === 'tool' && step.entry.status === 'completed';\n/** After this block's last failed step a later step finished or something else came, and the reply ended on a round that saw every result (`stop`, not `toolUse`): nothing is left for a person to act on. */\nfunction gotPast(row: Extract<Row, { type: 'assistant' }>, steps: readonly Step[], later: readonly Segment[]): boolean {\n  return row.stopReason === 'stop' && (later.length > 0 || steps.slice(steps.map(failedStep).lastIndexOf(true) + 1).some(finishedStep));\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 && imageSource(image) === (images[at] && imageSource(images[at]))) ? selection : undefined;\n  // eslint-disable-next-line react-hooks/set-state-in-effect -- a stale selection (other row, opener or images) is dropped once, after commit\n  useEffect(() => { if (selection && !current) setSelection(undefined); }, [selection, current]);\n  const openImage: NonNullable<RowContext['onOpenImage']> = image => {\n    if (!imageSource(image)) 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} kinds={context.pieces?.kinds} /> : undefined, [context.pieces]);\n  switch (row.type) {\n    case 'user': return <article data-row-id={row.key} data-role=\"user\" data-send-state={row.local} aria-live={row.historical ? 'off' : undefined} className={row.local === 'sending' ? 'opacity-70' : undefined}><UserBubble message={row.message} images={images} context={row.local && context.pieces?.preview ? { ...context, pieces: { ...context.pieces, preview: undefined } } : context} lead={row.lead === true} local={row.local} />{row.local === 'failed' && <NotSent />}</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 { question: Question, approval: Approval } = context.cards ?? {};\n      const active = row.active === true || row.streaming;\n      const lastText = [...row.parts].reverse().find(part => part.kind === 'text');\n      const firstText = row.parts.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      const answered = context.developer ? context.answeredBy?.(replyRef(row)) ?? (row.model ? { provider: row.model.provider, model: row.model.modelId } : undefined) : undefined;\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(failedStep) && (context.developer || (!active && !gotPast(row, chunk.steps, chunks.slice(at + 1))));\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') {\n              const text = (context.renderText ?? plainText)({ text: part.text, 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 } : {}) });\n              if (context.messageStyle !== 'messaging') return <Bubble key={part.key} variant=\"ghost\"><BubbleContent>{text}</BubbleContent></Bubble>;\n              const time = part === lastText ? isoAt(row.timestamp) : undefined;\n              return <Bubble key={part.key} variant=\"muted\" align=\"start\">{row.lead && part === firstText && <BubbleTail side=\"start\" />}\n                <BubbleContent data-testid=\"reply-text\" className=\"relative\"><div className={time ? clockRoom : undefined}>{text}</div>{time && <MessageClock at={time} tone=\"muted\" />}</BubbleContent></Bubble>;\n            }\n            if (part.kind === 'thinking') return null; // reasoning is a step of an activity block\n            if (part.kind === 'approval') return Approval ? <Approval 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              : waits(part) ? <AnswerWaiting key={part.key} kind=\"approval\" /> : null;\n            if (part.kind === 'subagent') return <Fragment key={part.key}>{part.content}</Fragment>;\n            if (part.kind === 'question') return Question ? <Question key={part.key} call={part.call} result={part.result} questionId={part.questionId} answer={context.answer} live={part.live} />\n              : waits(part) ? <AnswerWaiting key={part.key} kind=\"question\" /> : null;\n            if (part.kind === 'artifact') {\n              const { artifact } = part, artifacts = context.artifacts;\n              if (!artifacts || (artifact.path !== undefined && files.has(artifact.path.replace(/^(\\.\\/)+/, '')))) return null;\n              const descriptor = artifact.descriptor as never;\n              return <artifacts.Card key={part.key} artifact={artifact} open={artifact.state === 'ready' && (artifacts.isOpen?.(descriptor) ?? false)}\n                onOpen={artifact.state === 'ready' && artifacts.open ? () => artifacts.open(descriptor) : undefined} kinds={artifacts.kinds} />;\n            }\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-md: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        {answered && <AnsweredByLine answered={answered} />}\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"
     },
@@ -84,7 +84,7 @@
     },
     {
       "path": "registry/pi-chat/pi-chat.tsx",
-      "content": "'use client';\n\nimport { useKeyboardInset } from '../utils/use-media';\n\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { viewHasEarlier } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { Loader2Icon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { MessageScroller, MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton } from '@/components/ui/message-scroller';\nimport { BlockActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { Composer } from './composer';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport { ConversationFiles } from './conversation-files';\nimport type { AnsweredBy, AttachmentsConfig, ConversationsConfig, PendingVoice, ReplyRef, VoiceMessageConfig, VoiceMessageHandle, VoiceRecorderHook } from './config';\nimport { displayName } from '@hachej/boring-ui-kit/chat-text';\nimport { EmptyState } from './empty-state';\nimport type { Suggestion } from './empty-state';\nimport { ConversationHistory, TranscriptHistory } from './history';\nimport { TranscriptChunk } from './message';\nimport { markLeads } from './rows';\nimport type { Row } from './rows';\nimport { MessageQueue } from './queue';\nimport { ChatNotices, ChatConnectionNotice, ChatStatusLine } from './notice';\nimport { PAGE_FIRST, PAGE_MORE, useChatSession, useRowChunks, useTranscript } from './session';\nimport { useChatDraft } from './use-chat-draft';\nimport { useChatPlacement } from './use-remote-chat';\nimport type { ChatPlacement } from './use-remote-chat';\nimport type { ChatFeatureProps, ChatPaging, FilesHandler } from './session';\nimport { ChatTextProvider, useChatText, useMergedText } from './labels';\nimport { chatTextFor } from './locale';\nimport type { ChatLocale } from './locale';\nimport type { ChatIcons, ChatLabels } from './labels';\nimport { cn } from '../utils/utils';\n\nexport type { ChatPaging, PiChatActions } from './session';\nexport type { ChatCard, Mode } from './rows';\nexport type { AnswerOutcome, ApprovalCardProps, ApprovalDecision, ChatArtifact, ChatArtifactCardProps, ChatArtifactsConfig, ChatCards, QuestionCardProps, SubagentRenderer } from './config';\nexport { ASK_USER_TOOL } from './config';\nexport type { ChatTextPart } from './message';\nexport type { MentionPickerProps, ModelEffortPickerProps, SlashPickerProps } from './config';\nexport type { PendingVoice, PendingVoiceBubbleProps, VoiceMessageButtonProps, VoiceMessageHandle } from './config';\nexport type { CameraSheetProps, VoiceRecorderHook, VoiceRecorderOptions } from './config';\nexport { voiceClock } from './config';\nexport { ChatTextProvider } from './labels';\nexport type { CommandMention, CommandMentions } from './config';\nexport type { Suggestion } from './empty-state';\nexport { ConversationList, relativeTime } from './history';\nexport { defaultChatIcons, defaultChatLabels } from './labels';\nexport type { ChatIcons, ChatLabels } from './labels';\nexport { frenchChatLabels } from './labels-fr';\nexport { chatTextFor } from './locale';\nexport type { ChatLocale } from './locale';\nexport { BlockActions } from '../button/actions';\nexport { useChatDraft } from './use-chat-draft';\nexport { useConversations } from './use-conversations';\nexport type { ChatController, ChatSnapshot } from '@hachej/boring-ui-kit/native-chat';\nexport { MessageText, VoiceBubble } from './message';\nexport { useTranscript } from './session';\nexport type { BlockAction, BlockIcon } from '../button/actions';\nexport type { AnsweredBy, AudioUrlRead, VoiceMessageConfig, AttachmentsConfig, ConversationItem, ConversationsConfig, EffortConfig, FileKind, MentionResult, MentionsConfig, ModelConfig, ModelRef, PasteToFile, PreviewRead, ReplyRef, SlashApi, SlashCommand, SlashConfig, SlashSkill, UploadResult } from './config';\n\nexport interface ChatTimeline {\n  readonly count: number;\n  readonly render: (context: { readonly focusComposer: () => void; readonly openFile?: ((path: string) => void) | undefined; readonly pendingVoice?: ReactNode; readonly paging?: ChatPaging | undefined; readonly targetLabel?: ChatFeatureProps['targetLabel'] }) => ReactNode;\n  readonly afterSend?: () => void;\n}\n\nexport interface PiChatProps extends ChatFeatureProps {\n  /** Optional host transcript. Absent: native rows, history and scroll behavior are unchanged. */\n  readonly timeline?: ChatTimeline | undefined;\n  /** Authorized host errors may provide their own message. */\n  readonly renderConnectionError?: ((error: unknown) => ReactNode) | undefined;\n  readonly controller: ChatController;\n  /** Where this chat is shown, reported with each submit (advisory, never authority). `docked` by default; a host that floats or tucks the same chat in a drawer says `floating`. */\n  readonly placement?: ChatPlacement | undefined;\n  /** Every word the chat shows (title, placeholder, buttons, notices, empty states): a partial object over `defaultChatLabels`. */\n  /** The chat's language: `en` (default) or `fr`. `labels` override any of its words. */\n  readonly locale?: ChatLocale | undefined;\n  readonly labels?: Partial<ChatLabels> | undefined;\n  /**\n   * How a message looks. `default` (today): my message is a muted bubble on the right, the reply plain text. `messaging`: a messenger look\n   * for a one-to-one conversation: my message a primary bubble on the right, the reply a muted bubble on the left, a tail on the first\n   * bubble of each run and the time inside. Tool steps, traces, voice and cards are unchanged. Theme tokens only.\n   */\n  readonly messageStyle?: 'default' | 'messaging' | undefined;\n  /** `mode=\"developer\"`: the host's per-turn `answeredBy` for a reply, shown under it as « answered by provider/model » (and « fallback: reason »). Absent or undefined: the reply's own provider/model. */\n  readonly answeredBy?: ((reply: ReplyRef) => AnsweredBy | undefined) | undefined;\n  /** The chat's icons (send, stop, history, attach, …): any component taking `className`, over `defaultChatIcons`. */\n  readonly icons?: Partial<ChatIcons> | undefined;\n  /** The agent's avatar (an image or an icon) before the title in the header, and in the empty state instead of the agent icon. */\n  readonly avatar?: ReactNode;\n  /** Host actions in the header beside History: `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids `chat-action-<id>`, the menu `chat-action-more`. */\n  readonly headerActions?: readonly BlockAction[] | undefined;\n  /** `false` lets the host supply one shared header around chat and viewers. Default true. */\n  readonly header?: boolean;\n  readonly className?: string;\n  /** Pad the chat's bottom by how far it reaches below the visual viewport (the phone's soft keyboard). Default true; `false` for a host that already follows the keyboard itself, such as a bottom drawer whose lower part sits off screen by design. */\n  readonly keyboardInset?: boolean;\n  readonly decisions?: ReactNode;\n  readonly controls?: ReactNode;\n  /** Host controls at the end of the composer bar (for example a microphone), like AmbientChat's tools slot. */\n  readonly tools?: ReactNode;\n  /** Host controls at the left edge of the composer bar, before \"+\" (for example an app's own menu). Absent: nothing changes. */\n  readonly composerStart?: ReactNode;\n  /** With `voiceMessage`: the microphone takes Send's place while there is nothing to send, and Send comes back with the first character or file (WhatsApp's composer). Default false. */\n  readonly voiceReplacesSend?: boolean;\n  /** Hold-to-send one retained audio upload plus transcript. Omit to keep the existing composer unchanged. */\n  readonly voiceMessage?: VoiceMessageConfig | undefined;\n  /** Local voice rows owned by the shell's shared microphone; rendered with the native transcript, never the composer. */\n  readonly pendingVoice?: readonly PendingVoice[] | undefined;\n  /** Host content under the composer (for example a collapsed list of the person's requests). Absent: nothing is shown. */\n  readonly belowComposer?: ReactNode;\n  /** Rendered before the title in the header (for example a menu button on narrow screens). */\n  readonly headerStart?: ReactNode;\n  readonly onFiles?: FilesHandler;\n  /** The phone camera's Take a photo entry for an `onFiles` chat (`CameraSheet` of `pi-chat-attachments`); with `attachments`, set `attachments.Camera` instead. */\n  readonly camera?: AttachmentsConfig['Camera'];\n  /** Shown instead of the default empty state before the first message. */\n  readonly emptyState?: ReactNode;\n  readonly suggestions?: readonly Suggestion[];\n  /** Past conversations. The header's History button then opens a searchable list with the open one marked and a New action. Omit it and History pages through the earlier records of this conversation. */\n  readonly conversations?: ConversationsConfig;\n  /**\n   * `false`: the host shows `conversations` itself (for example the `pi-app` sessions pane), so History pages through the earlier records of this\n   * conversation while replies keep their Fork button (`conversations.fork`). Default `true`: History opens the list.\n   */\n  readonly historyList?: boolean;\n  /** Show the header History button. Default true; paging remains available through the controller. */\n  readonly showHistory?: boolean;\n  /** Empty desktop composition. `centered` puts the composer beneath the greeting; `docked` keeps the former layout. Phones always dock it. */\n  readonly emptyLayout?: 'centered' | 'docked';\n  /** Two-row reference composer by default. Explicitly select `pill`, `stacked` or `inline` for the earlier layouts. */\n  readonly composerLayout?: ComposerProps['layout'];\n  /** A shell-owned capture uses the same recording-row replacement as native voice messages. */\n  readonly composerRecording?: ReactNode;\n  /** Shared host composer presentation over the normal kit session props. */\n  readonly renderComposer?: (props: ComposerProps) => ReactNode;\n  /** A conversation title, separate from the agent name, with optional click-to-rename. */\n  readonly conversationTitle?: string | undefined;\n  readonly onRenameTitle?: ((title: string) => void | Promise<void>) | undefined;\n  /** Show the header connection badge. Default false; connection state still controls actions and failures stay visible. */\n  readonly showConnectionStatus?: boolean;\n  /** The optional annotate toggle and notes chip in the composer (the registry `feedback` item's `useComposerFeedback`). Omit it and nothing changes. */\n  readonly feedback?: ComposerFeedback;\n  /** Send-time context without the annotate toggle/count UI. Uses the same native admission and restoration path. */\n  readonly sendContext?: import('@hachej/boring-ui-kit/chat-react').ChatSessionFeedback;\n  /** Keeps the composer's half-typed message in localStorage under this key (a conversation id), across reloads and tabs; see `useChatDraft`. Omit it and nothing is stored. */\n  readonly draftKey?: string | undefined;\n}\n\ntype TranscriptRow = { readonly key: string; readonly kind: 'native'; readonly row: Row }\n  | { readonly key: string; readonly kind: 'voice'; readonly voice: PendingVoice };\n\n/** Borrows a concrete native controller; unmount releases presentation and uploads only. */\nexport function PiChat(props: PiChatProps) {\n  const active = useRef(props.controller);\n  useLayoutEffect(() => { active.current = props.controller; });\n  // A new controller or a new voice recorder hook starts a fresh session, so the recorder's hooks keep their order.\n  const recorder = props.voiceMessage?.useRecorder ?? noVoice;\n  const [mount, setMount] = useState({ controller: props.controller, recorder, sequence: 0 });\n  if (mount.controller !== props.controller || mount.recorder !== recorder) setMount({ controller: props.controller, recorder, sequence: mount.sequence + 1 });\n  const text = useMergedText(props.labels, props.icons, chatTextFor(props.locale));\n  return <ChatTextProvider value={text}><MessageScrollerProvider key={mount.sequence} autoScroll><PiChatSession {...props} activeController={active} /></MessageScrollerProvider></ChatTextProvider>;\n}\n\nfunction ConnectionBadge({ kind }: { readonly kind: string }) {\n  const { labels } = useChatText();\n  const live = kind === 'connected';\n  return <Badge variant={live ? 'outline' : 'secondary'} data-testid=\"connection\" data-state={kind} role=\"status\">\n    {live ? labels.live : kind === 'connecting' || kind === 'idle' ? labels.connecting : labels.reconnecting}\n  </Badge>;\n}\n\n/** No voice message: without `voiceMessage.useRecorder` (from `pi-chat-voice`) the chat records nothing. */\nconst silent: VoiceMessageHandle = { canStart: false, phase: 'idle', seconds: 0, captureSequence: 0, problem: undefined, pending: [], start: () => {}, finish: () => {}, cancel: () => {} };\nconst noVoice: VoiceRecorderHook = () => silent;\n/** A shell's pending voice row when no `voiceMessage.Bubble` is plugged in: nothing to draw. */\nfunction NoVoiceBubble(_: { readonly pending: PendingVoice | undefined }) { return null; }\n\nfunction PiChatSession({ controller, placement = 'docked', mode = 'expert', presentation, voiceReplay, targetLabel, sentContent, messageStyle = 'default', answeredBy, className, keyboardInset = true, actions, avatar, headerActions, header = true, decisions, controls, tools, composerStart, voiceReplacesSend = false, voiceMessage, pendingVoice, belowComposer, composerChips, composerHeader, composerHasContent, onPickFiles, timeline, renderConnectionError, headerStart, renderEntry, hideLine, displayLimit, paging, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions,\n  onOpenImage, onCopy, onComposerKeyDown, onFiles, camera, fileAccept = 'image/*', emptyState, suggestions, messageActions, replyFooter, slash, mentions, attachments, model, effort, artifacts, conversations, historyList = true, showHistory = true, showConnectionStatus = false, emptyLayout = 'centered', composerLayout = 'card', composerRecording, renderComposer, conversationTitle, onRenameTitle, feedback, sendContext, draftKey, onOpenFile, fileChanges, pasteToFile, activeController: active }: PiChatProps & { readonly activeController: { readonly current: ChatController } }) {\n  const { labels, icons } = useChatText();\n  useChatDraft(controller, draftKey);\n  useChatPlacement(controller, placement);\n  const { title } = labels;\n  const [pickingConversation, setPickingConversation] = useState(false);\n  const scrollToBottom = useRef<() => void>(() => {});\n  const useRecorder = voiceMessage?.useRecorder ?? noVoice;\n  // eslint-disable-next-line react-hooks/refs -- the recorder is the host's hook, picked by prop, so the compiler cannot see it calls admitted only after a recording is admitted, never during render.\n  const voice = useRecorder({ controller, config: voiceMessage, attachments, labels, activeController: active, admitted: () => timeline ? timeline.afterSend?.() : scrollToBottom.current() });\n  // A reply's Fork button calls the host's latest `fork`; the row context changes only when forking is switched on or off.\n  const fork = useRef(conversations?.fork);\n  useLayoutEffect(() => { fork.current = conversations?.fork; });\n  const canFork = Boolean(conversations?.fork);\n  const rowExtras = useMemo(() => canFork || messageStyle === 'messaging' || answeredBy ? { ...(canFork ? { onFork: (entryId: string) => { void fork.current?.(entryId).catch(() => {}); } } : {}), ...(messageStyle === 'messaging' ? { messageStyle } : {}), ...(answeredBy ? { answeredBy } : {}) } : undefined, [canFork, messageStyle, answeredBy]);\n  const session = useChatSession({ controller, activeController: active, mode, presentation, voiceReplay, targetLabel, sentContent, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, camera, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend: () => timeline ? timeline.afterSend?.() : scrollToBottom.current(), feedback, sendContext, rowExtras, onOpenFile, fileChanges, pasteToFile, composerChips, composerHeader, composerHasContent, onPickFiles });\n  const { state, derived, rows: nativeRows, queued, queueActions, working, waitingForAnswer, connected, error, act, textarea, rowContext, composer, files, loading } = session;\n  const voiceRows = pendingVoice ?? voice.pending;\n  const VoiceButton = voiceMessage?.Button, VoiceBubbleView = voiceMessage?.Bubble ?? NoVoiceBubble;\n  const rows = useMemo(() => messageStyle === 'messaging' ? markLeads(nativeRows) : nativeRows, [nativeRows, messageStyle]);\n  const transcriptRows: readonly TranscriptRow[] = [\n    ...rows.map(row => ({ key: row.key, kind: 'native' as const, row })),\n    ...voiceRows.map(voice => ({ key: `voice:${voice.id}`, kind: 'voice' as const, voice })),\n  ];\n  const pendingRows = voiceRows.map(item => <MessageScrollerItem key={`voice:${item.id}`} messageId={`voice:${item.id}`} data-local-voice=\"\" className=\"[content-visibility:visible]\"><VoiceBubbleView pending={item} /></MessageScrollerItem>);\n  const empty = (timeline ? timeline.count === 0 : session.empty) && voiceRows.length === 0;\n  const conversationFiles = new Map(files.map(file => [file.id, file]));\n  for (const item of voiceRows) if (item.path && !conversationFiles.has(`file:${item.path}`)) {\n    const path = item.path, open = onOpenFile ?? mentions?.open;\n    conversationFiles.set(`file:${path}`, { id: `file:${path}`, name: displayName(path), open: open ? () => open(path) : undefined });\n  }\n  const { pinned } = derived;\n  const transcript = useTranscript(transcriptRows, displayLimit ?? paging?.first ?? PAGE_FIRST, paging?.more ?? PAGE_MORE, { state: state.history, connected: !state.disposed && connected, load: controller.loadEarlier }, displayLimit === undefined);\n  const { stick, hidden } = transcript, { scrollRef, isAtBottom } = stick;\n  useLayoutEffect(() => { scrollToBottom.current = () => { transcript.reset(); void stick.scrollToBottom('instant'); }; });\n  const visible = transcript.visible(transcriptRows);\n  // Native rows come before pending voice rows, so the hidden ones are the oldest native rows.\n  const chunks = useRowChunks(useMemo(() => rows.slice(Math.min(rows.length, hidden)), [rows, hidden]));\n  const { barStart, barNote } = session.pickers();\n  const connectionKind = state.connection.kind;\n  const [renamingTitle, setRenamingTitle] = useState(false);\n  const [titleError, setTitleError] = useState(false);\n  const page = useRef<HTMLElement>(null);\n  useKeyboardInset(page, keyboardInset);\n\n  return <section ref={page} data-boring=\"pi-chat\" data-connection={connectionKind} data-empty={empty && !loading ? emptyLayout : undefined} aria-label={title} className={cn('pi-chat relative box-border flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-background text-foreground ', keyboardInset && 'max-md:pb-(--composer-keyboard-inset)', empty && emptyLayout === 'centered' && 'md:justify-center', className)}>\n    {header && <header className={cn(empty && emptyLayout === 'centered' && 'md:absolute md:inset-x-0 md:top-0', 'flex h-13 shrink-0 items-center gap-2 px-3 md:gap-3 md:px-4')}>\n      {headerStart}\n      {avatar && <Avatar data-testid=\"chat-avatar\" className=\"overflow-hidden\"><AvatarFallback className=\"*:max-h-full *:max-w-full\">{avatar}</AvatarFallback></Avatar>}\n      {renamingTitle && onRenameTitle ? <form className=\"min-w-0 flex-1\" onSubmit={event => { event.preventDefault(); const value = new FormData(event.currentTarget).get('title')?.toString().trim(); if (value) { setTitleError(false); void Promise.resolve().then(() => onRenameTitle(value)).catch(() => setTitleError(true)); } setRenamingTitle(false); }}>\n        <Input name=\"title\" aria-label={labels.conversationName} maxLength={200} autoFocus defaultValue={conversationTitle ?? title} onBlur={() => setRenamingTitle(false)} onKeyDown={event => { if (event.key === 'Escape') setRenamingTitle(false); }} className=\"w-full min-w-0\" />\n      </form> : <h2 className=\"m-0 min-w-0 flex-1 truncate font-(family-name:--chat-display) text-sm font-medium tracking-tight max-md:text-center\">{onRenameTitle ? <Button variant=\"ghost\" className=\"max-w-full\" onClick={() => setRenamingTitle(true)}><span className=\"truncate\">{conversationTitle ?? title}</span></Button> : conversationTitle ?? title}</h2>}\n      {showHistory && conversations && historyList && <Button variant=\"ghost\" size=\"sm\" data-testid=\"history-open\" aria-haspopup=\"dialog\" aria-expanded={pickingConversation} disabled={state.disposed}\n        onClick={() => setPickingConversation(open => !open)}><icons.history data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.history}</Button>}\n      <BlockActions actions={headerActions} testId=\"chat-action\" menuLabel={labels.moreActions} />\n      {showConnectionStatus && <ConnectionBadge kind={connectionKind} />}\n      {controls}\n    </header>}\n\n    {titleError && <p role=\"alert\" className=\"m-0 shrink-0 px-4 py-2 text-sm text-destructive\">{labels.actionFailed}</p>}\n    {decisions && <><div data-boring=\"required-decisions\" className=\"shrink-0 px-4 py-2\">{decisions}</div><Separator /></>}\n    {pinned.length > 0 && <><aside aria-label={labels.requiredActions} className=\"shrink-0 space-y-2 px-4 py-2\">{pinned.map(card => <div key={card.key}>{card.content}</div>)}</aside><Separator /></>}\n    {(connectionKind === 'error' || connectionKind === 'closed') && <div className=\"shrink-0 px-4 pt-2\">\n      <ChatConnectionNotice state={state} renderConnectionError={renderConnectionError} onReconnect={() => act(controller.connect)} /></div>}\n    {pickingConversation && conversations && historyList && <ConversationHistory conversations={conversations} onClose={() => setPickingConversation(false)} />}\n\n    <div data-testid=\"conversation-content\" className={cn('relative min-h-0 flex-1', empty && emptyLayout === 'centered' && 'md:min-h-60 md:flex-none')}>\n      {timeline ? timeline.render({ focusComposer: () => textarea.current?.focus(), openFile: onOpenFile ?? mentions?.open, pendingVoice: pendingRows, paging, targetLabel }) : <MessageScroller>\n        <MessageScrollerViewport ref={scrollRef} data-testid=\"transcript-scroll\" aria-label={labels.messages} className=\"min-h-0 flex-1 scrollbar-thumb-border scrollbar-track-transparent\">\n          {!empty && (hidden > 0 || state.history.kind !== 'idle' || (viewHasEarlier(state.view) ?? state.view?.entries.some(entry => entry.head !== undefined))) && <TranscriptHistory history={state.history} connected={!state.disposed && connected} onLoad={transcript.reveal} sentinelRef={transcript.sentinelRef} hidden={hidden} loaded={transcript.loaded} />}\n          <div className=\"mx-auto w-full max-w-[720px] px-4 pt-6 pb-8 md:px-6\">\n          <MessageScrollerContent aria-label={labels.messages} aria-live=\"polite\" data-testid=\"transcript\">\n            {chunks.map(run => <TranscriptChunk key={run[0]!.key} rows={run} context={rowContext} />)}\n            {visible.map(item => item.kind === 'voice' && <MessageScrollerItem key={item.key} messageId={item.key} data-local-voice=\"\" className=\"[content-visibility:visible]\"><VoiceBubbleView pending={item.voice} /></MessageScrollerItem>)}\n          </MessageScrollerContent>\n          </div>\n        </MessageScrollerViewport>\n        {!empty && !isAtBottom && <div data-testid=\"transcript-navigation\" className=\"flex shrink-0 items-center justify-center py-1\"><MessageScrollerButton className=\"static inset-auto translate-x-0\" data-testid=\"jump-latest\" aria-label={labels.jumpToLatest} title={labels.jumpToLatest} onClick={transcript.reset}><icons.jumpToLatest aria-hidden=\"true\" /></MessageScrollerButton></div>}\n      </MessageScroller>}\n      {(empty || loading) && <div className=\"pointer-events-none absolute inset-0\">\n        <div className=\"pointer-events-auto h-full\">\n          {loading ? <p role=\"status\" data-testid=\"loading\" className=\"flex h-full items-center justify-center gap-2 text-sm text-muted-foreground\"><Loader2Icon className=\"size-4 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{labels.loading}</p>\n            : emptyState ?? <EmptyState title={title} description={labels.emptyDescription} {...(avatar ? { avatar } : {})} {...(suggestions ? { suggestions } : {})} onSelect={text => { controller.setText(text); textarea.current?.focus(); }} />}\n        </div></div>}\n    </div>\n\n    <footer data-testid=\"composer-dock\" className=\"shrink-0 px-4 pt-2 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-6\">\n      <div className=\"mx-auto w-full max-w-[720px] space-y-2\">\n        <div {...(session.natural ? {} : { 'aria-live': 'polite' as const })} className=\"space-y-2 empty:hidden\">\n          <ChatStatusLine natural={session.natural} working={working} waitingForAnswer={waitingForAnswer} derived={derived} stop={state.stop} sending={session.sending} />\n          <ChatNotices natural={session.natural} state={state} error={error} onReconcile={() => act(controller.reconcile)} onRetry={() => act(controller.retrySameRequest)} />\n        </div>\n        <div>\n          <ConversationFiles files={[...conversationFiles.values()]} />\n          <MessageQueue items={queued} sending={state.outbox} withdraw={actions?.withdraw} actions={queueActions} />\n          {voice.problem && <p role=\"alert\" data-testid=\"voice-message-problem\">{voice.problem}</p>}\n          {(renderComposer ?? (value => <Composer {...value} />))({ ...composer,\n            recording: composerRecording ?? (VoiceButton && (voice.phase === 'starting' || voice.phase === 'recording') ? <VoiceButton voice={voice} /> : undefined), layout: composerLayout,\n            placeholder: labels.placeholder === 'Message the agent…' ? `Message ${title}…` : labels.placeholder, barStart, barNote, start: composerStart,\n            ...(voiceMessage && VoiceButton && voiceReplacesSend ? { barEnd: tools, whenEmpty: <VoiceButton voice={voice} primary disabled={state.disposed || !connected || state.send.kind === 'unknown'} /> }\n              : { barEnd: voiceMessage && VoiceButton ? <>{tools}<VoiceButton voice={voice} disabled={state.disposed || !connected || state.send.kind === 'unknown'} /></> : tools }),\n          })}\n          {belowComposer !== undefined && <div data-testid=\"below-composer\" className=\"pt-2\">{belowComposer}</div>}\n        </div>\n      </div>\n    </footer>\n  </section>;\n}\n",
+      "content": "'use client';\n\nimport { useKeyboardInset } from '../utils/use-media';\n\nimport { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { ReactNode } from 'react';\nimport { viewHasEarlier } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { Loader2Icon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { MessageScroller, MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton } from '@/components/ui/message-scroller';\nimport { BlockActions } from '../button/actions';\nimport type { BlockAction } from '../button/actions';\nimport { Composer } from './composer';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport { ConversationFiles } from './conversation-files';\nimport type { AnsweredBy, AttachmentsConfig, ConversationsConfig, PendingVoice, ReplyRef, VoiceMessageConfig, VoiceMessageHandle, VoiceRecorderHook } from './config';\nimport { displayName } from '@hachej/boring-ui-kit/chat-text';\nimport { EmptyState } from './empty-state';\nimport type { Suggestion } from './empty-state';\nimport { ConversationHistory, TranscriptHistory } from './history';\nimport { TranscriptChunk } from './message';\nimport { markLeads } from './rows';\nimport type { Row } from './rows';\nimport { MessageQueue } from './queue';\nimport { ChatNotices, ChatConnectionNotice, ChatStatusLine } from './notice';\nimport { PAGE_FIRST, PAGE_MORE, useChatSession, useRowChunks, useTranscript } from './session';\nimport { useChatDraft } from './use-chat-draft';\nimport { useChatPlacement } from './use-remote-chat';\nimport type { ChatPlacement } from './use-remote-chat';\nimport type { ChatFeatureProps, ChatPaging, FilesHandler } from './session';\nimport { ChatTextProvider, useChatText, useMergedText } from './labels';\nimport { chatTextFor } from './locale';\nimport type { ChatLocale } from './locale';\nimport type { ChatIcons, ChatLabels } from './labels';\nimport { cn } from '../utils/utils';\n\nexport type { ChatPaging, PiChatActions } from './session';\nexport type { ChatCard, Mode } from './rows';\nexport type { AnswerOutcome, ApprovalCardProps, ApprovalDecision, ChatArtifact, ChatArtifactCardProps, ChatArtifactsConfig, ChatCards, QuestionCardProps, SubagentRenderer } from './config';\nexport { ASK_USER_TOOL } from './config';\nexport type { ChatTextPart } from './message';\nexport type { MentionPickerProps, ModelEffortPickerProps, SlashPickerProps } from './config';\nexport type { PendingVoice, PendingVoiceBubbleProps, VoiceMessageButtonProps, VoiceMessageHandle } from './config';\nexport type { CameraSheetProps, VoiceRecorderHook, VoiceRecorderOptions } from './config';\nexport { voiceClock } from './config';\nexport { ChatTextProvider } from './labels';\nexport type { CommandMention, CommandMentions } from './config';\nexport type { Suggestion } from './empty-state';\nexport { ConversationList, relativeTime } from './history';\nexport { defaultChatIcons, defaultChatLabels } from './labels';\nexport type { ChatIcons, ChatLabels } from './labels';\nexport { frenchChatLabels } from './labels-fr';\nexport { chatTextFor } from './locale';\nexport type { ChatLocale } from './locale';\nexport { BlockActions } from '../button/actions';\nexport { useChatDraft } from './use-chat-draft';\nexport { useConversations } from './use-conversations';\nexport type { ChatController, ChatSnapshot } from '@hachej/boring-ui-kit/native-chat';\nexport { MessageText, VoiceBubble } from './message';\nexport { useTranscript } from './session';\nexport type { BlockAction, BlockIcon } from '../button/actions';\nexport type { AnsweredBy, AudioUrlRead, VoiceMessageConfig, AttachmentsConfig, ConversationItem, ConversationsConfig, EffortConfig, FileKind, MentionResult, MentionsConfig, ModelConfig, ModelRef, PasteToFile, PreviewRead, ReplyRef, SlashApi, SlashCommand, SlashConfig, SlashSkill, UploadResult } from './config';\n\nexport interface ChatTimeline {\n  readonly count: number;\n  readonly render: (context: { readonly focusComposer: () => void; readonly openFile?: ((path: string) => void) | undefined; readonly pendingVoice?: ReactNode; readonly paging?: ChatPaging | undefined; readonly targetLabel?: ChatFeatureProps['targetLabel'] }) => ReactNode;\n  readonly afterSend?: () => void;\n}\n\nexport interface PiChatProps extends ChatFeatureProps {\n  /** Optional host transcript. Absent: native rows, history and scroll behavior are unchanged. */\n  readonly timeline?: ChatTimeline | undefined;\n  /** Authorized host errors may provide their own message. */\n  readonly renderConnectionError?: ((error: unknown) => ReactNode) | undefined;\n  readonly controller: ChatController;\n  /** Where this chat is shown, reported with each submit (advisory, never authority). `docked` by default; a host that floats or tucks the same chat in a drawer says `floating`. */\n  readonly placement?: ChatPlacement | undefined;\n  /** Every word the chat shows (title, placeholder, buttons, notices, empty states): a partial object over `defaultChatLabels`. */\n  /** The chat's language: `en` (default) or `fr`. `labels` override any of its words. */\n  readonly locale?: ChatLocale | undefined;\n  readonly labels?: Partial<ChatLabels> | undefined;\n  /**\n   * How a message looks. `default` (today): my message is a muted bubble on the right, the reply plain text. `messaging`: a messenger look\n   * for a one-to-one conversation: my message a primary bubble on the right, the reply a muted bubble on the left, a tail on the first\n   * bubble of each run and the time inside. Tool steps, traces, voice and cards are unchanged. Theme tokens only.\n   */\n  readonly messageStyle?: 'default' | 'messaging' | undefined;\n  /** `mode=\"developer\"`: the host's per-turn `answeredBy` for a reply, shown under it as « answered by provider/model » (and « fallback: reason »). Absent or undefined: the reply's own provider/model. */\n  readonly answeredBy?: ((reply: ReplyRef) => AnsweredBy | undefined) | undefined;\n  /** The chat's icons (send, stop, history, attach, …): any component taking `className`, over `defaultChatIcons`. */\n  readonly icons?: Partial<ChatIcons> | undefined;\n  /** The agent's avatar (an image or an icon) before the title in the header, and in the empty state instead of the agent icon. */\n  readonly avatar?: ReactNode;\n  /** Host actions in the header beside History: `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids `chat-action-<id>`, the menu `chat-action-more`. */\n  readonly headerActions?: readonly BlockAction[] | undefined;\n  /** `false` lets the host supply one shared header around chat and viewers. Default true. */\n  readonly header?: boolean;\n  readonly className?: string;\n  /** Pad the chat's bottom by how far it reaches below the visual viewport (the phone's soft keyboard). Default true; `false` for a host that already follows the keyboard itself, such as a bottom drawer whose lower part sits off screen by design. */\n  readonly keyboardInset?: boolean;\n  readonly decisions?: ReactNode;\n  readonly controls?: ReactNode;\n  /** Host controls at the end of the composer bar (for example a microphone), like AmbientChat's tools slot. */\n  readonly tools?: ReactNode;\n  /** Host controls at the left edge of the composer bar, before \"+\" (for example an app's own menu). Absent: nothing changes. */\n  readonly composerStart?: ReactNode;\n  /** With `voiceMessage`: the microphone takes Send's place while there is nothing to send, and Send comes back with the first character or file (WhatsApp's composer). Default false. */\n  readonly voiceReplacesSend?: boolean;\n  /** Hold-to-send one retained audio upload plus transcript. Omit to keep the existing composer unchanged. */\n  readonly voiceMessage?: VoiceMessageConfig | undefined;\n  /** Local voice rows owned by the shell's shared microphone; rendered with the native transcript, never the composer. */\n  readonly pendingVoice?: readonly PendingVoice[] | undefined;\n  /** Host content under the composer (for example a collapsed list of the person's requests). Absent: nothing is shown. */\n  readonly belowComposer?: ReactNode;\n  /** Rendered before the title in the header (for example a menu button on narrow screens). */\n  readonly headerStart?: ReactNode;\n  readonly onFiles?: FilesHandler;\n  /** The phone camera's Take a photo entry for an `onFiles` chat (`CameraSheet` of `pi-chat-attachments`); with `attachments`, set `attachments.Camera` instead. */\n  readonly camera?: AttachmentsConfig['Camera'];\n  /** Shown instead of the default empty state before the first message. */\n  readonly emptyState?: ReactNode;\n  readonly suggestions?: readonly Suggestion[];\n  /** Past conversations. The header's History button then opens a searchable list with the open one marked and a New action. Omit it and History pages through the earlier records of this conversation. */\n  readonly conversations?: ConversationsConfig;\n  /**\n   * `false`: the host shows `conversations` itself (for example the `pi-app` sessions pane), so History pages through the earlier records of this\n   * conversation while replies keep their Fork button (`conversations.fork`). Default `true`: History opens the list.\n   */\n  readonly historyList?: boolean;\n  /** Show the header History button. Default true; paging remains available through the controller. */\n  readonly showHistory?: boolean;\n  /** Empty desktop composition. `centered` puts the composer beneath the greeting; `docked` keeps the former layout. Phones always dock it. */\n  readonly emptyLayout?: 'centered' | 'docked';\n  /** Two-row reference composer by default. Explicitly select `pill`, `stacked` or `inline` for the earlier layouts. */\n  readonly composerLayout?: ComposerProps['layout'];\n  /** A shell-owned capture uses the same recording-row replacement as native voice messages. */\n  readonly composerRecording?: ReactNode;\n  /** Shared host composer presentation over the normal kit session props. */\n  readonly renderComposer?: (props: ComposerProps) => ReactNode;\n  /** A conversation title, separate from the agent name, with optional click-to-rename. */\n  readonly conversationTitle?: string | undefined;\n  readonly onRenameTitle?: ((title: string) => void | Promise<void>) | undefined;\n  /** Show the header connection badge. Default false; connection state still controls actions and failures stay visible. */\n  readonly showConnectionStatus?: boolean;\n  /** The optional annotate toggle and notes chip in the composer (the registry `feedback` item's `useComposerFeedback`). Omit it and nothing changes. */\n  readonly feedback?: ComposerFeedback;\n  /** Send-time context without the annotate toggle/count UI. Uses the same native admission and restoration path. */\n  readonly sendContext?: import('@hachej/boring-ui-kit/chat-react').ChatSessionFeedback;\n  /** Keeps the composer's half-typed message in localStorage under this key (a conversation id), across reloads and tabs; see `useChatDraft`. Omit it and nothing is stored. */\n  readonly draftKey?: string | undefined;\n}\n\ntype TranscriptRow = { readonly key: string; readonly kind: 'native'; readonly row: Row }\n  | { readonly key: string; readonly kind: 'voice'; readonly voice: PendingVoice };\n\nconst DEVELOPER_SWITCH = 'boring-ui:chat-mode';\n/** `?chatMode=developer` turns developer mode on in this browser until `?chatMode=expert`: the same transcript the browser already holds, drawn with its details. */\nfunction developerSwitch(): boolean {\n  if (typeof window === 'undefined') return false;\n  const asked = new URLSearchParams(window.location.search).get('chatMode');\n  try {\n    if (asked === 'developer') window.localStorage.setItem(DEVELOPER_SWITCH, 'developer');\n    if (asked === 'expert') window.localStorage.removeItem(DEVELOPER_SWITCH);\n    return asked !== 'expert' && (asked === 'developer' || window.localStorage.getItem(DEVELOPER_SWITCH) === 'developer');\n  } catch { return asked === 'developer'; }\n}\nconst neverChanges = () => () => {};\n\n/** Borrows a concrete native controller; unmount releases presentation and uploads only. */\nexport function PiChat(hostProps: PiChatProps) {\n  const developer = useSyncExternalStore(neverChanges, developerSwitch, () => false);\n  const props = useMemo<PiChatProps>(() => {\n    if (!developer) return hostProps;\n    const { presentation: _natural, ...rest } = hostProps;\n    return { ...rest, mode: 'developer' };\n  }, [developer, hostProps]);\n  const active = useRef(props.controller);\n  useLayoutEffect(() => { active.current = props.controller; });\n  // A new controller or a new voice recorder hook starts a fresh session, so the recorder's hooks keep their order.\n  const recorder = props.voiceMessage?.useRecorder ?? noVoice;\n  const [mount, setMount] = useState({ controller: props.controller, recorder, sequence: 0 });\n  if (mount.controller !== props.controller || mount.recorder !== recorder) setMount({ controller: props.controller, recorder, sequence: mount.sequence + 1 });\n  const text = useMergedText(props.labels, props.icons, chatTextFor(props.locale));\n  return <ChatTextProvider value={text}><MessageScrollerProvider key={mount.sequence} autoScroll><PiChatSession {...props} activeController={active} /></MessageScrollerProvider></ChatTextProvider>;\n}\n\nfunction ConnectionBadge({ kind }: { readonly kind: string }) {\n  const { labels } = useChatText();\n  const live = kind === 'connected';\n  return <Badge variant={live ? 'outline' : 'secondary'} data-testid=\"connection\" data-state={kind} role=\"status\">\n    {live ? labels.live : kind === 'connecting' || kind === 'idle' ? labels.connecting : labels.reconnecting}\n  </Badge>;\n}\n\n/** No voice message: without `voiceMessage.useRecorder` (from `pi-chat-voice`) the chat records nothing. */\nconst silent: VoiceMessageHandle = { canStart: false, phase: 'idle', seconds: 0, captureSequence: 0, problem: undefined, pending: [], start: () => {}, finish: () => {}, cancel: () => {} };\nconst noVoice: VoiceRecorderHook = () => silent;\n/** A shell's pending voice row when no `voiceMessage.Bubble` is plugged in: nothing to draw. */\nfunction NoVoiceBubble(_: { readonly pending: PendingVoice | undefined }) { return null; }\n\nfunction PiChatSession({ controller, placement = 'docked', mode = 'expert', presentation, voiceReplay, targetLabel, sentContent, messageStyle = 'default', answeredBy, className, keyboardInset = true, actions, avatar, headerActions, header = true, decisions, controls, tools, composerStart, voiceReplacesSend = false, voiceMessage, pendingVoice, belowComposer, composerChips, composerHeader, composerHasContent, onPickFiles, timeline, renderConnectionError, headerStart, renderEntry, hideLine, displayLimit, paging, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions,\n  onOpenImage, onCopy, onComposerKeyDown, onFiles, camera, fileAccept = 'image/*', emptyState, suggestions, messageActions, replyFooter, slash, mentions, attachments, model, effort, artifacts, conversations, historyList = true, showHistory = true, showConnectionStatus = false, emptyLayout = 'centered', composerLayout = 'card', composerRecording, renderComposer, conversationTitle, onRenameTitle, feedback, sendContext, draftKey, onOpenFile, fileChanges, pasteToFile, activeController: active }: PiChatProps & { readonly activeController: { readonly current: ChatController } }) {\n  const { labels, icons } = useChatText();\n  useChatDraft(controller, draftKey);\n  useChatPlacement(controller, placement);\n  const { title } = labels;\n  const [pickingConversation, setPickingConversation] = useState(false);\n  const scrollToBottom = useRef<() => void>(() => {});\n  const useRecorder = voiceMessage?.useRecorder ?? noVoice;\n  // eslint-disable-next-line react-hooks/refs -- the recorder is the host's hook, picked by prop, so the compiler cannot see it calls admitted only after a recording is admitted, never during render.\n  const voice = useRecorder({ controller, config: voiceMessage, attachments, labels, activeController: active, admitted: () => timeline ? timeline.afterSend?.() : scrollToBottom.current() });\n  // A reply's Fork button calls the host's latest `fork`; the row context changes only when forking is switched on or off.\n  const fork = useRef(conversations?.fork);\n  useLayoutEffect(() => { fork.current = conversations?.fork; });\n  const canFork = Boolean(conversations?.fork);\n  const rowExtras = useMemo(() => canFork || messageStyle === 'messaging' || answeredBy ? { ...(canFork ? { onFork: (entryId: string) => { void fork.current?.(entryId).catch(() => {}); } } : {}), ...(messageStyle === 'messaging' ? { messageStyle } : {}), ...(answeredBy ? { answeredBy } : {}) } : undefined, [canFork, messageStyle, answeredBy]);\n  const session = useChatSession({ controller, activeController: active, mode, presentation, voiceReplay, targetLabel, sentContent, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, camera, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend: () => timeline ? timeline.afterSend?.() : scrollToBottom.current(), feedback, sendContext, rowExtras, onOpenFile, fileChanges, pasteToFile, composerChips, composerHeader, composerHasContent, onPickFiles });\n  const { state, derived, rows: nativeRows, queued, queueActions, working, waitingForAnswer, connected, error, act, textarea, rowContext, composer, files, loading } = session;\n  const voiceRows = pendingVoice ?? voice.pending;\n  const VoiceButton = voiceMessage?.Button, VoiceBubbleView = voiceMessage?.Bubble ?? NoVoiceBubble;\n  const rows = useMemo(() => messageStyle === 'messaging' ? markLeads(nativeRows) : nativeRows, [nativeRows, messageStyle]);\n  const transcriptRows: readonly TranscriptRow[] = [\n    ...rows.map(row => ({ key: row.key, kind: 'native' as const, row })),\n    ...voiceRows.map(voice => ({ key: `voice:${voice.id}`, kind: 'voice' as const, voice })),\n  ];\n  const pendingRows = voiceRows.map(item => <MessageScrollerItem key={`voice:${item.id}`} messageId={`voice:${item.id}`} data-local-voice=\"\" className=\"[content-visibility:visible]\"><VoiceBubbleView pending={item} /></MessageScrollerItem>);\n  const empty = (timeline ? timeline.count === 0 : session.empty) && voiceRows.length === 0;\n  const conversationFiles = new Map(files.map(file => [file.id, file]));\n  for (const item of voiceRows) if (item.path && !conversationFiles.has(`file:${item.path}`)) {\n    const path = item.path, open = onOpenFile ?? mentions?.open;\n    conversationFiles.set(`file:${path}`, { id: `file:${path}`, name: displayName(path), open: open ? () => open(path) : undefined });\n  }\n  const { pinned } = derived;\n  const transcript = useTranscript(transcriptRows, displayLimit ?? paging?.first ?? PAGE_FIRST, paging?.more ?? PAGE_MORE, { state: state.history, connected: !state.disposed && connected, load: controller.loadEarlier }, displayLimit === undefined);\n  const { stick, hidden } = transcript, { scrollRef, isAtBottom } = stick;\n  useLayoutEffect(() => { scrollToBottom.current = () => { transcript.reset(); void stick.scrollToBottom('instant'); }; });\n  const visible = transcript.visible(transcriptRows);\n  // Native rows come before pending voice rows, so the hidden ones are the oldest native rows.\n  const chunks = useRowChunks(useMemo(() => rows.slice(Math.min(rows.length, hidden)), [rows, hidden]));\n  const { barStart, barNote } = session.pickers();\n  const connectionKind = state.connection.kind;\n  const [renamingTitle, setRenamingTitle] = useState(false);\n  const [titleError, setTitleError] = useState(false);\n  const page = useRef<HTMLElement>(null);\n  useKeyboardInset(page, keyboardInset);\n\n  return <section ref={page} data-boring=\"pi-chat\" data-connection={connectionKind} data-empty={empty && !loading ? emptyLayout : undefined} aria-label={title} className={cn('pi-chat relative box-border flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-background text-foreground ', keyboardInset && 'max-md:pb-(--composer-keyboard-inset)', empty && emptyLayout === 'centered' && 'md:justify-center', className)}>\n    {header && <header className={cn(empty && emptyLayout === 'centered' && 'md:absolute md:inset-x-0 md:top-0', 'flex h-13 shrink-0 items-center gap-2 px-3 md:gap-3 md:px-4')}>\n      {headerStart}\n      {avatar && <Avatar data-testid=\"chat-avatar\" className=\"overflow-hidden\"><AvatarFallback className=\"*:max-h-full *:max-w-full\">{avatar}</AvatarFallback></Avatar>}\n      {renamingTitle && onRenameTitle ? <form className=\"min-w-0 flex-1\" onSubmit={event => { event.preventDefault(); const value = new FormData(event.currentTarget).get('title')?.toString().trim(); if (value) { setTitleError(false); void Promise.resolve().then(() => onRenameTitle(value)).catch(() => setTitleError(true)); } setRenamingTitle(false); }}>\n        <Input name=\"title\" aria-label={labels.conversationName} maxLength={200} autoFocus defaultValue={conversationTitle ?? title} onBlur={() => setRenamingTitle(false)} onKeyDown={event => { if (event.key === 'Escape') setRenamingTitle(false); }} className=\"w-full min-w-0\" />\n      </form> : <h2 className=\"m-0 min-w-0 flex-1 truncate font-(family-name:--chat-display) text-sm font-medium tracking-tight max-md:text-center\">{onRenameTitle ? <Button variant=\"ghost\" className=\"max-w-full\" onClick={() => setRenamingTitle(true)}><span className=\"truncate\">{conversationTitle ?? title}</span></Button> : conversationTitle ?? title}</h2>}\n      {showHistory && conversations && historyList && <Button variant=\"ghost\" size=\"sm\" data-testid=\"history-open\" aria-haspopup=\"dialog\" aria-expanded={pickingConversation} disabled={state.disposed}\n        onClick={() => setPickingConversation(open => !open)}><icons.history data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.history}</Button>}\n      <BlockActions actions={headerActions} testId=\"chat-action\" menuLabel={labels.moreActions} />\n      {showConnectionStatus && <ConnectionBadge kind={connectionKind} />}\n      {controls}\n    </header>}\n\n    {titleError && <p role=\"alert\" className=\"m-0 shrink-0 px-4 py-2 text-sm text-destructive\">{labels.actionFailed}</p>}\n    {decisions && <><div data-boring=\"required-decisions\" className=\"shrink-0 px-4 py-2\">{decisions}</div><Separator /></>}\n    {pinned.length > 0 && <><aside aria-label={labels.requiredActions} className=\"shrink-0 space-y-2 px-4 py-2\">{pinned.map(card => <div key={card.key}>{card.content}</div>)}</aside><Separator /></>}\n    {(connectionKind === 'error' || connectionKind === 'closed') && <div className=\"shrink-0 px-4 pt-2\">\n      <ChatConnectionNotice state={state} renderConnectionError={renderConnectionError} onReconnect={() => act(controller.connect)} /></div>}\n    {pickingConversation && conversations && historyList && <ConversationHistory conversations={conversations} onClose={() => setPickingConversation(false)} />}\n\n    <div data-testid=\"conversation-content\" className={cn('relative min-h-0 flex-1', empty && emptyLayout === 'centered' && 'md:min-h-60 md:flex-none')}>\n      {timeline ? timeline.render({ focusComposer: () => textarea.current?.focus(), openFile: onOpenFile ?? mentions?.open, pendingVoice: pendingRows, paging, targetLabel }) : <MessageScroller>\n        <MessageScrollerViewport ref={scrollRef} data-testid=\"transcript-scroll\" aria-label={labels.messages} className=\"min-h-0 flex-1 scrollbar-thumb-border scrollbar-track-transparent\">\n          {!empty && (hidden > 0 || state.history.kind !== 'idle' || (viewHasEarlier(state.view) ?? state.view?.entries.some(entry => entry.head !== undefined))) && <TranscriptHistory history={state.history} connected={!state.disposed && connected} onLoad={transcript.reveal} sentinelRef={transcript.sentinelRef} hidden={hidden} loaded={transcript.loaded} />}\n          <div className=\"mx-auto w-full max-w-[720px] px-4 pt-6 pb-8 md:px-6\">\n          <MessageScrollerContent aria-label={labels.messages} aria-live=\"polite\" data-testid=\"transcript\">\n            {chunks.map(run => <TranscriptChunk key={run[0]!.key} rows={run} context={rowContext} />)}\n            {visible.map(item => item.kind === 'voice' && <MessageScrollerItem key={item.key} messageId={item.key} data-local-voice=\"\" className=\"[content-visibility:visible]\"><VoiceBubbleView pending={item.voice} /></MessageScrollerItem>)}\n          </MessageScrollerContent>\n          </div>\n        </MessageScrollerViewport>\n        {!empty && !isAtBottom && <div data-testid=\"transcript-navigation\" className=\"flex shrink-0 items-center justify-center py-1\"><MessageScrollerButton className=\"static inset-auto translate-x-0\" data-testid=\"jump-latest\" aria-label={labels.jumpToLatest} title={labels.jumpToLatest} onClick={transcript.reset}><icons.jumpToLatest aria-hidden=\"true\" /></MessageScrollerButton></div>}\n      </MessageScroller>}\n      {(empty || loading) && <div className=\"pointer-events-none absolute inset-0\">\n        <div className=\"pointer-events-auto h-full\">\n          {loading ? <p role=\"status\" data-testid=\"loading\" className=\"flex h-full items-center justify-center gap-2 text-sm text-muted-foreground\"><Loader2Icon className=\"size-4 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{labels.loading}</p>\n            : emptyState ?? <EmptyState title={title} description={labels.emptyDescription} {...(avatar ? { avatar } : {})} {...(suggestions ? { suggestions } : {})} onSelect={text => { controller.setText(text); textarea.current?.focus(); }} />}\n        </div></div>}\n    </div>\n\n    <footer data-testid=\"composer-dock\" className=\"shrink-0 px-4 pt-2 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-6\">\n      <div className=\"mx-auto w-full max-w-[720px] space-y-2\">\n        <div {...(session.natural ? {} : { 'aria-live': 'polite' as const })} className=\"space-y-2 empty:hidden\">\n          <ChatStatusLine natural={session.natural} working={working} waitingForAnswer={waitingForAnswer} derived={derived} stop={state.stop} sending={session.sending} />\n          <ChatNotices natural={session.natural} state={state} error={error} onReconcile={() => act(controller.reconcile)} onRetry={() => act(controller.retrySameRequest)} />\n        </div>\n        <div>\n          <ConversationFiles files={[...conversationFiles.values()]} />\n          <MessageQueue items={queued} sending={state.outbox} withdraw={actions?.withdraw} actions={queueActions} />\n          {voice.problem && <p role=\"alert\" data-testid=\"voice-message-problem\">{voice.problem}</p>}\n          {(renderComposer ?? (value => <Composer {...value} />))({ ...composer,\n            recording: composerRecording ?? (VoiceButton && (voice.phase === 'starting' || voice.phase === 'recording') ? <VoiceButton voice={voice} /> : undefined), layout: composerLayout,\n            placeholder: labels.placeholder === 'Message the agent…' ? `Message ${title}…` : labels.placeholder, barStart, barNote, start: composerStart,\n            ...(voiceMessage && VoiceButton && voiceReplacesSend ? { barEnd: tools, whenEmpty: <VoiceButton voice={voice} primary disabled={state.disposed || !connected || state.send.kind === 'unknown'} /> }\n              : { barEnd: voiceMessage && VoiceButton ? <>{tools}<VoiceButton voice={voice} disabled={state.disposed || !connected || state.send.kind === 'unknown'} /></> : tools }),\n          })}\n          {belowComposer !== undefined && <div data-testid=\"below-composer\" className=\"pt-2\">{belowComposer}</div>}\n        </div>\n      </div>\n    </footer>\n  </section>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/pi-chat.tsx"
     },
@@ -108,7 +108,7 @@
     },
     {
       "path": "registry/pi-chat/session.tsx",
-      "content": "'use client';\n\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord, JsonObject } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { PAGE_FIRST, PAGE_MORE, useTranscriptWindow } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatHistoryState } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, SentContent, SlashConfig } from './config';\nimport type { PasteToFile } from '@hachej/boring-ui-kit/chat-text';\nimport type { CommandMentions } from './config';\nimport type { ChatCards, ChatTextPart, RowContext } from './message';\nimport type { QueuedMessage } from './queue';\nimport type { AnswerOutcome, ChatArtifactsConfig } from './config';\nimport type { ChatCard, Mode } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  /** `natural` shows only messages, replies and question, approval and artifact cards, with one \"Preparing…\" status while the agent works: no tool steps, reasoning, file discovery or raw error text. Omit it and nothing changes. */\n  readonly presentation?: 'natural';\n  /** Show a retained voice message's audio player. Default false: transcript only; uploaded audio and stored tokens are unchanged. */\n  readonly voiceReplay?: boolean;\n  /** The words on the chip of a sent message that starts with a `<target>` block (point-and-speak). Undefined keeps the default label; the chip never shows the raw fields on hover. */\n  readonly targetLabel?: (target: JsonObject) => string | undefined;\n  /** A host's own card for a sent text. */\n  readonly sentContent?: SentContent;\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  /** Omit complete assistant lines from display, copy and actions. Live trailing fragments wait for a newline or settlement. Not transport redaction. */\n  readonly hideLine?: (line: string) => boolean;\n  /** Initial number of displayed rows (default 60). An explicit limit uses Show earlier, not automatic paging; nothing is deleted. */\n  readonly displayLimit?: number;\n  /** Automatic paging: rows shown first (default 60) and rows added each time the reader reaches the top (default 40). Ignored with `displayLimit`. */\n  readonly paging?: ChatPaging;\n  /** Explicitly enable messageActions for paged history too; other historical controls remain inert. */\n  readonly historicalMessageActions?: boolean;\n  /** Host-rendered unread indicator, keyed by the reply. The host owns seen state and its persistence. */\n  readonly unread?: (reply: ReplyRef) => ReactNode;\n  /** Message inside the single native response-error notice. Null/undefined keeps the default; native status and metadata stay unchanged. */\n  readonly replyError?: (reply: ReplyRef) => ReactNode;\n  /** Card for any tool call; the catch-all after `toolRenderers`. */\n  readonly renderTool?: (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined;\n  /** Cards for tool calls, keyed by tool name (same contract as `renderTool`). An entry that returns undefined falls back to `renderTool`. */\n  readonly toolRenderers?: Readonly<Record<string, (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined>> | undefined;\n  /** Draws an assistant text part. Default: plain text (`markdownText` of `pi-chat-markdown` draws Markdown). */\n  readonly renderText?: ((part: ChatTextPart) => ReactNode) | undefined;\n  /**\n   * The question, approval and sub-agent cards (`pi-chat-question`, `pi-chat-approval`, `pi-chat-subagent`; `withChatPlugins` adds them all).\n   * Without a question or approval card the chat shows that it waits for the person's answer, with no answer UI; without the sub-agent card a\n   * sub-agent call is an ordinary tool step.\n   */\n  readonly cards?: ChatCards | undefined;\n  readonly groupTool?: (call: ToolCall, result: ToolResultMessage) => boolean;\n  readonly commandMentions?: CommandMentions;\n  readonly onOpenImage?: (image: ImageContent) => void;\n  readonly onCopy?: (text: string) => Promise<void>;\n  readonly onComposerKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n  readonly fileAccept?: string;\n  /** Optional pills at the left of the composer's controls row. */\n  readonly composerChips?: ComposerProps['chips'];\n  /** Contextual host content above the input, for example a removable quote. */\n  readonly composerHeader?: ReactNode;\n  /** Host-owned content participates in send readiness without native image attachments. */\n  readonly composerHasContent?: boolean;\n  /** Retain files for the host's send operation instead of uploading immediately. */\n  readonly onPickFiles?: (files: readonly File[]) => void;\n  /** `/` menu of host commands and skills. Omit it and `/` is just text. */\n  readonly slash?: SlashConfig;\n  /** Show successful native write/edit paths as file cards under each reply. Off by default: only hosts with workspace file tools should opt in. */\n  readonly fileChanges?: boolean;\n  /** Opens a file from an upload or write/edit card. Falls back to mentions.open. */\n  readonly onOpenFile?: (path: string) => void;\n  /** Pastes above these limits become a file through `attachments` (on by default, 2000 characters or 40 lines). Needs `attachments`. */\n  readonly pasteToFile?: PasteToFile;\n  /** `@` workspace file mentions: a picker, composer chips and styled mentions in sent messages. */\n  readonly mentions?: MentionsConfig;\n  /** Attach button, paste and drop through the host's upload. Takes the place of `onFiles` and `fileAccept`. */\n  readonly attachments?: AttachmentsConfig;\n  /** Model picker in the composer bar. The current model comes from the view's `pi.agent` document. */\n  readonly model?: ModelConfig;\n  /** Thinking level picker in the composer bar. The current level comes from the view's `pi.agent` document. */\n  readonly effort?: EffortConfig;\n  /**\n   * Artifact cards: tool results that carry a descriptor become a card that opens the artifact in the host's panel. The card and its recogniser\n   * come from `pi-artifacts` (`withChatPlugins` adds them); without them, or without this prop, no artifact is offered.\n   */\n  readonly artifacts?: ChatArtifactsConfig;\n  /**\n   * Host actions under each settled reply, beside Copy (and Fork): `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `reply-action-<id>`, the menu `reply-action-more`.\n   */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  /** A line under each settled reply (for example the model that answered and the time it took), for the host to show to some people only. */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n}\n\n\n// Compatibility type export for one release.\nexport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\nimport { useChatSession as useHeadlessChatSession } from '@hachej/boring-ui-kit/chat-react';\nimport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: ChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: ChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** The phone camera for an `onFiles` chat (`attachments.Camera` is used with `attachments`). */\n  readonly camera?: AttachmentsConfig['Camera'];\n  /** Runs after a message was accepted for sending (for example to scroll to the bottom). */\n  readonly afterSend?: (() => void) | undefined;\n  /** Extra attributes of the row context a surface needs (for example per-reply actions). */\n  readonly rowExtras?: Partial<RowContext> | undefined;\n  /** The optional annotate toggle: when notes are pending (`count` > 0), Send attaches them to the message first. */\n  readonly feedback?: ComposerFeedback | undefined;\n  readonly sendContext?: import('@hachej/boring-ui-kit/chat-react').ChatSessionFeedback | undefined;\n}\n\n/** Presentation adapter; all session state and controller protocols live in the kit. */\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController, mode, presentation, voiceReplay, targetLabel, sentContent, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, sendContext, onOpenFile, fileChanges, composerChips, composerHeader, composerHasContent, onPickFiles, pasteToFile } = options;\n  const { labels } = useChatText();\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const offered = artifacts?.recognise && artifacts.Card ? artifacts : undefined;\n  const sessionArtifacts = useMemo(() => offered?.recognise ? { recognise: offered.recognise, detect: offered.detect, open: offered.open } : undefined, [offered]);\n  const session = useHeadlessChatSession<ReactNode>({ controller, activeController, mode, presentation, actions, renderEntry, hideLine, renderTool, toolRenderers,\n    groupTool, subagent: cards?.subagent, onOpenImage, onFiles, mentions, slash, attachments, model, effort,\n    artifacts: sessionArtifacts,\n    afterSend, feedback: sendContext ?? feedback, onOpenFile, onPickFiles, commandMentions, labels, onFocus: () => textarea.current?.focus() });\n  const { state, developer, natural, connected, working, sendBlocked, act } = session;\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: session.activateMention } : undefined,\n    answer: actions?.answer,\n    artifacts: offered?.Card ? { open: offered.open, isOpen: offered.isOpen, kinds: offered.kinds, Card: offered.Card } : undefined,\n    messageActions, historicalMessageActions, unread, replyError,\n    replyFooter,\n    pieces: slash?.skills?.length || mentions || attachments ? { kinds: mentions?.kinds, mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.renderSent ?? mentions?.render, preview: mentions?.preview, audioUrl: mentions?.audioUrl } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- lists the fields rows read, not whole objects: activateMention changes every render and must not rebuild every row.\n  }), [controller, developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, onOpenFile, fileChanges, commandMentions, actions?.answer, slash?.skills, mentions, mentions?.open, mentions?.render, mentions?.renderSent, mentions?.preview, mentions?.audioUrl, attachments, offered?.open, offered?.isOpen, offered?.kinds, offered?.Card, messageActions, historicalMessageActions, unread, replyError, replyFooter, rowExtras]);\n\n  /** The model-and-effort pill and the note that reports a refused change. */\n  const pickers = () => {\n    const disabled = session.changing !== null || state.disposed || !connected;\n    // The pill is drawn by the component the config carries (`pi-chat-pickers`); without one there is no pill.\n    const Picker = model?.Picker ?? effort?.Picker;\n    const barStart = (model || effort) && Picker ? <Picker model={model} effort={effort} currentModel={session.currentModel} currentEffort={session.currentEffort} disabled={disabled} busy={session.changing}\n      onModel={next => void session.changeModel(next)}\n      onEffort={next => void session.changeEffort(next)} /> : undefined;\n    const barNote = session.changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${session.changeError} (${labels.dismissHint})`} onClick={session.dismissChangeError}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{session.changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const camera = attachments ? attachments.Camera : options.camera;\n  /** Everything `Composer` needs from the session; a surface adds its layout and slots. */\n  const composer = {\n    text: state.draft.text, onText: (text: string) => controller.setText(text), onKeyDown: onComposerKeyDown, textareaRef: textarea,\n    attachments: state.draft.attachments.map(item => ({ id: item.id, name: item.name, mimeType: item.content.mimeType, data: item.content.data })),\n    onRemoveAttachment: (id: string) => controller.setAttachments(controller.getSnapshot().draft.attachments.filter(item => item.id !== id)),\n    working, sendBlocked, disabled: state.disposed, stopRequested: state.stop === 'requested',\n    onSend: session.send, onStop: () => act(controller.stop),\n    hasFiles: Boolean(composerHasContent),\n    uploading: session.uploading > 0, canAttach: Boolean(onPickFiles || onFiles || attachments), ...(camera ? { camera } : {}), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void session.upload(files); },\n    slash, onSlashError: session.report, mentions, mentionPaths: session.picked, onMentionPicked: session.pickMention,\n    uploads: session.pending, onDismissUpload: session.dismissUpload,\n    onPasteText: attachments ? session.pasteText : undefined, pasteToFile,\n    quote: composerHeader,\n    feedback, chips: composerChips,\n  };\n\n  return { ...session, textarea, rowContext, composer, pickers };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\n// Compatibility exports for one release; MessageScroller remains the only scroll owner.\nexport { chunkKeys, useRowChunks, PAGE_FIRST, PAGE_MORE, CHUNK } from '@hachej/boring-ui-kit/chat-react';\nexport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\n\n/** Thin presentation adapter to the host's shadcn MessageScroller. */\nexport function useTranscript(rows: readonly { readonly key: string }[], page = PAGE_FIRST, more = PAGE_MORE, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }, automatic = true) {\n  const window = useTranscriptWindow(rows, page, more, history, automatic);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  return { ...window, stick: { scrollRef: window.scrollRef, scrollToBottom, isAtBottom: !scrollable.end } };\n}\n",
+      "content": "'use client';\n\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord, JsonObject } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { PAGE_FIRST, PAGE_MORE, useTranscriptWindow } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatHistoryState } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, SentContent, SlashConfig } from './config';\nimport type { PasteToFile } from '@hachej/boring-ui-kit/chat-text';\nimport type { CommandMentions } from './config';\nimport type { ChatCards, ChatTextPart, RowContext } from './message';\nimport type { QueuedMessage } from './queue';\nimport type { AnswerOutcome, ChatArtifactsConfig } from './config';\nimport type { ChatCard, Mode } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  /** `natural` shows only messages, replies and question, approval and artifact cards, with one \"Preparing…\" status while the agent works: no tool steps, reasoning, file discovery or raw error text. Omit it and nothing changes. */\n  readonly presentation?: 'natural';\n  /** Show a retained voice message's audio player. Default false: transcript only; uploaded audio and stored tokens are unchanged. */\n  readonly voiceReplay?: boolean;\n  /** The words on the chip of a sent message that starts with a `<target>` block (point-and-speak). Undefined keeps the default label; the chip never shows the raw fields on hover. */\n  readonly targetLabel?: (target: JsonObject) => string | undefined;\n  /** A host's own card for a sent text. */\n  readonly sentContent?: SentContent;\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  /** Omit complete assistant lines from display, copy and actions. Live trailing fragments wait for a newline or settlement. Not transport redaction. */\n  readonly hideLine?: (line: string) => boolean;\n  /** Initial number of displayed rows (default 60). An explicit limit uses Show earlier, not automatic paging; nothing is deleted. */\n  readonly displayLimit?: number;\n  /** Automatic paging: rows shown first (default 60) and rows added each time the reader reaches the top (default 40). Ignored with `displayLimit`. */\n  readonly paging?: ChatPaging;\n  /** Explicitly enable messageActions for paged history too; other historical controls remain inert. */\n  readonly historicalMessageActions?: boolean;\n  /** Host-rendered unread indicator, keyed by the reply. The host owns seen state and its persistence. */\n  readonly unread?: (reply: ReplyRef) => ReactNode;\n  /** Message inside the single native response-error notice. Null/undefined keeps the default; native status and metadata stay unchanged. */\n  readonly replyError?: (reply: ReplyRef) => ReactNode;\n  /** Card for any tool call; the catch-all after `toolRenderers`. */\n  readonly renderTool?: (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined;\n  /** Cards for tool calls, keyed by tool name (same contract as `renderTool`). An entry that returns undefined falls back to `renderTool`. */\n  readonly toolRenderers?: Readonly<Record<string, (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined>> | undefined;\n  /** Draws an assistant text part. Default: plain text (`markdownText` of `pi-chat-markdown` draws Markdown). */\n  readonly renderText?: ((part: ChatTextPart) => ReactNode) | undefined;\n  /**\n   * The question, approval and sub-agent cards (`pi-chat-question`, `pi-chat-approval`, `pi-chat-subagent`; `withChatPlugins` adds them all).\n   * Without a question or approval card the chat shows that it waits for the person's answer, with no answer UI; without the sub-agent card a\n   * sub-agent call is an ordinary tool step.\n   */\n  readonly cards?: ChatCards | undefined;\n  readonly groupTool?: (call: ToolCall, result: ToolResultMessage) => boolean;\n  readonly commandMentions?: CommandMentions;\n  readonly onOpenImage?: (image: ImageContent) => void;\n  readonly onCopy?: (text: string) => Promise<void>;\n  readonly onComposerKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n  readonly fileAccept?: string;\n  /** Optional pills at the left of the composer's controls row. */\n  readonly composerChips?: ComposerProps['chips'];\n  /** Contextual host content above the input, for example a removable quote. */\n  readonly composerHeader?: ReactNode;\n  /** Host-owned content participates in send readiness without native image attachments. */\n  readonly composerHasContent?: boolean;\n  /** Retain files for the host's send operation instead of uploading immediately. */\n  readonly onPickFiles?: (files: readonly File[]) => void;\n  /** `/` menu of host commands and skills. Omit it and `/` is just text. */\n  readonly slash?: SlashConfig;\n  /** Show successful native write/edit paths as file cards under each reply. Off by default: only hosts with workspace file tools should opt in. */\n  readonly fileChanges?: boolean;\n  /** Opens a file from an upload or write/edit card. Falls back to mentions.open. */\n  readonly onOpenFile?: (path: string) => void;\n  /** Pastes above these limits become a file through `attachments` (on by default, 2000 characters or 40 lines). Needs `attachments`. */\n  readonly pasteToFile?: PasteToFile;\n  /** `@` workspace file mentions: a picker, composer chips and styled mentions in sent messages. */\n  readonly mentions?: MentionsConfig;\n  /** Attach button, paste and drop through the host's upload. Takes the place of `onFiles` and `fileAccept`. */\n  readonly attachments?: AttachmentsConfig;\n  /** Model picker in the composer bar. The current model comes from the view's `pi.agent` document. */\n  readonly model?: ModelConfig;\n  /** Thinking level picker in the composer bar. The current level comes from the view's `pi.agent` document. */\n  readonly effort?: EffortConfig;\n  /**\n   * Artifact cards: tool results that carry a descriptor become a card that opens the artifact in the host's panel. The card and its recogniser\n   * come from `pi-artifacts` (`withChatPlugins` adds them); without them, or without this prop, no artifact is offered.\n   */\n  readonly artifacts?: ChatArtifactsConfig;\n  /**\n   * Host actions under each settled reply, beside Copy (and Fork): `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `reply-action-<id>`, the menu `reply-action-more`.\n   */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  /** A line under each settled reply (for example the model that answered and the time it took), for the host to show to some people only. */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n}\n\n\n// Compatibility type export for one release.\nexport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\nimport { useChatSession as useHeadlessChatSession } from '@hachej/boring-ui-kit/chat-react';\nimport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: ChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: ChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** The phone camera for an `onFiles` chat (`attachments.Camera` is used with `attachments`). */\n  readonly camera?: AttachmentsConfig['Camera'];\n  /** Runs after a message was accepted for sending (for example to scroll to the bottom). */\n  readonly afterSend?: (() => void) | undefined;\n  /** Extra attributes of the row context a surface needs (for example per-reply actions). */\n  readonly rowExtras?: Partial<RowContext> | undefined;\n  /** The optional annotate toggle: when notes are pending (`count` > 0), Send attaches them to the message first. */\n  readonly feedback?: ComposerFeedback | undefined;\n  readonly sendContext?: import('@hachej/boring-ui-kit/chat-react').ChatSessionFeedback | undefined;\n}\n\n/** Presentation adapter; all session state and controller protocols live in the kit. */\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController, mode, presentation, voiceReplay, targetLabel, sentContent, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, sendContext, onOpenFile, fileChanges, composerChips, composerHeader, composerHasContent, onPickFiles, pasteToFile } = options;\n  const { labels } = useChatText();\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const offered = artifacts?.recognise && artifacts.Card ? artifacts : undefined;\n  const sessionArtifacts = useMemo(() => offered?.recognise ? { recognise: offered.recognise, detect: offered.detect, open: offered.open } : undefined, [offered]);\n  const session = useHeadlessChatSession<ReactNode>({ controller, activeController, mode, presentation, actions, renderEntry, hideLine, renderTool, toolRenderers,\n    groupTool, subagent: cards?.subagent, onOpenImage, onFiles, mentions, slash, attachments, model, effort,\n    artifacts: sessionArtifacts,\n    afterSend, feedback: sendContext ?? feedback, onOpenFile, onPickFiles, commandMentions, labels, onFocus: () => textarea.current?.focus() });\n  const { state, developer, natural, connected, working, sendBlocked, act } = session;\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: session.activateMention } : undefined,\n    answer: actions?.answer,\n    artifacts: offered?.Card ? { open: offered.open, isOpen: offered.isOpen, kinds: offered.kinds, Card: offered.Card } : undefined,\n    messageActions, historicalMessageActions, unread, replyError,\n    replyFooter,\n    pieces: slash?.skills?.length || mentions || attachments ? { kinds: mentions?.kinds, mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.renderSent ?? mentions?.render, preview: mentions?.preview, audioUrl: mentions?.audioUrl } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- lists the fields rows read, not whole objects: activateMention changes every render and must not rebuild every row.\n  }), [controller, developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, onOpenFile, fileChanges, commandMentions, actions?.answer, slash?.skills, mentions, mentions?.open, mentions?.render, mentions?.renderSent, mentions?.preview, mentions?.audioUrl, attachments, offered?.open, offered?.isOpen, offered?.kinds, offered?.Card, messageActions, historicalMessageActions, unread, replyError, replyFooter, rowExtras]);\n\n  /** The model-and-effort pill and the note that reports a refused change. */\n  const pickers = () => {\n    const disabled = session.changing !== null || state.disposed || !connected;\n    // The pill is drawn by the component the config carries (`pi-chat-pickers`); without one there is no pill.\n    const Picker = model?.Picker ?? effort?.Picker;\n    const barStart = (model || effort) && Picker ? <Picker model={model} effort={effort} currentModel={session.currentModel} currentEffort={session.currentEffort} disabled={disabled} busy={session.changing}\n      onModel={next => void session.changeModel(next)}\n      onEffort={next => void session.changeEffort(next)} /> : undefined;\n    const barNote = session.changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${session.changeError} (${labels.dismissHint})`} onClick={session.dismissChangeError}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{session.changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const camera = attachments ? attachments.Camera : options.camera;\n  /** Everything `Composer` needs from the session; a surface adds its layout and slots. */\n  const composer = {\n    text: state.draft.text, onText: (text: string) => controller.setText(text), onKeyDown: onComposerKeyDown, textareaRef: textarea,\n    attachments: state.draft.attachments.map(item => ({ id: item.id, name: item.name, mimeType: item.content.mimeType, data: item.content.data })),\n    onRemoveAttachment: (id: string) => controller.setAttachments(controller.getSnapshot().draft.attachments.filter(item => item.id !== id)),\n    // A typed message answers the waiting question, so the primary button sends it.\n    working: working && !session.answersQuestion, sendBlocked, disabled: state.disposed, stopRequested: state.stop === 'requested',\n    onSend: session.send, onStop: () => act(controller.stop),\n    hasFiles: Boolean(composerHasContent),\n    uploading: session.uploading > 0, canAttach: Boolean(onPickFiles || onFiles || attachments), ...(camera ? { camera } : {}), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void session.upload(files); },\n    slash, onSlashError: session.report, mentions, mentionPaths: session.picked, onMentionPicked: session.pickMention,\n    uploads: session.pending, onDismissUpload: session.dismissUpload,\n    onPasteText: attachments ? session.pasteText : undefined, pasteToFile,\n    quote: composerHeader,\n    feedback, chips: composerChips,\n  };\n\n  return { ...session, textarea, rowContext, composer, pickers };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\n// Compatibility exports for one release; MessageScroller remains the only scroll owner.\nexport { chunkKeys, useRowChunks, PAGE_FIRST, PAGE_MORE, CHUNK } from '@hachej/boring-ui-kit/chat-react';\nexport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\n\n/** Thin presentation adapter to the host's shadcn MessageScroller. */\nexport function useTranscript(rows: readonly { readonly key: string }[], page = PAGE_FIRST, more = PAGE_MORE, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }, automatic = true) {\n  const window = useTranscriptWindow(rows, page, more, history, automatic);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  return { ...window, stick: { scrollRef: window.scrollRef, scrollToBottom, isAtBottom: !scrollable.end } };\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/session.tsx"
     },

package/r/pi-workspace.json

@@ -8,9 +8,9 @@
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/dock.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/dock.json"
   ],
   "files": [
     {

package/r/placed-agent.json

@@ -9,10 +9,10 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/pi-app.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/pi-ambient.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/utils.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-app.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-ambient.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/utils.json"
   ],
   "files": [
     {

package/r/provider-setup.json

@@ -9,7 +9,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/utils.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/utils.json"
   ],
   "files": [
     {