@hachej/boring-ui-kit 0.4.16 → 0.4.17

package/r/pi-chat-question.json

@@ -9,7 +9,7 @@
     "@earendil-works/pi-ai@~1.2.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/pi-chat.json",
     "alert",
     "button",
     "card",

package/r/pi-chat-slash.json

@@ -8,7 +8,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/pi-chat.json",
     "badge",
     "button",
     "input-group",

package/r/pi-chat-subagent.json

@@ -9,7 +9,7 @@
     "@earendil-works/pi-ai@~1.2.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/pi-chat.json",
     "alert",
     "badge",
     "button",

package/r/pi-chat-voice.json

@@ -4,12 +4,12 @@
   "title": "Pi chat voice messages",
   "description": "Hold-to-record voice messages: the recorder hook over the kit's voice capture, the composer's record button and the pending voice bubble, plus useHoldToRecord. Plug it in with `voiceMessage={{ ...config, ...voiceMessagePlugin }}`; without it pi-chat has no voice button.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.16",
+    "@hachej/boring-ui-kit@^0.4.17",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/pi-chat.json",
     "bubble",
     "button",
     "message",

package/r/pi-chat.json

@@ -4,9 +4,9 @@
   "title": "Pi chat",
   "description": "A complete Tailwind chat over the borrowed native chat controller: composer, messages, one collapsible activity block per turn (tool calls and reasoning), message queue, history 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.16",
-    "@hachej/boring-files@^0.4.16",
-    "@hachej/boring-feedback@^0.4.16",
+    "@hachej/boring-ui-kit@^0.4.17",
+    "@hachej/boring-files@^0.4.17",
+    "@hachej/boring-feedback@^0.4.17",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "@base-ui/react@1.9.0",
@@ -19,8 +19,8 @@
     "zod@^4.6.5"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/button.json",
     "dialog",
     "tooltip",
     "trace",
