@hachej/boring-ui-kit 0.4.25 → 0.4.27

package/dist/text-draft-labels.js

@@ -0,0 +1,47 @@
+const frenchRecoveryStates = { disabled: 'désactivée', revoked: 'accès révoqué', expired: 'expirée', disposed: 'fermée' };
+export const textDraftLabels = {
+    en: {
+        draftRecovery: 'Draft recovery',
+        draftRecoveryState: kind => `Draft recovery ${kind}`,
+        draftChecking: 'Checking stored drafts',
+        draftStoring: 'Storing draft',
+        draftStored: 'Draft stored for recovery. Storage is not a save receipt.',
+        draftStorageUnavailable: 'Draft recovery storage unavailable',
+        draftEnabled: 'Draft recovery enabled',
+        checkStoredDrafts: 'Check stored drafts',
+        storeDraft: 'Store draft for recovery',
+        noStoredDrafts: 'No stored drafts',
+        moreStoredDrafts: 'More stored drafts exist than this listing shows.',
+        storedDraft: 'Stored draft',
+        draftConflict: 'Saved revision changed. Review this draft separately.',
+        draftMatches: 'Stored draft matches the checked saved revision.',
+        reviewStoredDraft: 'Review stored draft',
+        restoreDraft: 'Restore draft',
+        discardStoredDraft: 'Discard stored draft',
+        draftRestored: 'Draft restored locally. Save to publish it.',
+        draftDiscarded: 'Stored draft discarded. Current edits are unchanged.',
+        draftStorageFailed: 'Draft storage unavailable. Current edits are unchanged.',
+    },
+    fr: {
+        draftRecovery: 'Récupération de brouillon',
+        draftRecoveryState: kind => `Récupération de brouillon : ${frenchRecoveryStates[kind] ?? kind}`,
+        draftChecking: 'Recherche des brouillons enregistrés',
+        draftStoring: 'Enregistrement du brouillon',
+        draftStored: 'Brouillon conservé pour récupération. Ce n’est pas un enregistrement du document.',
+        draftStorageUnavailable: 'Stockage des brouillons indisponible',
+        draftEnabled: 'Récupération de brouillon activée',
+        checkStoredDrafts: 'Chercher les brouillons enregistrés',
+        storeDraft: 'Conserver le brouillon pour récupération',
+        noStoredDrafts: 'Aucun brouillon enregistré',
+        moreStoredDrafts: 'Il existe d’autres brouillons que ceux listés ici.',
+        storedDraft: 'Brouillon enregistré',
+        draftConflict: 'La version enregistrée a changé. Examinez ce brouillon à part.',
+        draftMatches: 'Ce brouillon correspond à la version enregistrée vérifiée.',
+        reviewStoredDraft: 'Examiner le brouillon',
+        restoreDraft: 'Restaurer le brouillon',
+        discardStoredDraft: 'Supprimer le brouillon',
+        draftRestored: 'Brouillon restauré localement. Enregistrez pour le publier.',
+        draftDiscarded: 'Brouillon supprimé. Vos modifications actuelles sont inchangées.',
+        draftStorageFailed: 'Stockage des brouillons indisponible. Vos modifications actuelles sont inchangées.',
+    },
+};

package/dist/voice-attempt.d.ts

@@ -0,0 +1,33 @@
+import type { VoiceCapture, VoiceRecording, VoiceStart } from './voice-capture.js';
+export type VoiceAttempt<Data, Phase extends string = never> = Data & {
+    readonly id: number;
+    readonly abort: AbortController;
+    readonly capture: VoiceCapture;
+    readonly maxMs: number;
+    phase: 'starting' | 'recording' | 'processing' | Phase;
+    seconds: number;
+    levels: readonly number[];
+    paused: boolean;
+    canPause: boolean;
+};
+export interface VoiceAttemptOptions<Data, Phase extends string> {
+    readonly valid?: (item: VoiceAttempt<Data, Phase>) => boolean;
+    readonly refused?: (result: Extract<VoiceStart, {
+        kind: 'refused';
+    }>) => void;
+}
+/** Owns only this viewer's microphone attempts, never the borrowed chat or native execution. */
+export declare function useVoiceAttempt<Data extends object, Phase extends string = never>(options?: VoiceAttemptOptions<Data, Phase>): {
+    attempts: readonly VoiceAttempt<Data, Phase>[];
+    captureSequence: number;
+    current: () => readonly VoiceAttempt<Data, Phase>[];
+    start: (data: Data, configuredMaxMs?: number) => VoiceAttempt<Data, Phase>;
+    stop: (item: VoiceAttempt<Data, Phase>) => Promise<VoiceRecording | null>;
+    pause: (item: VoiceAttempt<Data, Phase>) => void;
+    resume: (item: VoiceAttempt<Data, Phase>) => void;
+    remove: (item: VoiceAttempt<Data, Phase>) => void;
+    clear: () => void;
+    valid: (item: VoiceAttempt<Data, Phase>) => boolean;
+    update: () => void;
+};
+//# sourceMappingURL=voice-attempt.d.ts.map

package/dist/voice-attempt.js

