@hachej/boring-ui-kit 0.4.52 → 0.4.53

package/r/pi-chat-plugins.json

@@ -7,17 +7,17 @@
     "react@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-markdown.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-slash.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-mentions.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-pickers.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-voice.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-attachments.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-question.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-approval.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat-subagent.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-artifacts.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-markdown.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-slash.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-mentions.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-pickers.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-voice.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-attachments.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-question.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-approval.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-subagent.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-artifacts.json"
   ],
   "files": [
     {

package/r/pi-chat-question.json

@@ -9,12 +9,12 @@
     "@earendil-works/pi-ai@~1.4.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json"
   ],
   "files": [
     {
       "path": "registry/pi-chat-question/question-card.tsx",
-      "content": "'use client';\n\nimport { useEffect, useId, useRef, useState } from 'react';\nimport type { FormEvent } from 'react';\nimport type { ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { CheckIcon, CircleSlashIcon, SendIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useChatText } from '../pi-chat/labels';\nimport { ASK_USER_TOOL } from '../pi-chat/config';\nimport type { AnswerOutcome, QuestionCardProps } from '../pi-chat/config';\n\n// The core owns the tool name and the props: it places the question row and shows its waiting notice without this item.\nexport { ASK_USER_TOOL };\nexport type { AnswerOutcome, QuestionCardProps };\n\n/** One question of a form: its text and its options (chips); every question of a form also takes free text. */\nexport interface FormQuestion { readonly question: string; readonly options: readonly string[] }\ninterface Question {\n  readonly question: string; readonly options: readonly string[]; readonly allowFreeText: boolean;\n  /** Several questions in one form (`questions`), answered together as one text. Empty for a single question. */\n  readonly items: readonly FormQuestion[];\n}\n\nconst strings = (value: unknown, max: number) => Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string' && item.length > 0).slice(0, max) : [];\n\n/**\n * Read `{ question, options?, allowFreeText?, questions? }` defensively: model arguments are untrusted input. Free text is allowed\n * unless `allowFreeText` is `false` (and always when there are no options). `questions` (up to 8) makes a form.\n */\nexport function parseQuestion(call: ToolCall): Question {\n  const args = call.arguments as Record<string, unknown>;\n  const options = strings(args['options'], 6);\n  const items = Array.isArray(args['questions']) ? args['questions'].flatMap((item: unknown) => {\n    const value = item !== null && typeof item === 'object' ? item as Record<string, unknown> : {};\n    return typeof value['question'] === 'string' && value['question'] ? [{ question: value['question'], options: strings(value['options'], 6) }] : [];\n  }).slice(0, 8) : [];\n  return { question: typeof args['question'] === 'string' ? args['question'] : '', options, allowFreeText: args['allowFreeText'] !== false || options.length === 0, items };\n}\n\n/** The answers of a form as the one text the agent reads: each question, then its answer, or `skipped` when left blank. */\nexport function formAnswer(items: readonly FormQuestion[], values: readonly string[], skipped: string): string {\n  return items.map((item, i) => `${i + 1}. ${item.question}\\n→ ${values[i]?.trim() || skipped}`).join('\\n\\n');\n}\n\n/** The answers of a `formAnswer` text, one per question; undefined when the text does not have that shape (then it is shown whole). */\nfunction splitFormAnswer(items: readonly FormQuestion[], text: string): readonly string[] | undefined {\n  const values: string[] = [];\n  let at = 0;\n  for (let i = 0; i < items.length; i++) {\n    const head = `${i + 1}. ${items[i]!.question}\\n→ `;\n    if (!text.startsWith(head, at)) return undefined;\n    at += head.length;\n    const end = i + 1 < items.length ? text.indexOf(`\\n\\n${i + 2}. ${items[i + 1]!.question}\\n→ `, at) : text.length;\n    if (end < 0) return undefined;\n    values.push(text.slice(at, end));\n    at = end + 2;\n  }\n  return values;\n}\n\n/** The answered text from a result such as `{\"kind\":\"answered\",\"answer\":\"...\"}`; undefined when the call did not produce an answer. */\nexport function parseAnswer(result: ToolResultMessage | undefined): { readonly answer: string } | { readonly failure: string } | undefined {\n  if (!result) return undefined;\n  const text = result.content.map(part => part.type === 'text' ? part.text : '').join('');\n  if (!result.isError) {\n    try {\n      const value: unknown = JSON.parse(text);\n      if (value !== null && typeof value === 'object' && (value as { kind?: unknown }).kind === 'answered' && typeof (value as { answer?: unknown }).answer === 'string') return { answer: (value as { answer: string }).answer };\n    } catch { /* fall through to the failure text */ }\n  }\n  return { failure: text || 'The question was not answered.' };\n}\n\n\n/**\n * Human-in-the-loop question: writing (still generated, not answerable), pending (options and free text), then answered with the chosen\n * answer. With `questions` it is one form: each question has its option chips and a free-text field, and Answer sends one text\n * (`formAnswer`). It needs only a tool call and an `answer` callback, so a host can show it outside the chat too (for example in a\n * popover answering a request of its own); wrap it in `ChatTextProvider` for the chat's words there.\n */\nexport function QuestionCard({ call, result, answer, questionId, live = false }: QuestionCardProps) {\n  const { labels } = useChatText();\n  const question = parseQuestion(call);\n  const settled = parseAnswer(result);\n  const [sent, setSent] = useState<string | undefined>();\n  const [sending, setSending] = useState<string | undefined>();\n  const [refusal, setRefusal] = useState<string | undefined>();\n  const [text, setText] = useState('');\n  const [values, setValues] = useState<readonly string[]>([]);\n  const formId = useId();\n  const setValue = (i: number, value: string) => setValues(previous => question.items.map((_, j) => j === i ? value : previous[j] ?? ''));\n  const mounted = useRef(true);\n  useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);\n  const current = settled && 'answer' in settled ? settled.answer : sent;\n  // `pending` means the question waits on the person; `writing` means the model is still generating it (options may be partial).\n  const state = settled ? ('failure' in settled ? 'failed' : 'answered') : sent !== undefined ? 'sent' : live ? 'writing' : 'pending';\n  const open = state === 'pending' || state === 'writing';\n\n  async function submit(value: string) {\n    const trimmed = value.trim();\n    if (!answer || !questionId || live || !trimmed || sending !== undefined) return;\n    setRefusal(undefined); setSending(trimmed);\n    try {\n      const outcome = await answer(questionId, trimmed);\n      if (outcome.kind === 'answered') setSent(trimmed);\n      else setRefusal(outcome.reason || labels.answerRefused(outcome.kind));\n    } catch (cause) { setRefusal(cause instanceof Error ? cause.message : labels.answerNotSent); }\n    finally { if (mounted.current) setSending(undefined); }\n  }\n  const onSubmit = (event: FormEvent) => { event.preventDefault(); void submit(text); };\n  const onSubmitForm = (event: FormEvent) => { event.preventDefault(); if (values.some(value => value.trim())) void submit(formAnswer(question.items, values, labels.skipped)); };\n  const busy = sending !== undefined || live;\n\n  const unavailable = !answer || !questionId || busy;\n  // `m-0`: a host without a global preflight keeps the paragraph margin of ItemDescription.\n  const wrap = 'm-0 line-clamp-none [overflow-wrap:anywhere]';\n\n  if (!open) {\n    const values = question.items.length > 0 && current !== undefined ? splitFormAnswer(question.items, current) : undefined;\n    return <Item role=\"group\" data-testid=\"question-card\" data-state={state} data-call-id={call.id} aria-label={labels.question}>\n      <ItemMedia variant=\"icon\">\n        {state === 'answered' ? <CheckIcon role=\"img\" aria-label={labels.answered} /> : state === 'sent' ? <Spinner aria-label={labels.waitingForAgent} /> : <CircleSlashIcon role=\"img\" aria-label={labels.notAnswered} />}\n      </ItemMedia>\n      <ItemContent className=\"min-w-0\">\n        {state === 'failed' && <ItemDescription data-testid=\"question-text\" className={wrap}>{question.question || labels.askedQuestion}</ItemDescription>}\n        {values ? <div className=\"flex min-w-0 flex-col gap-2\">{question.items.map((item, i) => <div key={i} data-testid=\"question-answer-item\" className=\"flex min-w-0 flex-col gap-1\">\n          <ItemDescription className={wrap}>{item.question}</ItemDescription>\n          {values[i] === labels.skipped\n            ? <ItemDescription data-testid=\"question-answer\" data-skipped=\"true\" className={wrap}>{values[i]}</ItemDescription>\n            : <ItemTitle data-testid=\"question-answer\" className={wrap}>{values[i]}</ItemTitle>}\n        </div>)}</div>\n          : current !== undefined && <ItemTitle className={wrap}><span className=\"sr-only\">{labels.yourAnswer} </span><span data-testid=\"question-answer\" className=\"whitespace-pre-line\">{current}</span></ItemTitle>}\n        {state === 'failed' && settled && 'failure' in settled && <ItemDescription role=\"alert\" className={wrap}>{settled.failure}</ItemDescription>}\n      </ItemContent>\n    </Item>;\n  }\n\n  const option = (value: string, selected: boolean, onClick: () => void) => <Button key={value} variant={selected ? 'secondary' : 'outline'} data-testid=\"question-option\" data-option={value}\n    aria-pressed={question.items.length > 0 ? selected : undefined} disabled={unavailable} onClick={onClick} className=\"h-auto min-h-8 w-full justify-start whitespace-normal text-start\">\n    {selected && <CheckIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}{value}\n  </Button>;\n\n  return <Card role=\"group\" data-testid=\"question-card\" data-state={state} data-call-id={call.id} aria-label={labels.question}>\n    <CardHeader>\n      <CardDescription>{labels.questionForYou}</CardDescription>\n      <CardTitle data-testid=\"question-text\" className=\"[overflow-wrap:anywhere]\">{question.question || labels.askedQuestion}</CardTitle>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      {question.items.length > 0 ? <form data-testid=\"question-form\" onSubmit={onSubmitForm} className=\"flex flex-col gap-4\">\n        {question.items.map((item, i) => <div key={i} role=\"group\" aria-labelledby={`${formId}-${i}`} data-testid=\"question-item\" className=\"flex min-w-0 flex-col gap-2\">\n          <p id={`${formId}-${i}`} className=\"m-0 [overflow-wrap:anywhere]\">{i + 1}. {item.question}</p>\n          {item.options.length > 0 && <div role=\"group\" aria-label={labels.answerOptions} className=\"flex flex-col gap-2\">\n            {item.options.map(value => option(value, values[i] === value, () => setValue(i, values[i] === value ? '' : value)))}\n          </div>}\n          <Input data-testid=\"question-input\" value={item.options.includes(values[i] ?? '') ? '' : values[i] ?? ''} maxLength={2000} disabled={unavailable}\n            placeholder={item.options.length ? labels.ownAnswer : labels.typeAnswer} aria-label={`${labels.yourAnswerInput} ${i + 1}`} onChange={event => setValue(i, event.currentTarget.value)} />\n        </div>)}\n        <div><Button type=\"submit\" data-testid=\"question-submit\" disabled={unavailable || !values.some(value => value.trim())}><SendIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.answer}</Button></div>\n      </form> : <>\n        {question.options.length > 0 && <div role=\"group\" aria-label={labels.answerOptions} className=\"flex flex-col gap-2\">\n          {question.options.map(value => option(value, false, () => { void submit(value); }))}\n        </div>}\n        {question.allowFreeText && <form onSubmit={onSubmit} className=\"flex gap-2\">\n          <Input data-testid=\"question-input\" value={text} maxLength={2000} disabled={unavailable} placeholder={question.options.length ? labels.ownAnswer : labels.typeAnswer}\n            aria-label={labels.yourAnswerInput} onChange={event => setText(event.currentTarget.value)} />\n          <Button type=\"submit\" data-testid=\"question-submit\" disabled={unavailable || !text.trim()}><SendIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.answer}</Button>\n        </form>}\n      </>}\n      {live && <CardDescription>{labels.stillWritingQuestion}</CardDescription>}\n      {!answer && !live && <CardDescription>{labels.answeringUnavailable}</CardDescription>}\n      {refusal && <Alert variant=\"destructive\" data-testid=\"question-refusal\"><AlertDescription>{refusal}</AlertDescription></Alert>}\n    </CardContent>\n  </Card>;\n}\n",
+      "content": "'use client';\n\nimport { useEffect, useId, useRef, useState } from 'react';\nimport type { FormEvent } from 'react';\nimport type { ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { CheckIcon, CircleSlashIcon, SendIcon } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useChatText } from '../pi-chat/labels';\nimport { ASK_USER_TOOL } from '../pi-chat/config';\nimport type { AnswerOutcome, QuestionCardProps } from '../pi-chat/config';\n\n// The core owns the tool name and the props: it places the question row and shows its waiting notice without this item.\nexport { ASK_USER_TOOL };\nexport type { AnswerOutcome, QuestionCardProps };\n\n/** One question of a form: its text and its options (chips); every question of a form also takes free text. */\nexport interface FormQuestion { readonly question: string; readonly options: readonly string[] }\ninterface Question {\n  readonly question: string; readonly options: readonly string[]; readonly allowFreeText: boolean;\n  /** Several questions in one form (`questions`), answered together as one text. Empty for a single question. */\n  readonly items: readonly FormQuestion[];\n}\n\nconst strings = (value: unknown, max: number) => Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string' && item.length > 0).slice(0, max) : [];\n\n/**\n * Read `{ question, options?, allowFreeText?, questions? }` defensively: model arguments are untrusted input. Free text is allowed\n * unless `allowFreeText` is `false` (and always when there are no options). `questions` (up to 8) makes a form.\n */\nexport function parseQuestion(call: ToolCall): Question {\n  const args = call.arguments as Record<string, unknown>;\n  const options = strings(args['options'], 6);\n  const items = Array.isArray(args['questions']) ? args['questions'].flatMap((item: unknown) => {\n    const value = item !== null && typeof item === 'object' ? item as Record<string, unknown> : {};\n    return typeof value['question'] === 'string' && value['question'] ? [{ question: value['question'], options: strings(value['options'], 6) }] : [];\n  }).slice(0, 8) : [];\n  return { question: typeof args['question'] === 'string' ? args['question'] : '', options, allowFreeText: args['allowFreeText'] !== false || options.length === 0, items };\n}\n\n/** The answers of a form as the one text the agent reads: each question, then its answer, or `skipped` when left blank. */\nexport function formAnswer(items: readonly FormQuestion[], values: readonly string[], skipped: string): string {\n  return items.map((item, i) => `${i + 1}. ${item.question}\\n→ ${values[i]?.trim() || skipped}`).join('\\n\\n');\n}\n\n/** The answers of a `formAnswer` text, one per question; undefined when the text does not have that shape (then it is shown whole). */\nfunction splitFormAnswer(items: readonly FormQuestion[], text: string): readonly string[] | undefined {\n  const values: string[] = [];\n  let at = 0;\n  for (let i = 0; i < items.length; i++) {\n    const head = `${i + 1}. ${items[i]!.question}\\n→ `;\n    if (!text.startsWith(head, at)) return undefined;\n    at += head.length;\n    const end = i + 1 < items.length ? text.indexOf(`\\n\\n${i + 2}. ${items[i + 1]!.question}\\n→ `, at) : text.length;\n    if (end < 0) return undefined;\n    values.push(text.slice(at, end));\n    at = end + 2;\n  }\n  return values;\n}\n\n/** The answered text from a result such as `{\"kind\":\"answered\",\"answer\":\"...\"}`; undefined when the call did not produce an answer. */\nexport function parseAnswer(result: ToolResultMessage | undefined): { readonly answer: string } | { readonly failure: string } | undefined {\n  if (!result) return undefined;\n  // Pi appends its diagnostics to a result as a `<harness>` block of their own, for the model: never for the person.\n  const text = result.content.map(part => part.type === 'text' && !/^<harness>[\\s\\S]*<\\/harness>$/.test(part.text) ? part.text : '').join('');\n  if (!result.isError) {\n    try {\n      const value: unknown = JSON.parse(text);\n      if (value !== null && typeof value === 'object' && (value as { kind?: unknown }).kind === 'answered' && typeof (value as { answer?: unknown }).answer === 'string') return { answer: (value as { answer: string }).answer };\n    } catch { /* fall through to the failure text */ }\n  }\n  return { failure: text || 'The question was not answered.' };\n}\n\n\n/**\n * Human-in-the-loop question: writing (still generated, not answerable), pending (options and free text), then answered with the chosen\n * answer. With `questions` it is one form: each question has its option chips and a free-text field, and Answer sends one text\n * (`formAnswer`). It needs only a tool call and an `answer` callback, so a host can show it outside the chat too (for example in a\n * popover answering a request of its own); wrap it in `ChatTextProvider` for the chat's words there.\n */\nexport function QuestionCard({ call, result, answer, questionId, live = false }: QuestionCardProps) {\n  const { labels } = useChatText();\n  const question = parseQuestion(call);\n  const settled = parseAnswer(result);\n  const [sent, setSent] = useState<string | undefined>();\n  const [sending, setSending] = useState<string | undefined>();\n  const [refusal, setRefusal] = useState<string | undefined>();\n  const [text, setText] = useState('');\n  const [values, setValues] = useState<readonly string[]>([]);\n  const formId = useId();\n  const setValue = (i: number, value: string) => setValues(previous => question.items.map((_, j) => j === i ? value : previous[j] ?? ''));\n  const mounted = useRef(true);\n  useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);\n  const current = settled && 'answer' in settled ? settled.answer : sent;\n  // `pending` means the question waits on the person; `writing` means the model is still generating it (options may be partial).\n  const state = settled ? ('failure' in settled ? 'failed' : 'answered') : sent !== undefined ? 'sent' : live ? 'writing' : 'pending';\n  const open = state === 'pending' || state === 'writing';\n\n  async function submit(value: string) {\n    const trimmed = value.trim();\n    if (!answer || !questionId || live || !trimmed || sending !== undefined) return;\n    setRefusal(undefined); setSending(trimmed);\n    try {\n      const outcome = await answer(questionId, trimmed);\n      if (outcome.kind === 'answered') setSent(trimmed);\n      else setRefusal(outcome.reason || labels.answerRefused(outcome.kind));\n    } catch (cause) { setRefusal(cause instanceof Error ? cause.message : labels.answerNotSent); }\n    finally { if (mounted.current) setSending(undefined); }\n  }\n  const onSubmit = (event: FormEvent) => { event.preventDefault(); void submit(text); };\n  const onSubmitForm = (event: FormEvent) => { event.preventDefault(); if (values.some(value => value.trim())) void submit(formAnswer(question.items, values, labels.skipped)); };\n  const busy = sending !== undefined || live;\n\n  const unavailable = !answer || !questionId || busy;\n  // `m-0`: a host without a global preflight keeps the paragraph margin of ItemDescription.\n  const wrap = 'm-0 line-clamp-none [overflow-wrap:anywhere]';\n\n  if (!open) {\n    const values = question.items.length > 0 && current !== undefined ? splitFormAnswer(question.items, current) : undefined;\n    return <Item role=\"group\" data-testid=\"question-card\" data-state={state} data-call-id={call.id} aria-label={labels.question}>\n      <ItemMedia variant=\"icon\">\n        {state === 'answered' ? <CheckIcon role=\"img\" aria-label={labels.answered} /> : state === 'sent' ? <Spinner aria-label={labels.waitingForAgent} /> : <CircleSlashIcon role=\"img\" aria-label={labels.notAnswered} />}\n      </ItemMedia>\n      <ItemContent className=\"min-w-0\">\n        {state === 'failed' && <ItemDescription data-testid=\"question-text\" className={wrap}>{question.question || labels.askedQuestion}</ItemDescription>}\n        {values ? <div className=\"flex min-w-0 flex-col gap-2\">{question.items.map((item, i) => <div key={i} data-testid=\"question-answer-item\" className=\"flex min-w-0 flex-col gap-1\">\n          <ItemDescription className={wrap}>{item.question}</ItemDescription>\n          {values[i] === labels.skipped\n            ? <ItemDescription data-testid=\"question-answer\" data-skipped=\"true\" className={wrap}>{values[i]}</ItemDescription>\n            : <ItemTitle data-testid=\"question-answer\" className={wrap}>{values[i]}</ItemTitle>}\n        </div>)}</div>\n          : current !== undefined && <ItemTitle className={wrap}><span className=\"sr-only\">{labels.yourAnswer} </span><span data-testid=\"question-answer\" className=\"whitespace-pre-line\">{current}</span></ItemTitle>}\n        {state === 'failed' && settled && 'failure' in settled && <ItemDescription role=\"alert\" className={wrap}>{settled.failure}</ItemDescription>}\n      </ItemContent>\n    </Item>;\n  }\n\n  const option = (value: string, selected: boolean, onClick: () => void) => <Button key={value} variant={selected ? 'secondary' : 'outline'} data-testid=\"question-option\" data-option={value}\n    aria-pressed={question.items.length > 0 ? selected : undefined} disabled={unavailable} onClick={onClick} className=\"h-auto min-h-8 w-full justify-start whitespace-normal text-start\">\n    {selected && <CheckIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}{value}\n  </Button>;\n\n  return <Card role=\"group\" data-testid=\"question-card\" data-state={state} data-call-id={call.id} aria-label={labels.question}>\n    <CardHeader>\n      <CardDescription>{labels.questionForYou}</CardDescription>\n      <CardTitle data-testid=\"question-text\" className=\"[overflow-wrap:anywhere]\">{question.question || labels.askedQuestion}</CardTitle>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-4\">\n      {question.items.length > 0 ? <form data-testid=\"question-form\" onSubmit={onSubmitForm} className=\"flex flex-col gap-4\">\n        {question.items.map((item, i) => <div key={i} role=\"group\" aria-labelledby={`${formId}-${i}`} data-testid=\"question-item\" className=\"flex min-w-0 flex-col gap-2\">\n          <p id={`${formId}-${i}`} className=\"m-0 [overflow-wrap:anywhere]\">{i + 1}. {item.question}</p>\n          {item.options.length > 0 && <div role=\"group\" aria-label={labels.answerOptions} className=\"flex flex-col gap-2\">\n            {item.options.map(value => option(value, values[i] === value, () => setValue(i, values[i] === value ? '' : value)))}\n          </div>}\n          <Input data-testid=\"question-input\" value={item.options.includes(values[i] ?? '') ? '' : values[i] ?? ''} maxLength={2000} disabled={unavailable}\n            placeholder={item.options.length ? labels.ownAnswer : labels.typeAnswer} aria-label={`${labels.yourAnswerInput} ${i + 1}`} onChange={event => setValue(i, event.currentTarget.value)} />\n        </div>)}\n        <div><Button type=\"submit\" data-testid=\"question-submit\" disabled={unavailable || !values.some(value => value.trim())}><SendIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.answer}</Button></div>\n      </form> : <>\n        {question.options.length > 0 && <div role=\"group\" aria-label={labels.answerOptions} className=\"flex flex-col gap-2\">\n          {question.options.map(value => option(value, false, () => { void submit(value); }))}\n        </div>}\n        {question.allowFreeText && <form onSubmit={onSubmit} className=\"flex gap-2\">\n          <Input data-testid=\"question-input\" value={text} maxLength={2000} disabled={unavailable} placeholder={question.options.length ? labels.ownAnswer : labels.typeAnswer}\n            aria-label={labels.yourAnswerInput} onChange={event => setText(event.currentTarget.value)} />\n          <Button type=\"submit\" data-testid=\"question-submit\" disabled={unavailable || !text.trim()}><SendIcon data-icon=\"inline-start\" aria-hidden=\"true\" />{labels.answer}</Button>\n        </form>}\n      </>}\n      {live && <CardDescription>{labels.stillWritingQuestion}</CardDescription>}\n      {!answer && !live && <CardDescription>{labels.answeringUnavailable}</CardDescription>}\n      {refusal && <Alert variant=\"destructive\" data-testid=\"question-refusal\"><AlertDescription>{refusal}</AlertDescription></Alert>}\n    </CardContent>\n  </Card>;\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat-question/question-card.tsx"
     }

package/r/pi-chat-slash.json

@@ -4,12 +4,12 @@
   "title": "Pi chat slash menu",
   "description": "The composer's `/` menu of commands and skills (and the Commands entry of the + menu). Plug it in with `slash={{ ...config, Picker: SlashPicker }}`; without it pi-chat has no `/` menu.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.52",
+    "@hachej/boring-ui-kit@^0.4.53",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json"
   ],
   "files": [
     {

package/r/pi-chat-subagent.json

@@ -9,7 +9,7 @@
     "@earendil-works/pi-ai@~1.4.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json"
   ],
   "files": [
     {

package/r/pi-chat-voice.json

@@ -4,13 +4,13 @@
   "title": "Pi chat voice messages",
   "description": "Tap-to-record voice messages: a compatibility export of the kit's chat-react/voice recorder hook, 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.52",
+    "@hachej/boring-ui-kit@^0.4.53",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/pi-chat.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json"
   ],
   "files": [
     {

package/r/pi-chat.json

@@ -4,8 +4,8 @@
   "title": "Pi chat",
   "description": "A complete Tailwind chat over the borrowed native chat controller: composer, messages, one collapsible activity block per turn (tool calls and reasoning), message queue, history and feedback cards for the opt-in feedback tool (lists, and Show offers that the host page resolves). Chat only: no layout. Owned, editable source; no AI SDK. The question, approval, sub-agent and artifact cards are separate items (pi-chat-question, pi-chat-approval, pi-chat-subagent, pi-artifacts); without them a question or an approval shows a \"waiting for your answer\" notice, a sub-agent call is an ordinary tool step and no artifact is offered. The optional pi-ambient and pi-workspace blocks build on it.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.52",
-    "@hachej/boring-files@^0.4.52",
+    "@hachej/boring-ui-kit@^0.4.53",
+    "@hachej/boring-files@^0.4.53",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "@base-ui/react@1.9.0",
@@ -18,8 +18,8 @@
     "zod@^4.6.5"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.52/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/button.json"
   ],
   "files": [
     {
@@ -108,7 +108,7 @@
     },
     {
       "path": "registry/pi-chat/session.tsx",
-      "content": "'use client';\n\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord, JsonObject } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { PAGE_FIRST, PAGE_MORE, useTranscriptWindow } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatHistoryState } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, SentContent, SlashConfig } from './config';\nimport type { PasteToFile } from '@hachej/boring-ui-kit/chat-text';\nimport type { CommandMentions } from './config';\nimport type { ChatCards, ChatTextPart, RowContext } from './message';\nimport type { QueuedMessage } from './queue';\nimport type { AnswerOutcome, ChatArtifactsConfig } from './config';\nimport type { ChatCard, Mode } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  /** `natural` shows only messages, replies and question, approval and artifact cards, with one \"Preparing…\" status while the agent works: no tool steps, reasoning, file discovery or raw error text. Omit it and nothing changes. */\n  readonly presentation?: 'natural';\n  /** Show a retained voice message's audio player. Default false: transcript only; uploaded audio and stored tokens are unchanged. */\n  readonly voiceReplay?: boolean;\n  /** The words on the chip of a sent message that starts with a `<target>` block (point-and-speak). Undefined keeps the default label; the chip never shows the raw fields on hover. */\n  readonly targetLabel?: (target: JsonObject) => string | undefined;\n  /** A host's own card for a sent text. */\n  readonly sentContent?: SentContent;\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  /** Omit complete assistant lines from display, copy and actions. Live trailing fragments wait for a newline or settlement. Not transport redaction. */\n  readonly hideLine?: (line: string) => boolean;\n  /** Initial number of displayed rows (default 60). An explicit limit uses Show earlier, not automatic paging; nothing is deleted. */\n  readonly displayLimit?: number;\n  /** Automatic paging: rows shown first (default 60) and rows added each time the reader reaches the top (default 40). Ignored with `displayLimit`. */\n  readonly paging?: ChatPaging;\n  /** Explicitly enable messageActions for paged history too; other historical controls remain inert. */\n  readonly historicalMessageActions?: boolean;\n  /** Host-rendered unread indicator, keyed by the reply. The host owns seen state and its persistence. */\n  readonly unread?: (reply: ReplyRef) => ReactNode;\n  /** Message inside the single native response-error notice. Null/undefined keeps the default; native status and metadata stay unchanged. */\n  readonly replyError?: (reply: ReplyRef) => ReactNode;\n  /** Card for any tool call; the catch-all after `toolRenderers`. */\n  readonly renderTool?: (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined;\n  /** Cards for tool calls, keyed by tool name (same contract as `renderTool`). An entry that returns undefined falls back to `renderTool`. */\n  readonly toolRenderers?: Readonly<Record<string, (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined>> | undefined;\n  /** Draws an assistant text part. Default: plain text (`markdownText` of `pi-chat-markdown` draws Markdown). */\n  readonly renderText?: ((part: ChatTextPart) => ReactNode) | undefined;\n  /**\n   * The question, approval and sub-agent cards (`pi-chat-question`, `pi-chat-approval`, `pi-chat-subagent`; `withChatPlugins` adds them all).\n   * Without a question or approval card the chat shows that it waits for the person's answer, with no answer UI; without the sub-agent card a\n   * sub-agent call is an ordinary tool step.\n   */\n  readonly cards?: ChatCards | undefined;\n  readonly groupTool?: (call: ToolCall, result: ToolResultMessage) => boolean;\n  readonly commandMentions?: CommandMentions;\n  readonly onOpenImage?: (image: ImageContent) => void;\n  readonly onCopy?: (text: string) => Promise<void>;\n  readonly onComposerKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n  readonly fileAccept?: string;\n  /** Optional pills at the left of the composer's controls row. */\n  readonly composerChips?: ComposerProps['chips'];\n  /** Contextual host content above the input, for example a removable quote. */\n  readonly composerHeader?: ReactNode;\n  /** Host-owned content participates in send readiness without native image attachments. */\n  readonly composerHasContent?: boolean;\n  /** Retain files for the host's send operation instead of uploading immediately. */\n  readonly onPickFiles?: (files: readonly File[]) => void;\n  /** `/` menu of host commands and skills. Omit it and `/` is just text. */\n  readonly slash?: SlashConfig;\n  /** Show successful native write/edit paths as file cards under each reply. Off by default: only hosts with workspace file tools should opt in. */\n  readonly fileChanges?: boolean;\n  /** Opens a file from an upload or write/edit card. Falls back to mentions.open. */\n  readonly onOpenFile?: (path: string) => void;\n  /** Pastes above these limits become a file through `attachments` (on by default, 2000 characters or 40 lines). Needs `attachments`. */\n  readonly pasteToFile?: PasteToFile;\n  /** `@` workspace file mentions: a picker, composer chips and styled mentions in sent messages. */\n  readonly mentions?: MentionsConfig;\n  /** Attach button, paste and drop through the host's upload. Takes the place of `onFiles` and `fileAccept`. */\n  readonly attachments?: AttachmentsConfig;\n  /** Model picker in the composer bar. The current model comes from the view's `pi.agent` document. */\n  readonly model?: ModelConfig;\n  /** Thinking level picker in the composer bar. The current level comes from the view's `pi.agent` document. */\n  readonly effort?: EffortConfig;\n  /**\n   * Artifact cards: tool results that carry a descriptor become a card that opens the artifact in the host's panel. The card and its recogniser\n   * come from `pi-artifacts` (`withChatPlugins` adds them); without them, or without this prop, no artifact is offered.\n   */\n  readonly artifacts?: ChatArtifactsConfig;\n  /**\n   * Host actions under each settled reply, beside Copy (and Fork): `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `reply-action-<id>`, the menu `reply-action-more`.\n   */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  /** A line under each settled reply (for example the model that answered and the time it took), for the host to show to some people only. */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n}\n\n\n// Compatibility type export for one release.\nexport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\nimport { useChatSession as useHeadlessChatSession } from '@hachej/boring-ui-kit/chat-react';\nimport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: ChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: ChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** The phone camera for an `onFiles` chat (`attachments.Camera` is used with `attachments`). */\n  readonly camera?: AttachmentsConfig['Camera'];\n  /** Runs after a message was accepted for sending (for example to scroll to the bottom). */\n  readonly afterSend?: (() => void) | undefined;\n  /** Extra attributes of the row context a surface needs (for example per-reply actions). */\n  readonly rowExtras?: Partial<RowContext> | undefined;\n  /** The optional annotate toggle: when notes are pending (`count` > 0), Send attaches them to the message first. */\n  readonly feedback?: ComposerFeedback | undefined;\n  readonly sendContext?: import('@hachej/boring-ui-kit/chat-react').ChatSessionFeedback | undefined;\n}\n\n/** Presentation adapter; all session state and controller protocols live in the kit. */\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController, mode, presentation, voiceReplay, targetLabel, sentContent, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, sendContext, onOpenFile, fileChanges, composerChips, composerHeader, composerHasContent, onPickFiles, pasteToFile } = options;\n  const { labels } = useChatText();\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const offered = artifacts?.recognise && artifacts.Card ? artifacts : undefined;\n  const sessionArtifacts = useMemo(() => offered?.recognise ? { recognise: offered.recognise, detect: offered.detect, open: offered.open } : undefined, [offered]);\n  const session = useHeadlessChatSession<ReactNode>({ controller, activeController, mode, presentation, actions, renderEntry, hideLine, renderTool, toolRenderers,\n    groupTool, subagent: cards?.subagent, onOpenImage, onFiles, mentions, slash, attachments, model, effort,\n    artifacts: sessionArtifacts,\n    afterSend, feedback: sendContext ?? feedback, onOpenFile, onPickFiles, commandMentions, labels, onFocus: () => textarea.current?.focus() });\n  const { state, developer, natural, connected, working, sendBlocked, act } = session;\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: session.activateMention } : undefined,\n    answer: actions?.answer,\n    artifacts: offered?.Card ? { open: offered.open, isOpen: offered.isOpen, kinds: offered.kinds, Card: offered.Card } : undefined,\n    messageActions, historicalMessageActions, unread, replyError,\n    replyFooter,\n    pieces: slash?.skills?.length || mentions || attachments ? { kinds: mentions?.kinds, mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.renderSent ?? mentions?.render, preview: mentions?.preview, audioUrl: mentions?.audioUrl } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- lists the fields rows read, not whole objects: activateMention changes every render and must not rebuild every row.\n  }), [controller, developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, onOpenFile, fileChanges, commandMentions, actions?.answer, slash?.skills, mentions, mentions?.open, mentions?.render, mentions?.renderSent, mentions?.preview, mentions?.audioUrl, attachments, offered?.open, offered?.isOpen, offered?.kinds, offered?.Card, messageActions, historicalMessageActions, unread, replyError, replyFooter, rowExtras]);\n\n  /** The model-and-effort pill and the note that reports a refused change. */\n  const pickers = () => {\n    const disabled = session.changing !== null || state.disposed || !connected;\n    // The pill is drawn by the component the config carries (`pi-chat-pickers`); without one there is no pill.\n    const Picker = model?.Picker ?? effort?.Picker;\n    const barStart = (model || effort) && Picker ? <Picker model={model} effort={effort} currentModel={session.currentModel} currentEffort={session.currentEffort} disabled={disabled} busy={session.changing}\n      onModel={next => void session.changeModel(next)}\n      onEffort={next => void session.changeEffort(next)} /> : undefined;\n    const barNote = session.changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${session.changeError} (${labels.dismissHint})`} onClick={session.dismissChangeError}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{session.changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const camera = attachments ? attachments.Camera : options.camera;\n  /** Everything `Composer` needs from the session; a surface adds its layout and slots. */\n  const composer = {\n    text: state.draft.text, onText: (text: string) => controller.setText(text), onKeyDown: onComposerKeyDown, textareaRef: textarea,\n    attachments: state.draft.attachments.map(item => ({ id: item.id, name: item.name, mimeType: item.content.mimeType, data: item.content.data })),\n    onRemoveAttachment: (id: string) => controller.setAttachments(controller.getSnapshot().draft.attachments.filter(item => item.id !== id)),\n    working, sendBlocked, disabled: state.disposed, stopRequested: state.stop === 'requested',\n    onSend: session.send, onStop: () => act(controller.stop),\n    hasFiles: Boolean(composerHasContent),\n    uploading: session.uploading > 0, canAttach: Boolean(onPickFiles || onFiles || attachments), ...(camera ? { camera } : {}), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void session.upload(files); },\n    slash, onSlashError: session.report, mentions, mentionPaths: session.picked, onMentionPicked: session.pickMention,\n    uploads: session.pending, onDismissUpload: session.dismissUpload,\n    onPasteText: attachments ? session.pasteText : undefined, pasteToFile,\n    quote: composerHeader,\n    feedback, chips: composerChips,\n  };\n\n  return { ...session, textarea, rowContext, composer, pickers };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\n// Compatibility exports for one release; MessageScroller remains the only scroll owner.\nexport { chunkKeys, useRowChunks, PAGE_FIRST, PAGE_MORE, CHUNK } from '@hachej/boring-ui-kit/chat-react';\nexport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\n\n/** Thin presentation adapter to the host's shadcn MessageScroller. */\nexport function useTranscript(rows: readonly { readonly key: string }[], page = PAGE_FIRST, more = PAGE_MORE, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }, automatic = true) {\n  const window = useTranscriptWindow(rows, page, more, history, automatic);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  return { ...window, stick: { scrollRef: window.scrollRef, scrollToBottom, isAtBottom: !scrollable.end } };\n}\n",
+      "content": "'use client';\n\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { EntryRecord, JsonObject } from '@earendil-works/pi-durable';\nimport type { ImageContent, ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';\nimport { PAGE_FIRST, PAGE_MORE, useTranscriptWindow } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\nimport type { ChatHistoryState } from '@hachej/boring-ui-kit/native-chat';\nimport type { ChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';\nimport { Button } from '@/components/ui/button';\nimport type { ComposerFeedback, ComposerProps } from './composer';\nimport type { AttachmentsConfig, EffortConfig, MentionsConfig, ModelConfig, SentContent, SlashConfig } from './config';\nimport type { PasteToFile } from '@hachej/boring-ui-kit/chat-text';\nimport type { CommandMentions } from './config';\nimport type { ChatCards, ChatTextPart, RowContext } from './message';\nimport type { QueuedMessage } from './queue';\nimport type { AnswerOutcome, ChatArtifactsConfig } from './config';\nimport type { ChatCard, Mode } from './rows';\nimport { useChatText } from './labels';\nimport type { BlockAction } from '../button/actions';\nimport type { ReplyRef } from './config';\n\n/** What the host lets the person do beyond typing. Pass `remote.answer` and `remote.withdraw` from `createRemoteChat()`. */\nexport interface PiChatActions {\n  /** Resolve a pending `ask_user` question. Without it, question cards are read-only. */\n  readonly answer?: (questionId: string, answer: string) => Promise<AnswerOutcome>;\n  /** Withdraw a queued message before Pi places it. Without it, queued messages cannot be cancelled. */\n  readonly withdraw?: (id: QueuedMessage['id']) => Promise<unknown>;\n}\n\n/** The props `PiChat` and `AmbientChat` both take and hand to `useChatSession`. */\nexport interface ChatFeatureProps {\n  /** `expert` hides successful tool details and reasoning; `developer` shows everything. */\n  readonly mode?: Mode;\n  /** `natural` shows only messages, replies and question, approval and artifact cards, with one \"Preparing…\" status while the agent works: no tool steps, reasoning, file discovery or raw error text. Omit it and nothing changes. */\n  readonly presentation?: 'natural';\n  /** Show a retained voice message's audio player. Default false: transcript only; uploaded audio and stored tokens are unchanged. */\n  readonly voiceReplay?: boolean;\n  /** The words on the chip of a sent message that starts with a `<target>` block (point-and-speak). Undefined keeps the default label; the chip never shows the raw fields on hover. */\n  readonly targetLabel?: (target: JsonObject) => string | undefined;\n  /** A host's own card for a sent text. */\n  readonly sentContent?: SentContent;\n  readonly actions?: PiChatActions;\n  readonly renderEntry?: (entry: EntryRecord) => ChatCard | undefined;\n  /** Omit complete assistant lines from display, copy and actions. Live trailing fragments wait for a newline or settlement. Not transport redaction. */\n  readonly hideLine?: (line: string) => boolean;\n  /** Initial number of displayed rows (default 60). An explicit limit uses Show earlier, not automatic paging; nothing is deleted. */\n  readonly displayLimit?: number;\n  /** Automatic paging: rows shown first (default 60) and rows added each time the reader reaches the top (default 40). Ignored with `displayLimit`. */\n  readonly paging?: ChatPaging;\n  /** Explicitly enable messageActions for paged history too; other historical controls remain inert. */\n  readonly historicalMessageActions?: boolean;\n  /** Host-rendered unread indicator, keyed by the reply. The host owns seen state and its persistence. */\n  readonly unread?: (reply: ReplyRef) => ReactNode;\n  /** Message inside the single native response-error notice. Null/undefined keeps the default; native status and metadata stay unchanged. */\n  readonly replyError?: (reply: ReplyRef) => ReactNode;\n  /** Card for any tool call; the catch-all after `toolRenderers`. */\n  readonly renderTool?: (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined;\n  /** Cards for tool calls, keyed by tool name (same contract as `renderTool`). An entry that returns undefined falls back to `renderTool`. */\n  readonly toolRenderers?: Readonly<Record<string, (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard | undefined>> | undefined;\n  /** Draws an assistant text part. Default: plain text (`markdownText` of `pi-chat-markdown` draws Markdown). */\n  readonly renderText?: ((part: ChatTextPart) => ReactNode) | undefined;\n  /**\n   * The question, approval and sub-agent cards (`pi-chat-question`, `pi-chat-approval`, `pi-chat-subagent`; `withChatPlugins` adds them all).\n   * Without a question or approval card the chat shows that it waits for the person's answer, with no answer UI; without the sub-agent card a\n   * sub-agent call is an ordinary tool step.\n   */\n  readonly cards?: ChatCards | undefined;\n  readonly groupTool?: (call: ToolCall, result: ToolResultMessage) => boolean;\n  readonly commandMentions?: CommandMentions;\n  readonly onOpenImage?: (image: ImageContent) => void;\n  readonly onCopy?: (text: string) => Promise<void>;\n  readonly onComposerKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n  readonly fileAccept?: string;\n  /** Optional pills at the left of the composer's controls row. */\n  readonly composerChips?: ComposerProps['chips'];\n  /** Contextual host content above the input, for example a removable quote. */\n  readonly composerHeader?: ReactNode;\n  /** Host-owned content participates in send readiness without native image attachments. */\n  readonly composerHasContent?: boolean;\n  /** Retain files for the host's send operation instead of uploading immediately. */\n  readonly onPickFiles?: (files: readonly File[]) => void;\n  /** `/` menu of host commands and skills. Omit it and `/` is just text. */\n  readonly slash?: SlashConfig;\n  /** Show successful native write/edit paths as file cards under each reply. Off by default: only hosts with workspace file tools should opt in. */\n  readonly fileChanges?: boolean;\n  /** Opens a file from an upload or write/edit card. Falls back to mentions.open. */\n  readonly onOpenFile?: (path: string) => void;\n  /** Pastes above these limits become a file through `attachments` (on by default, 2000 characters or 40 lines). Needs `attachments`. */\n  readonly pasteToFile?: PasteToFile;\n  /** `@` workspace file mentions: a picker, composer chips and styled mentions in sent messages. */\n  readonly mentions?: MentionsConfig;\n  /** Attach button, paste and drop through the host's upload. Takes the place of `onFiles` and `fileAccept`. */\n  readonly attachments?: AttachmentsConfig;\n  /** Model picker in the composer bar. The current model comes from the view's `pi.agent` document. */\n  readonly model?: ModelConfig;\n  /** Thinking level picker in the composer bar. The current level comes from the view's `pi.agent` document. */\n  readonly effort?: EffortConfig;\n  /**\n   * Artifact cards: tool results that carry a descriptor become a card that opens the artifact in the host's panel. The card and its recogniser\n   * come from `pi-artifacts` (`withChatPlugins` adds them); without them, or without this prop, no artifact is offered.\n   */\n  readonly artifacts?: ChatArtifactsConfig;\n  /**\n   * Host actions under each settled reply, beside Copy (and Fork): `header` ones as buttons, `menu` ones in a \"…\" menu. Test ids\n   * `reply-action-<id>`, the menu `reply-action-more`.\n   */\n  readonly messageActions?: ((reply: ReplyRef) => readonly BlockAction[]) | undefined;\n  /** A line under each settled reply (for example the model that answered and the time it took), for the host to show to some people only. */\n  readonly replyFooter?: ((reply: ReplyRef) => ReactNode) | undefined;\n}\n\n\n// Compatibility type export for one release.\nexport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\nimport { useChatSession as useHeadlessChatSession } from '@hachej/boring-ui-kit/chat-react';\nimport type { FilesHandler } from '@hachej/boring-ui-kit/chat-react';\n\n/** The chat behaviour every surface over a `NativeChatController` shares (`PiChat`, `AmbientChat`): sending, queue actions, uploads, pickers, rows. */\nexport interface ChatSessionOptions extends Readonly<{ [Key in keyof ChatFeatureProps]: ChatFeatureProps[Key] | undefined }> {\n  readonly controller: ChatController;\n  /** The controller the host currently passes; a surface that outlives its controller stops acting on the old one. */\n  readonly activeController: { readonly current: ChatController };\n  readonly mode: Mode;\n  readonly fileAccept: string;\n  readonly onFiles?: FilesHandler | undefined;\n  /** The phone camera for an `onFiles` chat (`attachments.Camera` is used with `attachments`). */\n  readonly camera?: AttachmentsConfig['Camera'];\n  /** Runs after a message was accepted for sending (for example to scroll to the bottom). */\n  readonly afterSend?: (() => void) | undefined;\n  /** Extra attributes of the row context a surface needs (for example per-reply actions). */\n  readonly rowExtras?: Partial<RowContext> | undefined;\n  /** The optional annotate toggle: when notes are pending (`count` > 0), Send attaches them to the message first. */\n  readonly feedback?: ComposerFeedback | undefined;\n  readonly sendContext?: import('@hachej/boring-ui-kit/chat-react').ChatSessionFeedback | undefined;\n}\n\n/** Presentation adapter; all session state and controller protocols live in the kit. */\nexport function useChatSession(options: ChatSessionOptions) {\n  const { controller, activeController, mode, presentation, voiceReplay, targetLabel, sentContent, actions, renderEntry, hideLine, historicalMessageActions, unread, replyError, renderTool, toolRenderers, renderText, cards, groupTool, commandMentions, onOpenImage, onCopy, onComposerKeyDown, onFiles, fileAccept,\n    slash, mentions, attachments, model, effort, artifacts, messageActions, replyFooter, afterSend, rowExtras, feedback, sendContext, onOpenFile, fileChanges, composerChips, composerHeader, composerHasContent, onPickFiles, pasteToFile } = options;\n  const { labels } = useChatText();\n  const textarea = useRef<HTMLTextAreaElement | null>(null);\n  const offered = artifacts?.recognise && artifacts.Card ? artifacts : undefined;\n  const sessionArtifacts = useMemo(() => offered?.recognise ? { recognise: offered.recognise, detect: offered.detect, open: offered.open } : undefined, [offered]);\n  const session = useHeadlessChatSession<ReactNode>({ controller, activeController, mode, presentation, actions, renderEntry, hideLine, renderTool, toolRenderers,\n    groupTool, subagent: cards?.subagent, onOpenImage, onFiles, mentions, slash, attachments, model, effort,\n    artifacts: sessionArtifacts,\n    afterSend, feedback: sendContext ?? feedback, onOpenFile, onPickFiles, commandMentions, labels, onFocus: () => textarea.current?.focus() });\n  const { state, developer, natural, connected, working, sendBlocked, act } = session;\n  const rowContext = useMemo<RowContext>(() => ({\n    developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, openFile: onOpenFile ?? mentions?.open, fileChanges,\n    commandMentions: commandMentions ? { commands: commandMentions.commands, onActivate: session.activateMention } : undefined,\n    answer: actions?.answer,\n    artifacts: offered?.Card ? { open: offered.open, isOpen: offered.isOpen, kinds: offered.kinds, Card: offered.Card } : undefined,\n    messageActions, historicalMessageActions, unread, replyError,\n    replyFooter,\n    pieces: slash?.skills?.length || mentions || attachments ? { kinds: mentions?.kinds, mentions: Boolean(mentions), uploads: Boolean(attachments), skills: (slash?.skills ?? []).map(skill => skill.name), openMention: mentions?.open, renderMention: mentions?.renderSent ?? mentions?.render, preview: mentions?.preview, audioUrl: mentions?.audioUrl } : undefined,\n    ...rowExtras,\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- lists the fields rows read, not whole objects: activateMention changes every render and must not rebuild every row.\n  }), [controller, developer, natural, voiceReplay, targetLabel, sentContent, renderText, cards, groupTool, onOpenImage, onCopy, onOpenFile, fileChanges, commandMentions, actions?.answer, slash?.skills, mentions, mentions?.open, mentions?.render, mentions?.renderSent, mentions?.preview, mentions?.audioUrl, attachments, offered?.open, offered?.isOpen, offered?.kinds, offered?.Card, messageActions, historicalMessageActions, unread, replyError, replyFooter, rowExtras]);\n\n  /** The model-and-effort pill and the note that reports a refused change. */\n  const pickers = () => {\n    const disabled = session.changing !== null || state.disposed || !connected;\n    // The pill is drawn by the component the config carries (`pi-chat-pickers`); without one there is no pill.\n    const Picker = model?.Picker ?? effort?.Picker;\n    const barStart = (model || effort) && Picker ? <Picker model={model} effort={effort} currentModel={session.currentModel} currentEffort={session.currentEffort} disabled={disabled} busy={session.changing}\n      onModel={next => void session.changeModel(next)}\n      onEffort={next => void session.changeEffort(next)} /> : undefined;\n    const barNote = session.changeError ? <Button variant=\"ghost\" size=\"sm\" role=\"alert\" data-testid=\"configure-error\" title={`${session.changeError} (${labels.dismissHint})`} onClick={session.dismissChangeError}\n      className=\"min-w-0 max-w-[16rem]\"><span className=\"truncate\">{session.changeError}</span></Button> : undefined;\n    return { barStart, barNote };\n  };\n\n  const camera = attachments ? attachments.Camera : options.camera;\n  /** Everything `Composer` needs from the session; a surface adds its layout and slots. */\n  const composer = {\n    text: state.draft.text, onText: (text: string) => controller.setText(text), onKeyDown: onComposerKeyDown, textareaRef: textarea,\n    attachments: state.draft.attachments.map(item => ({ id: item.id, name: item.name, mimeType: item.content.mimeType, data: item.content.data })),\n    onRemoveAttachment: (id: string) => controller.setAttachments(controller.getSnapshot().draft.attachments.filter(item => item.id !== id)),\n    // A typed message answers the waiting question, so the primary button sends it.\n    working: working && !session.answersQuestion, sendBlocked, disabled: state.disposed, stopRequested: state.stop === 'requested',\n    onSend: session.send, onStop: () => act(controller.stop),\n    hasFiles: Boolean(composerHasContent),\n    uploading: session.uploading > 0, canAttach: Boolean(onPickFiles || onFiles || attachments), ...(camera ? { camera } : {}), fileAccept: attachments ? attachments.accept ?? '' : fileAccept, onPickFiles: (files: readonly File[]) => { void session.upload(files); },\n    slash, onSlashError: session.report, mentions, mentionPaths: session.picked, onMentionPicked: session.pickMention,\n    uploads: session.pending, onDismissUpload: session.dismissUpload,\n    onPasteText: attachments ? session.pasteText : undefined, pasteToFile,\n    quote: composerHeader,\n    feedback, chips: composerChips,\n  };\n\n  return { ...session, textarea, rowContext, composer, pickers };\n}\n\nexport type ChatSession = ReturnType<typeof useChatSession>;\n\n// Compatibility exports for one release; MessageScroller remains the only scroll owner.\nexport { chunkKeys, useRowChunks, PAGE_FIRST, PAGE_MORE, CHUNK } from '@hachej/boring-ui-kit/chat-react';\nexport type { ChatPaging } from '@hachej/boring-ui-kit/chat-react';\n\n/** Thin presentation adapter to the host's shadcn MessageScroller. */\nexport function useTranscript(rows: readonly { readonly key: string }[], page = PAGE_FIRST, more = PAGE_MORE, history?: { readonly state: ChatHistoryState; readonly connected: boolean; readonly load: () => Promise<void> }, automatic = true) {\n  const window = useTranscriptWindow(rows, page, more, history, automatic);\n  const { scrollToEnd } = useMessageScroller();\n  const scrollable = useMessageScrollerScrollable();\n  const scrollToBottom = useCallback((behavior?: 'instant') => scrollToEnd({ behavior: behavior === 'instant' ? 'instant' : 'smooth' }), [scrollToEnd]);\n  return { ...window, stick: { scrollRef: window.scrollRef, scrollToBottom, isAtBottom: !scrollable.end } };\n}\n",
       "type": "registry:component",
       "target": "components/pi-chat/session.tsx"
     },

package/r/pi-workspace.json

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

package/r/placed-agent.json

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

package/r/provider-setup.json

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