@@ -149,7 +149,7 @@
     },
     {
       "path": "registry/pi-chat/session.tsx",
-      "content": "'use client';\n\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport type { ChatAttachment, ChatHistoryState } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps, PendingUpload } from './composer';\nimport type { ConversationFile } from './conversation-files';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, ModelRef, PastedText, PasteToFile, SlashConfig } from './config';\nimport { displayName, looksLikeMarkdown, mentionToken, pieces } from './config';\nimport type { CommandMentions } from './config';\nimport type { ChatCards, ChatTextPart, RowContext } from './message';\nimport type { QueueActions, QueuedMessage } from './queue';\nimport type { AnswerOutcome, ChatArtifactsConfig } from './config';\nimport { derive, isFileBlock, object, queuedMessages } from './rows';\nimport type { ChatCard, Mode, Row } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  /** `natural` shows only messages, replies and question, approval and artifact cards, with one \"Preparing…\" status while the agent works: no tool steps, reasoning, file discovery or raw error text. Omit it and nothing changes. */\n  readonly presentation?: 'natural';\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  /** Omit complete assistant lines from display, copy and actions. Live trailing fragments wait for a newline or settlement. Not transport redaction. */\n  readonly hideLine?: (line: string) => boolean;\n  /** Initial number of displayed rows (default 60). An explicit limit uses Show earlier, not automatic paging; nothing is deleted. */\n  readonly displayLimit?: number;\n  /** 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\nexport type FilesHandler = (files: readonly File[], target: Pick<ReturnType<ChatController['getSnapshot']>, 'identity' | 'conversationId'> & { readonly signal: AbortSignal }) => Promise<readonly ChatAttachment[]>;\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: ChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: ChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** 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}\n\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController: active, mode, presentation, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool: catchAll, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, onOpenFile, fileChanges, pasteToFile, composerChips, composerHeader, composerHasContent, onPickFiles } = options;\n  const { labels } = useChatText();\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const [error, setError] = useState<string | null>(null);\n  const [uploading, setUploading] = useState(0);\n  const [picked, setPicked] = useState<readonly string[]>([]);\n  const [pending, setPending] = useState<readonly PendingUpload[]>([]);\n  const [changing, setChanging] = useState<'model' | 'effort' | null>(null);\n  const [changeError, setChangeError] = useState<string | null>(null);\n  const [optimistic, setOptimistic] = useState<{ readonly model?: ModelRef; readonly effort?: string }>({});\n  const uploadIds = useRef(0);\n  const uploads = useRef(new Set<AbortController>()), mounted = useRef(false);\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const current = () => mounted.current && active.current === controller && !controller.getSnapshot().disposed;\n  useEffect(() => {\n    mounted.current = true;\n    // A controller disposed before mount throws synchronously; the chat then renders its disposed state.\n    if (!controller.getSnapshot().disposed) void controller.connect().catch(cause => { if (current()) setError(cause instanceof Error ? cause.message : labels.connectionFailed); });\n    return () => { mounted.current = false; for (const upload of uploads.current) upload.abort(); uploads.current.clear(); };\n  }, [controller]);\n\n  const natural = presentation === 'natural';\n  // A tool's own renderer comes first; `renderTool` stays the catch-all.\n  const renderTool = useMemo(() => toolRenderers ? (call: ToolCall, result: ToolResultMessage | undefined) => (Object.hasOwn(toolRenderers, call.name) ? toolRenderers[call.name]?.(call, result) : undefined) ?? catchAll?.(call, result) : catchAll, [toolRenderers, catchAll]);\n  const developer = mode === 'developer' && !natural;\n  // Only the recogniser takes part in deriving rows; which card is open changes without rebuilding them.\n  const offered = artifacts?.recognise && artifacts.Card ? artifacts : undefined;\n  const artifactDetect = useMemo(() => offered?.recognise ? { recognise: offered.recognise, detect: offered.detect } : undefined, [offered?.recognise, offered?.detect]);\n  const subagent = cards?.subagent;\n  const derived = useMemo(() => derive(state.view, { mode, presentation, hideLine, renderEntry, renderTool, groupTool, artifacts: artifactDetect, subagent }), [state.view, mode, presentation, hideLine, renderEntry, renderTool, groupTool, artifactDetect, subagent]);\n  const queued = useMemo(() => queuedMessages(state.view), [state.view]);\n  const { run } = derived;\n  const earlier = useMemo<readonly Row[]>(() => {\n    if (!state.view || !('entries' in state.history)) return [];\n    const activeIds = new Set(state.view.entries.map(entry => entry.id));\n    const entries = state.history.entries.filter(entry => !activeIds.has(entry.id));\n    return derive({ ...state.view, entries, docs: {} }, { mode, presentation, hideLine, renderEntry: undefined, renderTool: undefined, groupTool: undefined, artifacts: artifactDetect, subagent }).rows\n      .map(row => ({ ...row, key: `history:${row.key}`, historical: true }));\n  }, [state.view, state.history, mode, presentation, hideLine, artifactDetect, subagent]);\n  const rows = useMemo(() => [...earlier, ...derived.rows], [earlier, derived.rows]);\n  const files = useMemo(() => {\n    const found = new Map<string, ConversationFile>();\n    const open = onOpenFile ?? mentions?.open;\n    const add = (path: string) => {\n      const normalized = path.replace(/^\\.\\//, '');\n      const id = `file:${normalized}`;\n      if (!found.has(id)) found.set(id, { id, name: displayName(normalized), open: open ? () => open(normalized) : undefined });\n    };\n    for (const path of picked) add(path);\n    for (const item of state.draft.attachments) found.set(`draft:${item.id}`, { id: `draft:${item.id}`, name: item.name, open: onOpenImage ? () => onOpenImage(item.content) : undefined });\n    for (const row of derived.rows) {\n      if (row.type === 'user') {\n        const content = typeof row.message.content === 'string' ? [{ type: 'text' as const, text: row.message.content }] : row.message.content;\n        for (const [index, part] of content.entries()) {\n          if (part.type === 'text' && !isFileBlock(part.text)) for (const piece of pieces(part.text, { mentions: true, skills: [] })) { if (piece.kind === 'mention' && piece.value) add(piece.value); }\n          if (part.type === 'image') { const id = `image:${row.key}:${index}`; found.set(id, { id, name: labels.imageAttachment, open: onOpenImage ? () => onOpenImage(part) : undefined }); }\n        }\n      }\n      if (row.type !== 'assistant') continue;\n      for (const part of row.parts) {\n        if (part.kind === 'artifact' && part.artifact.state === 'ready' && part.artifact.path !== undefined) {\n          const descriptor = part.artifact.descriptor as never, id = `file:${part.artifact.path.replace(/^\\.\\//, '')}`;\n          found.set(id, { id, name: displayName(part.artifact.path), open: artifacts?.open ? () => artifacts.open(descriptor) : undefined });\n        }\n        if (!natural && part.kind === 'tool' && part.entry.result && !part.entry.result.isError && ['read', 'write', 'edit'].includes(part.entry.call.name)) {\n          const path = part.entry.call.arguments['path'];\n          if (typeof path === 'string') add(path);\n        }\n      }\n    }\n    return [...found.values()];\n  }, [rows, picked, state.draft.attachments, artifacts, onOpenFile, mentions?.open, onOpenImage, labels.imageAttachment]);\n\n  const report = (cause: unknown) => { if (current()) setError(cause instanceof Error ? cause.message : labels.actionFailedShort); };\n  const act = (action: () => Promise<unknown>) => {\n    setError(null);\n    try { void action().catch(report); } catch (cause) { report(cause); }\n  };\n  // A send being confirmed does not block the next one: the controller empties the composer at once and queues the next message behind it.\n  // Only a submission whose outcome is unknown blocks, until it is checked or retried.\n  const unconfirmed = state.send.kind === 'unknown';\n  const connected = state.connection.kind === 'connected';\n  const sendBlocked = uploading > 0 || state.disposed || !connected || unconfirmed;\n  /** Puts a message back into the composer ahead of whatever is there now (nothing is dropped). */\n  const putBack = (text: string, images: readonly ChatAttachment[]) => {\n    if (controller.getSnapshot().disposed) return;\n    const draft = controller.getSnapshot().draft;\n    controller.setText([text, draft.text].filter(value => value.trim()).join('\\n'));\n    if (images.length) controller.setAttachments([...images, ...draft.attachments.filter(item => !images.some(image => image.id === item.id))]);\n  };\n  const working = Boolean(run);\n  const waitingForAnswer = derived.rows.some(row => row.type === 'assistant' && row.parts.some(part => (part.kind === 'question' || part.kind === 'approval') && !part.live && !part.result));\n  const send = () => {\n    if (sendBlocked || !current()) return;\n    const attach = feedback && feedback.count > 0 ? feedback.attach : undefined;\n    if (attach) {\n      // The pending feedback goes with this message: the host attaches it to the text, then the native send reads the draft.\n      act(async () => {\n        // Like any send, the composer empties at once; the person's own text comes back if the feedback or the message is refused.\n        const typed = controller.getSnapshot().draft;\n        controller.setText(''); controller.setAttachments([]);\n        let attached: Awaited<ReturnType<typeof attach>>;\n        try { attached = await attach(typed.text); }\n        catch (cause) { putBack(typed.text, typed.attachments); throw cause; }\n        if (attached.kind === 'refused') { putBack(typed.text, typed.attachments); throw new Error(attached.reason); }\n        if (!current()) { putBack(typed.text, typed.attachments); return; }\n        const submission = await controller.send('followUp', { text: attached.text, attachments: typed.attachments, restore: { text: typed.text, attachments: typed.attachments } });\n        if (submission) feedback?.sent();\n      });\n      afterSend?.();\n      textarea.current?.focus();\n      return;\n    }\n    act(() => controller.send('followUp'));\n    afterSend?.();\n    textarea.current?.focus();\n  };\n  // A queued message is taken back (withdrawn) before it is edited or steered; if Pi already placed it, that is reported and nothing is lost.\n  async function takeBack(item: QueuedMessage) {\n    if (!actions?.withdraw) throw new Error(labels.queueLocked);\n    const outcome = await actions.withdraw(item.id);\n    if (outcome === 'already_placed' || outcome === 'settled') throw new Error(labels.tooLate);\n  }\n  const queuedContent = (item: QueuedMessage) => {\n    const parts = Array.isArray(item.content) ? item.content as readonly { type?: unknown; text?: unknown; data?: unknown; mimeType?: unknown }[] : [];\n    const text = typeof item.content === 'string' ? item.content : parts.flatMap(part => part?.type === 'text' && typeof part.text === 'string' && !isFileBlock(part.text) ? [part.text] : []).join('\\n');\n    const images: ChatAttachment[] = parts.flatMap((part, index) => part?.type === 'image' && typeof part.data === 'string' && typeof part.mimeType === 'string'\n      ? [{ id: `queued-${String(item.id)}-${index}`, name: `image-${index + 1}`, content: { type: 'image' as const, data: part.data, mimeType: part.mimeType } }] : []);\n    return { text, images };\n  };\n  const queueActions: QueueActions | undefined = actions?.withdraw ? {\n    edit: async item => {\n      await takeBack(item);\n      const { text, images } = queuedContent(item), draft = controller.getSnapshot().draft;\n      controller.setText(draft.text.trim() ? `${text}\\n${draft.text}` : text);\n      if (images.length) controller.setAttachments([...draft.attachments, ...images]);\n      textarea.current?.focus();\n    },\n    steer: async item => {\n      if (sendBlocked) throw new Error(labels.waitToSteer);\n      await takeBack(item);\n      const { text, images } = queuedContent(item);\n      // Sent as explicit content, so the person's own draft is never touched; a refused steer comes back into the composer (the controller\n      // puts it back), an unknown one is held for checking.\n      try {\n        const submission = await controller.send('steer', { text, attachments: images });\n        if (!submission && current() && controller.getSnapshot().send.kind === 'blocked') setError(labels.steerRefused);\n      } catch (cause) { putBack(text, images); if (current()) setError(cause instanceof Error ? cause.message : labels.steerFailed); }\n    },\n  } : undefined;\n  const addMentions = (paths: readonly string[]) => {\n    const text = controller.getSnapshot().draft.text;\n    controller.setText(`${text}${text && !/\\s$/.test(text) ? ' ' : ''}${paths.map(mentionToken).join(' ')} `);\n    setPicked(value => [...new Set([...value, ...paths])]);\n  };\n  /** Uploads files; `restore` (a pasted text) is what their pending cards undo: it abandons the upload and puts the text back. */\n  async function upload(files: readonly File[], paste?: { readonly restore: () => void; readonly after: string }) {\n    if (!files.length || !current()) return;\n    if (onPickFiles) { onPickFiles(files); return; }\n    if (!onFiles && !attachments) return;\n    const abort = new AbortController(); uploads.current.add(abort); setUploading(value => value + 1);\n    const ids = files.map(() => `upload-${++uploadIds.current}`);\n    const settle = (failure?: string) => setPending(items => failure === undefined ? items.filter(item => !ids.includes(item.id))\n      : items.map(item => ids.includes(item.id) ? { ...item, state: 'failed', error: failure } : item));\n    const cancel = paste && (() => { abort.abort(); setPending(items => items.filter(item => !ids.includes(item.id))); paste.restore(); });\n    setPending(items => [...items, ...files.map((file, index): PendingUpload => ({ id: ids[index]!, name: file.name, state: 'uploading',\n      ...(cancel && paste ? { cancel, restoreWhile: paste.after } : {}) }))]);\n    try {\n      let added: readonly ChatAttachment[] = [];\n      let paths: string[] = [];\n      if (attachments) {\n        for (const result of await attachments.upload([...files], abort.signal)) {\n          if (result.image) added = [...added, { id: `image-${Date.now()}-${++uploadIds.current}`, name: result.name, content: { type: 'image', data: result.image.data, mimeType: result.image.mimeType } }];\n          else if (result.path) paths = [...paths, result.path];\n        }\n      } else added = await onFiles!(files, { identity: state.identity, conversationId: state.conversationId, signal: abort.signal });\n      if (current() && !abort.signal.aborted) {\n        if (added.length) controller.setAttachments([...controller.getSnapshot().draft.attachments, ...added]);\n        if (paths.length) addMentions(paths);\n        settle();\n      }\n    } catch (cause) { if (!abort.signal.aborted) { settle(cause instanceof Error ? cause.message : labels.uploadFailedShort); if (!attachments) report(cause); } }\n    finally { uploads.current.delete(abort); if (current()) setUploading(value => value - 1); }\n  }\n  /** A paste the composer took: saved as a file under `uploads/` (Send then references it). Cancelling puts the text back where it was pasted. */\n  const pasteText = (paste: PastedText) => {\n    if (!attachments || !current()) return;\n    const at = new Date(), two = (value: number) => String(value).padStart(2, '0');\n    const stamp = `${at.getFullYear()}-${two(at.getMonth() + 1)}-${two(at.getDate())} ${two(at.getHours())}-${two(at.getMinutes())}-${two(at.getSeconds())}`;\n    const markdown = looksLikeMarkdown(paste.text);\n    const file = new File([paste.text], `${labels.pastedFileName(stamp)}${markdown ? '.md' : '.txt'}`, { type: markdown ? 'text/markdown' : 'text/plain' });\n    // The pasted text replaces its selection when the paste is accepted, so the draft shows what is left. Restoring inserts the text at\n    // the same place and deletes nothing: whatever was typed since stays.\n    const draft = controller.getSnapshot().draft.text;\n    const start = Math.min(paste.start, draft.length), end = Math.min(Math.max(paste.end, start), draft.length);\n    const after = `${draft.slice(0, start)}${draft.slice(end)}`;\n    controller.setText(after);\n    const restore = () => {\n      if (!current()) return;\n      const now = controller.getSnapshot().draft.text;\n      const at = Math.min(start, now.length);\n      controller.setText(`${now.slice(0, at)}${paste.text}${now.slice(at)}`);\n      textarea.current?.focus();\n    };\n    void upload([file], { restore, after });\n  };\n  const agentDoc = object(state.view?.docs['pi.agent']);\n  const currentModel = object(agentDoc?.['model']);\n  const viewModel: ModelRef | undefined = typeof currentModel?.['provider'] === 'string' && typeof currentModel['modelId'] === 'string' ? { provider: currentModel['provider'], modelId: currentModel['modelId'] } : undefined;\n  const viewEffort = typeof agentDoc?.['thinkingLevel'] === 'string' ? agentDoc['thinkingLevel'] : undefined;\n  // Show the accepted choice until the watch delivers it, so the label does not flicker back.\n  useEffect(() => {\n    const same = optimistic.model && viewModel && optimistic.model.provider === viewModel.provider && optimistic.model.modelId === viewModel.modelId;\n    if (same || (optimistic.effort !== undefined && optimistic.effort === viewEffort)) setOptimistic(value => ({ ...(same ? {} : value.model ? { model: value.model } : {}), ...(optimistic.effort === viewEffort ? {} : value.effort ? { effort: value.effort } : {}) }));\n  }, [optimistic, viewModel?.provider, viewModel?.modelId, viewEffort]);\n  useEffect(() => { if (!state.draft.text) setPicked(value => value.length ? [] : value); }, [state.draft.text]);\n  async function change(kind: 'model' | 'effort', apply: () => Promise<void>, accepted: () => void, rejected: () => void) {\n    if (changing || !current()) return;\n    setChanging(kind); setChangeError(null);\n    try { await apply(); if (current()) accepted(); }\n    catch (cause) { if (current()) { rejected(); setChangeError(cause instanceof Error && cause.message ? cause.message : labels.changeRefused); } }\n    finally { if (current()) setChanging(null); }\n  }\n  const activateMention = (command: { readonly name: string; readonly behavior: 'execute' | 'insert' }) => {\n    if (!current() || controller.getSnapshot().connection.kind !== 'connected') return;\n    const catalog = commandMentions;\n    const selected = catalog?.commands.find(item => item.name === command.name && item.behavior === command.behavior);\n    if (catalog && selected) act(async () => catalog.onActivate({ name: selected.name, behavior: selected.behavior }));\n  };\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, natural, renderText, cards, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: 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 ? { mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.renderSent ?? mentions?.render, preview: mentions?.preview, audioUrl: mentions?.audioUrl } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }), [controller, developer, natural, 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 = 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={optimistic.model ?? viewModel} currentEffort={optimistic.effort ?? viewEffort} disabled={disabled} busy={changing}\n      onModel={next => void change('model', () => model!.change(next), () => setOptimistic(value => ({ ...value, model: next })), () => {})}\n      onEffort={next => void change('effort', () => effort!.change(next), () => setOptimistic(value => ({ ...value, effort: next })), () => {})} /> : undefined;\n    const barNote = changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${changeError} (${labels.dismissHint})`} onClick={() => setChangeError(null)}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const empty = connected && !state.view?.entries.length && !rows.length;\n  const loading = (state.connection.kind === 'idle' || state.connection.kind === 'connecting') && !state.view;\n\n  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: send, onStop: () => act(controller.stop),\n    hasFiles: Boolean(composerHasContent),\n    uploading: uploading > 0, canAttach: Boolean(onPickFiles || onFiles || attachments), ...(camera ? { camera } : {}), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void upload(files); },\n    slash, onSlashError: report, mentions, mentionPaths: picked, onMentionPicked: (path: string) => setPicked(value => value.includes(path) ? value : [...value, path]),\n    uploads: pending, onDismissUpload: (id: string) => setPending(items => items.filter(item => item.id !== id)),\n    onPasteText: attachments ? pasteText : undefined, pasteToFile,\n    quote: composerHeader,\n    feedback, chips: composerChips,\n  };\n\n  return { state, derived, rows, queued, queueActions, working, waitingForAnswer, connected, sendBlocked, error, setError, report, act, current, textarea, rowContext, composer, files, pickers, empty, loading, developer, natural };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\nexport interface ChatPaging { readonly first?: number; readonly more?: number }\nexport const PAGE_FIRST = 60, PAGE_MORE = 40, CHUNK = 20;\n\n/**\n * Rows grouped into runs of at most `size` keys, kept stable across renders. Rows already placed never change run: rows revealed\n * above form new runs (the run nearest the old top is the full one), rows added below fill the last run, then start new ones.\n */\nexport function chunkKeys(previous: readonly (readonly string[])[], keys: readonly string[], size = CHUNK): string[][] {\n  const owner = new Map<string, number>();\n  previous.forEach((run, index) => { for (const key of run) owner.set(key, index); });\n  const known = keys.findIndex(key => owner.has(key));\n  const lead = known < 0 ? keys.length : known;\n  const runs: string[][] = [];\n  for (let end = lead; end > 0; end -= size) runs.unshift(keys.slice(Math.max(0, end - size), end));\n  let current: string[] = [], from: number | undefined;\n  for (const key of keys.slice(lead)) {\n    const placed = owner.get(key);\n    if (!current.length || (placed !== undefined ? placed !== from : current.length >= size)) { current = []; runs.push(current); from = placed; }\n    current.push(key);\n  }\n  return runs;\n}\n\n/**\n * The scroller measures every one of its items on each scroll event and frame (@shadcn/react 0.3.1), so a long transcript gives it\n * runs of `CHUNK` rows instead of single rows: 500 messages are 25 measurements, not 500. A run keeps its element while rows are\n * revealed above it, so the scroller's prepend anchor still holds; a run's array is reused while its rows are unchanged.\n */\nexport function useRowChunks<T extends { readonly key: string }>(rows: readonly T[], size = CHUNK): readonly (readonly T[])[] {\n  const previous = useRef<{ readonly keys: readonly (readonly string[])[]; readonly runs: ReadonlyMap<string, readonly T[]> }>({ keys: [], runs: new Map() });\n  return useMemo(() => {\n    const byKey = new Map(rows.map(row => [row.key, row]));\n    const keys = chunkKeys(previous.current.keys, rows.map(row => row.key), size);\n    const runs = keys.map(run => {\n      const items = run.map(key => byKey.get(key)!);\n      const before = previous.current.runs.get(run[0]!);\n      return before && before.length === items.length && before.every((item, index) => item === items[index]) ? before : items;\n    });\n    previous.current = { keys, runs: new Map(runs.map(run => [run[0]!.key, run])) };\n    return runs;\n  }, [rows, size]);\n}\n\n/** One scroll root for current and archived rows. Native paging stays in the borrowed controller. */\nexport function useTranscript(rows: readonly { readonly key: string }[], page = PAGE_FIRST, more = PAGE_MORE, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }, automatic = true) {\n  if (!Number.isSafeInteger(page) || page < 1) throw new TypeError('Chat displayLimit must be a positive integer');\n  if (!Number.isSafeInteger(more) || more < 1) throw new TypeError('Chat paging.more must be a positive integer');\n  const [limit, setLimit] = useState(page);\n  const [sentinel, setSentinel] = useState<HTMLDivElement | null>(null);\n  const [loaded, setLoaded] = useState(0);\n  const pending = useRef(false);\n  const anchor = useRef<{ readonly length: number; readonly limit: number } | undefined>(undefined);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  const stick = { scrollRef: setScroller, scrollToBottom, isAtBottom: !scrollable.end };\n  const hidden = Math.max(0, rows.length - limit);\n  const reveal = useCallback(() => {\n    if (pending.current || anchor.current) return;\n    const state = history?.state;\n    if (hidden === 0 && (!history?.connected || !state || state.kind === 'disabled' || state.kind === 'loading' || state.kind === 'ready' && !state.hasMore)) return;\n    anchor.current = { length: rows.length, limit };\n    if (hidden > 0) setLimit(value => value + more);\n    else if (history) {\n      pending.current = true;\n      void Promise.resolve().then(history.load).catch(() => { anchor.current = undefined; }).finally(() => { pending.current = false; });\n    }\n  }, [hidden, history?.state, history?.connected, history?.load, rows.length, limit, more]);\n  useLayoutEffect(() => {\n    const saved = anchor.current;\n    if (!scroller || !saved || history?.state.kind === 'loading') return;\n    const added = Math.max(0, rows.length - saved.length);\n    if (limit < saved.limit + added) { setLimit(saved.limit + added); return; }\n    anchor.current = undefined;\n    setLoaded(count => count + Math.max(0, Math.min(rows.length, limit) - Math.min(saved.length, saved.limit)));\n  }, [rows, limit, scroller, history?.state]);\n  useEffect(() => {\n    if (!automatic || !scroller || !sentinel || typeof IntersectionObserver === 'undefined' || history?.state.kind === 'loading' || history?.state.kind === 'error') return;\n    const observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting) && (scroller.scrollHeight <= scroller.clientHeight || scrollable.start)) reveal();\n    }, { root: scroller, rootMargin: '240px 0px 0px' });\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [automatic, scroller, sentinel, reveal, scrollable.start, history?.state]);\n  const revealTo = (key: string) => { const index = rows.findIndex(row => row.key === key); if (index >= 0) setLimit(value => Math.max(value, rows.length - index)); };\n  return { stick, hidden, reveal, revealTo, sentinelRef: setSentinel, loaded, visible: <T,>(items: readonly T[]): readonly T[] => hidden ? items.slice(hidden) : items, reset: () => { anchor.current = undefined; setLimit(page); } };\n}\n",
+      "content": "'use client';\n\nimport { startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport type { ChatAttachment, ChatHistoryState } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps, PendingUpload } from './composer';\nimport type { ConversationFile } from './conversation-files';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, ModelRef, PastedText, PasteToFile, SlashConfig } from './config';\nimport { displayName, looksLikeMarkdown, mentionToken, pieces } from './config';\nimport type { CommandMentions } from './config';\nimport type { ChatCards, ChatTextPart, RowContext } from './message';\nimport type { QueueActions, QueuedMessage } from './queue';\nimport type { AnswerOutcome, ChatArtifactsConfig } from './config';\nimport { derive, isFileBlock, object, queuedMessages } from './rows';\nimport type { ChatCard, Mode, Row } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  /** `natural` shows only messages, replies and question, approval and artifact cards, with one \"Preparing…\" status while the agent works: no tool steps, reasoning, file discovery or raw error text. Omit it and nothing changes. */\n  readonly presentation?: 'natural';\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  /** Omit complete assistant lines from display, copy and actions. Live trailing fragments wait for a newline or settlement. Not transport redaction. */\n  readonly hideLine?: (line: string) => boolean;\n  /** Initial number of displayed rows (default 60). An explicit limit uses Show earlier, not automatic paging; nothing is deleted. */\n  readonly displayLimit?: number;\n  /** 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\nexport type FilesHandler = (files: readonly File[], target: Pick<ReturnType<ChatController['getSnapshot']>, 'identity' | 'conversationId'> & { readonly signal: AbortSignal }) => Promise<readonly ChatAttachment[]>;\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: ChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: ChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** 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}\n\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController: active, mode, presentation, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool: catchAll, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, onOpenFile, fileChanges, pasteToFile, composerChips, composerHeader, composerHasContent, onPickFiles } = options;\n  const { labels } = useChatText();\n  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);\n  const [error, setError] = useState<string | null>(null);\n  const [uploading, setUploading] = useState(0);\n  const [picked, setPicked] = useState<readonly string[]>([]);\n  const [pending, setPending] = useState<readonly PendingUpload[]>([]);\n  const [changing, setChanging] = useState<'model' | 'effort' | null>(null);\n  const [changeError, setChangeError] = useState<string | null>(null);\n  const [optimistic, setOptimistic] = useState<{ readonly model?: ModelRef; readonly effort?: string }>({});\n  const uploadIds = useRef(0);\n  const uploads = useRef(new Set<AbortController>()), mounted = useRef(false);\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const current = () => mounted.current && active.current === controller && !controller.getSnapshot().disposed;\n  useEffect(() => {\n    mounted.current = true;\n    // A controller disposed before mount throws synchronously; the chat then renders its disposed state.\n    if (!controller.getSnapshot().disposed) void controller.connect().catch(cause => { if (current()) setError(cause instanceof Error ? cause.message : labels.connectionFailed); });\n    return () => { mounted.current = false; for (const upload of uploads.current) upload.abort(); uploads.current.clear(); };\n  }, [controller]);\n\n  const natural = presentation === 'natural';\n  // A tool's own renderer comes first; `renderTool` stays the catch-all.\n  const renderTool = useMemo(() => toolRenderers ? (call: ToolCall, result: ToolResultMessage | undefined) => (Object.hasOwn(toolRenderers, call.name) ? toolRenderers[call.name]?.(call, result) : undefined) ?? catchAll?.(call, result) : catchAll, [toolRenderers, catchAll]);\n  const developer = mode === 'developer' && !natural;\n  // Only the recogniser takes part in deriving rows; which card is open changes without rebuilding them.\n  const offered = artifacts?.recognise && artifacts.Card ? artifacts : undefined;\n  const artifactDetect = useMemo(() => offered?.recognise ? { recognise: offered.recognise, detect: offered.detect } : undefined, [offered?.recognise, offered?.detect]);\n  const subagent = cards?.subagent;\n  const derived = useMemo(() => derive(state.view, { mode, presentation, hideLine, renderEntry, renderTool, groupTool, artifacts: artifactDetect, subagent }), [state.view, mode, presentation, hideLine, renderEntry, renderTool, groupTool, artifactDetect, subagent]);\n  const queued = useMemo(() => queuedMessages(state.view), [state.view]);\n  const { run } = derived;\n  const earlier = useMemo<readonly Row[]>(() => {\n    if (!state.view || !('entries' in state.history)) return [];\n    const activeIds = new Set(state.view.entries.map(entry => entry.id));\n    const entries = state.history.entries.filter(entry => !activeIds.has(entry.id));\n    return derive({ ...state.view, entries, docs: {} }, { mode, presentation, hideLine, renderEntry: undefined, renderTool: undefined, groupTool: undefined, artifacts: artifactDetect, subagent }).rows\n      .map(row => ({ ...row, key: `history:${row.key}`, historical: true }));\n  }, [state.view, state.history, mode, presentation, hideLine, artifactDetect, subagent]);\n  const rows = useMemo(() => [...earlier, ...derived.rows], [earlier, derived.rows]);\n  const files = useMemo(() => {\n    const found = new Map<string, ConversationFile>();\n    const open = onOpenFile ?? mentions?.open;\n    const add = (path: string) => {\n      const normalized = path.replace(/^\\.\\//, '');\n      const id = `file:${normalized}`;\n      if (!found.has(id)) found.set(id, { id, name: displayName(normalized), open: open ? () => open(normalized) : undefined });\n    };\n    for (const path of picked) add(path);\n    for (const item of state.draft.attachments) found.set(`draft:${item.id}`, { id: `draft:${item.id}`, name: item.name, open: onOpenImage ? () => onOpenImage(item.content) : undefined });\n    for (const row of derived.rows) {\n      if (row.type === 'user') {\n        const content = typeof row.message.content === 'string' ? [{ type: 'text' as const, text: row.message.content }] : row.message.content;\n        for (const [index, part] of content.entries()) {\n          if (part.type === 'text' && !isFileBlock(part.text)) for (const piece of pieces(part.text, { mentions: true, skills: [] })) { if (piece.kind === 'mention' && piece.value) add(piece.value); }\n          if (part.type === 'image') { const id = `image:${row.key}:${index}`; found.set(id, { id, name: labels.imageAttachment, open: onOpenImage ? () => onOpenImage(part) : undefined }); }\n        }\n      }\n      if (row.type !== 'assistant') continue;\n      for (const part of row.parts) {\n        if (part.kind === 'artifact' && part.artifact.state === 'ready' && part.artifact.path !== undefined) {\n          const descriptor = part.artifact.descriptor as never, id = `file:${part.artifact.path.replace(/^\\.\\//, '')}`;\n          found.set(id, { id, name: displayName(part.artifact.path), open: artifacts?.open ? () => artifacts.open(descriptor) : undefined });\n        }\n        if (!natural && part.kind === 'tool' && part.entry.result && !part.entry.result.isError && ['read', 'write', 'edit'].includes(part.entry.call.name)) {\n          const path = part.entry.call.arguments['path'];\n          if (typeof path === 'string') add(path);\n        }\n      }\n    }\n    return [...found.values()];\n  }, [rows, picked, state.draft.attachments, artifacts, onOpenFile, mentions?.open, onOpenImage, labels.imageAttachment]);\n\n  const report = (cause: unknown) => { if (current()) setError(cause instanceof Error ? cause.message : labels.actionFailedShort); };\n  const act = (action: () => Promise<unknown>) => {\n    setError(null);\n    try { void action().catch(report); } catch (cause) { report(cause); }\n  };\n  // A send being confirmed does not block the next one: the controller empties the composer at once and queues the next message behind it.\n  // Only a submission whose outcome is unknown blocks, until it is checked or retried.\n  const unconfirmed = state.send.kind === 'unknown';\n  const connected = state.connection.kind === 'connected';\n  const sendBlocked = uploading > 0 || state.disposed || !connected || unconfirmed;\n  /** Puts a message back into the composer ahead of whatever is there now (nothing is dropped). */\n  const putBack = (text: string, images: readonly ChatAttachment[]) => {\n    if (controller.getSnapshot().disposed) return;\n    const draft = controller.getSnapshot().draft;\n    controller.setText([text, draft.text].filter(value => value.trim()).join('\\n'));\n    if (images.length) controller.setAttachments([...images, ...draft.attachments.filter(item => !images.some(image => image.id === item.id))]);\n  };\n  const working = Boolean(run);\n  const waitingForAnswer = derived.rows.some(row => row.type === 'assistant' && row.parts.some(part => (part.kind === 'question' || part.kind === 'approval') && !part.live && !part.result));\n  const send = () => {\n    if (sendBlocked || !current()) return;\n    const attach = feedback && feedback.count > 0 ? feedback.attach : undefined;\n    if (attach) {\n      // The pending feedback goes with this message: the host attaches it to the text, then the native send reads the draft.\n      act(async () => {\n        // Like any send, the composer empties at once; the person's own text comes back if the feedback or the message is refused.\n        const typed = controller.getSnapshot().draft;\n        controller.setText(''); controller.setAttachments([]);\n        let attached: Awaited<ReturnType<typeof attach>>;\n        try { attached = await attach(typed.text); }\n        catch (cause) { putBack(typed.text, typed.attachments); throw cause; }\n        if (attached.kind === 'refused') { putBack(typed.text, typed.attachments); throw new Error(attached.reason); }\n        if (!current()) { putBack(typed.text, typed.attachments); return; }\n        const submission = await controller.send('followUp', { text: attached.text, attachments: typed.attachments, restore: { text: typed.text, attachments: typed.attachments } });\n        if (submission) feedback?.sent();\n      });\n      afterSend?.();\n      textarea.current?.focus();\n      return;\n    }\n    act(() => controller.send('followUp'));\n    afterSend?.();\n    textarea.current?.focus();\n  };\n  // A queued message is taken back (withdrawn) before it is edited or steered; if Pi already placed it, that is reported and nothing is lost.\n  async function takeBack(item: QueuedMessage) {\n    if (!actions?.withdraw) throw new Error(labels.queueLocked);\n    const outcome = await actions.withdraw(item.id);\n    if (outcome === 'already_placed' || outcome === 'settled') throw new Error(labels.tooLate);\n  }\n  const queuedContent = (item: QueuedMessage) => {\n    const parts = Array.isArray(item.content) ? item.content as readonly { type?: unknown; text?: unknown; data?: unknown; mimeType?: unknown }[] : [];\n    const text = typeof item.content === 'string' ? item.content : parts.flatMap(part => part?.type === 'text' && typeof part.text === 'string' && !isFileBlock(part.text) ? [part.text] : []).join('\\n');\n    const images: ChatAttachment[] = parts.flatMap((part, index) => part?.type === 'image' && typeof part.data === 'string' && typeof part.mimeType === 'string'\n      ? [{ id: `queued-${String(item.id)}-${index}`, name: `image-${index + 1}`, content: { type: 'image' as const, data: part.data, mimeType: part.mimeType } }] : []);\n    return { text, images };\n  };\n  const queueActions: QueueActions | undefined = actions?.withdraw ? {\n    edit: async item => {\n      await takeBack(item);\n      const { text, images } = queuedContent(item), draft = controller.getSnapshot().draft;\n      controller.setText(draft.text.trim() ? `${text}\\n${draft.text}` : text);\n      if (images.length) controller.setAttachments([...draft.attachments, ...images]);\n      textarea.current?.focus();\n    },\n    steer: async item => {\n      if (sendBlocked) throw new Error(labels.waitToSteer);\n      await takeBack(item);\n      const { text, images } = queuedContent(item);\n      // Sent as explicit content, so the person's own draft is never touched; a refused steer comes back into the composer (the controller\n      // puts it back), an unknown one is held for checking.\n      try {\n        const submission = await controller.send('steer', { text, attachments: images });\n        if (!submission && current() && controller.getSnapshot().send.kind === 'blocked') setError(labels.steerRefused);\n      } catch (cause) { putBack(text, images); if (current()) setError(cause instanceof Error ? cause.message : labels.steerFailed); }\n    },\n  } : undefined;\n  const addMentions = (paths: readonly string[]) => {\n    const text = controller.getSnapshot().draft.text;\n    controller.setText(`${text}${text && !/\\s$/.test(text) ? ' ' : ''}${paths.map(mentionToken).join(' ')} `);\n    setPicked(value => [...new Set([...value, ...paths])]);\n  };\n  /** Uploads files; `restore` (a pasted text) is what their pending cards undo: it abandons the upload and puts the text back. */\n  async function upload(files: readonly File[], paste?: { readonly restore: () => void; readonly after: string }) {\n    if (!files.length || !current()) return;\n    if (onPickFiles) { onPickFiles(files); return; }\n    if (!onFiles && !attachments) return;\n    const abort = new AbortController(); uploads.current.add(abort); setUploading(value => value + 1);\n    const ids = files.map(() => `upload-${++uploadIds.current}`);\n    const settle = (failure?: string) => setPending(items => failure === undefined ? items.filter(item => !ids.includes(item.id))\n      : items.map(item => ids.includes(item.id) ? { ...item, state: 'failed', error: failure } : item));\n    const cancel = paste && (() => { abort.abort(); setPending(items => items.filter(item => !ids.includes(item.id))); paste.restore(); });\n    setPending(items => [...items, ...files.map((file, index): PendingUpload => ({ id: ids[index]!, name: file.name, state: 'uploading',\n      ...(cancel && paste ? { cancel, restoreWhile: paste.after } : {}) }))]);\n    try {\n      let added: readonly ChatAttachment[] = [];\n      let paths: string[] = [];\n      if (attachments) {\n        for (const result of await attachments.upload([...files], abort.signal)) {\n          if (result.image) added = [...added, { id: `image-${Date.now()}-${++uploadIds.current}`, name: result.name, content: { type: 'image', data: result.image.data, mimeType: result.image.mimeType } }];\n          else if (result.path) paths = [...paths, result.path];\n        }\n      } else added = await onFiles!(files, { identity: state.identity, conversationId: state.conversationId, signal: abort.signal });\n      if (current() && !abort.signal.aborted) {\n        if (added.length) controller.setAttachments([...controller.getSnapshot().draft.attachments, ...added]);\n        if (paths.length) addMentions(paths);\n        settle();\n      }\n    } catch (cause) { if (!abort.signal.aborted) { settle(cause instanceof Error ? cause.message : labels.uploadFailedShort); if (!attachments) report(cause); } }\n    finally { uploads.current.delete(abort); if (current()) setUploading(value => value - 1); }\n  }\n  /** A paste the composer took: saved as a file under `uploads/` (Send then references it). Cancelling puts the text back where it was pasted. */\n  const pasteText = (paste: PastedText) => {\n    if (!attachments || !current()) return;\n    const at = new Date(), two = (value: number) => String(value).padStart(2, '0');\n    const stamp = `${at.getFullYear()}-${two(at.getMonth() + 1)}-${two(at.getDate())} ${two(at.getHours())}-${two(at.getMinutes())}-${two(at.getSeconds())}`;\n    const markdown = looksLikeMarkdown(paste.text);\n    const file = new File([paste.text], `${labels.pastedFileName(stamp)}${markdown ? '.md' : '.txt'}`, { type: markdown ? 'text/markdown' : 'text/plain' });\n    // The pasted text replaces its selection when the paste is accepted, so the draft shows what is left. Restoring inserts the text at\n    // the same place and deletes nothing: whatever was typed since stays.\n    const draft = controller.getSnapshot().draft.text;\n    const start = Math.min(paste.start, draft.length), end = Math.min(Math.max(paste.end, start), draft.length);\n    const after = `${draft.slice(0, start)}${draft.slice(end)}`;\n    controller.setText(after);\n    const restore = () => {\n      if (!current()) return;\n      const now = controller.getSnapshot().draft.text;\n      const at = Math.min(start, now.length);\n      controller.setText(`${now.slice(0, at)}${paste.text}${now.slice(at)}`);\n      textarea.current?.focus();\n    };\n    void upload([file], { restore, after });\n  };\n  const agentDoc = object(state.view?.docs['pi.agent']);\n  const currentModel = object(agentDoc?.['model']);\n  const viewModel: ModelRef | undefined = typeof currentModel?.['provider'] === 'string' && typeof currentModel['modelId'] === 'string' ? { provider: currentModel['provider'], modelId: currentModel['modelId'] } : undefined;\n  const viewEffort = typeof agentDoc?.['thinkingLevel'] === 'string' ? agentDoc['thinkingLevel'] : undefined;\n  // Show the accepted choice until the watch delivers it, so the label does not flicker back.\n  useEffect(() => {\n    const same = optimistic.model && viewModel && optimistic.model.provider === viewModel.provider && optimistic.model.modelId === viewModel.modelId;\n    if (same || (optimistic.effort !== undefined && optimistic.effort === viewEffort)) setOptimistic(value => ({ ...(same ? {} : value.model ? { model: value.model } : {}), ...(optimistic.effort === viewEffort ? {} : value.effort ? { effort: value.effort } : {}) }));\n  }, [optimistic, viewModel?.provider, viewModel?.modelId, viewEffort]);\n  useEffect(() => { if (!state.draft.text) setPicked(value => value.length ? [] : value); }, [state.draft.text]);\n  async function change(kind: 'model' | 'effort', apply: () => Promise<void>, accepted: () => void, rejected: () => void) {\n    if (changing || !current()) return;\n    setChanging(kind); setChangeError(null);\n    try { await apply(); if (current()) accepted(); }\n    catch (cause) { if (current()) { rejected(); setChangeError(cause instanceof Error && cause.message ? cause.message : labels.changeRefused); } }\n    finally { if (current()) setChanging(null); }\n  }\n  const activateMention = (command: { readonly name: string; readonly behavior: 'execute' | 'insert' }) => {\n    if (!current() || controller.getSnapshot().connection.kind !== 'connected') return;\n    const catalog = commandMentions;\n    const selected = catalog?.commands.find(item => item.name === command.name && item.behavior === command.behavior);\n    if (catalog && selected) act(async () => catalog.onActivate({ name: selected.name, behavior: selected.behavior }));\n  };\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, natural, renderText, cards, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: 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 ? { mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.renderSent ?? mentions?.render, preview: mentions?.preview, audioUrl: mentions?.audioUrl } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }), [controller, developer, natural, 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 = 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={optimistic.model ?? viewModel} currentEffort={optimistic.effort ?? viewEffort} disabled={disabled} busy={changing}\n      onModel={next => void change('model', () => model!.change(next), () => setOptimistic(value => ({ ...value, model: next })), () => {})}\n      onEffort={next => void change('effort', () => effort!.change(next), () => setOptimistic(value => ({ ...value, effort: next })), () => {})} /> : undefined;\n    const barNote = changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${changeError} (${labels.dismissHint})`} onClick={() => setChangeError(null)}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const empty = connected && !state.view?.entries.length && !rows.length;\n  const loading = (state.connection.kind === 'idle' || state.connection.kind === 'connecting') && !state.view;\n\n  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: send, onStop: () => act(controller.stop),\n    hasFiles: Boolean(composerHasContent),\n    uploading: uploading > 0, canAttach: Boolean(onPickFiles || onFiles || attachments), ...(camera ? { camera } : {}), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void upload(files); },\n    slash, onSlashError: report, mentions, mentionPaths: picked, onMentionPicked: (path: string) => setPicked(value => value.includes(path) ? value : [...value, path]),\n    uploads: pending, onDismissUpload: (id: string) => setPending(items => items.filter(item => item.id !== id)),\n    onPasteText: attachments ? pasteText : undefined, pasteToFile,\n    quote: composerHeader,\n    feedback, chips: composerChips,\n  };\n\n  return { state, derived, rows, queued, queueActions, working, waitingForAnswer, connected, sendBlocked, error, setError, report, act, current, textarea, rowContext, composer, files, pickers, empty, loading, developer, natural };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\nexport interface ChatPaging { readonly first?: number; readonly more?: number }\nexport const PAGE_FIRST = 60, PAGE_MORE = 40, CHUNK = 20;\n\n/**\n * Rows grouped into runs of at most `size` keys, kept stable across renders. Rows already placed never change run: rows revealed\n * above form new runs (the run nearest the old top is the full one), rows added below fill the last run, then start new ones.\n */\nexport function chunkKeys(previous: readonly (readonly string[])[], keys: readonly string[], size = CHUNK): string[][] {\n  const owner = new Map<string, number>();\n  previous.forEach((run, index) => { for (const key of run) owner.set(key, index); });\n  const known = keys.findIndex(key => owner.has(key));\n  const lead = known < 0 ? keys.length : known;\n  const runs: string[][] = [];\n  for (let end = lead; end > 0; end -= size) runs.unshift(keys.slice(Math.max(0, end - size), end));\n  let current: string[] = [], from: number | undefined;\n  for (const key of keys.slice(lead)) {\n    const placed = owner.get(key);\n    if (!current.length || (placed !== undefined ? placed !== from : current.length >= size)) { current = []; runs.push(current); from = placed; }\n    current.push(key);\n  }\n  return runs;\n}\n\n/**\n * The scroller measures every one of its items on each scroll event and frame (@shadcn/react 0.3.1), so a long transcript gives it\n * runs of `CHUNK` rows instead of single rows: 500 messages are 25 measurements, not 500. A run keeps its element while rows are\n * revealed above it, so the scroller's prepend anchor still holds; a run's array is reused while its rows are unchanged.\n */\nexport function useRowChunks<T extends { readonly key: string }>(rows: readonly T[], size = CHUNK): readonly (readonly T[])[] {\n  const previous = useRef<{ readonly keys: readonly (readonly string[])[]; readonly runs: ReadonlyMap<string, readonly T[]> }>({ keys: [], runs: new Map() });\n  return useMemo(() => {\n    const byKey = new Map(rows.map(row => [row.key, row]));\n    const keys = chunkKeys(previous.current.keys, rows.map(row => row.key), size);\n    const runs = keys.map(run => {\n      const items = run.map(key => byKey.get(key)!);\n      const before = previous.current.runs.get(run[0]!);\n      return before && before.length === items.length && before.every((item, index) => item === items[index]) ? before : items;\n    });\n    previous.current = { keys, runs: new Map(runs.map(run => [run[0]!.key, run])) };\n    return runs;\n  }, [rows, size]);\n}\n\n/** One scroll root for current and archived rows. Native paging stays in the borrowed controller. */\nexport function useTranscript(rows: readonly { readonly key: string }[], page = PAGE_FIRST, more = PAGE_MORE, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }, automatic = true) {\n  if (!Number.isSafeInteger(page) || page < 1) throw new TypeError('Chat displayLimit must be a positive integer');\n  if (!Number.isSafeInteger(more) || more < 1) throw new TypeError('Chat paging.more must be a positive integer');\n  const [limit, setLimit] = useState(page);\n  const [sentinel, setSentinel] = useState<HTMLDivElement | null>(null);\n  const [loaded, setLoaded] = useState(0);\n  const pending = useRef(false);\n  const anchor = useRef<{ readonly length: number; readonly limit: number } | undefined>(undefined);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  const stick = { scrollRef: setScroller, scrollToBottom, isAtBottom: !scrollable.end };\n  const hidden = Math.max(0, rows.length - limit);\n  const reveal = useCallback(() => {\n    if (pending.current || anchor.current) return;\n    const state = history?.state;\n    if (hidden === 0 && (!history?.connected || !state || state.kind === 'disabled' || state.kind === 'loading' || state.kind === 'ready' && !state.hasMore)) return;\n    anchor.current = { length: rows.length, limit };\n    // A revealed page renders as a transition: React mounts it in small slices, so scrolling stays responsive meanwhile.\n    if (hidden > 0) startTransition(() => setLimit(value => value + more));\n    else if (history) {\n      pending.current = true;\n      void Promise.resolve().then(history.load).catch(() => { anchor.current = undefined; }).finally(() => { pending.current = false; });\n    }\n  }, [hidden, history?.state, history?.connected, history?.load, rows.length, limit, more]);\n  useLayoutEffect(() => {\n    const saved = anchor.current;\n    if (!scroller || !saved || history?.state.kind === 'loading') return;\n    const added = Math.max(0, rows.length - saved.length);\n    if (limit < saved.limit + added) { startTransition(() => setLimit(saved.limit + added)); return; }\n    anchor.current = undefined;\n    setLoaded(count => count + Math.max(0, Math.min(rows.length, limit) - Math.min(saved.length, saved.limit)));\n  }, [rows, limit, scroller, history?.state]);\n  // Automatic paging: the sentinel near the top, once the reader has been away from the top (so the mount, which starts at the\n  // top before the scroller settles at the end, loads nothing). A fast scroll lands on 0 before the sentinel is seen: the scroll\n  // listener and every new observer (after each page) check again, instead of the reader's distance at that one moment.\n  const near = useRef(false), away = useRef(false), revealNow = useRef(reveal);\n  revealNow.current = reveal;\n  useEffect(() => {\n    if (!automatic || !scroller) return;\n    const onScroll = () => { if (scroller.scrollTop > 8) away.current = true; if (near.current && away.current) revealNow.current(); };\n    scroller.addEventListener('scroll', onScroll, { passive: true });\n    return () => scroller.removeEventListener('scroll', onScroll);\n  }, [automatic, scroller]);\n  useEffect(() => {\n    if (!automatic || !scroller || !sentinel || typeof IntersectionObserver === 'undefined' || history?.state.kind === 'loading' || history?.state.kind === 'error') return;\n    const observer = new IntersectionObserver(entries => {\n      near.current = entries.at(-1)?.isIntersecting ?? near.current;\n      if (near.current && (scroller.scrollHeight <= scroller.clientHeight || away.current)) reveal();\n    }, { root: scroller, rootMargin: '240px 0px 0px' });\n    observer.observe(sentinel);\n    return () => { observer.disconnect(); near.current = false; };\n  }, [automatic, scroller, sentinel, reveal, history?.state]);\n  const revealTo = (key: string) => { const index = rows.findIndex(row => row.key === key); if (index >= 0) setLimit(value => Math.max(value, rows.length - index)); };\n  return { stick, hidden, reveal, revealTo, sentinelRef: setSentinel, loaded, visible: <T,>(items: readonly T[]): readonly T[] => hidden ? items.slice(hidden) : items, reset: () => { anchor.current = undefined; setLimit(page); } };\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/session.tsx"
     },