@@ -0,0 +1,122 @@
+'use client';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createVoiceCapture, DEFAULT_MAX_VOICE_MS } from './voice-capture.js';
+/** Owns only this viewer's microphone attempts, never the borrowed chat or native execution. */
+export function useVoiceAttempt(options = {}) {
+    const latest = useRef(options);
+    useLayoutEffect(() => { latest.current = options; });
+    const mounted = useRef(false), owned = useRef([]), sequence = useRef(0);
+    const timers = useRef(new Map());
+    const [, changed] = useState(0);
+    const update = () => { if (mounted.current)
+        changed(value => value + 1); };
+    const valid = (item) => mounted.current && owned.current.includes(item) && !item.abort.signal.aborted && (latest.current.valid?.(item) ?? true);
+    const stopTimer = (item) => { clearInterval(timers.current.get(item)); timers.current.delete(item); };
+    const remove = (item) => {
+        owned.current = owned.current.filter(current => current !== item);
+        stopTimer(item);
+        item.abort.abort();
+        item.capture.cancel();
+        update();
+    };
+    const clear = () => { for (const item of [...owned.current])
+        remove(item); };
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof document === 'undefined')
+            return;
+        const cancelRecording = () => {
+            for (const item of [...owned.current])
+                if (item.phase === 'starting' || item.phase === 'recording')
+                    remove(item);
+        };
+        const escape = (event) => { if (event.key === 'Escape')
+            cancelRecording(); };
+        const hidden = () => { if (document.hidden)
+            cancelRecording(); };
+        window.addEventListener('keydown', escape, true);
+        window.addEventListener('blur', cancelRecording);
+        document.addEventListener('visibilitychange', hidden);
+        return () => {
+            window.removeEventListener('keydown', escape, true);
+            window.removeEventListener('blur', cancelRecording);
+            document.removeEventListener('visibilitychange', hidden);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- handlers cancel only the currently owned captures, not admitted or processing work
+    }, []);
+    const pause = (item) => { if (valid(item) && item.phase === 'recording' && item.capture.pause()) {
+        item.paused = true;
+        update();
+    } };
+    const resume = (item) => { if (valid(item) && item.phase === 'recording' && item.capture.resume()) {
+        item.paused = false;
+        update();
+    } };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- teardown releases the attempts owned at unmount, including ones created after mount
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; clear(); }; }, []);
+    const start = (data, configuredMaxMs = DEFAULT_MAX_VOICE_MS) => {
+        const maxMs = Number.isFinite(configuredMaxMs) && configuredMaxMs > 0 ? configuredMaxMs : Infinity;
+        const item = { ...data, id: ++sequence.current, maxMs, abort: new AbortController(), capture: createVoiceCapture({ maxMs }), phase: 'starting', seconds: 0, levels: [], paused: false, canPause: false };
+        owned.current = [...owned.current, item];
+        update();
+        // No await before start: microphone permission belongs to the initiating gesture.
+        void item.capture.start().then(result => {
+            if (!valid(item)) {
+                remove(item);
+                return;
+            }
+            if (result.kind === 'refused') {
+                remove(item);
+                latest.current.refused?.(result);
+                return;
+            }
+            item.phase = 'recording';
+            update();
+            let elapsedMs = 0;
+            timers.current.set(item, setInterval(() => {
+                if (!valid(item)) {
+                    remove(item);
+                    return;
+                }
+                const progress = item.capture.progress();
+                if (!progress)
+                    return;
+                item.seconds = Math.floor(progress.elapsedMs / 1000);
+                item.canPause = progress.canPause;
+                item.paused = progress.paused;
+                if (progress.level !== undefined && !progress.paused && progress.elapsedMs > elapsedMs)
+                    item.levels = [...item.levels.slice(-31), progress.level];
+                elapsedMs = progress.elapsedMs;
+                update();
+            }, 100));
+        }).catch(() => {
+            if (!valid(item)) {
+                remove(item);
+                return;
+            }
+            remove(item);
+            latest.current.refused?.({ kind: 'refused', code: 'failed', reason: 'The microphone could not be started.' });
+        });
+        return item;
+    };
+    const stop = async (item) => {
+        if (!valid(item))
+            return null;
+        if (item.phase === 'starting') {
+            remove(item);
+            return null;
+        }
+        if (item.phase !== 'recording')
+            return null;
+        item.phase = 'processing';
+        stopTimer(item);
+        update();
+        const recording = await item.capture.stop().catch(() => null);
+        if (!valid(item))
+            return null;
+        if (recording)
+            item.seconds = Math.max(0, Math.round((recording.endedAt - recording.startedAt) / 1000));
+        update();
+        return recording;
+    };
+    return { attempts: owned.current, captureSequence: sequence.current, current: () => owned.current, start, stop, pause, resume, remove, clear, valid, update };
+}

package/dist/voice-capture.d.ts

@@ -18,8 +18,20 @@ export interface VoiceRecording {
     /** The recording reached `maxMs` and stopped on its own. */
     readonly truncated: boolean;
 }
+/** Live capture facts. PCM elapsed time and level come from kept samples, never a synthetic waveform. */
+export interface VoiceCaptureProgress {
+    readonly elapsedMs: number;
+    /** Root mean square amplitude in [0, 1]; unavailable on the MediaRecorder fallback. */
+    readonly level: number | undefined;
+    readonly paused: boolean;
+    readonly canPause: boolean;
+}
 export interface VoiceCapture {
     readonly start: () => Promise<VoiceStart>;
+    readonly progress: () => VoiceCaptureProgress | null;
+    /** PCM only: pauses/resumes appending samples. False when unavailable or already ended. */
+    readonly pause: () => boolean;
+    readonly resume: () => boolean;
     /** Ends the recording and returns it; null when nothing was recorded (never started, cancelled, or empty). */
     readonly stop: () => Promise<VoiceRecording | null>;
     /** Ends the recording, releases the microphone and discards the audio. */

package/dist/voice-capture.js

@@ -213,7 +213,7 @@ export function createVoiceCapture(options = {}) {
         }
         let cancelled;
         const current = {
-            stream, context, source: null, node: null, chunks: [], samples: 0, startedAt: null, truncated: false, cancelled: false, ended: false,
+            stream, context, source: null, node: null, chunks: [], samples: 0, startedAt: null, truncated: false, cancelled: false, ended: false, paused: false, level: 0,
             maxSamples: Number.isFinite(maxMs) && maxMs > 0 ? Math.floor((maxMs / 1000) * WAV_RATE) : Number.POSITIVE_INFINITY,
             cancel: () => cancelled(),
         };
@@ -251,7 +251,7 @@ export function createVoiceCapture(options = {}) {
             return refused('unsupported', error instanceof Error ? error.message : String(error));
         }
         current.node.onaudioprocess = event => {
-            if (current.ended)
+            if (current.ended || current.paused)
                 return;
             const input = event.inputBuffer.getChannelData(0);
             if (current.startedAt === null) {
@@ -261,6 +261,10 @@ export function createVoiceCapture(options = {}) {
             const chunk = downsample(input, context.sampleRate);
             const room = current.maxSamples - current.samples;
             const kept = chunk.length > room ? chunk.subarray(0, room) : chunk;
+            let squares = 0;
+            for (const sample of kept)
+                squares += sample * sample;
+            current.level = kept.length ? Math.min(1, Math.sqrt(squares / kept.length)) : 0;
             current.chunks.push(kept);
             current.samples += kept.length;
             if (current.samples >= current.maxSamples)
@@ -298,6 +302,17 @@ export function createVoiceCapture(options = {}) {
         }
     };
     return {
+        progress() {
+            if (wav)
+                return { elapsedMs: wav.samples / WAV_RATE * 1000, level: wav.level, paused: wav.paused, canPause: !wav.ended && wav.startedAt !== null };
+            if (!session || session.startedAt === null)
+                return null;
+            return { elapsedMs: Math.min(Math.max(0, (session.stoppedAt ?? now()) - session.startedAt), maxMs > 0 ? maxMs : Infinity), level: undefined, paused: false, canPause: false };
+        },
+        pause() { if (!wav || wav.ended || wav.startedAt === null)
+            return false; wav.paused = true; return true; },
+        resume() { if (!wav || wav.ended || wav.startedAt === null)
+            return false; wav.paused = false; return true; },
         async start() {
             if (session || wav || opening)
                 return { kind: 'refused', code: 'failed', reason: 'Already recording.' };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.4.25",
+  "version": "0.4.27",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -59,6 +59,18 @@
       "types": "./dist/chat-view.d.ts",
       "import": "./dist/chat-view.js"
     },
+    "./chat-react": {
+      "types": "./dist/chat-react.d.ts",
+      "import": "./dist/chat-react.js"
+    },
+    "./chat-react/voice": {
+      "types": "./dist/chat-voice.d.ts",
+      "import": "./dist/chat-voice.js"
+    },
+    "./chat-text": {
+      "types": "./dist/chat-text.d.ts",
+      "import": "./dist/chat-text.js"
+    },
     "./voice-capture": {
       "types": "./dist/voice-capture.d.ts",
       "import": "./dist/voice-capture.js"
@@ -138,7 +150,7 @@
     }
   },
   "peerDependencies": {
-    "@hachej/boring-files": "^0.4.25",
+    "@hachej/boring-files": "^0.4.27",
     "@earendil-works/pi-durable": "~1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/r/agent-target.json

@@ -4,24 +4,20 @@
   "title": "Point and dictate on app data",
   "description": "Tap explicitly marked JSON app context, dictate once and show the same app agent’s native reply without opening chat. Host-controlled presentation; no feedback report or second controller.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.25",
-    "@hachej/boring-feedback@^0.4.25",
+    "@hachej/boring-ui-kit@^0.4.27",
+    "@hachej/boring-feedback@^0.4.27",
     "@earendil-works/pi-durable@~1.2.0",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.25/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.25/r/pi-chat.json",
-    "button",
-    "card",
-    "message",
-    "bubble"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.27/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.27/r/pi-chat.json"
   ],
   "files": [
     {
       "path": "registry/agent-target/agent-target.tsx",
-      "content": "'use client';\n\n// Host presentation over the app's borrowed chat controller, not a feedback report or a second Pi lifecycle.\nimport { createPortal } from 'react-dom';\nimport { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { EntryRecord, JsonObject, Submission } from '@earendil-works/pi-durable';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { createPicker, createPrivacyPolicy, isExcluded } from '@hachej/boring-feedback/page';\nimport type { Picker } from '@hachej/boring-feedback/page';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Message, MessageContent } from '@/components/ui/message';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { useAgentLayer } from '../app-shell/agent-layer';\nimport { ScreenActiveContext } from '../app-shell/agent-context';\nimport { useDictation } from '../app-shell/use-dictation';\nimport { useVisualViewport } from '../app-shell/use-visual-viewport';\nimport { object } from '../pi-chat/rows';\nimport { agentTargetLabels } from './agent-target-labels';\nimport type { AgentTargetLabels } from './agent-target-labels';\n\nexport interface AgentTargetResult { readonly target: JsonObject; readonly reply: string; readonly ok: boolean }\nexport interface AgentTargetModeProps {\n  readonly enabled: boolean;\n  readonly transcribe: (audio: Blob, signal: AbortSignal) => Promise<string>;\n  readonly onSettled: (result: AgentTargetResult) => void;\n  readonly attribute?: string;\n  readonly labels?: Partial<AgentTargetLabels> | undefined;\n}\ntype Stage = 'dictating' | 'sending' | 'observing' | 'settled' | 'cancelled';\ninterface Session {\n  readonly target: JsonObject;\n  readonly block: string;\n  readonly element: Element;\n  readonly controller: NativeChatController;\n  readonly abort: AbortController;\n  readonly onSettled: AgentTargetModeProps['onSettled'];\n  readonly labels: AgentTargetLabels;\n  stage: Stage;\n}\ninterface Presentation { readonly element: Element; readonly stage: Stage; readonly reply: string; readonly problem?: string }\n\nfunction freeze(value: unknown): void {\n  if (value && typeof value === 'object') { for (const child of Object.values(value)) freeze(child); Object.freeze(value); }\n}\nfunction contextOf(element: Element, attribute: string, labels: AgentTargetLabels): { readonly target: JsonObject; readonly block: string } {\n  const raw = element.getAttribute(attribute) ?? '';\n  if (new TextEncoder().encode(raw).length > 1024) throw new Error(labels.contextTooLarge);\n  let target: unknown;\n  try { target = JSON.parse(raw); } catch { throw new Error(labels.invalidContext); }\n  if (!target || typeof target !== 'object' || Array.isArray(target)) throw new Error(labels.invalidContext);\n  const json = JSON.stringify(target).replace(/</g, '\\\\u003c');\n  if (new TextEncoder().encode(json).length > 1024) throw new Error(labels.contextTooLarge);\n  freeze(target);\n  return { target: target as JsonObject, block: `<target>${json}</target>` };\n}\nconst textOf = (entries: readonly EntryRecord[]): string => entries.flatMap(entry => (entry.model ?? []).flatMap(message => message.role === 'assistant'\n  ? message.content.flatMap(part => part.type === 'text' ? [part.text] : []) : [])).filter(Boolean).join('\\n\\n');\n\n/** A local observation only. Stream attribution uses native run inputs; settlement uses the native submission's exact answer entry. */\nfunction observe(session: Session, submission: Submission, show: (reply: string) => void, settle: (reply: string, ok: boolean, problem?: string) => void): void {\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  const { controller, abort } = session;\n  const stream = () => {\n    if (abort.signal.aborted || session.stage !== 'observing') return;\n    const view = controller.getSnapshot().view;\n    const live = object(view?.docs['pi.live']), run = object(live?.['run']);\n    if (!Array.isArray(run?.['inputs']) || !run['inputs'].includes(submission.id)) return;\n    const generation = object(live?.['generation']), message = object(generation?.['message']);\n    const partial = Array.isArray(message?.['content']) ? message['content'].map(object).flatMap(part => part?.['type'] === 'text' && typeof part['text'] === 'string' ? [part['text']] : []).join('\\n') : '';\n    show([textOf((view?.entries ?? []).filter(entry => entry.byTaskId === run['taskId'])), partial].filter(Boolean).join('\\n\\n'));\n  };\n  const unsubscribe = controller.subscribe(stream);\n  const stop = () => { clearTimeout(timer); unsubscribe(); abort.signal.removeEventListener('abort', stop); };\n  abort.signal.addEventListener('abort', stop, { once: true });\n  const poll = async () => {\n    try {\n      const record = await controller.submissionStatus(submission);\n      if (abort.signal.aborted) return;\n      stream();\n      if (record.status === 'unanswered') { stop(); settle('', false, session.labels.unanswered); return; }\n      if (record.status === 'done' && record.type === 'input') {\n        const view = controller.getSnapshot().view;\n        const answer = view?.entries.find(entry => entry.id === record.answer);\n        if (answer) {\n          const entries = answer.byTaskId === undefined ? [answer] : view!.entries.filter(entry => entry.byTaskId === answer.byTaskId);\n          stop(); settle(textOf(entries), true); return;\n        }\n        // A coalesced watch may arrive after status. An unavailable answer stays unconfirmed, never guessed from neighbouring text.\n      }\n      if (!abort.signal.aborted) timer = setTimeout(() => { void poll(); }, 150);\n    } catch {\n      stop();\n      if (!abort.signal.aborted) settle('', false, session.labels.observationFailed);\n    }\n  };\n  stream();\n  void poll();\n}\n\n/** Tap only explicitly marked app data, dictate once and show its native answer without opening the app's chat. */\nexport function AgentTargetMode({ enabled, transcribe, onSettled, labels, attribute = 'data-agent-target' }: AgentTargetModeProps) {\n  const words = { ...agentTargetLabels, ...labels };\n  const { agent } = useAgentLayer();\n  const active = useContext(ScreenActiveContext);\n  const viewport = useVisualViewport();\n  const session = useRef<Session | null>(null);\n  const picker = useRef<Picker | null>(null);\n  const box = useRef<HTMLDivElement>(null);\n  const latest = useRef({ onSettled, words });\n  latest.current = { onSettled, words };\n  const [shown, setShown] = useState<Presentation | null>(null);\n  const [place, setPlace] = useState<CSSProperties>();\n  const settle = (selected: Session, reply: string, ok: boolean, problem?: string) => {\n    if (session.current !== selected || selected.abort.signal.aborted || selected.stage === 'settled') return;\n    selected.stage = 'settled';\n    setShown({ element: selected.element, stage: 'settled', reply, ...(problem ? { problem } : {}) });\n    selected.onSettled({ target: selected.target, reply, ok });\n  };\n  const dictation = useDictation({ transcribe, labels: words, onText: async spoken => {\n    const selected = session.current;\n    if (!selected || selected.stage !== 'dictating') return;\n    selected.stage = 'sending';\n    setShown({ element: selected.element, stage: 'sending', reply: '' });\n    let submission: Submission | undefined;\n    try {\n      await selected.controller.connect();\n      if (selected.abort.signal.aborted || session.current !== selected) return;\n      submission = await selected.controller.send('followUp', { text: `${selected.block}\\n\\n${spoken}`, restore: { text: spoken } });\n    }\n    catch {\n      if (selected.abort.signal.aborted || session.current !== selected) return;\n      const snapshot = selected.controller.getSnapshot();\n      if (!snapshot.disposed) {\n        const draft = snapshot.draft.text;\n        selected.controller.setText(`${draft}${draft && !/\\s$/.test(draft) ? ' ' : ''}${spoken}`);\n      }\n      settle(selected, '', false, snapshot.disposed ? selected.labels.unavailable : selected.labels.sendFailed);\n      return;\n    }\n    if (selected.abort.signal.aborted || session.current !== selected) return;\n    if (!submission) { settle(selected, '', false, selected.labels.unconfirmed); return; }\n    selected.stage = 'observing';\n    setShown({ element: selected.element, stage: 'observing', reply: '' });\n    observe(selected, submission, reply => {\n      if (session.current === selected && !selected.abort.signal.aborted) setShown({ element: selected.element, stage: 'observing', reply });\n    }, (reply, ok, problem) => settle(selected, reply, ok, problem));\n  } });\n  const { start, cancel: cancelDictation } = dictation;\n  const cancel = useCallback(() => {\n    const old = session.current;\n    session.current = null;\n    if (old) { old.stage = 'cancelled'; old.abort.abort(); }\n    cancelDictation();\n    picker.current?.suspend(true);\n    setShown(null);\n  }, [cancelDictation]);\n\n  useEffect(() => {\n    if (!enabled || !active || !agent) return;\n    if (!/^data-[a-z][a-z0-9-]*$/.test(attribute)) throw new TypeError('Agent target attribute must be a data-* attribute name');\n    const selector = `[${attribute}]`;\n    let pickedGesture: Element | null = null;\n    const marked = (element: Element | null) => element && !isExcluded(element) ? element.closest(selector) : null;\n    const gate = (event: Event) => {\n      const element = event.target instanceof Element ? event.target : null;\n      if (event.type === 'pointerdown') pickedGesture = null;\n      if (element && box.current?.contains(element)) return;\n      if (session.current || box.current) { if (event.type === 'pointerdown') cancel(); return; }\n      if (element && isExcluded(element)) { picker.current?.suspend(true); return; }\n      picker.current?.suspend(!marked(element));\n    };\n    const key = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && (session.current || box.current || picker.current?.state().suspended === false)) { event.preventDefault(); event.stopImmediatePropagation(); cancel(); }\n    };\n    const click = (event: MouseEvent) => {\n      // Suspending the picker on touch pointerup removes its touchend listener. Consume only that tap's compatibility click.\n      if (pickedGesture && event.target instanceof Node && pickedGesture.contains(event.target)) { pickedGesture = null; event.preventDefault(); event.stopImmediatePropagation(); }\n    };\n    // Registered before the picker: unmarked actions remain ordinary app actions, not consumed empty picks.\n    window.addEventListener('pointerdown', gate, true);\n    window.addEventListener('pointermove', gate, true);\n    window.addEventListener('keydown', key, true);\n    window.addEventListener('click', click, true);\n    const created = createPicker({ root: document.body, policy: createPrivacyPolicy(), tap: 'pick', wheel: false, keys: 'outside-ignored',\n      hitTest: (x, y) => {\n        const top = document.elementsFromPoint(x, y).find(element => !isExcluded(element));\n        const target = marked(top ?? null);\n        return target ? [target] : [];\n      },\n      onPick: element => {\n        const target = marked(element);\n        if (!target || session.current) return;\n        pickedGesture = target;\n        created.suspend(true);\n        try {\n          const context = contextOf(target, attribute, latest.current.words);\n          session.current = { ...context, element: target, controller: agent, abort: new AbortController(), onSettled: latest.current.onSettled, labels: latest.current.words, stage: 'dictating' };\n          setShown({ element: target, stage: 'dictating', reply: '' });\n          start();\n        } catch (error) { setShown({ element: target, stage: 'settled', reply: '', problem: error instanceof Error ? error.message : latest.current.words.invalidContext }); }\n      },\n    });\n    picker.current = created;\n    void created.start();\n    created.suspend(true);\n    return () => {\n      window.removeEventListener('pointerdown', gate, true);\n      window.removeEventListener('pointermove', gate, true);\n      window.removeEventListener('keydown', key, true);\n      window.removeEventListener('click', click, true);\n      cancel();\n      created.dispose();\n      if (picker.current === created) picker.current = null;\n    };\n  }, [enabled, active, agent, attribute, start, cancel]);\n\n  useEffect(() => {\n    const selected = session.current;\n    if (dictation.problem && selected?.stage === 'dictating') settle(selected, '', false, dictation.problem);\n  }, [dictation.problem]);\n  useLayoutEffect(() => {\n    if (!shown || !box.current) return;\n    const node = box.current;\n    const measure = () => {\n      const rect = shown.element.getBoundingClientRect();\n      const topEdge = (viewport?.top ?? 0) + 8, bottom = (viewport ? viewport.top + viewport.height : window.innerHeight) - 8;\n      const height = Math.min(node.getBoundingClientRect().height, Math.max(0, bottom - topEdge));\n      const lowest = Math.max(topEdge, bottom - height);\n      const top = Math.max(topEdge, Math.min(rect.bottom + 8 + height <= bottom ? rect.bottom + 8 : rect.top - height - 8 >= topEdge ? rect.top - height - 8 : lowest, lowest));\n      const width = Math.min(Math.max(240, rect.width), window.innerWidth - 16);\n      const next = { position: 'fixed' as const, top, left: Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - width - 8)), width, maxHeight: Math.max(0, bottom - top), overflowY: 'auto' as const };\n      setPlace(previous => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);\n    };\n    measure();\n    window.addEventListener('resize', measure);\n    window.addEventListener('scroll', measure, true);\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);\n    observer?.observe(node);\n    return () => { window.removeEventListener('resize', measure); window.removeEventListener('scroll', measure, true); observer?.disconnect(); };\n  }, [shown, viewport]);\n\n  if (!enabled || !active || !shown || typeof document === 'undefined') return null;\n  const phase = shown.stage === 'dictating' ? dictation.phase : shown.stage;\n  return createPortal(<Card ref={box} size=\"sm\" data-feedback-ignore=\"\" data-boring=\"agent-target\" data-testid=\"agent-target-bar\" data-phase={phase}\n    role=\"region\" aria-label={words.title} className=\"app-shell fixed z-50\" style={place}>\n    <CardHeader><CardTitle>{words.title}</CardTitle></CardHeader>\n    <CardContent>\n      {shown.problem ? <p role=\"alert\" data-testid=\"agent-target-problem\">{shown.problem}</p>\n        : shown.reply ? <Message align=\"start\"><MessageContent><Bubble variant=\"secondary\"><BubbleContent data-testid=\"agent-target-reply\" className=\"whitespace-pre-wrap\">{shown.reply}</BubbleContent></Bubble></MessageContent></Message>\n          : <p role=\"status\">{phase === 'starting' ? words.opening : phase === 'recording' ? words.listening(dictation.seconds) : phase === 'transcribing' ? words.transcribing : phase === 'settled' ? words.answered : words.waiting}</p>}\n    </CardContent>\n    <CardFooter className=\"flex gap-2\">\n      {shown.stage === 'dictating' && <Button data-testid=\"agent-target-stop\" className=\"min-h-11 min-w-11\" disabled={phase !== 'recording'} onClick={dictation.finish}>{words.stop}</Button>}\n      <Button variant=\"ghost\" data-testid=\"agent-target-close\" className=\"min-h-11 min-w-11\" onClick={cancel}>{shown.stage === 'settled' ? words.close : words.cancel}</Button>\n    </CardFooter>\n  </Card>, document.body);\n}\n",
+      "content": "'use client';\n\n// Host presentation over the app's borrowed chat controller, not a feedback report or a second Pi lifecycle.\nimport { createPortal } from 'react-dom';\nimport { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { EntryRecord, JsonObject, Submission } from '@earendil-works/pi-durable';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { appendToDraft } from '@hachej/boring-ui-kit/chat-text';\nimport { createPicker, createPrivacyPolicy, isExcluded } from '@hachej/boring-feedback/page';\nimport type { Picker } from '@hachej/boring-feedback/page';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Message, MessageContent } from '@/components/ui/message';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { useAgentLayer } from '../app-shell/agent-layer';\nimport { ScreenActiveContext } from '../app-shell/agent-context';\nimport { useDictation } from '../app-shell/use-dictation';\nimport { useVisualViewport } from '../app-shell/use-visual-viewport';\nimport { object } from '../pi-chat/rows';\nimport { agentTargetLabels } from './agent-target-labels';\nimport type { AgentTargetLabels } from './agent-target-labels';\n\nexport interface AgentTargetResult { readonly target: JsonObject; readonly reply: string; readonly ok: boolean }\nexport interface AgentTargetModeProps {\n  readonly enabled: boolean;\n  readonly transcribe: (audio: Blob, signal: AbortSignal) => Promise<string>;\n  readonly onSettled: (result: AgentTargetResult) => void;\n  readonly attribute?: string;\n  readonly labels?: Partial<AgentTargetLabels> | undefined;\n}\ntype Stage = 'dictating' | 'sending' | 'observing' | 'settled' | 'cancelled';\ninterface Session {\n  readonly target: JsonObject;\n  readonly block: string;\n  readonly element: Element;\n  readonly controller: NativeChatController;\n  readonly abort: AbortController;\n  readonly onSettled: AgentTargetModeProps['onSettled'];\n  readonly labels: AgentTargetLabels;\n  stage: Stage;\n}\ninterface Presentation { readonly element: Element; readonly stage: Stage; readonly reply: string; readonly problem?: string }\n\nfunction freeze(value: unknown): void {\n  if (value && typeof value === 'object') { for (const child of Object.values(value)) freeze(child); Object.freeze(value); }\n}\nfunction contextOf(element: Element, attribute: string, labels: AgentTargetLabels): { readonly target: JsonObject; readonly block: string } {\n  const raw = element.getAttribute(attribute) ?? '';\n  if (new TextEncoder().encode(raw).length > 1024) throw new Error(labels.contextTooLarge);\n  let target: unknown;\n  try { target = JSON.parse(raw); } catch { throw new Error(labels.invalidContext); }\n  if (!target || typeof target !== 'object' || Array.isArray(target)) throw new Error(labels.invalidContext);\n  const json = JSON.stringify(target).replace(/</g, '\\\\u003c');\n  if (new TextEncoder().encode(json).length > 1024) throw new Error(labels.contextTooLarge);\n  freeze(target);\n  return { target: target as JsonObject, block: `<target>${json}</target>` };\n}\nconst textOf = (entries: readonly EntryRecord[]): string => entries.flatMap(entry => (entry.model ?? []).flatMap(message => message.role === 'assistant'\n  ? message.content.flatMap(part => part.type === 'text' ? [part.text] : []) : [])).filter(Boolean).join('\\n\\n');\n\n/** A local observation only. Stream attribution uses native run inputs; settlement uses the native submission's exact answer entry. */\nfunction observe(session: Session, submission: Submission, show: (reply: string) => void, settle: (reply: string, ok: boolean, problem?: string) => void): void {\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  const { controller, abort } = session;\n  const stream = () => {\n    if (abort.signal.aborted || session.stage !== 'observing') return;\n    const view = controller.getSnapshot().view;\n    const live = object(view?.docs['pi.live']), run = object(live?.['run']);\n    if (!Array.isArray(run?.['inputs']) || !run['inputs'].includes(submission.id)) return;\n    const generation = object(live?.['generation']), message = object(generation?.['message']);\n    const partial = Array.isArray(message?.['content']) ? message['content'].map(object).flatMap(part => part?.['type'] === 'text' && typeof part['text'] === 'string' ? [part['text']] : []).join('\\n') : '';\n    show([textOf((view?.entries ?? []).filter(entry => entry.byTaskId === run['taskId'])), partial].filter(Boolean).join('\\n\\n'));\n  };\n  const unsubscribe = controller.subscribe(stream);\n  const stop = () => { clearTimeout(timer); unsubscribe(); abort.signal.removeEventListener('abort', stop); };\n  abort.signal.addEventListener('abort', stop, { once: true });\n  const poll = async () => {\n    try {\n      const record = await controller.submissionStatus(submission);\n      if (abort.signal.aborted) return;\n      stream();\n      if (record.status === 'unanswered') { stop(); settle('', false, session.labels.unanswered); return; }\n      if (record.status === 'done' && record.type === 'input') {\n        const view = controller.getSnapshot().view;\n        const answer = view?.entries.find(entry => entry.id === record.answer);\n        if (answer) {\n          const entries = answer.byTaskId === undefined ? [answer] : view!.entries.filter(entry => entry.byTaskId === answer.byTaskId);\n          stop(); settle(textOf(entries), true); return;\n        }\n        // A coalesced watch may arrive after status. An unavailable answer stays unconfirmed, never guessed from neighbouring text.\n      }\n      if (!abort.signal.aborted) timer = setTimeout(() => { void poll(); }, 150);\n    } catch {\n      stop();\n      if (!abort.signal.aborted) settle('', false, session.labels.observationFailed);\n    }\n  };\n  stream();\n  void poll();\n}\n\n/** Tap only explicitly marked app data, dictate once and show its native answer without opening the app's chat. */\nexport function AgentTargetMode({ enabled, transcribe, onSettled, labels, attribute = 'data-agent-target' }: AgentTargetModeProps) {\n  const words = { ...agentTargetLabels, ...labels };\n  const { agent } = useAgentLayer();\n  const active = useContext(ScreenActiveContext);\n  const viewport = useVisualViewport();\n  const session = useRef<Session | null>(null);\n  const picker = useRef<Picker | null>(null);\n  const box = useRef<HTMLDivElement>(null);\n  const latest = useRef({ onSettled, words });\n  useLayoutEffect(() => { latest.current = { onSettled, words }; });\n  const [shown, setShown] = useState<Presentation | null>(null);\n  const [place, setPlace] = useState<CSSProperties>();\n  const settle = (selected: Session, reply: string, ok: boolean, problem?: string) => {\n    if (session.current !== selected || selected.abort.signal.aborted || selected.stage === 'settled') return;\n    selected.stage = 'settled';\n    setShown({ element: selected.element, stage: 'settled', reply, ...(problem ? { problem } : {}) });\n    selected.onSettled({ target: selected.target, reply, ok });\n  };\n  const dictation = useDictation({ transcribe, labels: words, onText: async spoken => {\n    const selected = session.current;\n    if (!selected || selected.stage !== 'dictating') return;\n    selected.stage = 'sending';\n    setShown({ element: selected.element, stage: 'sending', reply: '' });\n    let submission: Submission | undefined;\n    try {\n      await selected.controller.connect();\n      if (selected.abort.signal.aborted || session.current !== selected) return;\n      submission = await selected.controller.send('followUp', { text: `${selected.block}\\n\\n${spoken}`, restore: { text: spoken } });\n    }\n    catch {\n      if (selected.abort.signal.aborted || session.current !== selected) return;\n      const snapshot = selected.controller.getSnapshot();\n      if (!snapshot.disposed) {\n        const draft = snapshot.draft.text;\n        selected.controller.setText(appendToDraft(draft, spoken));\n      }\n      settle(selected, '', false, snapshot.disposed ? selected.labels.unavailable : selected.labels.sendFailed);\n      return;\n    }\n    if (selected.abort.signal.aborted || session.current !== selected) return;\n    if (!submission) { settle(selected, '', false, selected.labels.unconfirmed); return; }\n    selected.stage = 'observing';\n    setShown({ element: selected.element, stage: 'observing', reply: '' });\n    observe(selected, submission, reply => {\n      if (session.current === selected && !selected.abort.signal.aborted) setShown({ element: selected.element, stage: 'observing', reply });\n    }, (reply, ok, problem) => settle(selected, reply, ok, problem));\n  } });\n  const { start, cancel: cancelDictation } = dictation;\n  const cancel = useCallback(() => {\n    const old = session.current;\n    session.current = null;\n    if (old) { old.stage = 'cancelled'; old.abort.abort(); }\n    cancelDictation();\n    picker.current?.suspend(true);\n    setShown(null);\n  }, [cancelDictation]);\n\n  useEffect(() => {\n    if (!enabled || !active || !agent) return;\n    if (!/^data-[a-z][a-z0-9-]*$/.test(attribute)) throw new TypeError('Agent target attribute must be a data-* attribute name');\n    const selector = `[${attribute}]`;\n    let pickedGesture: Element | null = null;\n    const marked = (element: Element | null) => element && !isExcluded(element) ? element.closest(selector) : null;\n    const gate = (event: Event) => {\n      const element = event.target instanceof Element ? event.target : null;\n      if (event.type === 'pointerdown') pickedGesture = null;\n      if (element && box.current?.contains(element)) return;\n      if (session.current || box.current) { if (event.type === 'pointerdown') cancel(); return; }\n      if (element && isExcluded(element)) { picker.current?.suspend(true); return; }\n      picker.current?.suspend(!marked(element));\n    };\n    const key = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && (session.current || box.current || picker.current?.state().suspended === false)) { event.preventDefault(); event.stopImmediatePropagation(); cancel(); }\n    };\n    const click = (event: MouseEvent) => {\n      // Suspending the picker on touch pointerup removes its touchend listener. Consume only that tap's compatibility click.\n      if (pickedGesture && event.target instanceof Node && pickedGesture.contains(event.target)) { pickedGesture = null; event.preventDefault(); event.stopImmediatePropagation(); }\n    };\n    // Registered before the picker: unmarked actions remain ordinary app actions, not consumed empty picks.\n    window.addEventListener('pointerdown', gate, true);\n    window.addEventListener('pointermove', gate, true);\n    window.addEventListener('keydown', key, true);\n    window.addEventListener('click', click, true);\n    const created = createPicker({ root: document.body, policy: createPrivacyPolicy(), tap: 'pick', wheel: false, keys: 'outside-ignored',\n      hitTest: (x, y) => {\n        const top = document.elementsFromPoint(x, y).find(element => !isExcluded(element));\n        const target = marked(top ?? null);\n        return target ? [target] : [];\n      },\n      onPick: element => {\n        const target = marked(element);\n        if (!target || session.current) return;\n        pickedGesture = target;\n        created.suspend(true);\n        try {\n          const context = contextOf(target, attribute, latest.current.words);\n          session.current = { ...context, element: target, controller: agent, abort: new AbortController(), onSettled: latest.current.onSettled, labels: latest.current.words, stage: 'dictating' };\n          setShown({ element: target, stage: 'dictating', reply: '' });\n          start();\n        } catch (error) { setShown({ element: target, stage: 'settled', reply: '', problem: error instanceof Error ? error.message : latest.current.words.invalidContext }); }\n      },\n    });\n    picker.current = created;\n    void created.start();\n    created.suspend(true);\n    return () => {\n      window.removeEventListener('pointerdown', gate, true);\n      window.removeEventListener('pointermove', gate, true);\n      window.removeEventListener('keydown', key, true);\n      window.removeEventListener('click', click, true);\n      cancel();\n      created.dispose();\n      if (picker.current === created) picker.current = null;\n    };\n  }, [enabled, active, agent, attribute, start, cancel]);\n\n  useEffect(() => {\n    const selected = session.current;\n    if (dictation.problem && selected?.stage === 'dictating') settle(selected, '', false, dictation.problem);\n  }, [dictation.problem]);\n  useLayoutEffect(() => {\n    if (!shown || !box.current) return;\n    const node = box.current;\n    const measure = () => {\n      const rect = shown.element.getBoundingClientRect();\n      const topEdge = (viewport?.top ?? 0) + 8, bottom = (viewport ? viewport.top + viewport.height : window.innerHeight) - 8;\n      const height = Math.min(node.getBoundingClientRect().height, Math.max(0, bottom - topEdge));\n      const lowest = Math.max(topEdge, bottom - height);\n      const top = Math.max(topEdge, Math.min(rect.bottom + 8 + height <= bottom ? rect.bottom + 8 : rect.top - height - 8 >= topEdge ? rect.top - height - 8 : lowest, lowest));\n      const width = Math.min(Math.max(240, rect.width), window.innerWidth - 16);\n      const next = { position: 'fixed' as const, top, left: Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - width - 8)), width, maxHeight: Math.max(0, bottom - top), overflowY: 'auto' as const };\n      setPlace(previous => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);\n    };\n    measure();\n    window.addEventListener('resize', measure);\n    window.addEventListener('scroll', measure, true);\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);\n    observer?.observe(node);\n    return () => { window.removeEventListener('resize', measure); window.removeEventListener('scroll', measure, true); observer?.disconnect(); };\n  }, [shown, viewport]);\n\n  if (!enabled || !active || !shown || typeof document === 'undefined') return null;\n  const phase = shown.stage === 'dictating' ? dictation.phase : shown.stage;\n  return createPortal(<Card ref={box} size=\"sm\" data-feedback-ignore=\"\" data-boring=\"agent-target\" data-testid=\"agent-target-bar\" data-phase={phase}\n    role=\"region\" aria-label={words.title} className=\"app-shell fixed z-50\" style={place}>\n    <CardHeader><CardTitle>{words.title}</CardTitle></CardHeader>\n    <CardContent>\n      {shown.problem ? <p role=\"alert\" data-testid=\"agent-target-problem\">{shown.problem}</p>\n        : shown.reply ? <Message align=\"start\"><MessageContent><Bubble variant=\"secondary\"><BubbleContent data-testid=\"agent-target-reply\" className=\"whitespace-pre-wrap\">{shown.reply}</BubbleContent></Bubble></MessageContent></Message>\n          : <p role=\"status\">{phase === 'starting' ? words.opening : phase === 'recording' ? words.listening(dictation.seconds) : phase === 'transcribing' ? words.transcribing : phase === 'settled' ? words.answered : words.waiting}</p>}\n    </CardContent>\n    <CardFooter className=\"flex gap-2\">\n      {shown.stage === 'dictating' && <Button data-testid=\"agent-target-stop\" className=\"min-h-11 min-w-11\" disabled={phase !== 'recording'} onClick={dictation.finish}>{words.stop}</Button>}\n      <Button variant=\"ghost\" data-testid=\"agent-target-close\" className=\"min-h-11 min-w-11\" onClick={cancel}>{shown.stage === 'settled' ? words.close : words.cancel}</Button>\n    </CardFooter>\n  </Card>, document.body);\n}\n",
       "type": "registry:component",
       "target": "components/agent-target/agent-target.tsx"
     },