@@ -185,7 +185,7 @@
     },
     {
       "path": "registry/pi-chat/labels.ts",
-      "content": "/*\n * Every word the chat shows, and the icons it draws, as plain data. A host passes a partial `labels` (and `icons`) object to `PiChat`\n * (or `AmbientChat`, `AgentWorkspace`): what it leaves out keeps the default below. Strings that need a value are functions. No i18n\n * framework: an app that translates passes its own object per language.\n */\nimport { createContext, createElement, useContext, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { ArrowDownIcon, ArrowUpIcon, CameraIcon, GitForkIcon, HistoryIcon, ListEndIcon, MessagesSquareIcon, PaperclipIcon, PlusIcon, RefreshCwIcon, SquareIcon } from 'lucide-react';\nimport type { BlockIcon } from '../button/actions';\nimport { withDefaults } from '../utils/utils';\n\nconst TOOL_VERBS: Readonly<Record<string, string>> = { read: 'Reading', write: 'Writing', edit: 'Editing', ls: 'Listing', list_files: 'Listing', find: 'Searching', grep: 'Searching', load_skill: 'Loading skill', bash: 'Running bash' };\nconst TOOL_NOUNS: Readonly<Record<string, string>> = { bash: 'command', read: 'read', write: 'write', edit: 'edit', find: 'find', grep: 'search', ls: 'list' };\n\nconst EFFORT_NAMES: Readonly<Record<string, string>> = { off: 'Off', minimal: 'Minimal', low: 'Low', medium: 'Medium', high: 'High', xhigh: 'Extra high', max: 'Max' };\nconst EFFORT_DETAILS: Readonly<Record<string, string>> = { off: 'No extra reasoning', minimal: 'Barely any reasoning', low: 'Light reasoning', medium: 'Balanced reasoning', high: 'Deep reasoning', xhigh: 'Deeper reasoning', max: 'Maximum reasoning' };\n\nexport const defaultChatLabels = {\n  // Header and transcript\n  /** The chat's name: the header title, the region's name and the empty state's title. */\n  title: 'Conversation',\n  history: 'History',\n  artifacts: 'Artifacts',\n  search: 'Search',\n  live: 'Live',\n  connecting: 'Connecting…',\n  reconnecting: 'Reconnecting…',\n  loadFailed: 'Conversation could not be loaded.',\n  disconnected: 'Disconnected. Last observed messages remain visible.',\n  reconnect: 'Reconnect',\n  requiredActions: 'Required conversation actions',\n  messages: 'Messages',\n  showEarlier: 'Show earlier messages',\n  loading: 'Loading conversation…',\n  emptyDescription: 'Start a conversation.',\n  jumpToLatest: 'Jump to latest',\n  agentWorking: 'Agent is working',\n  waitingForAnswer: 'Waiting for your answer',\n  retryPending: 'Native retry pending',\n  compacting: 'Native context compaction in progress',\n  /** The one status of `presentation=\"natural\"` while the agent works (any tool, retry or compaction), instead of the activity wording above. */\n  preparing: 'Preparing…',\n  /** In `presentation=\"natural\"`, replaces the controller's own reason when a send is blocked. */\n  sendUnavailable: 'Sending is not available right now.',\n  /** The \"…\" menu of host actions (header, replies). */\n  moreActions: 'More actions',\n  // Notices\n  sendUnknown: 'Submission acknowledgement is unknown. The message is kept until you check or retry it.',\n  checkSubmission: 'Check original submission',\n  retrySame: 'Retry same request',\n  stopRequested: 'Stop requested. Waiting for native confirmation.',\n  stopUnconfirmed: 'Stop is unconfirmed. Work may still be running.',\n  steerRefused: 'The message could not be steered; it is back in the message box.',\n  tooLate: 'Too late: that message has already started.',\n  tooLateToRemove: 'Too late to remove: that message has already started.',\n  queueFailed: 'The message could not be changed.',\n  queueLocked: 'Queued messages cannot be changed here.',\n  waitToSteer: 'Wait for the current send to finish, then steer.',\n  steerFailed: 'The message could not be steered.',\n  connectionFailed: 'Connection failed',\n  actionFailedShort: 'Action failed',\n  uploadFailedShort: 'Upload failed',\n  changeRefused: 'The change was refused',\n  dismissHint: 'click to dismiss',\n  // Composer\n  placeholder: 'Message the agent…',\n  placeholderWorking: 'Queue a message…',\n  messageInput: 'Message',\n  send: 'Send',\n  sendHint: 'Send (Enter)',\n  stop: 'Stop',\n  queue: 'Queue',\n  add: 'Add',\n  attachFiles: 'Attach files',\n  takePhoto: 'Take a photo',\n  cameraShoot: 'Take the photo',\n  cameraClose: 'Close the camera',\n  cameraUnavailable: 'The camera cannot open on this page.',\n  cameraFallback: \"Use the phone's camera\",\n  commands: 'Commands',\n  annotate: 'Annotate',\n  annotateHint: 'Annotate: click what you want to comment on (Esc to stop)',\n  annotateNotes: (count: number) => `${count} ${count === 1 ? 'note' : 'notes'}`,\n  annotateClear: 'Remove the notes',\n  feedbackSent: (count: number) => `${count} ${count === 1 ? 'comment' : 'comments'} on the page`,\n  remove: (name: string) => `Remove ${name}`,\n  dismiss: (name: string) => `Dismiss ${name}`,\n  uploading: (name: string) => `Uploading ${name}…`,\n  uploadFailed: (name: string, error: string | undefined) => `${name}: ${error ?? 'upload failed'}`,\n  preparingAttachments: 'Preparing attachments…',\n  preparingAttachmentsShort: 'Preparing attachments',\n  mentionedFiles: 'Mentioned files',\n  uploads: 'Uploads',\n  attachments: 'Attachments',\n  /** The type line of a file card in a sent message. */\n  fileKind: { document: 'Document', image: 'Image', pdf: 'PDF', sheet: 'Spreadsheet', slides: 'Presentation', audio: 'Audio', file: 'File' },\n  openFile: (name: string) => `Open ${name}`,\n  fileChange: { created: 'Created', edited: 'Edited' },\n  /** The name of a pasted text file: the words and the time it was pasted. */\n  pastedFileName: (stamp: string) => `Pasted text ${stamp}`,\n  restorePaste: 'Put the pasted text back in the message',\n  searchCommands: 'Search commands',\n  filterBySource: 'Filter by source',\n  allSources: 'All',\n  noCommands: 'No matching commands.',\n  /** A `/` menu filter chip: `skills`, `built-in` or a plugin's name. */\n  slashGroup: (group: string) => group,\n  skillBadge: 'skill',\n  workspaceFiles: 'Workspace files',\n  searchFailed: 'Search failed',\n  model: 'Model',\n  effort: 'Effort',\n  effortDefault: 'Default',\n  modelAndEffort: 'Model and effort',\n  modelSummary: (model: string | undefined, effort: string | undefined) => [model && `Model: ${model}`, effort && `Effort: ${effort}`].filter(Boolean).join(', '),\n  /** A thinking level's name and short description in the picker. */\n  effortName: (level: string) => EFFORT_NAMES[level] ?? level,\n  effortDetail: (level: string): string | undefined => EFFORT_DETAILS[level],\n  // Voice input (the microphone button beside the composer)\n  voiceRecord: 'Record a message',\n  voiceHold: 'Hold to record, release to send',\n  voiceRecording: 'Recording',\n  voicePreparing: 'Preparing voice message…',\n  voiceAudioOnly: 'Send audio only',\n  voiceDiscard: 'Discard',\n  voicePlay: 'Play voice message',\n  voicePause: 'Pause voice message',\n  voicePlayFailed: 'The audio could not be played. Try again.',\n  voiceBlocked: 'Not sent. Review the chat notice before trying again.',\n  voiceUnconfirmed: 'Message admission is unconfirmed. Use the chat notice to reconcile.',\n  voiceStop: 'Stop recording',\n  voiceCancel: 'Cancel recording',\n  voiceTranscribing: 'Transcribing…',\n  voiceNothingHeard: 'Nothing was heard. Try again.',\n  voiceTranscribeFailed: 'The recording could not be transcribed. Try again.',\n  voiceDenied: 'Microphone blocked. Allow it for this site in the browser, then press record again.',\n  voiceNoMicrophone: 'No microphone found. Connect one, then press record again.',\n  voiceBusy: 'The microphone is busy or could not be opened. Close other apps using it and try again.',\n  voiceInsecure: 'Recording needs a secure page (https or localhost).',\n  voiceUnsupported: 'This browser cannot record audio here.',\n  voiceStartFailed: 'The microphone could not be started.',\n  // Queue\n  queuedMessages: 'Queued messages',\n  steer: 'Steer',\n  steerHint: 'Send this into the running turn now',\n  steering: 'Steering',\n  queued: 'Queued',\n  removeQueued: 'Remove queued message',\n  removeHint: 'Remove',\n  more: 'More',\n  edit: 'Edit',\n  sending: 'Sending',\n  images: (count: number) => `[${count} image${count === 1 ? '' : 's'}]`,\n  // Conversation list and history\n  historyDialog: 'Conversation history',\n  newConversation: 'New',\n  untitled: 'New conversation',\n  closeHistory: 'Close history',\n  close: 'Close',\n  earlierInConversation: 'Earlier messages in this conversation',\n  searchConversations: 'Search conversations',\n  archived: 'Archived',\n  current: 'Current',\n  noMatch: (query: string) => `No conversation matches “${query}”.`,\n  noArchived: 'No archived conversations.',\n  noConversations: 'No conversations yet.',\n  loadingConversations: 'Loading conversations…',\n  actionFailed: 'That did not work. Try again.',\n  rename: 'Rename',\n  renameItem: (title: string) => `Rename ${title}`,\n  conversationName: 'Conversation name',\n  save: 'Save',\n  archive: 'Archive',\n  restore: 'Restore',\n  archiveItem: (title: string, archived: boolean) => `${archived ? 'Restore' : 'Archive'} ${title}`,\n  delete: 'Delete',\n  deleteItem: (title: string) => `Delete ${title}`,\n  keep: 'Keep conversation',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  previousWeek: 'Previous 7 days',\n  older: 'Older',\n  conversations: 'Conversations',\n  earlierMessages: 'Earlier messages',\n  readOnly: '(read-only)',\n  retry: 'Retry',\n  loadingShort: 'Loading…',\n  loadEarlier: 'Load earlier',\n  loadEarlierMessages: 'Load earlier messages',\n  earlierMessagesLoaded: (count: number) => `${count} earlier messages loaded`,\n  returnToConversation: 'Return to active conversation',\n  historyFailed: 'Conversation history could not be loaded. The previous page remains visible.',\n  loadPage: 'Load a page to browse earlier messages.',\n  noRecords: 'No records in this history page.',\n  beginning: 'Start of conversation',\n  justNow: 'now',\n  roleSystem: 'System',\n  roleToolResult: (tool: string, failed: boolean) => `Tool result: ${tool}${failed ? ' (failed)' : ''}`,\n  roleUser: 'You',\n  roleAssistant: (outcome: 'ok' | 'interrupted' | 'failed'): string => outcome === 'interrupted' ? 'Assistant (interrupted)' : outcome === 'failed' ? 'Assistant (failed)' : 'Assistant',\n  roleEvent: 'Event',\n  contextBoundary: 'Context boundary',\n  // Messages\n  copy: 'Copy',\n  copied: 'Copied',\n  copyFailed: 'Copy failed',\n  failed: 'Failed',\n  copyResponse: 'Copy response',\n  copyCode: 'Copy code',\n  fork: 'Fork from here',\n  forkHint: 'Fork from here: a new conversation with the messages up to this reply',\n  responseFailed: 'The response failed',\n  interrupted: 'Response interrupted',\n  thinking: 'Thinking…',\n  openImage: 'Open image attachment',\n  imageAttachment: 'Image attachment',\n  imagePosition: (index: number, count: number) => `Image ${index} of ${count}`,\n  previousImage: 'Previous image',\n  nextImage: 'Next image',\n  systemContext: 'System context',\n  toolFailed: (tool: string) => `${tool} failed`,\n  event: (label: string) => `Event: ${label}`,\n  // Activity and tools\n  reasoning: 'Reasoning',\n  thinkingStep: 'Thinking',\n  steps: (count: number) => `${count} ${count === 1 ? 'step' : 'steps'}`,\n  toolRunning: 'Running',\n  toolCompleted: 'Completed',\n  toolFailedStatus: 'Failed',\n  toolUnfinished: 'No result',\n  arguments: 'Arguments',\n  result: 'Result',\n  error: 'Error',\n  openImageResult: 'Open image result',\n  emptyResult: 'Empty result',\n  /** The live line of a running tool call; `hint` is what it acts on (a path, a command), possibly empty. */\n  toolActivity: (tool: string, hint: string) => {\n    const verb = TOOL_VERBS[tool] ?? `Running ${tool}`;\n    return hint ? `${verb}${tool === 'bash' ? ':' : ''} ${hint}` : verb;\n  },\n  /** How a tool is named in a finished activity summary (\"Used read ×3 · command\"). */\n  toolNoun: (tool: string) => TOOL_NOUNS[tool] ?? tool,\n  // Approval and question cards\n  approvalNeeded: 'Approval needed',\n  needsApproval: 'Needs your approval',\n  approve: 'Approve',\n  deny: 'Deny',\n  approved: 'Approved',\n  denied: 'Denied',\n  notDecided: 'Not decided: the run was stopped',\n  wantsToRun: 'The agent wants to run',\n  decision: 'Decision',\n  stillWritingCall: 'The agent is still writing this call…',\n  decidingUnavailable: 'Deciding is not available in this view.',\n  decisionSent: (approved: boolean) => `${approved ? 'Approved.' : 'Denied.'} Waiting for the agent…`,\n  decisionRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This call was already decided.' : 'This call is no longer waiting for a decision.',\n  decisionNotSent: 'The decision could not be sent.',\n  waitingForAgent: 'Waiting for the agent…',\n  question: 'Question',\n  questionForYou: 'Question for you',\n  notAnswered: 'Not answered',\n  answered: 'Answered',\n  askedQuestion: 'The agent asked a question.',\n  answerOptions: 'Answer options',\n  ownAnswer: 'Or type your own answer',\n  typeAnswer: 'Type your answer',\n  yourAnswerInput: 'Your answer',\n  /** A question of a form left blank, in the answer sent to the agent. */\n  skipped: '(no answer)',\n  answer: 'Answer',\n  stillWritingQuestion: 'The agent is still writing this question…',\n  answeringUnavailable: 'Answering is not available in this view.',\n  answerRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This question was already answered.' : 'This question is no longer waiting for an answer.',\n  answerNotSent: 'The answer could not be sent.',\n  yourAnswer: 'Your answer:',\n  // Run card (a headless run: `runs/<id>`)\n  run: 'Run',\n  runStatus: (status: 'queued' | 'running' | 'completed' | 'failed'): string => ({ queued: 'Queued', running: 'Running', completed: 'Completed', failed: 'Failed' })[status],\n  runElapsed: (time: string) => `Running for ${time}`,\n  runDuration: (time: string) => `Took ${time}`,\n  runRefresh: 'Refresh',\n  runNotLoaded: 'The run could not be loaded.',\n  // Sub-agent card (a `delegate` call)\n  subagentStatus: (status: 'running' | 'done' | 'failed' | 'cancelled'): string => ({ running: 'Running', done: 'Done', failed: 'Failed', cancelled: 'Stopped' })[status],\n  subagentTime: 'Time',\n  subagentToolCalls: (count: number) => `${count} tool ${count === 1 ? 'call' : 'calls'}`,\n  subagentTokens: (input: number, output: number) => `${input} tokens in, ${output} tokens out`,\n  subagentConversation: (id: number) => `Open conversation ${id}`,\n  // Artifact cards\n  artifact: 'Artifact',\n  artifactTypes: { markdown: 'Document', html: 'HTML page', svg: 'SVG image', code: 'Code', canvas: 'Canvas' },\n  opening: 'Opening…',\n  viewing: 'Viewing',\n  version: (ordinal: number) => `Version ${ordinal}`,\n  runCommand: (name: string, execute: boolean) => `${execute ? 'Run' : 'Insert'} /${name} command`,\n  taskStatus: 'Task status',\n  activityFailed: (count: number, tools: string) => `${count > 1 ? `${count} steps failed` : 'Step failed'}: ${tools}`,\n  activityUsed: (summary: string, stopped: boolean) => `${stopped ? 'Stopped · ' : 'Used '}${summary}`,\n  activityThought: 'Thought it through',\n  activityMany: (steps: number) => `Worked through ${steps} steps`,\n  open: 'Open',\n  openArtifact: (title: string, version: number | undefined) => version === undefined ? `Open ${title}` : `Open ${title}, version ${version}`,\n};\n\nexport type ChatLabels = typeof defaultChatLabels;\n\n/** The chat's icons. Any component that takes `className` (every lucide icon does). */\nexport const defaultChatIcons = {\n  /** The agent's glyph in the empty state (the header shows the host's `avatar`, if any). */\n  agent: MessagesSquareIcon as BlockIcon,\n  send: ArrowUpIcon as BlockIcon,\n  stop: SquareIcon as BlockIcon,\n  history: HistoryIcon as BlockIcon,\n  newChat: PlusIcon as BlockIcon,\n  add: PlusIcon as BlockIcon,\n  attach: PaperclipIcon as BlockIcon,\n  camera: CameraIcon as BlockIcon,\n  queue: ListEndIcon as BlockIcon,\n  jumpToLatest: ArrowDownIcon as BlockIcon,\n  reconnect: RefreshCwIcon as BlockIcon,\n  fork: GitForkIcon as BlockIcon,\n};\n\nexport type ChatIcons = typeof defaultChatIcons;\n\n/** What the chat's pieces read: the merged labels and icons. */\nexport interface ChatText { readonly labels: ChatLabels; readonly icons: ChatIcons }\n/** The defaults, as `useMergedText`'s base. */\nexport const defaultChatText: ChatText = { labels: defaultChatLabels, icons: defaultChatIcons };\nconst DEFAULT_TEXT = defaultChatText;\nconst ChatTextContext = createContext<ChatText>(DEFAULT_TEXT);\n\n/** The labels and icons of the surrounding chat (the defaults outside one). */\nexport const useChatText = (): ChatText => useContext(ChatTextContext);\n\n/** Merges the host's partial labels and icons over the defaults (or over `base`), keeping one object while they do not change. */\nexport function useMergedText<L extends ChatLabels = ChatLabels, I extends ChatIcons = ChatIcons>(labels: Partial<L> | undefined, icons: Partial<I> | undefined,\n  base: { readonly labels: L; readonly icons: I } = DEFAULT_TEXT as { readonly labels: L; readonly icons: I }): { readonly labels: L; readonly icons: I } {\n  return useMemo(() => ({ labels: withDefaults(base.labels, labels), icons: withDefaults(base.icons, icons) }), [labels, icons, base]);\n}\n\n/** Provides the chat's labels and icons to everything inside (composer, queue, rows, history). */\nexport function ChatTextProvider({ value, children }: { readonly value: ChatText; readonly children: ReactNode }) {\n  return createElement(ChatTextContext.Provider, { value }, children);\n}\n",
+      "content": "/*\n * Every word the chat shows, and the icons it draws, as plain data. A host passes a partial `labels` (and `icons`) object to `PiChat`\n * (or `AmbientChat`, `AgentWorkspace`): what it leaves out keeps the default below. Strings that need a value are functions. No i18n\n * framework: an app that translates passes its own object per language.\n */\nimport { createContext, createElement, useContext, useMemo, useRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { ArrowDownIcon, ArrowUpIcon, CameraIcon, GitForkIcon, HistoryIcon, ListEndIcon, MessagesSquareIcon, PaperclipIcon, PlusIcon, RefreshCwIcon, SquareIcon } from 'lucide-react';\nimport type { BlockIcon } from '../button/actions';\nimport { withDefaults } from '../utils/utils';\n\nconst TOOL_VERBS: Readonly<Record<string, string>> = { read: 'Reading', write: 'Writing', edit: 'Editing', ls: 'Listing', list_files: 'Listing', find: 'Searching', grep: 'Searching', load_skill: 'Loading skill', bash: 'Running bash' };\nconst TOOL_NOUNS: Readonly<Record<string, string>> = { bash: 'command', read: 'read', write: 'write', edit: 'edit', find: 'find', grep: 'search', ls: 'list' };\n\nconst EFFORT_NAMES: Readonly<Record<string, string>> = { off: 'Off', minimal: 'Minimal', low: 'Low', medium: 'Medium', high: 'High', xhigh: 'Extra high', max: 'Max' };\nconst EFFORT_DETAILS: Readonly<Record<string, string>> = { off: 'No extra reasoning', minimal: 'Barely any reasoning', low: 'Light reasoning', medium: 'Balanced reasoning', high: 'Deep reasoning', xhigh: 'Deeper reasoning', max: 'Maximum reasoning' };\n\nexport const defaultChatLabels = {\n  // Header and transcript\n  /** The chat's name: the header title, the region's name and the empty state's title. */\n  title: 'Conversation',\n  history: 'History',\n  artifacts: 'Artifacts',\n  search: 'Search',\n  live: 'Live',\n  connecting: 'Connecting…',\n  reconnecting: 'Reconnecting…',\n  loadFailed: 'Conversation could not be loaded.',\n  disconnected: 'Disconnected. Last observed messages remain visible.',\n  reconnect: 'Reconnect',\n  requiredActions: 'Required conversation actions',\n  messages: 'Messages',\n  showEarlier: 'Show earlier messages',\n  loading: 'Loading conversation…',\n  emptyDescription: 'Start a conversation.',\n  jumpToLatest: 'Jump to latest',\n  agentWorking: 'Agent is working',\n  waitingForAnswer: 'Waiting for your answer',\n  retryPending: 'Native retry pending',\n  compacting: 'Native context compaction in progress',\n  /** The one status of `presentation=\"natural\"` while the agent works (any tool, retry or compaction), instead of the activity wording above. */\n  preparing: 'Preparing…',\n  /** In `presentation=\"natural\"`, replaces the controller's own reason when a send is blocked. */\n  sendUnavailable: 'Sending is not available right now.',\n  /** The \"…\" menu of host actions (header, replies). */\n  moreActions: 'More actions',\n  // Notices\n  sendUnknown: 'Submission acknowledgement is unknown. The message is kept until you check or retry it.',\n  checkSubmission: 'Check original submission',\n  retrySame: 'Retry same request',\n  stopRequested: 'Stop requested. Waiting for native confirmation.',\n  stopUnconfirmed: 'Stop is unconfirmed. Work may still be running.',\n  steerRefused: 'The message could not be steered; it is back in the message box.',\n  tooLate: 'Too late: that message has already started.',\n  tooLateToRemove: 'Too late to remove: that message has already started.',\n  queueFailed: 'The message could not be changed.',\n  queueLocked: 'Queued messages cannot be changed here.',\n  waitToSteer: 'Wait for the current send to finish, then steer.',\n  steerFailed: 'The message could not be steered.',\n  connectionFailed: 'Connection failed',\n  actionFailedShort: 'Action failed',\n  uploadFailedShort: 'Upload failed',\n  changeRefused: 'The change was refused',\n  dismissHint: 'click to dismiss',\n  // Composer\n  placeholder: 'Message the agent…',\n  placeholderWorking: 'Queue a message…',\n  messageInput: 'Message',\n  send: 'Send',\n  sendHint: 'Send (Enter)',\n  stop: 'Stop',\n  queue: 'Queue',\n  add: 'Add',\n  attachFiles: 'Attach files',\n  takePhoto: 'Take a photo',\n  cameraShoot: 'Take the photo',\n  cameraClose: 'Close the camera',\n  cameraUnavailable: 'The camera cannot open on this page.',\n  cameraFallback: \"Use the phone's camera\",\n  commands: 'Commands',\n  annotate: 'Annotate',\n  annotateHint: 'Annotate: click what you want to comment on (Esc to stop)',\n  annotateNotes: (count: number) => `${count} ${count === 1 ? 'note' : 'notes'}`,\n  annotateClear: 'Remove the notes',\n  feedbackSent: (count: number) => `${count} ${count === 1 ? 'comment' : 'comments'} on the page`,\n  remove: (name: string) => `Remove ${name}`,\n  dismiss: (name: string) => `Dismiss ${name}`,\n  uploading: (name: string) => `Uploading ${name}…`,\n  uploadFailed: (name: string, error: string | undefined) => `${name}: ${error ?? 'upload failed'}`,\n  preparingAttachments: 'Preparing attachments…',\n  preparingAttachmentsShort: 'Preparing attachments',\n  mentionedFiles: 'Mentioned files',\n  uploads: 'Uploads',\n  attachments: 'Attachments',\n  /** The type line of a file card in a sent message. */\n  fileKind: { document: 'Document', image: 'Image', pdf: 'PDF', sheet: 'Spreadsheet', slides: 'Presentation', audio: 'Audio', file: 'File' },\n  openFile: (name: string) => `Open ${name}`,\n  fileChange: { created: 'Created', edited: 'Edited' },\n  /** The name of a pasted text file: the words and the time it was pasted. */\n  pastedFileName: (stamp: string) => `Pasted text ${stamp}`,\n  restorePaste: 'Put the pasted text back in the message',\n  searchCommands: 'Search commands',\n  filterBySource: 'Filter by source',\n  allSources: 'All',\n  noCommands: 'No matching commands.',\n  /** A `/` menu filter chip: `skills`, `built-in` or a plugin's name. */\n  slashGroup: (group: string) => group,\n  skillBadge: 'skill',\n  workspaceFiles: 'Workspace files',\n  searchFailed: 'Search failed',\n  model: 'Model',\n  effort: 'Effort',\n  effortDefault: 'Default',\n  modelAndEffort: 'Model and effort',\n  modelSummary: (model: string | undefined, effort: string | undefined) => [model && `Model: ${model}`, effort && `Effort: ${effort}`].filter(Boolean).join(', '),\n  /** A thinking level's name and short description in the picker. */\n  effortName: (level: string) => EFFORT_NAMES[level] ?? level,\n  effortDetail: (level: string): string | undefined => EFFORT_DETAILS[level],\n  // Voice input (the microphone button beside the composer)\n  voiceRecord: 'Record a message',\n  voiceHold: 'Hold to record, release to send',\n  voiceRecording: 'Recording',\n  voicePreparing: 'Preparing voice message…',\n  voiceAudioOnly: 'Send audio only',\n  voiceDiscard: 'Discard',\n  voicePlay: 'Play voice message',\n  voicePause: 'Pause voice message',\n  voicePlayFailed: 'The audio could not be played. Try again.',\n  voiceBlocked: 'Not sent. Review the chat notice before trying again.',\n  voiceUnconfirmed: 'Message admission is unconfirmed. Use the chat notice to reconcile.',\n  voiceStop: 'Stop recording',\n  voiceCancel: 'Cancel recording',\n  voiceTranscribing: 'Transcribing…',\n  voiceNothingHeard: 'Nothing was heard. Try again.',\n  voiceTranscribeFailed: 'The recording could not be transcribed. Try again.',\n  voiceDenied: 'Microphone blocked. Allow it for this site in the browser, then press record again.',\n  voiceNoMicrophone: 'No microphone found. Connect one, then press record again.',\n  voiceBusy: 'The microphone is busy or could not be opened. Close other apps using it and try again.',\n  voiceInsecure: 'Recording needs a secure page (https or localhost).',\n  voiceUnsupported: 'This browser cannot record audio here.',\n  voiceStartFailed: 'The microphone could not be started.',\n  // Queue\n  queuedMessages: 'Queued messages',\n  steer: 'Steer',\n  steerHint: 'Send this into the running turn now',\n  steering: 'Steering',\n  queued: 'Queued',\n  removeQueued: 'Remove queued message',\n  removeHint: 'Remove',\n  more: 'More',\n  edit: 'Edit',\n  sending: 'Sending',\n  images: (count: number) => `[${count} image${count === 1 ? '' : 's'}]`,\n  // Conversation list and history\n  historyDialog: 'Conversation history',\n  newConversation: 'New',\n  untitled: 'New conversation',\n  closeHistory: 'Close history',\n  close: 'Close',\n  earlierInConversation: 'Earlier messages in this conversation',\n  searchConversations: 'Search conversations',\n  archived: 'Archived',\n  current: 'Current',\n  noMatch: (query: string) => `No conversation matches “${query}”.`,\n  noArchived: 'No archived conversations.',\n  noConversations: 'No conversations yet.',\n  loadingConversations: 'Loading conversations…',\n  actionFailed: 'That did not work. Try again.',\n  rename: 'Rename',\n  renameItem: (title: string) => `Rename ${title}`,\n  conversationName: 'Conversation name',\n  save: 'Save',\n  archive: 'Archive',\n  restore: 'Restore',\n  archiveItem: (title: string, archived: boolean) => `${archived ? 'Restore' : 'Archive'} ${title}`,\n  delete: 'Delete',\n  deleteItem: (title: string) => `Delete ${title}`,\n  keep: 'Keep conversation',\n  today: 'Today',\n  yesterday: 'Yesterday',\n  previousWeek: 'Previous 7 days',\n  older: 'Older',\n  conversations: 'Conversations',\n  earlierMessages: 'Earlier messages',\n  readOnly: '(read-only)',\n  retry: 'Retry',\n  loadingShort: 'Loading…',\n  loadEarlier: 'Load earlier',\n  loadEarlierMessages: 'Load earlier messages',\n  earlierMessagesLoaded: (count: number) => `${count} earlier messages loaded`,\n  returnToConversation: 'Return to active conversation',\n  historyFailed: 'Conversation history could not be loaded. The previous page remains visible.',\n  loadPage: 'Load a page to browse earlier messages.',\n  noRecords: 'No records in this history page.',\n  beginning: 'Start of conversation',\n  justNow: 'now',\n  roleSystem: 'System',\n  roleToolResult: (tool: string, failed: boolean) => `Tool result: ${tool}${failed ? ' (failed)' : ''}`,\n  roleUser: 'You',\n  roleAssistant: (outcome: 'ok' | 'interrupted' | 'failed'): string => outcome === 'interrupted' ? 'Assistant (interrupted)' : outcome === 'failed' ? 'Assistant (failed)' : 'Assistant',\n  roleEvent: 'Event',\n  contextBoundary: 'Context boundary',\n  // Messages\n  copy: 'Copy',\n  copied: 'Copied',\n  copyFailed: 'Copy failed',\n  failed: 'Failed',\n  copyResponse: 'Copy response',\n  copyCode: 'Copy code',\n  fork: 'Fork from here',\n  forkHint: 'Fork from here: a new conversation with the messages up to this reply',\n  responseFailed: 'The response failed',\n  interrupted: 'Response interrupted',\n  thinking: 'Thinking…',\n  openImage: 'Open image attachment',\n  imageAttachment: 'Image attachment',\n  imagePosition: (index: number, count: number) => `Image ${index} of ${count}`,\n  previousImage: 'Previous image',\n  nextImage: 'Next image',\n  systemContext: 'System context',\n  toolFailed: (tool: string) => `${tool} failed`,\n  event: (label: string) => `Event: ${label}`,\n  // Activity and tools\n  reasoning: 'Reasoning',\n  thinkingStep: 'Thinking',\n  steps: (count: number) => `${count} ${count === 1 ? 'step' : 'steps'}`,\n  toolRunning: 'Running',\n  toolCompleted: 'Completed',\n  toolFailedStatus: 'Failed',\n  toolUnfinished: 'No result',\n  arguments: 'Arguments',\n  result: 'Result',\n  error: 'Error',\n  openImageResult: 'Open image result',\n  emptyResult: 'Empty result',\n  /** The live line of a running tool call; `hint` is what it acts on (a path, a command), possibly empty. */\n  toolActivity: (tool: string, hint: string) => {\n    const verb = TOOL_VERBS[tool] ?? `Running ${tool}`;\n    return hint ? `${verb}${tool === 'bash' ? ':' : ''} ${hint}` : verb;\n  },\n  /** How a tool is named in a finished activity summary (\"Used read ×3 · command\"). */\n  toolNoun: (tool: string) => TOOL_NOUNS[tool] ?? tool,\n  // Approval and question cards\n  approvalNeeded: 'Approval needed',\n  needsApproval: 'Needs your approval',\n  approve: 'Approve',\n  deny: 'Deny',\n  approved: 'Approved',\n  denied: 'Denied',\n  notDecided: 'Not decided: the run was stopped',\n  wantsToRun: 'The agent wants to run',\n  decision: 'Decision',\n  stillWritingCall: 'The agent is still writing this call…',\n  decidingUnavailable: 'Deciding is not available in this view.',\n  decisionSent: (approved: boolean) => `${approved ? 'Approved.' : 'Denied.'} Waiting for the agent…`,\n  decisionRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This call was already decided.' : 'This call is no longer waiting for a decision.',\n  decisionNotSent: 'The decision could not be sent.',\n  waitingForAgent: 'Waiting for the agent…',\n  question: 'Question',\n  questionForYou: 'Question for you',\n  notAnswered: 'Not answered',\n  answered: 'Answered',\n  askedQuestion: 'The agent asked a question.',\n  answerOptions: 'Answer options',\n  ownAnswer: 'Or type your own answer',\n  typeAnswer: 'Type your answer',\n  yourAnswerInput: 'Your answer',\n  /** A question of a form left blank, in the answer sent to the agent. */\n  skipped: '(no answer)',\n  answer: 'Answer',\n  stillWritingQuestion: 'The agent is still writing this question…',\n  answeringUnavailable: 'Answering is not available in this view.',\n  answerRefused: (kind: 'denied' | 'conflict' | 'unknown-question'): string => kind === 'denied' ? 'The host did not accept this answer.' : kind === 'conflict' ? 'This question was already answered.' : 'This question is no longer waiting for an answer.',\n  answerNotSent: 'The answer could not be sent.',\n  yourAnswer: 'Your answer:',\n  // Run card (a headless run: `runs/<id>`)\n  run: 'Run',\n  runStatus: (status: 'queued' | 'running' | 'completed' | 'failed'): string => ({ queued: 'Queued', running: 'Running', completed: 'Completed', failed: 'Failed' })[status],\n  runElapsed: (time: string) => `Running for ${time}`,\n  runDuration: (time: string) => `Took ${time}`,\n  runRefresh: 'Refresh',\n  runNotLoaded: 'The run could not be loaded.',\n  // Sub-agent card (a `delegate` call)\n  subagentStatus: (status: 'running' | 'done' | 'failed' | 'cancelled'): string => ({ running: 'Running', done: 'Done', failed: 'Failed', cancelled: 'Stopped' })[status],\n  subagentTime: 'Time',\n  subagentToolCalls: (count: number) => `${count} tool ${count === 1 ? 'call' : 'calls'}`,\n  subagentTokens: (input: number, output: number) => `${input} tokens in, ${output} tokens out`,\n  subagentConversation: (id: number) => `Open conversation ${id}`,\n  // Artifact cards\n  artifact: 'Artifact',\n  artifactTypes: { markdown: 'Document', html: 'HTML page', svg: 'SVG image', code: 'Code', canvas: 'Canvas' },\n  opening: 'Opening…',\n  viewing: 'Viewing',\n  version: (ordinal: number) => `Version ${ordinal}`,\n  runCommand: (name: string, execute: boolean) => `${execute ? 'Run' : 'Insert'} /${name} command`,\n  taskStatus: 'Task status',\n  activityFailed: (count: number, tools: string) => `${count > 1 ? `${count} steps failed` : 'Step failed'}: ${tools}`,\n  activityUsed: (summary: string, stopped: boolean) => `${stopped ? 'Stopped · ' : 'Used '}${summary}`,\n  activityThought: 'Thought it through',\n  activityMany: (steps: number) => `Worked through ${steps} steps`,\n  open: 'Open',\n  openArtifact: (title: string, version: number | undefined) => version === undefined ? `Open ${title}` : `Open ${title}, version ${version}`,\n};\n\nexport type ChatLabels = typeof defaultChatLabels;\n\n/** The chat's icons. Any component that takes `className` (every lucide icon does). */\nexport const defaultChatIcons = {\n  /** The agent's glyph in the empty state (the header shows the host's `avatar`, if any). */\n  agent: MessagesSquareIcon as BlockIcon,\n  send: ArrowUpIcon as BlockIcon,\n  stop: SquareIcon as BlockIcon,\n  history: HistoryIcon as BlockIcon,\n  newChat: PlusIcon as BlockIcon,\n  add: PlusIcon as BlockIcon,\n  attach: PaperclipIcon as BlockIcon,\n  camera: CameraIcon as BlockIcon,\n  queue: ListEndIcon as BlockIcon,\n  jumpToLatest: ArrowDownIcon as BlockIcon,\n  reconnect: RefreshCwIcon as BlockIcon,\n  fork: GitForkIcon as BlockIcon,\n};\n\nexport type ChatIcons = typeof defaultChatIcons;\n\n/** What the chat's pieces read: the merged labels and icons. */\nexport interface ChatText { readonly labels: ChatLabels; readonly icons: ChatIcons }\n/** The defaults, as `useMergedText`'s base. */\nexport const defaultChatText: ChatText = { labels: defaultChatLabels, icons: defaultChatIcons };\nconst DEFAULT_TEXT = defaultChatText;\nconst ChatTextContext = createContext<ChatText>(DEFAULT_TEXT);\n\n/** The labels and icons of the surrounding chat (the defaults outside one). */\nexport const useChatText = (): ChatText => useContext(ChatTextContext);\n\n/** Merges the host's partial labels and icons over the defaults (or over `base`), keeping one object while they do not change. */\nexport function useMergedText<L extends ChatLabels = ChatLabels, I extends ChatIcons = ChatIcons>(labels: Partial<L> | undefined, icons: Partial<I> | undefined,\n  base: { readonly labels: L; readonly icons: I } = DEFAULT_TEXT as { readonly labels: L; readonly icons: I }): { readonly labels: L; readonly icons: I } {\n  const stableLabels = useShallowStable(labels), stableIcons = useShallowStable(icons);\n  return useMemo(() => ({ labels: withDefaults(base.labels, stableLabels), icons: withDefaults(base.icons, stableIcons) }), [stableLabels, stableIcons, base]);\n}\n\nconst shallowEqual = (a: unknown, b: unknown): boolean => Object.is(a, b) || (!!a && !!b && typeof a === 'object' && typeof b === 'object' && Array.isArray(a) === Array.isArray(b)\n  && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(key => Object.is((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key])));\n/** The previous value while the new one is equal key by key (functions by identity): inline `labels={{ title }}` keeps one text context. */\nexport function useShallowStable<T>(value: T): T {\n  const previous = useRef(value);\n  if (!shallowEqual(previous.current, value)) previous.current = value;\n  return previous.current;\n}\n\n/** Provides the chat's labels and icons to everything inside (composer, queue, rows, history). */\nexport function ChatTextProvider({ value, children }: { readonly value: ChatText; readonly children: ReactNode }) {\n  return createElement(ChatTextContext.Provider, { value }, children);\n}\n",
       "type": "registry:lib",
       "target": "components/pi-chat/labels.ts"
     },

package/r/pi-workspace.json

@@ -8,10 +8,10 @@
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/dock.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/dock.json",
     "badge",
     "card"
   ],

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.16/r/pi-app.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/pi-ambient.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/pi-app.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/pi-ambient.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/utils.json",
     "button"
   ],
   "files": [

package/r/provider-setup.json

@@ -9,8 +9,8 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/theme.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/utils.json",
     "button",
     "input",
     "label",

package/r/record-viewer.json

@@ -8,7 +8,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.16/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.17/r/theme.json",
     "table",
     "badge",
     "item",