@hachej/boring-ui-kit 0.4.5 → 0.4.7

package/README.md

@@ -12,6 +12,8 @@ Lost or malformed acknowledgements stay unknown. `actions.reconcile()` uses reta
 
 Historical scaffold tests install/typecheck packed headless UI and UI+files in clean consumers without Pi or an agent package. Candidate runtime installation qualification is recorded separately in the [implementation checkpoint](../../docs/implementation/PARTIAL.md). Import interfaces with `import type`.
 
+For read-only content without a resource client or controller, select the lightweight [`artifact-viewer`](#read-only-artifactviewer) entry. It needs only React and Marked, not files, Pi, Tiptap, canvas or pdfjs.
+
 See [scaffold guide](../../docs/contracts/SCAFFOLD.md) and [audit](../../docs/contracts/ABSTRACTION-REVIEW.md).
 
 ## Exact proposals and commands
@@ -210,6 +212,24 @@ Mounted `tools.propose` accepts the same complete edits as the headless command
 
 `test/compatibility/canvas-mounted-native.test.mjs` composes selection and proposals with real native ToolTasks. `npm run canvas:journey:commands` requires `CHROMIUM` and permitted loopback sockets; it checks real desktop/phone viewport geometry with fictional assets. Production fonts, licensing, egress and CSS isolation remain separate qualifications.
 
+## Read-only ArtifactViewer
+
+```tsx
+import { ArtifactViewer } from '@hachej/boring-ui-kit/artifact-viewer';
+
+<ArtifactViewer name="fictional-guide.md" mimeType="text/markdown" content="# Fictional guide" />;
+```
+
+`ArtifactViewerProps` accepts `name`, `mimeType`, optional `content: string | Uint8Array`, `url`, `className` and `renderPdf`. Install the existing optional React and Marked peers when selecting this entry. It has no ResourceClient, controller, editing, syntax highlighter or agent integration. The host supplies authorized content and owns URL access policy and layout; mounting grants no file or execution authority.
+
+Normalized MIME selects Markdown, HTML, images and PDF, with filename fallback. Other text/code is an escaped `<pre>` without highlighting. Byte text requires valid UTF-8 without NUL; leading U+FEFF is preserved. Binary audio/video does not become a text preview. Missing or unreadable content displays “Preview unavailable.” Replace byte arrays when changing content rather than mutating them in place.
+
+Markdown uses a private Marked parser, then the same passive HTML allowlist as `HtmlViewer`. Both HTML types render in an empty-sandbox, no-referrer iframe with the fixed restrictive CSP. Links become spans; scripts, attributes, styles, images and external resources are omitted, including Markdown images. The [HTML preview limits](#optional-html-source-and-preview) apply; Markdown input is also limited to 262,144 UTF-16 units before parsing. There is no raw HTML fallback. URL-only Markdown, HTML and text are unavailable: the entry never fetches or embeds them unsanitized.
+
+Images use `<img>` and PDFs use the browser's native sandboxed iframe. `content` takes precedence over `url`; content creates an owned Blob URL, revoked on replacement or unmount. Host URLs are borrowed and never revoked. Relative, HTTP(S), blob and matching image/PDF data URLs are supported; other URL schemes are refused. Supply `renderPdf: (props: ArtifactPdfProps) => ReactNode` to use a trusted host renderer instead, receiving the current `{ name, url }`. The entry does not load pdfjs. Browser-native PDF support and sandbox restrictions vary by browser; it provides no page controls or PDF text extraction.
+
+`test/packages/ui-artifact-viewer.test.mjs` renders fictional fixtures through the built public entry and checks its browser import graph. `npm run test:artifact-viewer-consumer` installs the kit tarball with only React/Marked and test tooling, checks strict declarations, repeats those DOM tests and bundles without files, controllers, Tiptap, canvas, pdfjs or agent code. DOM structure tests do not qualify browser CSP enforcement, parser inertness, egress or native PDF rendering.
+
 ## Optional HTML source and preview
 
 Both `MarkdownEditor` and `HtmlViewer` accept optional `components` bindings for host buttons, inputs, textareas and the selection bubble. Installed registry recipes supply the consumer's unchanged shadcn components. Bindings forward refs and native input events. Omitting them retains unstyled native HTML for direct package consumers; it is not installed-block design qualification. See the [registry theming contract](../../registry/README.md#styling).

package/dist/artifact-viewer.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface ArtifactPdfProps {
+    readonly name: string;
+    readonly url: string;
+}
+export interface ArtifactViewerProps {
+    readonly name: string;
+    readonly mimeType: string;
+    /** Content takes precedence over a URL. Byte content must be replaced, not mutated in place. */
+    readonly content?: string | Uint8Array;
+    /** Borrowed host URL; used only for images and PDF, never fetched for text previews. */
+    readonly url?: string;
+    readonly className?: string;
+    /** Trusted host presentation, for example a separately installed pdfjs renderer. */
+    readonly renderPdf?: (props: ArtifactPdfProps) => ReactNode;
+}
+export declare function ArtifactViewer(props: ArtifactViewerProps): import("react").JSX.Element;
+//# sourceMappingURL=artifact-viewer.d.ts.map

package/dist/artifact-viewer.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Marked } from 'marked';
+import { passiveHtml } from './passive-html.js';
+const markdown = new Marked();
+const imageTypes = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp', svg: 'image/svg+xml', bmp: 'image/bmp', avif: 'image/avif' };
+function artifactType(name, mimeType) {
+    const mime = mimeType.split(';')[0].trim().toLowerCase();
+    if (mime === 'text/markdown' || mime === 'text/x-markdown')
+        return { kind: 'markdown', mimeType: mime };
+    if (mime === 'text/html')
+        return { kind: 'html', mimeType: mime };
+    if (mime === 'application/pdf')
+        return { kind: 'pdf', mimeType: mime };
+    if (mime.startsWith('image/'))
+        return { kind: 'image', mimeType: mime };
+    if (/^(?:audio|video)\//.test(mime))
+        return undefined;
+    const basename = name.slice(name.lastIndexOf('/') + 1), dot = basename.lastIndexOf('.');
+    const extension = dot === -1 ? '' : basename.slice(dot + 1).toLowerCase();
+    if (extension === 'md' || extension === 'markdown')
+        return { kind: 'markdown', mimeType: 'text/markdown' };
+    if (extension === 'html' || extension === 'htm')
+        return { kind: 'html', mimeType: 'text/html' };
+    if (extension === 'pdf')
+        return { kind: 'pdf', mimeType: 'application/pdf' };
+    const imageType = Object.hasOwn(imageTypes, extension) ? imageTypes[extension] : undefined;
+    if (imageType)
+        return { kind: 'image', mimeType: imageType };
+    if (/^(?:mp4|webm|mov|m4v|ogg|ogv|mp3|wav)$/.test(extension))
+        return undefined;
+    return { kind: 'text', mimeType: mime };
+}
+function decodeText(content) {
+    if (content === undefined)
+        return undefined;
+    if (typeof content === 'string')
+        return content.includes('\0') ? undefined : content;
+    if (content.includes(0))
+        return undefined;
+    try {
+        return new TextDecoder('utf-8', { fatal: true, ignoreBOM: true }).decode(content);
+    }
+    catch {
+        return undefined;
+    }
+}
+function Unavailable() {
+    return _jsx("p", { role: "status", children: "Preview unavailable." });
+}
+function PassiveArtifact({ name, text, kind }) {
+    const container = useRef(null);
+    const [ready, setReady] = useState(false);
+    useLayoutEffect(() => {
+        const host = container.current;
+        if (!host)
+            return;
+        host.replaceChildren();
+        try {
+            if (text.length > 262_144)
+                throw new RangeError('Artifact preview source exceeds its limit');
+            const source = passiveHtml(kind === 'markdown' ? markdown.parse(text, { async: false }) : text, host.ownerDocument);
+            const frame = host.ownerDocument.createElement('iframe');
+            frame.setAttribute('sandbox', '');
+            frame.referrerPolicy = 'no-referrer';
+            frame.title = name;
+            frame.srcdoc = source;
+            host.replaceChildren(frame);
+            setReady(true);
+        }
+        catch {
+            host.replaceChildren();
+            setReady(false);
+        }
+        return () => { host.replaceChildren(); };
+    }, [name, text, kind]);
+    return _jsxs(_Fragment, { children: [!ready && _jsx(Unavailable, {}), _jsx("div", { ref: container })] });
+}
+function mediaUrl(url, kind) {
+    if (!url)
+        return undefined;
+    try {
+        const protocol = new URL(url, 'https://artifact.invalid/').protocol;
+        if (['https:', 'http:', 'blob:'].includes(protocol))
+            return url;
+        if (protocol === 'data:' && (kind === 'image' ? /^data:image\//i : /^data:application\/pdf(?:;|,)/i).test(url))
+            return url;
+    }
+    catch { /* A malformed host URL has no preview. */ }
+    return undefined;
+}
+function MediaArtifact({ name, kind, mimeType, content, url, renderPdf }) {
+    const [made, setMade] = useState();
+    useLayoutEffect(() => {
+        if (content === undefined) {
+            setMade(undefined);
+            return;
+        }
+        try {
+            const blob = new Blob([typeof content === 'string' ? content : new Uint8Array(content)], { type: mimeType });
+            const objectUrl = URL.createObjectURL(blob);
+            setMade({ content, mimeType, url: objectUrl });
+            return () => { URL.revokeObjectURL(objectUrl); };
+        }
+        catch {
+            setMade(undefined);
+        }
+    }, [content, mimeType]);
+    const selectedUrl = content === undefined ? mediaUrl(url, kind) : made?.content === content && made.mimeType === mimeType ? made.url : undefined;
+    if (!selectedUrl)
+        return _jsx(Unavailable, {});
+    if (kind === 'image')
+        return _jsx("img", { src: selectedUrl, alt: name, referrerPolicy: "no-referrer" });
+    return renderPdf ? renderPdf({ name, url: selectedUrl }) : _jsx("iframe", { src: selectedUrl, title: name, sandbox: "", referrerPolicy: "no-referrer" });
+}
+export function ArtifactViewer(props) {
+    const type = artifactType(props.name, props.mimeType);
+    const text = type && type.kind !== 'image' && type.kind !== 'pdf' ? decodeText(props.content) : undefined;
+    return _jsx("section", { "data-boring": "artifact-viewer", className: props.className, "aria-label": props.name, children: !type ? _jsx(Unavailable, {}) : type.kind === 'image' || type.kind === 'pdf'
+            ? _jsx(MediaArtifact, { ...props, kind: type.kind, mimeType: type.mimeType })
+            : text === undefined ? _jsx(Unavailable, {}) : type.kind === 'text'
+                ? _jsx("pre", { children: text })
+                : _jsx(PassiveArtifact, { name: props.name, text: text, kind: type.kind }) });
+}

package/dist/html-preview.d.ts

@@ -1,2 +1,2 @@
-export declare function passiveHtml(source: string, document: Document): string;
+export { passiveHtml } from './passive-html.js';
 //# sourceMappingURL=html-preview.d.ts.map

package/dist/html-preview.js

@@ -1,47 +1 @@
-const formatting = new Set(['p', 'div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code', 'strong', 'em', 'b', 'i', 'u', 's', 'small', 'sub', 'sup', 'kbd', 'samp', 'var', 'mark', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'table', 'caption', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'section', 'article', 'header', 'footer', 'main', 'aside', 'figure', 'figcaption', 'br', 'hr']);
-const htmlNamespace = 'http://www.w3.org/1999/xhtml';
-const prefix = '<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src \'none\'; base-uri \'none\'; form-action \'none\'"><meta charset="utf-8"><meta name="referrer" content="no-referrer"><meta name="format-detection" content="telephone=no,email=no,address=no"><title>HTML preview</title></head><body>';
-export function passiveHtml(source, document) {
-    if (source.length > 262_144)
-        throw new RangeError('HTML preview source exceeds its limit');
-    const template = document.createElement('template');
-    template.innerHTML = source;
-    let nodes = 0, length = prefix.length;
-    const output = [prefix];
-    function emit(text) {
-        length += text.length;
-        if (length > 1_048_576)
-            throw new RangeError('HTML preview output exceeds its limit');
-        output.push(text);
-    }
-    function visit(node, depth) {
-        if (++nodes > 20_000 || depth > 128)
-            throw new RangeError('HTML preview structure exceeds its limit');
-        if (node.nodeType === 3) {
-            emit((node.textContent ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;'));
-            return;
-        }
-        if (node.nodeType !== 1 || !('namespaceURI' in node) || node.namespaceURI !== htmlNamespace || !('localName' in node) || typeof node.localName !== 'string')
-            return;
-        if (node.localName === 'html' || node.localName === 'head' || node.localName === 'body') {
-            for (let child = node.firstChild; child; child = child.nextSibling)
-                visit(child, depth + 1);
-            return;
-        }
-        const tag = node.localName === 'a' ? 'span' : node.localName;
-        if (!formatting.has(tag))
-            return;
-        emit('<' + tag + '>');
-        if (tag === 'br' || tag === 'hr')
-            return;
-        if (tag === 'pre')
-            emit('\n');
-        for (let child = node.firstChild; child; child = child.nextSibling)
-            visit(child, depth + 1);
-        emit('</' + tag + '>');
-    }
-    for (let child = template.content.firstChild; child; child = child.nextSibling)
-        visit(child, 0);
-    emit('</body></html>');
-    return output.join('');
-}
+export { passiveHtml } from './passive-html.js';

package/dist/passive-html.d.ts

@@ -0,0 +1,2 @@
+export declare function passiveHtml(source: string, document: Document): string;
+//# sourceMappingURL=passive-html.d.ts.map

package/dist/passive-html.js

@@ -0,0 +1,47 @@
+const formatting = new Set(['p', 'div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code', 'strong', 'em', 'b', 'i', 'u', 's', 'small', 'sub', 'sup', 'kbd', 'samp', 'var', 'mark', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'table', 'caption', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'section', 'article', 'header', 'footer', 'main', 'aside', 'figure', 'figcaption', 'br', 'hr']);
+const htmlNamespace = 'http://www.w3.org/1999/xhtml';
+const prefix = '<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src \'none\'; base-uri \'none\'; form-action \'none\'"><meta charset="utf-8"><meta name="referrer" content="no-referrer"><meta name="format-detection" content="telephone=no,email=no,address=no"><title>HTML preview</title></head><body>';
+export function passiveHtml(source, document) {
+    if (source.length > 262_144)
+        throw new RangeError('HTML preview source exceeds its limit');
+    const template = document.createElement('template');
+    template.innerHTML = source;
+    let nodes = 0, length = prefix.length;
+    const output = [prefix];
+    function emit(text) {
+        length += text.length;
+        if (length > 1_048_576)
+            throw new RangeError('HTML preview output exceeds its limit');
+        output.push(text);
+    }
+    function visit(node, depth) {
+        if (++nodes > 20_000 || depth > 128)
+            throw new RangeError('HTML preview structure exceeds its limit');
+        if (node.nodeType === 3) {
+            emit((node.textContent ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;'));
+            return;
+        }
+        if (node.nodeType !== 1 || !('namespaceURI' in node) || node.namespaceURI !== htmlNamespace || !('localName' in node) || typeof node.localName !== 'string')
+            return;
+        if (node.localName === 'html' || node.localName === 'head' || node.localName === 'body') {
+            for (let child = node.firstChild; child; child = child.nextSibling)
+                visit(child, depth + 1);
+            return;
+        }
+        const tag = node.localName === 'a' ? 'span' : node.localName;
+        if (!formatting.has(tag))
+            return;
+        emit('<' + tag + '>');
+        if (tag === 'br' || tag === 'hr')
+            return;
+        if (tag === 'pre')
+            emit('\n');
+        for (let child = node.firstChild; child; child = child.nextSibling)
+            visit(child, depth + 1);
+        emit('</' + tag + '>');
+    }
+    for (let child = template.content.firstChild; child; child = child.nextSibling)
+        visit(child, 0);
+    emit('</body></html>');
+    return output.join('');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -83,6 +83,10 @@
       "types": "./dist/html-viewer.d.ts",
       "import": "./dist/html-viewer.js"
     },
+    "./artifact-viewer": {
+      "types": "./dist/artifact-viewer.d.ts",
+      "import": "./dist/artifact-viewer.js"
+    },
     "./experience": {
       "types": "./dist/experience.d.ts",
       "import": "./dist/experience.js"
@@ -130,7 +134,7 @@
     }
   },
   "peerDependencies": {
-    "@hachej/boring-files": "^0.4.5",
+    "@hachej/boring-files": "^0.4.7",
     "@earendil-works/pi-durable": "~1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/r/agent-target.json

@@ -4,15 +4,15 @@
   "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.5",
-    "@hachej/boring-feedback@^0.4.5",
+    "@hachej/boring-ui-kit@^0.4.7",
+    "@hachej/boring-feedback@^0.4.7",
     "@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.5/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.7/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.7/r/pi-chat.json",
     "button",
     "card",
     "message",

package/r/app-shell.json

@@ -4,19 +4,19 @@
   "title": "App shell: layouts, list/detail and agent layer",
   "description": "AppShell with three layouts. B \"workspace\" puts a ListDetail on a screen (phone: the list, then the detail as a stack step with Back; wide: a 20rem list and the detail side by side, sidebar as an icon rail). C \"chat\" wraps the app's own AgentWorkspace (untouched, passed as the nav item's render; install the pi-app item yourself) in the same sidebar, account menu and header; it takes no shell agent. A \"screen\": one screen at a time, every screen kept mounted. On a phone bottom tabs (at most four; more give three plus a « Plus » sheet) and an avatar button that opens the account sheet; on a wide screen the shadcn sidebar (icon rail, NavUser). One header per screen through useScreenHeader (title, subtitle, back, up to two actions, the rest behind « … »). The account menu holds « Améliorer l'app » (the improve agent), the app's own entries and sign out. AppSheet is the one bottom sheet (one open at a time, Back closes it). It mounts the AgentLayer: one agent's PiChat above the app (phone: a drawer with peek, half and full snap points; wide: a right panel), the improve agent in the same layer, optional push-to-talk and point mode. Also useAgentContext and readAgentContext (the screen on show travels as `context` with each submit) and useBackLayer, the one Back manager. Built on explicitly pinned Base UI drawer and dropdown-menu recipes, plus the sidebar and avatar of the host's own shadcn style.",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.5",
-    "@hachej/boring-ui-kit@^0.4.5",
+    "@hachej/boring-feedback@^0.4.7",
+    "@hachej/boring-ui-kit@^0.4.7",
     "@base-ui/react@^1.9.0",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/dock.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/feedback.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.5/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.7/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.7/r/dock.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.7/r/feedback.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.7/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.7/r/button.json",
     "drawer",
     "sidebar",
     "avatar",
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/app-shell/agent-layer.tsx",
-      "content": "'use client';\n\n// The AgentLayer: ONE agent's PiChat above the app. Compact (below 768px): a bottom drawer with three fixed snap points, peek, half and\n// full (shadcn `drawer`, Base UI variant). Expanded: a `Dock` (the `dock` item) beside the app, docked on the left or the right (default right)\n// or floating over it; the person chooses and the choice is remembered. The same layer shows\n// the product manager (« Améliorer l’app ») when the account menu asks for it. Push-to-talk is an option of the agent.\n// Host concern: Pi has no layout. The chat is the borrowed NativeChatController rendered by PiChat; the screen context travels as the\n// submit's `context` (agent-context.ts). Nothing here is configurable beyond AgentSpec.\nimport { createPortal } from 'react-dom';\nimport { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentType, CSSProperties, HTMLAttributes, PointerEvent as ReactPointerEvent, ReactElement, ReactNode, Ref, RefObject } from 'react';\nimport { ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon, Loader2Icon, MicIcon, PanelLeftIcon, PanelRightIcon, PictureInPicture2Icon, SparklesIcon, XIcon } from 'lucide-react';\n// Behaviour only: Base UI's keyboard-inset provider for the host drawer's content. It renders nothing visible.\nimport * as BaseDrawerParts from '@base-ui/react/drawer';\nimport { Button } from '@/components/ui/button';\nimport { Card } from '@/components/ui/card';\nimport { Separator } from '@/components/ui/separator';\nimport type { FeedbackSession } from '@hachej/boring-feedback/ui';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { Drawer, DrawerContent } from '@/components/ui/drawer';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { Dock, DockLayout, DockMain } from '../dock/dock';\nimport { useDraggable } from '../utils/use-draggable';\nimport type { DockApi } from '../dock/dock';\nimport { PiChat } from '../pi-chat/pi-chat';\nimport type { PiChatProps } from '../pi-chat/pi-chat';\nimport type { VoiceMessageConfig } from '../pi-chat/config';\nimport { useHoldToRecord, useRecordingCancellation } from '../pi-chat/use-hold-to-record';\nimport { useVoiceMessage } from '../pi-chat/use-voice-message';\nimport type { PendingVoice } from '../pi-chat/use-voice-message';\nimport { voiceClock } from '../pi-chat/voice-message';\nimport { chatTextFor } from '../pi-chat/locale';\nimport { NoteBubble, useComposerFeedback } from '../feedback/feedback-session';\nimport { feedbackLabelsFr } from '../feedback/feedback-labels';\nimport { PointBar, usePointing } from '../feedback/point-mode';\nimport { cn } from '../utils/utils';\nimport { useBackLayer } from './back';\nimport { parseAgentLink } from './agent-link';\nimport { closeShellLayer, registerAgentLayerCloser } from './shell-layer';\nimport { appShellText } from './text';\nimport type { AppShellLocale, AppShellText } from './text';\nimport { useVisualViewport } from './use-visual-viewport';\nimport { AgentContextProvider } from './agent-context';\nimport { HeaderActions } from './header-actions';\nimport type { ScreenHeaderAction } from './header-actions';\nimport { useDictation } from './use-dictation';\nimport type { Dictation } from './use-dictation';\n\nexport interface AgentSpec {\n  readonly controller: NativeChatController;\n  /** The agent's name in the expanded sidebar (default: the chat's title, then « Assistant »). */\n  readonly label?: string;\n  /** The agent's icon in the sidebar (default: the sparkles of the header trigger). */\n  readonly icon?: ComponentType<{ className?: string }>;\n  readonly chatProps?: Omit<PiChatProps, 'controller'>;\n  /** Push-to-talk. `message` retains audio plus transcript; `auto` sends text only; `draft` (default) fills the composer. */\n  readonly voice?: VoiceMessageConfig & { readonly send?: 'auto' | 'draft' | 'message' };\n  /** Point mode (the product manager, in practice). */\n  readonly feedback?: FeedbackSession;\n  /** Host actions in the layer's title row (before the dock controls, or the snap and close controls when compact), as the screen header's. Two shown, the rest in « … ». Not at peek. */\n  readonly headerActions?: readonly ScreenHeaderAction[];\n}\n\n/** Compact: closed, peek, half or full. Expanded: closed or open. */\nexport type AgentLayerState = 'closed' | 'peek' | 'half' | 'full' | 'open';\ntype Which = 'agent' | 'improve';\ntype Snap = 'closed' | 'peek' | 'half' | 'full';\n\nexport interface AgentLayerApi {\n  readonly agent: NativeChatController | undefined;\n  readonly state: AgentLayerState;\n  readonly showing: Which | null;\n  open(which?: Which, at?: 'half' | 'full'): void;\n  close(): void;\n  readonly expanded: boolean;\n}\n\n// The three fixed snap points: a peek (one composer row and a line of the last reply, `PEEK_REM` above the tab bar), 55% and the full height.\nconst PEEK_REM = 6;\n/** The shell's z-scale (tabs 20, peek 30, drawer and panel 40, other sheets 50, point bar 60). */\nconst Z = { tabs: 20, peek: 30, layer: 40, sheet: 50, point: 60 } as const;\nconst HALF = 0.55;\nconst FULL = 1;\n/** Hold the trigger this long before it records; shorter is a tap. */\nconst HOLD_MS = 350;\n\n/**\n * What a close request from the drawer becomes. A swipe, an outside press, a lost focus and Escape never close the layer: they step down\n * to peek (half without an `agent`), so the modal state goes and the coach stays reachable. Only the Close control closes it. `reason` is\n * Base UI's `details.reason` (`'swipe'`, `'outside-press'`, `'focus-out'`, `'escape-key'`, `'close-watcher'`, `'close-press'`, `'trigger-press'`,\n * `'imperative-action'`, `'none'`).\n */\nexport function nextSnapOnClose(reason: string, hasPeek: boolean): 'peek' | 'half' | 'close' {\n  return reason === 'swipe' || reason === 'outside-press' || reason === 'focus-out' || reason === 'escape-key' ? (hasPeek ? 'peek' : 'half') : 'close';\n}\n\ninterface Voice extends Dictation {\n  readonly pending?: readonly PendingVoice[] | undefined;\n  readonly captureSequence?: number;\n  readonly canStart?: boolean;\n}\n\n/**\n * Whether a close request comes from something the layer does not own: a full-screen overlay portalled above it (`[data-boring-overlay]`,\n * for example the composer's camera). Its taps count as outside presses and its focus as a focus-out of the drawer, but they must change\n * nothing: the caller cancels the request and leaves the snap alone. Only those three reasons are looked at, and the event target, the\n * related target (focus-out) or the focused element may be the overlay.\n */\nexport function isOverlayEvent(details: { readonly reason: string; readonly event?: Event | undefined }): boolean {\n  if (details.reason !== 'outside-press' && details.reason !== 'focus-out' && details.reason !== 'escape-key') return false;\n  const inside = (node: unknown) => node instanceof Element && node.closest('[data-boring-overlay]') !== null;\n  const event = details.event as (Event & { relatedTarget?: EventTarget | null }) | undefined;\n  return inside(event?.target) || inside(event?.relatedTarget) || inside(globalThis.document?.activeElement);\n}\n\ninterface Internal extends Omit<AgentLayerApi, 'agent'> {\n  readonly agent: AgentSpec | undefined;\n  readonly improve: AgentSpec | undefined;\n  readonly snap: Snap;\n  readonly setSnap: (snap: Snap) => void;\n  /** Whether the wide layout's dock is floating over the app (reported by the panel); with `expanded` it gives the chats' placement. */\n  readonly dockFloating: boolean;\n  readonly setDockFloating: (floating: boolean) => void;\n  readonly showAgent: () => void;\n  /** Until this time (ms) an outside press is the AgentTrigger's own click. */\n  readonly triggerUntil: { current: number };\n  readonly voice: Voice;\n  /** The peek height in px: `PEEK_REM` plus the tab bar the peek sits above. */\n  readonly peekPoint: string;\n  /** The measured tab bar height in px, given explicitly to the parts portalled to the body (they cannot inherit the shell's variables). */\n  readonly tabbar: number;\n  /** The persistent element holding both chats: it moves between the drawer and the panel, so closing never unmounts a chat. */\n  readonly host: HTMLElement | null;\n  /** The shell's `locale`: the layer's own words when the agent spec sets none (`agent.chatProps.locale` first). */\n  readonly locale: AppShellLocale | undefined;\n  /** Expanded only: the side the dock sits on while docked (the viewer's choice, remembered). */\n  readonly side: DockSide;\n  readonly setSide: (side: DockSide) => void;\n  /** Set by a dock control: the next placement or side change puts focus back on the panel's first dock control. */\n  readonly restoreFocus: { current: boolean };\n}\n\ntype DockSide = 'left' | 'right';\n/** The dock's remembered state lives under this prefix (DockLayout's storageKey): `<key>.agent.floating`, `.width`, and the side. */\nconst DOCK_KEY = 'boring.app-shell';\nconst SIDE_KEY = `${DOCK_KEY}.agent.side`;\n\nconst LayerContext = createContext<Internal | null>(null);\n\nfunction useInternal(): Internal {\n  const layer = useContext(LayerContext);\n  if (!layer) throw new Error('useAgentLayer needs an AgentLayerProvider');\n  return layer;\n}\n\n/** The layer's state and controls. */\nexport function useAgentLayer(): AgentLayerApi {\n  const { state, showing, open, close, expanded, agent: spec } = useInternal();\n  const agent = spec?.controller;\n  return useMemo(() => ({ state, showing, open, close, expanded, agent }), [state, showing, open, close, expanded, agent]);\n}\n\n/** Push-to-talk uses the same dictation lifecycle as page targeting, over the existing composer/controller. */\nfunction useVoice(agent: AgentSpec | undefined, locale: AppShellLocale | undefined, done: (outcome: 'sent' | 'drafted') => void): Voice {\n  const message = useVoiceMessage({ controller: agent?.controller, config: agent?.voice?.send === 'message' ? agent.voice : undefined, attachments: agent?.chatProps?.attachments, labels: chatTextFor(agent?.chatProps?.locale ?? locale).labels, admitted: () => done('sent') });\n  const voice = useDictation({\n    transcribe: agent?.voice?.send === 'message' ? undefined : agent?.voice?.transcribe,\n    locale: agent?.chatProps?.locale ?? locale,\n    onText: async (spoken, signal) => {\n      if (!agent || signal.aborted) return;\n      const fill = () => {\n        if (signal.aborted) return;\n        const draft = agent.controller.getSnapshot().draft.text;\n        agent.controller.setText(`${draft}${draft === '' || /\\s$/.test(draft) ? '' : ' '}${spoken}`);\n        done('drafted');\n      };\n      if (agent.voice?.send !== 'auto') { fill(); return; }\n      try {\n        const sent = await agent.controller.send(undefined, { text: spoken });\n        if (!signal.aborted) done(sent ? 'sent' : 'drafted');\n      } catch { fill(); }\n    },\n  });\n  const { cancel } = voice;\n  useEffect(() => () => cancel(), [agent?.controller, agent?.voice?.send, Boolean(agent?.voice), cancel]);\n  const phase: Dictation['phase'] = message.phase === 'starting' || message.phase === 'recording' ? message.phase : message.phase === 'processing' || message.phase === 'sending' ? 'transcribing' : 'idle';\n  return agent?.voice?.send === 'message' ? { ...message, phase } : voice;\n}\n\n/** The height in px of the tab bar the peek sits above (`--app-shell-tabbar` on the shell root), and one rem. */\nfunction useMeasuredPeek(probe: RefObject<HTMLDivElement | null>): { readonly peekPoint: string; readonly tabbar: number } {\n  const [px, setPx] = useState(PEEK_REM * 16);\n  const [tabbar, setTabbar] = useState(0);\n  useLayoutEffect(() => {\n    const measure = () => {\n      const tab = probe.current?.offsetHeight ?? 0;\n      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      setPx(Math.round(PEEK_REM * rem + tab));\n      setTabbar(tab);\n    };\n    measure();\n    window.addEventListener('resize', measure);\n    const observer = typeof ResizeObserver === 'undefined' || !probe.current ? undefined : new ResizeObserver(measure);\n    if (observer && probe.current) observer.observe(probe.current);\n    return () => { window.removeEventListener('resize', measure); observer?.disconnect(); };\n  }, [probe]);\n  return { peekPoint: `${px}px`, tabbar };\n}\n\n/** Places the layer in the app. `agent` is the one assistant; `improve` is the product manager. Either may be absent. */\nexport function AgentLayerProvider({ agent, improve, locale, agentLink, children }: { readonly agent?: AgentSpec | undefined; readonly improve?: AgentSpec | undefined; readonly locale?: AppShellLocale | undefined; readonly agentLink?: false | undefined; readonly children: ReactNode }): ReactElement {\n  const compact = useIsMobile();\n  const expanded = !compact;\n  const [snap, setSnapState] = useState<Snap>('closed');\n  const [dockFloating, setDockFloating] = useState(false);\n  const [shown, setShown] = useState<Which>(agent ? 'agent' : 'improve');\n  const probe = useRef<HTMLDivElement>(null);\n  const { peekPoint, tabbar } = useMeasuredPeek(probe);\n  const triggerUntil = useRef(0);\n  const restoreFocus = useRef(false);\n  const [side, setSideState] = useState<DockSide>('right');\n  // The side is the viewer's, remembered beside the Dock's own placement; read after mount so server and client markup agree.\n  useLayoutEffect(() => { try { const saved = globalThis.localStorage?.getItem(SIDE_KEY); if (saved === 'left' || saved === 'right') setSideState(saved); } catch { /* a convenience */ } }, []);\n  const setSide = useCallback((next: DockSide) => { setSideState(next); try { globalThis.localStorage?.setItem(SIDE_KEY, next); } catch { /* a convenience */ } }, []);\n  const specs = useRef({ agent, improve, snap, shown });\n  specs.current = { agent, improve, snap, shown };\n\n  const setSnap = useCallback((next: Snap) => setSnapState(next), []);\n  const close = useCallback(() => setSnapState('closed'), []);\n  // One full-screen layer at a time: opening the agent or product manager closes a view of the app (`useShellLayer`), and a view closes these.\n  useEffect(() => registerAgentLayerCloser(close), [close]);\n  const open = useCallback((which?: Which, at: 'half' | 'full' = 'half') => {\n    const { agent: a, improve: i } = specs.current;\n    const target = which ?? (a ? 'agent' : 'improve');\n    if (target === 'agent' ? !a : !i) return;\n    closeShellLayer();\n    setShown(target);\n    setSnapState(at);\n  }, []);\n  const showAgent = useCallback(() => { if (specs.current.agent) setShown('agent'); }, []);\n\n  // A spec that goes away takes the layer with it.\n  const shownSpec = shown === 'agent' ? agent : improve;\n  useEffect(() => { if (!shownSpec) { setSnapState('closed'); if (shown === 'improve' && agent) setShown('agent'); else if (shown === 'agent' && improve) setShown('improve'); } }, [shownSpec, shown, agent, improve]);\n\n  // The chats live in one element that is moved into the open drawer or panel; React keeps them mounted (and so their presentation state\n  // and uploads) while the layer is closed, on a phone and on a wide screen. Nothing is mounted before the layer is first opened.\n  const [host] = useState(() => typeof document === 'undefined' ? null : Object.assign(document.createElement('div'), { className: 'flex min-h-0 flex-1 flex-col [&_[data-boring=pi-chat]>header]:hidden' }));\n  const opened = useRef(false);\n  if (snap !== 'closed') opened.current = true;\n\n  // Consume the launch URL before an open layer pushes its Back entry. Keep the parsed request through StrictMode's effect replay.\n  const launch = useRef<ReturnType<typeof parseAgentLink> | undefined>(undefined);\n  useEffect(() => {\n    if (launch.current === undefined) {\n      launch.current = agentLink === false ? null : parseAgentLink(window.location.search);\n      if (agentLink !== false) {\n        const url = new URL(window.location.href);\n        if (['agent', 'open', 'input'].some(key => url.searchParams.has(key))) {\n          for (const key of ['agent', 'open', 'input']) url.searchParams.delete(key);\n          history.replaceState(history.state, '', `${url.pathname}${url.search}${url.hash}`);\n        }\n      }\n    }\n    const link = launch.current;\n    if (!link) return;\n    const which = link.agent === 'improve' ? 'improve' : 'agent';\n    open(which, link.open);\n    const spec = specs.current[which];\n    if (link.input !== 'text' || !spec) return;\n    // The drawer's slide and initial focus finish first. Voice deliberately leaves focus off the composer and never calls start().\n    const timer = setTimeout(() => {\n      const current = specs.current;\n      if (current.snap !== 'closed' && current.shown === which && current[which]?.controller === spec.controller) {\n        host?.querySelector<HTMLElement>(`[data-spec=${which}] [data-testid=composer-input]`)?.focus({ preventScroll: true });\n      }\n    }, 520);\n    return () => clearTimeout(timer);\n  }, [host, open]);\n\n  const voice = useVoice(agent, locale, outcome => {\n    if (outcome === 'drafted') { setShown('agent'); setSnapState('half'); }\n  });\n  const revealedFailures = useRef(new Set<number>());\n  useEffect(() => {\n    const failure = voice.pending?.findLast(item => item.phase === 'transcribe-failed' || item.phase === 'upload-failed' || item.phase === 'blocked' || item.phase === 'unconfirmed');\n    const captureProblem = agent?.voice?.send === 'message' && voice.problem;\n    const failureId = captureProblem ? voice.captureSequence : failure?.id;\n    if (failureId === undefined) { revealedFailures.current.clear(); return; }\n    if (revealedFailures.current.has(failureId)) return;\n    revealedFailures.current.add(failureId);\n    if (!expanded && shown === 'agent' && snap === 'peek') setSnapState('half');\n  }, [expanded, shown, snap, agent?.voice?.send, voice.captureSequence, voice.problem, voice.pending?.map(item => `${item.id}:${item.phase}`).join(',')]);\n\n  const state: AgentLayerState = snap === 'closed' ? 'closed' : expanded ? 'open' : snap;\n  const value = useMemo<Internal>(() => ({\n    state, showing: snap === 'closed' ? null : shown, open, close, expanded, agent, improve, snap, setSnap, dockFloating, setDockFloating, showAgent, triggerUntil, voice, peekPoint, tabbar, host, locale, side, setSide, restoreFocus,\n  }), [state, snap, shown, open, close, expanded, agent, improve, setSnap, dockFloating, showAgent, triggerUntil, voice, peekPoint, tabbar, host, locale, side, setSide]);\n\n  // The shell's z-scale (tabs 20, peek 30, drawer and panel 40, other sheets 50, point bar 60) as custom properties; `display: contents` keeps the box tree unchanged.\n  const scale = { '--app-shell-z-tabs': Z.tabs, '--app-shell-z-peek': Z.peek, '--app-shell-z-layer': Z.layer, '--app-shell-z-sheet': Z.sheet, '--app-shell-z-point': Z.point } as CSSProperties;\n  return <AgentContextProvider>\n    <LayerContext.Provider value={value}>\n      <div data-app-shell=\"\" className=\"contents\" style={scale}>\n        <div ref={probe} aria-hidden=\"true\" className=\"pointer-events-none invisible fixed top-0 left-0 w-0\" style={{ height: 'var(--app-shell-tabbar, 0px)' }} />\n        {children}\n        {host && opened.current && createPortal(<Chats showing={shown} />, host)}\n      </div>\n    </LayerContext.Provider>\n  </AgentContextProvider>;\n}\n\n/** The header button that opens the layer: a tap opens half; with `agent.voice`, press and hold records and a slide off cancels. Absent without `agent`. */\nexport function AgentTrigger({ className, children }: { readonly className?: string; readonly children?: ReactNode }) {\n  const layer = useInternal();\n  const { agent, voice } = layer;\n  const text = appShellText(agent?.chatProps?.locale ?? layer.locale);\n  const hold = useRef<{ timer: ReturnType<typeof setTimeout> | undefined; held: boolean; id: number } | null>(null);\n  const cancelHold = () => {\n    const current = hold.current;\n    hold.current = null;\n    if (!current) return;\n    clearTimeout(current.timer);\n    if (current.held) voice.cancel();\n  };\n  useRecordingCancellation(cancelHold);\n  useEffect(() => () => cancelHold(), [agent?.controller]);\n  if (!agent) return null;\n\n  const toggle = () => {\n    layer.triggerUntil.current = Date.now() + 500;\n    if (layer.state !== 'closed' && layer.showing === 'agent' && layer.expanded) layer.close();\n    else layer.open('agent', 'half');\n  };\n  const release = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    const current = hold.current;\n    hold.current = null;\n    if (!current) return;\n    clearTimeout(current.timer);\n    if (event.currentTarget.hasPointerCapture?.(current.id)) event.currentTarget.releasePointerCapture(current.id);\n    if (current.held) { if (event.type === 'pointerup') voice.finish(); else voice.cancel(); }\n    else if (event.type === 'pointerup') toggle();\n  };\n  const down = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    if (event.button !== 0) return;\n    const target = event.currentTarget;\n    target.setPointerCapture?.(event.pointerId);\n    const state = { timer: undefined as ReturnType<typeof setTimeout> | undefined, held: false, id: event.pointerId };\n    hold.current = state;\n    if (agent.voice) {\n      state.timer = setTimeout(() => {\n        state.held = true;\n        if (layer.snap === 'closed') layer.setSnap('peek');\n        layer.showAgent();\n        voice.start();\n      }, HOLD_MS);\n    }\n  };\n  const move = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    const current = hold.current;\n    if (!current?.held) return;\n    const box = event.currentTarget.getBoundingClientRect();\n    const slack = 24;\n    if (event.clientX < box.left - slack || event.clientX > box.right + slack || event.clientY < box.top - slack || event.clientY > box.bottom + slack) {\n      hold.current = null;\n      voice.cancel();\n    }\n  };\n  return <Button variant=\"ghost\" size=\"icon\" data-agent-trigger=\"\" data-testid=\"agent-trigger\" aria-label={text.open} title={text.open} aria-expanded={layer.state !== 'closed'}\n    onPointerDown={down} onPointerUp={release} onPointerCancel={release} onPointerMove={move} onContextMenu={event => event.preventDefault()}\n    onClick={event => { if (event.detail === 0) toggle(); }}\n    className={cn('touch-none', className)}>\n    {children ?? <SparklesIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}\n  </Button>;\n}\n\n/**\n * Push-to-talk in the composer row (PiChat's `tools` slot): press and hold, release to send or fill; a slide off cancels. Pressing never moves\n * focus (no keyboard opens or closes under the finger), and a browser `pointercancel` once recording keeps the audio like a release: only the slide off cancels.\n */\nfunction TalkButton({ text }: { readonly text: AppShellText }) {\n  const { voice } = useInternal();\n  const busy = voice.phase === 'transcribing';\n  const disabled = busy || (voice.phase === 'idle' && voice.canStart === false);\n  const hold = useHoldToRecord(voice, disabled);\n  return <Button {...hold} variant=\"ghost\" size=\"icon\" data-testid=\"agent-talk\" data-state={voice.phase} disabled={disabled} aria-label={text.holdToTalk} title={text.holdToTalk}\n    className=\"touch-none\">\n    {busy ? <Loader2Icon data-icon=\"inline-start\" className=\"animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" /> : <MicIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}\n  </Button>;\n}\n\n/** What went wrong with the microphone, in the flow under the title row (never over the messages). */\nfunction VoiceProblem() {\n  const { voice } = useInternal();\n  return voice.problem ? <p role=\"alert\" data-testid=\"agent-voice-problem\" className=\"m-0 shrink-0 px-3 pb-1 text-xs leading-4 text-destructive\">{voice.problem}</p> : null;\n}\n\n/** One agent's PiChat. It stays mounted while hidden, so its scroll, focus and drafts survive a swap with the other spec. */\nfunction SpecChat({ spec, visible, role }: { readonly spec: AgentSpec; readonly visible: boolean; readonly role: Which }) {\n  const layer = useInternal();\n  const locale = spec.chatProps?.locale ?? layer.locale;\n  // One annotate toggle: pins on desktop, point mode (which hides the layer while the person taps the app) on touch and compact screens.\n  const feedback = useComposerFeedback(spec.feedback);\n  const pointing = usePointing(spec.feedback);\n  // The pin's mic uses the shell's transcription: this agent's own, else the coach's.\n  const transcribe = (spec.voice ?? layer.agent?.voice)?.transcribe;\n  const fr = locale === 'fr';\n  return <div data-spec={role} hidden={!visible} className={cn('min-h-0 min-w-0 flex-1', visible ? 'flex flex-col' : 'hidden')}>\n    <PiChat {...spec.chatProps} {...(locale ? { locale } : {})} controller={spec.controller} keyboardInset={false} placement={layer.expanded && !layer.dockFloating ? 'docked' : 'floating'} {...(feedback ? { feedback } : {})}\n      {...(role === 'agent' && spec.voice ? { voiceMessage: undefined, tools: <>{spec.chatProps?.tools}<TalkButton text={appShellText(locale)} /></>, pendingVoice: layer.voice.pending } : {})} />\n    {/* The note editor of ordinary feedback lives inside the layer, in the modal's focus tree; while pointing the layer steps aside and AgentLayer renders it. */}\n    {/* In the flow, inside the visible content box: the popup is transformed (a fixed element would be placed against its off-screen bottom). */}\n    {spec.feedback && visible && !pointing && <div className=\"shrink-0 px-2 pb-2 empty:hidden\">\n      <NoteBubble session={spec.feedback} {...(transcribe ? { transcribe } : {})} {...(fr ? { labels: feedbackLabelsFr } : {})} /></div>}\n  </div>;\n}\n\n/** Where the chats show: the persistent host element is moved in once, when the drawer or panel mounts. */\nfunction ChatSlot() {\n  const { host } = useInternal();\n  const place = useCallback((slot: HTMLDivElement | null) => { if (slot && host) slot.appendChild(host); }, [host]);\n  // Coarse pointers: the chat's own transcript buttons (copy, show earlier) get the layer's 44px rule from here, without touching pi-chat.\n  return <div ref={place} className=\"flex min-h-0 flex-1 flex-col [&_[data-testid=transcript]_button]:pointer-coarse:min-h-11 [&_[data-testid=transcript]_button]:pointer-coarse:min-w-11\" />;\n}\n\n/** Both specs, each mounted once it has been shown. */\nfunction Chats({ showing }: { readonly showing: Which }) {\n  const { agent, improve } = useInternal();\n  const seen = useRef(new Set<Which>());\n  seen.current.add(showing);\n  return <>\n    {agent && seen.current.has('agent') && <SpecChat spec={agent} visible={showing === 'agent'} role=\"agent\" />}\n    {improve && seen.current.has('improve') && <SpecChat spec={improve} visible={showing === 'improve'} role=\"improve\" />}\n  </>;\n}\n\n/** Title row: « ← » when the improve view has an agent to go back to, the title, then Expand or Collapse (compact only), the dock controls (expanded only) and Close. */\nfunction Header({ text, title, compactSnap, closeRef, controls, className, ...rest }: { readonly text: AppShellText; readonly title: string; readonly compactSnap?: Snap; readonly closeRef?: Ref<HTMLButtonElement>; readonly controls?: ReactNode } & Omit<HTMLAttributes<HTMLDivElement>, 'title'>) {\n  const layer = useInternal();\n  const back = layer.showing === 'improve' && layer.agent;\n  const actions = (layer.showing === 'improve' ? layer.improve : layer.agent)?.headerActions ?? [];\n  return <div data-testid=\"agent-layer-header\" {...rest} className={cn('flex shrink-0 items-center gap-1 px-2 pb-1', className)}>\n    {back && <Button variant=\"ghost\" size=\"icon\" data-testid=\"agent-layer-back\" aria-label={text.back} title={text.back} onClick={layer.showAgent}><ArrowLeftIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n    <h2 data-testid=\"agent-layer-title\" className=\"m-0 min-w-0 flex-1 truncate px-1 text-sm font-semibold\">{title}</h2>\n    {actions.length > 0 && <HeaderActions actions={actions} compact={compactSnap !== undefined} text={text} prefix=\"agent-layer\" run={id => actions.find(action => action.id === id)?.onSelect()} />}\n    {compactSnap === 'half' && <Button variant=\"ghost\" size=\"icon\" data-testid=\"agent-layer-expand\" aria-label={text.expand} title={text.expand} onClick={() => layer.setSnap('full')}><ChevronUpIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n    {compactSnap === 'full' && <Button variant=\"ghost\" size=\"icon\" data-testid=\"agent-layer-collapse\" aria-label={text.collapse} title={text.collapse} onClick={() => layer.setSnap('half')}><ChevronDownIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n    {controls}\n    <Button variant=\"ghost\" size=\"icon\" ref={closeRef} data-testid=\"agent-layer-close\" aria-label={text.close} title={text.close} onClick={layer.close}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n  </div>;\n}\n\nfunction useTitle(): { text: AppShellText; title: string } {\n  const layer = useInternal();\n  const spec = layer.showing === 'improve' ? layer.improve : layer.agent;\n  const text = appShellText(spec?.chatProps?.locale ?? layer.locale);\n  const title = layer.showing === 'improve' ? text.improve : (spec?.chatProps?.labels?.title ?? text.assistant);\n  return { text, title };\n}\n\nconst toSnap = (point: number | string | null, peekPoint: string): Snap | null =>\n  point === peekPoint ? 'peek' : point === HALF ? 'half' : point === FULL ? 'full' : null;\n\nfunction CompactSheet({ pointing }: { readonly pointing: boolean }) {\n  const layer = useInternal();\n  const { snap, agent, voice } = layer;\n  const hasPeek = Boolean(agent);\n  const { text, title } = useTitle();\n  const liveViewport = useVisualViewport();\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const vetoed = useRef(false);\n  // Set while the layer closes; cleared when it opens again (a close is final until the trigger or a choice opens the layer).\n  const closing = useRef(false);\n  useEffect(() => { if (snap !== 'closed') closing.current = false; }, [snap]);\n  const open = snap !== 'closed' && !pointing;\n  const peek = snap === 'peek';\n  const points = useMemo(() => hasPeek ? [layer.peekPoint, HALF, FULL] : [HALF, FULL], [hasPeek, layer.peekPoint]);\n  const value = peek ? layer.peekPoint : snap === 'full' ? FULL : HALF;\n  const recording = voice.phase !== 'idle';\n  // While the person talks the sheet holds still: the viewport height and the keyboard inset are pinned at what they were when the recording\n  // began, the composer takes no focus and no keyboard, so nothing moves under the finger on the microphone.\n  const sheet = useRef<HTMLDivElement>(null);\n  const idleViewport = useRef(liveViewport);\n  if (!recording) idleViewport.current = liveViewport;\n  const vv = recording ? idleViewport.current : liveViewport;\n  const [pinnedBottom, setPinnedBottom] = useState<string | undefined>();\n  useLayoutEffect(() => {\n    const popup = sheet.current?.closest('[data-slot=drawer-popup]');\n    if (!recording || !sheet.current) return;\n    if (popup) setPinnedBottom(getComputedStyle(popup).bottom);\n    const inputs = [...sheet.current.querySelectorAll<HTMLTextAreaElement>('[data-testid=composer-input]')].map(input => ({ input, mode: input.getAttribute('inputmode'), readOnly: input.readOnly }));\n    for (const { input } of inputs) { input.readOnly = true; input.setAttribute('inputmode', 'none'); }\n    return () => {\n      setPinnedBottom(undefined);\n      for (const { input, mode, readOnly } of inputs) { input.readOnly = readOnly; if (mode === null) input.removeAttribute('inputmode'); else input.setAttribute('inputmode', mode); }\n    };\n  }, [recording]);\n\n  useBackLayer(snap === 'half' || snap === 'full', layer.close, 'agent');\n\n  // The popup is taller than what shows and slides down by `--drawer-snap-point-offset` (a registered, non-inheriting property, so only the\n  // popup itself can read it): padding the popup by that offset makes its content box exactly the visible part. At peek the tab bar below is left out too.\n  // The popup is portalled to the body, outside the shell root: it is given the measured tab bar height and the z-values explicitly.\n  const style = { '--app-shell-vv-height': vv ? `${vv.height}px` : '100dvh', '--app-shell-tabbar': `${layer.tabbar}px`, '--app-shell-z-layer': Z.layer,\n    paddingBottom: peek ? 'calc(var(--drawer-snap-point-offset, 0px) + var(--app-shell-tabbar, 0px))' : 'var(--drawer-snap-point-offset, 0px)',\n    ...(pinnedBottom ? { bottom: pinnedBottom } : {}) } as CSSProperties;\n  // Entering the modal half or full from the non-modal peek does not rerun Base UI's initial focus: if focus is still on the page, take it to Close.\n  const wasPeek = useRef(false);\n  useEffect(() => {\n    const entering = wasPeek.current && !peek && open;\n    wasPeek.current = peek;\n    if (!entering) return;\n    // The element that held focus when the sheet left peek (a page control now behind the modal). Base UI re-applies its modal guards as the\n    // sheet moves, so retake focus once they have settled and again after the slide, but only while focus is still stranded there (or lost to the body).\n    const stranded = document.activeElement;\n    const take = () => {\n      const popup = closeRef.current?.closest('[data-slot=drawer-popup]');\n      const active = document.activeElement;\n      // Still stranded, or dropped to the body by the modal guards: retake. Focus that went anywhere else is the person's and is left alone.\n      if (popup && (active === stranded || active === document.body || active === null) && !popup.contains(active)) closeRef.current?.focus({ preventScroll: true });\n    };\n    const early = setTimeout(take, 60), late = setTimeout(take, 520);\n    return () => { clearTimeout(early); clearTimeout(late); };\n  }, [peek, open]);\n  return <Drawer open={open} modal={!peek} showSwipeHandle swipeDirection=\"down\" snapPoints={points} snapPoint={value}\n    onOpenChange={(next, details) => {\n      if (next) return;\n      if (isOverlayEvent(details)) { details.cancel(); return; }\n      const outcome = nextSnapOnClose(details.reason, hasPeek);\n      if (outcome === 'close') { closing.current = true; layer.close(); return; }\n      details.cancel();\n      vetoed.current = true;\n      setTimeout(() => { vetoed.current = false; }, 120);\n      // Focus leaving the non-modal peek changes nothing, and neither does the click that finished a press on the AgentTrigger (outside the\n      // drawer, so it counts as an outside press): the trigger already chose the snap.\n      if (details.reason === 'focus-out' || Date.now() < layer.triggerUntil.current) return;\n      layer.setSnap(outcome);\n    }}\n    onSnapPointChange={point => {\n      // Vetoing a swipe-close makes the drawer snap back to where it was: that echo must not undo the snap we chose.\n      // Base UI also reports the first snap point (peek) as the drawer closes: that echo must not reopen the layer.\n      if (vetoed.current || closing.current) return;\n      const next = toSnap(point, layer.peekPoint);\n      if (next && (next !== 'peek' || hasPeek)) layer.setSnap(next);\n    }}>\n    <DrawerContent data-testid=\"agent-layer\" aria-label={title} data-state={snap} data-peek={peek} initialFocus={() => closeRef.current ?? false} style={style}\n      className={cn('app-shell box-border z-(--app-shell-z-layer) data-[swipe-direction=down]:bottom-(--drawer-keyboard-inset,0px) data-[swipe-axis=y]:[--drawer-content-max-height:calc(var(--app-shell-vv-height,100dvh)-1.5rem)]',\n        // The peek is the top PEEK_REM of the popup; the part that overlaps the tab bar is clipped away, so the tabs stay visible and tappable.\n        'data-[peek=true]:not-data-swiping:[clip-path:inset(0_0_calc(100%_-_6rem)_0)]')}>\n      <BaseDrawerParts.Drawer.VirtualKeyboardProvider>\n        <div ref={sheet} data-testid=\"agent-layer-sheet\" onFocusCapture={event => { if (!recording && (event.target as HTMLElement).matches('[data-testid=composer-input]')) layer.setSnap('full'); }}\n          className={cn('relative flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain',\n            // The layer's own header carries the title and Close, so the chat's is hidden. At peek: one line of the last reply above the\n            // composer, no empty-state overlay, room for Close.\n            '[&_[data-boring=pi-chat]>header]:hidden',\n            // At peek: ONE compact row (a one-line input, the microphone and Send; the other composer controls wait for half), and the last\n            // reply as a single truncated line above it.\n            peek && ['[&_[data-boring=pi-chat]>.relative]:overflow-hidden [&_[data-boring=pi-chat]>.relative>.pointer-events-none]:hidden',\n              '[&_[data-boring=pi-chat]>footer]:px-2 [&_[data-boring=pi-chat]>footer]:pt-1 [&_[data-boring=pi-chat]>footer]:pb-2',\n              '[&_[data-testid=transcript]]:gap-0 [&_[data-testid=transcript]]:p-0 [&_[data-testid=transcript]]:px-3 [&_[data-testid=transcript]>*]:max-h-5 [&_[data-testid=transcript]>*]:truncate [&_[data-testid=transcript]_button]:hidden',\n              '[&_[data-testid=composer]_[data-slot=input-group]]:flex-row! [&_[data-testid=composer]_[data-slot=input-group]]:items-center',\n              '[&_[data-testid=composer-input]]:min-h-11 [&_[data-testid=composer-input]]:max-h-11 [&_[data-testid=composer-input]]:flex-1 [&_[data-testid=composer-input]]:px-4 [&_[data-testid=composer-input]]:py-2.5',\n              '[&_[data-testid=composer-controls]]:w-auto [&_[data-testid=composer-controls]]:shrink-0 [&_[data-testid=composer-controls]]:py-0 [&_[data-testid=composer-controls]>span.flex-1]:hidden',\n              '[&_[data-testid=composer-plus]]:hidden [&_[data-testid=composer-annotate]]:hidden'])}>\n          {!peek && <Header text={text} title={title} compactSnap={snap} closeRef={closeRef} />}\n          {!peek && <VoiceProblem />}\n          {peek && recording && <div role=\"status\" data-testid=\"agent-listening\" data-phase={voice.phase} className=\"absolute inset-0 z-20 flex items-center justify-center gap-2 bg-popover text-sm font-medium\">\n            <MicIcon className=\"size-4 text-destructive\" aria-hidden=\"true\" />{voice.phase === 'transcribing' ? <><Loader2Icon className=\"size-4 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{voiceClock(voice.seconds)}</> : `${text.listening} ${voiceClock(voice.seconds)}`}\n          </div>}\n          {/* The transcript scrolls and never drags the sheet: only the handle and the title row swipe. */}\n          <div data-base-ui-swipe-ignore=\"\" className=\"flex min-h-0 flex-1 flex-col\"><ChatSlot /></div>\n        </div>\n      </BaseDrawerParts.Drawer.VirtualKeyboardProvider>\n    </DrawerContent>\n  </Drawer>;\n}\n\n/** The panel inside the dock: the same element docked or floating, so a placement change keeps focus and the chats where they are. */\nfunction DockPanel({ api, side }: { readonly api: DockApi; readonly side: DockSide }) {\n  const layer = useInternal();\n  const { text, title } = useTitle();\n  const open = layer.snap !== 'closed';\n  const floating = api.floating;\n  // The chats report this as their placement: the phone drawer and the floating panel are `floating`, the dock is `docked`.\n  const { setDockFloating } = layer;\n  useLayoutEffect(() => { setDockFloating(floating); return () => setDockFloating(false); }, [floating, setDockFloating]);\n  const box = useRef<HTMLDivElement>(null);\n  const [pos, setPos] = useState<{ left: number; top: number } | null>(null);\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape' && !event.defaultPrevented) layer.close(); };\n    document.addEventListener('keydown', onKey);\n    return () => document.removeEventListener('keydown', onKey);\n  }, [open, layer]);\n  // A dock control (or the divider's Alt+Arrow) moves or removes the element that had focus: it goes to the panel's first dock control instead of the page.\n  useLayoutEffect(() => {\n    const lost = !document.activeElement || document.activeElement === document.body;\n    const wanted = layer.restoreFocus.current || (open && lost && api.placement !== 'closed');\n    layer.restoreFocus.current = false;\n    if (wanted) box.current?.querySelector<HTMLElement>('[data-dock-control]')?.focus({ preventScroll: true });\n  }, [api.placement, side, layer.restoreFocus]);\n  const drag = useDraggable({ box, position: open ? pos : null, onPositionChange: setPos, enabled: floating });\n  const act = (run: () => void) => () => { layer.restoreFocus.current = true; run(); };\n  const control = (id: string, label: string, Icon: ComponentType<{ className?: string }>, run: () => void) =>\n    <Button variant=\"ghost\" size=\"icon\" key={id} data-testid={`agent-layer-${id}`} data-dock-control=\"\" aria-label={label} title={label} onClick={act(run)}><Icon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>;\n  const controls = <>\n    {!floating && control('float', text.float, PictureInPicture2Icon, () => api.float())}\n    {(floating || side === 'right') && control('dock-left', text.dockLeft, PanelLeftIcon, () => { layer.setSide('left'); api.dock(); })}\n    {(floating || side === 'left') && control('dock-right', text.dockRight, PanelRightIcon, () => { layer.setSide('right'); api.dock(); })}\n  </>;\n  // Floating, the host's Card is drawn behind the layer (a sibling layer, so docking or floating never remounts the chat).\n  return <div ref={box} data-testid=\"agent-layer\" data-state={open ? 'open' : 'closed'} data-placement={api.placement} data-side={side} role={floating ? 'dialog' : 'complementary'} aria-label={title}\n    style={floating ? pos ?? { right: 16, bottom: 16 } : undefined}\n    className={cn('app-shell relative flex min-h-0 flex-col',\n      floating ? 'fixed isolate z-(--app-shell-z-layer) h-[min(36rem,calc(100dvh-2rem))] w-[min(24rem,calc(100vw-2rem))]'\n        : 'h-full min-w-0 flex-1 bg-background text-foreground')}>\n    {floating && <Card aria-hidden=\"true\" data-boring=\"chrome\" className=\"pointer-events-none absolute inset-0 -z-10\" />}\n    {!floating && <Separator orientation=\"vertical\" className={cn('absolute inset-y-0', side === 'right' ? 'left-0' : 'right-0')} />}\n    <Header text={text} title={title} controls={controls} className={cn('pt-2', floating && 'cursor-move touch-none select-none')} {...drag} />\n    <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden\"><VoiceProblem /><ChatSlot /></div>\n  </div>;\n}\n\nfunction AgentDock({ side }: { readonly side: DockSide }) {\n  const layer = useInternal();\n  const { title } = useTitle();\n  return <Dock id=\"agent\" side={side} floatable defaultWidth={384} minWidth={320} dragBelow={260} open={layer.snap !== 'closed'} onOpenChange={next => { if (!next) layer.close(); }} labels={{ region: title }}>\n    {api => <DockPanel api={api} side={side} />}\n  </Dock>;\n}\n\n/**\n * Wraps the app's content (placed once by the shell): on a wide screen the agent dock sits on its left or right and the content reflows,\n * or it floats over the content; on a phone this is only the content (the layer is the bottom drawer). Host concern: Pi has no layout.\n */\nexport function AgentDockLayout({ children }: { readonly children: ReactNode }): ReactElement {\n  const layer = useInternal();\n  const dock = layer.expanded && (layer.agent || layer.improve) ? <AgentDock side={layer.side} /> : null;\n  return <DockLayout storageKey={DOCK_KEY} persist=\"local\">\n    {layer.side === 'left' && dock}\n    <DockMain>{children}</DockMain>\n    {layer.side === 'right' && dock}\n  </DockLayout>;\n}\n\n/** The layer itself: the drawer on a phone (the wide dock is `AgentDockLayout`). Placed once by the shell, for point mode on both. */\nexport function AgentLayer(): ReactElement | null {\n  const layer = useInternal();\n  const pointingAgent = usePointing(layer.agent?.feedback), pointingImprove = usePointing(layer.improve?.feedback);\n  const session = pointingAgent ? layer.agent?.feedback : pointingImprove ? layer.improve?.feedback : undefined;\n  // Back ends pointing first (the `point` priority); the layer keeps its own history entry underneath.\n  useBackLayer(session !== undefined, () => session?.discard(), 'point');\n  if (!layer.agent && !layer.improve) return null;\n  const pointed = pointingAgent ? layer.agent : layer.improve;\n  const transcribe = (pointed?.voice ?? layer.agent?.voice)?.transcribe;\n  const locale = pointed?.chatProps?.locale ?? layer.locale;\n  // Point mode: the compact sheet steps aside (the wide dock does not cover the app); the bar sits above the tab bar, outside the layer.\n  return <>\n    {!layer.expanded && <CompactSheet pointing={session !== undefined} />}\n    {session && <>\n      <PointBar session={session} bottomOffset={`${layer.tabbar}px`} className=\"z-[60]\" {...(locale === 'fr' ? { labels: feedbackLabelsFr } : {})} />\n      <NoteBubble session={session} {...(transcribe ? { transcribe } : {})} {...(locale === 'fr' ? { labels: feedbackLabelsFr } : {})} />\n    </>}\n  </>;\n}\n",
+      "content": "'use client';\n\n// The AgentLayer: ONE agent's PiChat above the app. Compact (below 768px): a bottom drawer with three fixed snap points, peek, half and\n// full (shadcn `drawer`, Base UI variant). Expanded: a `Dock` (the `dock` item) beside the app, docked on the left or the right (default right)\n// or floating over it; the person chooses and the choice is remembered. The same layer shows\n// the product manager (« Améliorer l’app ») when the account menu asks for it. Push-to-talk is an option of the agent.\n// Host concern: Pi has no layout. The chat is the borrowed NativeChatController rendered by PiChat; the screen context travels as the\n// submit's `context` (agent-context.ts). Nothing here is configurable beyond AgentSpec.\nimport { createPortal } from 'react-dom';\nimport { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentType, CSSProperties, HTMLAttributes, PointerEvent as ReactPointerEvent, ReactElement, ReactNode, Ref, RefObject } from 'react';\nimport { ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon, Loader2Icon, MicIcon, PanelLeftIcon, PanelRightIcon, PictureInPicture2Icon, SparklesIcon, XIcon } from 'lucide-react';\n// Behaviour only: Base UI's keyboard-inset provider for the host drawer's content. It renders nothing visible.\nimport * as BaseDrawerParts from '@base-ui/react/drawer';\nimport { Button } from '@/components/ui/button';\nimport { Card } from '@/components/ui/card';\nimport { Separator } from '@/components/ui/separator';\nimport type { FeedbackSession } from '@hachej/boring-feedback/ui';\nimport type { NativeChatController } from '@hachej/boring-ui-kit/native-chat';\nimport { Drawer, DrawerContent } from '@/components/ui/drawer';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { Dock, DockLayout, DockMain } from '../dock/dock';\nimport { useDraggable } from '../utils/use-draggable';\nimport type { DockApi } from '../dock/dock';\nimport { PiChat } from '../pi-chat/pi-chat';\nimport type { PiChatProps } from '../pi-chat/pi-chat';\nimport type { VoiceMessageConfig } from '../pi-chat/config';\nimport { useHoldToRecord, useRecordingCancellation } from '../pi-chat/use-hold-to-record';\nimport { useVoiceMessage } from '../pi-chat/use-voice-message';\nimport type { PendingVoice } from '../pi-chat/use-voice-message';\nimport { voiceClock } from '../pi-chat/voice-message';\nimport { chatTextFor } from '../pi-chat/locale';\nimport { NoteBubble, useComposerFeedback } from '../feedback/feedback-session';\nimport { feedbackLabelsFr } from '../feedback/feedback-labels';\nimport { CommentBanner, useCommenting, usePointing } from '../feedback/point-mode';\nimport { cn } from '../utils/utils';\nimport { useBackLayer } from './back';\nimport { parseAgentLink } from './agent-link';\nimport { closeShellLayer, registerAgentLayerCloser } from './shell-layer';\nimport { appShellText } from './text';\nimport type { AppShellLocale, AppShellText } from './text';\nimport { useVisualViewport } from './use-visual-viewport';\nimport { AgentContextProvider } from './agent-context';\nimport { HeaderActions } from './header-actions';\nimport type { ScreenHeaderAction } from './header-actions';\nimport { useDictation } from './use-dictation';\nimport type { Dictation } from './use-dictation';\n\nexport interface AgentSpec {\n  readonly controller: NativeChatController;\n  /** The agent's name in the expanded sidebar (default: the chat's title, then « Assistant »). */\n  readonly label?: string;\n  /** The agent's icon in the sidebar (default: the sparkles of the header trigger). */\n  readonly icon?: ComponentType<{ className?: string }>;\n  readonly chatProps?: Omit<PiChatProps, 'controller'>;\n  /** Push-to-talk. `message` retains audio plus transcript; `auto` sends text only; `draft` (default) fills the composer. */\n  readonly voice?: VoiceMessageConfig & { readonly send?: 'auto' | 'draft' | 'message' };\n  /** Point mode (the product manager, in practice). */\n  readonly feedback?: FeedbackSession;\n  /** Host actions in the layer's title row (before the dock controls, or the snap and close controls when compact), as the screen header's. Two shown, the rest in « … ». Not at peek. */\n  readonly headerActions?: readonly ScreenHeaderAction[];\n}\n\n/** Compact: closed, peek, half or full. Expanded: closed or open. */\nexport type AgentLayerState = 'closed' | 'peek' | 'half' | 'full' | 'open';\ntype Which = 'agent' | 'improve';\ntype Snap = 'closed' | 'peek' | 'half' | 'full';\n\nexport interface AgentLayerApi {\n  readonly agent: NativeChatController | undefined;\n  readonly state: AgentLayerState;\n  readonly showing: Which | null;\n  open(which?: Which, at?: 'half' | 'full'): void;\n  close(): void;\n  readonly expanded: boolean;\n}\n\n// The three fixed snap points: a peek (one composer row and a line of the last reply, `PEEK_REM` above the tab bar), 55% and the full height.\nconst PEEK_REM = 6;\n/** The shell's z-scale (tabs 20, peek 30, drawer and panel 40, other sheets 50, point bar 60). */\nconst Z = { tabs: 20, peek: 30, layer: 40, sheet: 50, point: 60 } as const;\nconst HALF = 0.55;\nconst FULL = 1;\n/** Hold the trigger this long before it records; shorter is a tap. */\nconst HOLD_MS = 350;\n\n/**\n * What a close request from the drawer becomes. A swipe, an outside press, a lost focus and Escape never close the layer: they step down\n * to peek (half without an `agent`), so the modal state goes and the coach stays reachable. Only the Close control closes it. `reason` is\n * Base UI's `details.reason` (`'swipe'`, `'outside-press'`, `'focus-out'`, `'escape-key'`, `'close-watcher'`, `'close-press'`, `'trigger-press'`,\n * `'imperative-action'`, `'none'`).\n */\nexport function nextSnapOnClose(reason: string, hasPeek: boolean): 'peek' | 'half' | 'close' {\n  return reason === 'swipe' || reason === 'outside-press' || reason === 'focus-out' || reason === 'escape-key' ? (hasPeek ? 'peek' : 'half') : 'close';\n}\n\ninterface Voice extends Dictation {\n  readonly pending?: readonly PendingVoice[] | undefined;\n  readonly captureSequence?: number;\n  readonly canStart?: boolean;\n}\n\n/**\n * Whether a close request comes from something the layer does not own: a full-screen overlay portalled above it (`[data-boring-overlay]`,\n * for example the composer's camera). Its taps count as outside presses and its focus as a focus-out of the drawer, but they must change\n * nothing: the caller cancels the request and leaves the snap alone. Only those three reasons are looked at, and the event target, the\n * related target (focus-out) or the focused element may be the overlay.\n */\nexport function isOverlayEvent(details: { readonly reason: string; readonly event?: Event | undefined }): boolean {\n  if (details.reason !== 'outside-press' && details.reason !== 'focus-out' && details.reason !== 'escape-key') return false;\n  const inside = (node: unknown) => node instanceof Element && node.closest('[data-boring-overlay]') !== null;\n  const event = details.event as (Event & { relatedTarget?: EventTarget | null }) | undefined;\n  return inside(event?.target) || inside(event?.relatedTarget) || inside(globalThis.document?.activeElement);\n}\n\ninterface Internal extends Omit<AgentLayerApi, 'agent'> {\n  readonly agent: AgentSpec | undefined;\n  readonly improve: AgentSpec | undefined;\n  readonly snap: Snap;\n  readonly setSnap: (snap: Snap) => void;\n  /** Whether the wide layout's dock is floating over the app (reported by the panel); with `expanded` it gives the chats' placement. */\n  readonly dockFloating: boolean;\n  readonly setDockFloating: (floating: boolean) => void;\n  readonly showAgent: () => void;\n  /** Until this time (ms) an outside press is the AgentTrigger's own click. */\n  readonly triggerUntil: { current: number };\n  readonly voice: Voice;\n  /** The peek height in px: `PEEK_REM` plus the tab bar the peek sits above. */\n  readonly peekPoint: string;\n  /** The measured tab bar height in px, given explicitly to the parts portalled to the body (they cannot inherit the shell's variables). */\n  readonly tabbar: number;\n  /** The persistent element holding both chats: it moves between the drawer and the panel, so closing never unmounts a chat. */\n  readonly host: HTMLElement | null;\n  /** The shell's `locale`: the layer's own words when the agent spec sets none (`agent.chatProps.locale` first). */\n  readonly locale: AppShellLocale | undefined;\n  /** Expanded only: the side the dock sits on while docked (the viewer's choice, remembered). */\n  readonly side: DockSide;\n  readonly setSide: (side: DockSide) => void;\n  /** Set by a dock control: the next placement or side change puts focus back on the panel's first dock control. */\n  readonly restoreFocus: { current: boolean };\n}\n\ntype DockSide = 'left' | 'right';\n/** The dock's remembered state lives under this prefix (DockLayout's storageKey): `<key>.agent.floating`, `.width`, and the side. */\nconst DOCK_KEY = 'boring.app-shell';\nconst SIDE_KEY = `${DOCK_KEY}.agent.side`;\n\nconst LayerContext = createContext<Internal | null>(null);\n\nfunction useInternal(): Internal {\n  const layer = useContext(LayerContext);\n  if (!layer) throw new Error('useAgentLayer needs an AgentLayerProvider');\n  return layer;\n}\n\n/** The layer's state and controls. */\nexport function useAgentLayer(): AgentLayerApi {\n  const { state, showing, open, close, expanded, agent: spec } = useInternal();\n  const agent = spec?.controller;\n  return useMemo(() => ({ state, showing, open, close, expanded, agent }), [state, showing, open, close, expanded, agent]);\n}\n\n/** Push-to-talk uses the same dictation lifecycle as page targeting, over the existing composer/controller. */\nfunction useVoice(agent: AgentSpec | undefined, locale: AppShellLocale | undefined, done: (outcome: 'sent' | 'drafted') => void): Voice {\n  const message = useVoiceMessage({ controller: agent?.controller, config: agent?.voice?.send === 'message' ? agent.voice : undefined, attachments: agent?.chatProps?.attachments, labels: chatTextFor(agent?.chatProps?.locale ?? locale).labels, admitted: () => done('sent') });\n  const voice = useDictation({\n    transcribe: agent?.voice?.send === 'message' ? undefined : agent?.voice?.transcribe,\n    locale: agent?.chatProps?.locale ?? locale,\n    onText: async (spoken, signal) => {\n      if (!agent || signal.aborted) return;\n      const fill = () => {\n        if (signal.aborted) return;\n        const draft = agent.controller.getSnapshot().draft.text;\n        agent.controller.setText(`${draft}${draft === '' || /\\s$/.test(draft) ? '' : ' '}${spoken}`);\n        done('drafted');\n      };\n      if (agent.voice?.send !== 'auto') { fill(); return; }\n      try {\n        const sent = await agent.controller.send(undefined, { text: spoken });\n        if (!signal.aborted) done(sent ? 'sent' : 'drafted');\n      } catch { fill(); }\n    },\n  });\n  const { cancel } = voice;\n  useEffect(() => () => cancel(), [agent?.controller, agent?.voice?.send, Boolean(agent?.voice), cancel]);\n  const phase: Dictation['phase'] = message.phase === 'starting' || message.phase === 'recording' ? message.phase : message.phase === 'processing' || message.phase === 'sending' ? 'transcribing' : 'idle';\n  return agent?.voice?.send === 'message' ? { ...message, phase } : voice;\n}\n\n/** The height in px of the tab bar the peek sits above (`--app-shell-tabbar` on the shell root), and one rem. */\nfunction useMeasuredPeek(probe: RefObject<HTMLDivElement | null>): { readonly peekPoint: string; readonly tabbar: number } {\n  const [px, setPx] = useState(PEEK_REM * 16);\n  const [tabbar, setTabbar] = useState(0);\n  useLayoutEffect(() => {\n    const measure = () => {\n      const tab = probe.current?.offsetHeight ?? 0;\n      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      setPx(Math.round(PEEK_REM * rem + tab));\n      setTabbar(tab);\n    };\n    measure();\n    window.addEventListener('resize', measure);\n    const observer = typeof ResizeObserver === 'undefined' || !probe.current ? undefined : new ResizeObserver(measure);\n    if (observer && probe.current) observer.observe(probe.current);\n    return () => { window.removeEventListener('resize', measure); observer?.disconnect(); };\n  }, [probe]);\n  return { peekPoint: `${px}px`, tabbar };\n}\n\n/** Places the layer in the app. `agent` is the one assistant; `improve` is the product manager. Either may be absent. */\nexport function AgentLayerProvider({ agent, improve, locale, agentLink, children }: { readonly agent?: AgentSpec | undefined; readonly improve?: AgentSpec | undefined; readonly locale?: AppShellLocale | undefined; readonly agentLink?: false | undefined; readonly children: ReactNode }): ReactElement {\n  const compact = useIsMobile();\n  const expanded = !compact;\n  const [snap, setSnapState] = useState<Snap>('closed');\n  const [dockFloating, setDockFloating] = useState(false);\n  const [shown, setShown] = useState<Which>(agent ? 'agent' : 'improve');\n  const probe = useRef<HTMLDivElement>(null);\n  const { peekPoint, tabbar } = useMeasuredPeek(probe);\n  const triggerUntil = useRef(0);\n  const restoreFocus = useRef(false);\n  const [side, setSideState] = useState<DockSide>('right');\n  // The side is the viewer's, remembered beside the Dock's own placement; read after mount so server and client markup agree.\n  useLayoutEffect(() => { try { const saved = globalThis.localStorage?.getItem(SIDE_KEY); if (saved === 'left' || saved === 'right') setSideState(saved); } catch { /* a convenience */ } }, []);\n  const setSide = useCallback((next: DockSide) => { setSideState(next); try { globalThis.localStorage?.setItem(SIDE_KEY, next); } catch { /* a convenience */ } }, []);\n  const specs = useRef({ agent, improve, snap, shown });\n  specs.current = { agent, improve, snap, shown };\n\n  const setSnap = useCallback((next: Snap) => setSnapState(next), []);\n  const close = useCallback(() => setSnapState('closed'), []);\n  // One full-screen layer at a time: opening the agent or product manager closes a view of the app (`useShellLayer`), and a view closes these.\n  useEffect(() => registerAgentLayerCloser(close), [close]);\n  const open = useCallback((which?: Which, at: 'half' | 'full' = 'half') => {\n    const { agent: a, improve: i } = specs.current;\n    const target = which ?? (a ? 'agent' : 'improve');\n    if (target === 'agent' ? !a : !i) return;\n    closeShellLayer();\n    setShown(target);\n    setSnapState(at);\n  }, []);\n  const showAgent = useCallback(() => { if (specs.current.agent) setShown('agent'); }, []);\n\n  // A spec that goes away takes the layer with it.\n  const shownSpec = shown === 'agent' ? agent : improve;\n  useEffect(() => { if (!shownSpec) { setSnapState('closed'); if (shown === 'improve' && agent) setShown('agent'); else if (shown === 'agent' && improve) setShown('improve'); } }, [shownSpec, shown, agent, improve]);\n\n  // The chats live in one element that is moved into the open drawer or panel; React keeps them mounted (and so their presentation state\n  // and uploads) while the layer is closed, on a phone and on a wide screen. Nothing is mounted before the layer is first opened.\n  const [host] = useState(() => typeof document === 'undefined' ? null : Object.assign(document.createElement('div'), { className: 'flex min-h-0 flex-1 flex-col [&_[data-boring=pi-chat]>header]:hidden' }));\n  const opened = useRef(false);\n  if (snap !== 'closed') opened.current = true;\n\n  // Consume the launch URL before an open layer pushes its Back entry. Keep the parsed request through StrictMode's effect replay.\n  const launch = useRef<ReturnType<typeof parseAgentLink> | undefined>(undefined);\n  useEffect(() => {\n    if (launch.current === undefined) {\n      launch.current = agentLink === false ? null : parseAgentLink(window.location.search);\n      if (agentLink !== false) {\n        const url = new URL(window.location.href);\n        if (['agent', 'open', 'input'].some(key => url.searchParams.has(key))) {\n          for (const key of ['agent', 'open', 'input']) url.searchParams.delete(key);\n          history.replaceState(history.state, '', `${url.pathname}${url.search}${url.hash}`);\n        }\n      }\n    }\n    const link = launch.current;\n    if (!link) return;\n    const which = link.agent === 'improve' ? 'improve' : 'agent';\n    open(which, link.open);\n    const spec = specs.current[which];\n    if (link.input !== 'text' || !spec) return;\n    // The drawer's slide and initial focus finish first. Voice deliberately leaves focus off the composer and never calls start().\n    const timer = setTimeout(() => {\n      const current = specs.current;\n      if (current.snap !== 'closed' && current.shown === which && current[which]?.controller === spec.controller) {\n        host?.querySelector<HTMLElement>(`[data-spec=${which}] [data-testid=composer-input]`)?.focus({ preventScroll: true });\n      }\n    }, 520);\n    return () => clearTimeout(timer);\n  }, [host, open]);\n\n  const voice = useVoice(agent, locale, outcome => {\n    if (outcome === 'drafted') { setShown('agent'); setSnapState('half'); }\n  });\n  const revealedFailures = useRef(new Set<number>());\n  useEffect(() => {\n    const failure = voice.pending?.findLast(item => item.phase === 'transcribe-failed' || item.phase === 'upload-failed' || item.phase === 'blocked' || item.phase === 'unconfirmed');\n    const captureProblem = agent?.voice?.send === 'message' && voice.problem;\n    const failureId = captureProblem ? voice.captureSequence : failure?.id;\n    if (failureId === undefined) { revealedFailures.current.clear(); return; }\n    if (revealedFailures.current.has(failureId)) return;\n    revealedFailures.current.add(failureId);\n    if (!expanded && shown === 'agent' && snap === 'peek') setSnapState('half');\n  }, [expanded, shown, snap, agent?.voice?.send, voice.captureSequence, voice.problem, voice.pending?.map(item => `${item.id}:${item.phase}`).join(',')]);\n\n  const state: AgentLayerState = snap === 'closed' ? 'closed' : expanded ? 'open' : snap;\n  const value = useMemo<Internal>(() => ({\n    state, showing: snap === 'closed' ? null : shown, open, close, expanded, agent, improve, snap, setSnap, dockFloating, setDockFloating, showAgent, triggerUntil, voice, peekPoint, tabbar, host, locale, side, setSide, restoreFocus,\n  }), [state, snap, shown, open, close, expanded, agent, improve, setSnap, dockFloating, showAgent, triggerUntil, voice, peekPoint, tabbar, host, locale, side, setSide]);\n\n  // The shell's z-scale (tabs 20, peek 30, drawer and panel 40, other sheets 50, point bar 60) as custom properties; `display: contents` keeps the box tree unchanged.\n  const scale = { '--app-shell-z-tabs': Z.tabs, '--app-shell-z-peek': Z.peek, '--app-shell-z-layer': Z.layer, '--app-shell-z-sheet': Z.sheet, '--app-shell-z-point': Z.point } as CSSProperties;\n  return <AgentContextProvider>\n    <LayerContext.Provider value={value}>\n      <div data-app-shell=\"\" className=\"contents\" style={scale}>\n        <div ref={probe} aria-hidden=\"true\" className=\"pointer-events-none invisible fixed top-0 left-0 w-0\" style={{ height: 'var(--app-shell-tabbar, 0px)' }} />\n        {children}\n        {host && opened.current && createPortal(<Chats showing={shown} />, host)}\n      </div>\n    </LayerContext.Provider>\n  </AgentContextProvider>;\n}\n\n/** The header button that opens the layer: a tap opens half; with `agent.voice`, press and hold records and a slide off cancels. Absent without `agent`. */\nexport function AgentTrigger({ className, children }: { readonly className?: string; readonly children?: ReactNode }) {\n  const layer = useInternal();\n  const { agent, voice } = layer;\n  const text = appShellText(agent?.chatProps?.locale ?? layer.locale);\n  const hold = useRef<{ timer: ReturnType<typeof setTimeout> | undefined; held: boolean; id: number } | null>(null);\n  const cancelHold = () => {\n    const current = hold.current;\n    hold.current = null;\n    if (!current) return;\n    clearTimeout(current.timer);\n    if (current.held) voice.cancel();\n  };\n  useRecordingCancellation(cancelHold);\n  useEffect(() => () => cancelHold(), [agent?.controller]);\n  if (!agent) return null;\n\n  const toggle = () => {\n    layer.triggerUntil.current = Date.now() + 500;\n    if (layer.state !== 'closed' && layer.showing === 'agent' && layer.expanded) layer.close();\n    else layer.open('agent', 'half');\n  };\n  const release = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    const current = hold.current;\n    hold.current = null;\n    if (!current) return;\n    clearTimeout(current.timer);\n    if (event.currentTarget.hasPointerCapture?.(current.id)) event.currentTarget.releasePointerCapture(current.id);\n    if (current.held) { if (event.type === 'pointerup') voice.finish(); else voice.cancel(); }\n    else if (event.type === 'pointerup') toggle();\n  };\n  const down = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    if (event.button !== 0) return;\n    const target = event.currentTarget;\n    target.setPointerCapture?.(event.pointerId);\n    const state = { timer: undefined as ReturnType<typeof setTimeout> | undefined, held: false, id: event.pointerId };\n    hold.current = state;\n    if (agent.voice) {\n      state.timer = setTimeout(() => {\n        state.held = true;\n        if (layer.snap === 'closed') layer.setSnap('peek');\n        layer.showAgent();\n        voice.start();\n      }, HOLD_MS);\n    }\n  };\n  const move = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    const current = hold.current;\n    if (!current?.held) return;\n    const box = event.currentTarget.getBoundingClientRect();\n    const slack = 24;\n    if (event.clientX < box.left - slack || event.clientX > box.right + slack || event.clientY < box.top - slack || event.clientY > box.bottom + slack) {\n      hold.current = null;\n      voice.cancel();\n    }\n  };\n  return <Button variant=\"ghost\" size=\"icon\" data-agent-trigger=\"\" data-testid=\"agent-trigger\" aria-label={text.open} title={text.open} aria-expanded={layer.state !== 'closed'}\n    onPointerDown={down} onPointerUp={release} onPointerCancel={release} onPointerMove={move} onContextMenu={event => event.preventDefault()}\n    onClick={event => { if (event.detail === 0) toggle(); }}\n    className={cn('touch-none', className)}>\n    {children ?? <SparklesIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}\n  </Button>;\n}\n\n/**\n * Push-to-talk in the composer row (PiChat's `tools` slot): press and hold, release to send or fill; a slide off cancels. Pressing never moves\n * focus (no keyboard opens or closes under the finger), and a browser `pointercancel` once recording keeps the audio like a release: only the slide off cancels.\n */\nfunction TalkButton({ text }: { readonly text: AppShellText }) {\n  const { voice } = useInternal();\n  const busy = voice.phase === 'transcribing';\n  const disabled = busy || (voice.phase === 'idle' && voice.canStart === false);\n  const hold = useHoldToRecord(voice, disabled);\n  return <Button {...hold} variant=\"ghost\" size=\"icon\" data-testid=\"agent-talk\" data-state={voice.phase} disabled={disabled} aria-label={text.holdToTalk} title={text.holdToTalk}\n    className=\"touch-none\">\n    {busy ? <Loader2Icon data-icon=\"inline-start\" className=\"animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" /> : <MicIcon data-icon=\"inline-start\" aria-hidden=\"true\" />}\n  </Button>;\n}\n\n/** What went wrong with the microphone, in the flow under the title row (never over the messages). */\nfunction VoiceProblem() {\n  const { voice } = useInternal();\n  return voice.problem ? <p role=\"alert\" data-testid=\"agent-voice-problem\" className=\"m-0 shrink-0 px-3 pb-1 text-xs leading-4 text-destructive\">{voice.problem}</p> : null;\n}\n\n/** One agent's PiChat. It stays mounted while hidden, so its scroll, focus and drafts survive a swap with the other spec. */\nfunction SpecChat({ spec, visible, role }: { readonly spec: AgentSpec; readonly visible: boolean; readonly role: Which }) {\n  const layer = useInternal();\n  const locale = spec.chatProps?.locale ?? layer.locale;\n  // One annotate toggle: pins on desktop, point mode (which hides the layer while the person taps the app) on touch and compact screens.\n  const feedback = useComposerFeedback(spec.feedback);\n  const pointing = usePointing(spec.feedback);\n  // The pin's mic uses the shell's transcription: this agent's own, else the coach's.\n  const transcribe = (spec.voice ?? layer.agent?.voice)?.transcribe;\n  const fr = locale === 'fr';\n  return <div data-spec={role} hidden={!visible} className={cn('min-h-0 min-w-0 flex-1', visible ? 'flex flex-col' : 'hidden')}>\n    <PiChat {...spec.chatProps} {...(locale ? { locale } : {})} controller={spec.controller} keyboardInset={false} placement={layer.expanded && !layer.dockFloating ? 'docked' : 'floating'} {...(feedback ? { feedback } : {})}\n      {...(role === 'agent' && spec.voice ? { voiceMessage: undefined, tools: <>{spec.chatProps?.tools}<TalkButton text={appShellText(locale)} /></>, pendingVoice: layer.voice.pending } : {})} />\n    {/* The note editor of ordinary feedback lives inside the layer, in the modal's focus tree; while pointing the layer steps aside and AgentLayer renders it. */}\n    {/* In the flow, inside the visible content box: the popup is transformed (a fixed element would be placed against its off-screen bottom). */}\n    {spec.feedback && visible && !pointing && <div className=\"shrink-0 px-2 pb-2 empty:hidden\">\n      <NoteBubble session={spec.feedback} {...(transcribe ? { transcribe } : {})} {...(fr ? { labels: feedbackLabelsFr } : {})} /></div>}\n  </div>;\n}\n\n/** Where the chats show: the persistent host element is moved in once, when the drawer or panel mounts. */\nfunction ChatSlot() {\n  const { host } = useInternal();\n  const place = useCallback((slot: HTMLDivElement | null) => { if (slot && host) slot.appendChild(host); }, [host]);\n  // Coarse pointers: the chat's own transcript buttons (copy, show earlier) get the layer's 44px rule from here, without touching pi-chat.\n  return <div ref={place} className=\"flex min-h-0 flex-1 flex-col [&_[data-testid=transcript]_button]:pointer-coarse:min-h-11 [&_[data-testid=transcript]_button]:pointer-coarse:min-w-11\" />;\n}\n\n/** Both specs, each mounted once it has been shown. */\nfunction Chats({ showing }: { readonly showing: Which }) {\n  const { agent, improve } = useInternal();\n  const seen = useRef(new Set<Which>());\n  seen.current.add(showing);\n  return <>\n    {agent && seen.current.has('agent') && <SpecChat spec={agent} visible={showing === 'agent'} role=\"agent\" />}\n    {improve && seen.current.has('improve') && <SpecChat spec={improve} visible={showing === 'improve'} role=\"improve\" />}\n  </>;\n}\n\n/** Title row: « ← » when the improve view has an agent to go back to, the title, then Expand or Collapse (compact only), the dock controls (expanded only) and Close. */\nfunction Header({ text, title, compactSnap, closeRef, controls, className, ...rest }: { readonly text: AppShellText; readonly title: string; readonly compactSnap?: Snap; readonly closeRef?: Ref<HTMLButtonElement>; readonly controls?: ReactNode } & Omit<HTMLAttributes<HTMLDivElement>, 'title'>) {\n  const layer = useInternal();\n  const back = layer.showing === 'improve' && layer.agent;\n  const actions = (layer.showing === 'improve' ? layer.improve : layer.agent)?.headerActions ?? [];\n  return <div data-testid=\"agent-layer-header\" {...rest} className={cn('flex shrink-0 items-center gap-1 px-2 pb-1', className)}>\n    {back && <Button variant=\"ghost\" size=\"icon\" data-testid=\"agent-layer-back\" aria-label={text.back} title={text.back} onClick={layer.showAgent}><ArrowLeftIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n    <h2 data-testid=\"agent-layer-title\" className=\"m-0 min-w-0 flex-1 truncate px-1 text-sm font-semibold\">{title}</h2>\n    {actions.length > 0 && <HeaderActions actions={actions} compact={compactSnap !== undefined} text={text} prefix=\"agent-layer\" run={id => actions.find(action => action.id === id)?.onSelect()} />}\n    {compactSnap === 'half' && <Button variant=\"ghost\" size=\"icon\" data-testid=\"agent-layer-expand\" aria-label={text.expand} title={text.expand} onClick={() => layer.setSnap('full')}><ChevronUpIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n    {compactSnap === 'full' && <Button variant=\"ghost\" size=\"icon\" data-testid=\"agent-layer-collapse\" aria-label={text.collapse} title={text.collapse} onClick={() => layer.setSnap('half')}><ChevronDownIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>}\n    {controls}\n    <Button variant=\"ghost\" size=\"icon\" ref={closeRef} data-testid=\"agent-layer-close\" aria-label={text.close} title={text.close} onClick={layer.close}><XIcon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>\n  </div>;\n}\n\nfunction useTitle(): { text: AppShellText; title: string } {\n  const layer = useInternal();\n  const spec = layer.showing === 'improve' ? layer.improve : layer.agent;\n  const text = appShellText(spec?.chatProps?.locale ?? layer.locale);\n  const title = layer.showing === 'improve' ? text.improve : (spec?.chatProps?.labels?.title ?? text.assistant);\n  return { text, title };\n}\n\nconst toSnap = (point: number | string | null, peekPoint: string): Snap | null =>\n  point === peekPoint ? 'peek' : point === HALF ? 'half' : point === FULL ? 'full' : null;\n\nfunction CompactSheet({ pointing }: { readonly pointing: boolean }) {\n  const layer = useInternal();\n  const { snap, agent, voice } = layer;\n  const hasPeek = Boolean(agent);\n  const { text, title } = useTitle();\n  const liveViewport = useVisualViewport();\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const vetoed = useRef(false);\n  // Set while the layer closes; cleared when it opens again (a close is final until the trigger or a choice opens the layer).\n  const closing = useRef(false);\n  useEffect(() => { if (snap !== 'closed') closing.current = false; }, [snap]);\n  const open = snap !== 'closed' && !pointing;\n  const peek = snap === 'peek';\n  const points = useMemo(() => hasPeek ? [layer.peekPoint, HALF, FULL] : [HALF, FULL], [hasPeek, layer.peekPoint]);\n  const value = peek ? layer.peekPoint : snap === 'full' ? FULL : HALF;\n  const recording = voice.phase !== 'idle';\n  // While the person talks the sheet holds still: the viewport height and the keyboard inset are pinned at what they were when the recording\n  // began, the composer takes no focus and no keyboard, so nothing moves under the finger on the microphone.\n  const sheet = useRef<HTMLDivElement>(null);\n  const idleViewport = useRef(liveViewport);\n  if (!recording) idleViewport.current = liveViewport;\n  const vv = recording ? idleViewport.current : liveViewport;\n  const [pinnedBottom, setPinnedBottom] = useState<string | undefined>();\n  useLayoutEffect(() => {\n    const popup = sheet.current?.closest('[data-slot=drawer-popup]');\n    if (!recording || !sheet.current) return;\n    if (popup) setPinnedBottom(getComputedStyle(popup).bottom);\n    const inputs = [...sheet.current.querySelectorAll<HTMLTextAreaElement>('[data-testid=composer-input]')].map(input => ({ input, mode: input.getAttribute('inputmode'), readOnly: input.readOnly }));\n    for (const { input } of inputs) { input.readOnly = true; input.setAttribute('inputmode', 'none'); }\n    return () => {\n      setPinnedBottom(undefined);\n      for (const { input, mode, readOnly } of inputs) { input.readOnly = readOnly; if (mode === null) input.removeAttribute('inputmode'); else input.setAttribute('inputmode', mode); }\n    };\n  }, [recording]);\n\n  useBackLayer(snap === 'half' || snap === 'full', layer.close, 'agent');\n\n  // The popup is taller than what shows and slides down by `--drawer-snap-point-offset` (a registered, non-inheriting property, so only the\n  // popup itself can read it): padding the popup by that offset makes its content box exactly the visible part. At peek the tab bar below is left out too.\n  // The popup is portalled to the body, outside the shell root: it is given the measured tab bar height and the z-values explicitly.\n  const style = { '--app-shell-vv-height': vv ? `${vv.height}px` : '100dvh', '--app-shell-tabbar': `${layer.tabbar}px`, '--app-shell-z-layer': Z.layer,\n    paddingBottom: peek ? 'calc(var(--drawer-snap-point-offset, 0px) + var(--app-shell-tabbar, 0px))' : 'var(--drawer-snap-point-offset, 0px)',\n    ...(pinnedBottom ? { bottom: pinnedBottom } : {}) } as CSSProperties;\n  // Entering the modal half or full from the non-modal peek does not rerun Base UI's initial focus: if focus is still on the page, take it to Close.\n  const wasPeek = useRef(false);\n  useEffect(() => {\n    const entering = wasPeek.current && !peek && open;\n    wasPeek.current = peek;\n    if (!entering) return;\n    // The element that held focus when the sheet left peek (a page control now behind the modal). Base UI re-applies its modal guards as the\n    // sheet moves, so retake focus once they have settled and again after the slide, but only while focus is still stranded there (or lost to the body).\n    const stranded = document.activeElement;\n    const take = () => {\n      const popup = closeRef.current?.closest('[data-slot=drawer-popup]');\n      const active = document.activeElement;\n      // Still stranded, or dropped to the body by the modal guards: retake. Focus that went anywhere else is the person's and is left alone.\n      if (popup && (active === stranded || active === document.body || active === null) && !popup.contains(active)) closeRef.current?.focus({ preventScroll: true });\n    };\n    const early = setTimeout(take, 60), late = setTimeout(take, 520);\n    return () => { clearTimeout(early); clearTimeout(late); };\n  }, [peek, open]);\n  return <Drawer open={open} modal={!peek} showSwipeHandle swipeDirection=\"down\" snapPoints={points} snapPoint={value}\n    onOpenChange={(next, details) => {\n      if (next) return;\n      if (isOverlayEvent(details)) { details.cancel(); return; }\n      const outcome = nextSnapOnClose(details.reason, hasPeek);\n      if (outcome === 'close') { closing.current = true; layer.close(); return; }\n      details.cancel();\n      vetoed.current = true;\n      setTimeout(() => { vetoed.current = false; }, 120);\n      // Focus leaving the non-modal peek changes nothing, and neither does the click that finished a press on the AgentTrigger (outside the\n      // drawer, so it counts as an outside press): the trigger already chose the snap.\n      if (details.reason === 'focus-out' || Date.now() < layer.triggerUntil.current) return;\n      layer.setSnap(outcome);\n    }}\n    onSnapPointChange={point => {\n      // Vetoing a swipe-close makes the drawer snap back to where it was: that echo must not undo the snap we chose.\n      // Base UI also reports the first snap point (peek) as the drawer closes: that echo must not reopen the layer.\n      if (vetoed.current || closing.current) return;\n      const next = toSnap(point, layer.peekPoint);\n      if (next && (next !== 'peek' || hasPeek)) layer.setSnap(next);\n    }}>\n    <DrawerContent data-testid=\"agent-layer\" aria-label={title} data-state={snap} data-peek={peek} initialFocus={() => closeRef.current ?? false} style={style}\n      className={cn('app-shell box-border z-(--app-shell-z-layer) data-[swipe-direction=down]:bottom-(--drawer-keyboard-inset,0px) data-[swipe-axis=y]:[--drawer-content-max-height:calc(var(--app-shell-vv-height,100dvh)-1.5rem)]',\n        // The peek is the top PEEK_REM of the popup; the part that overlaps the tab bar is clipped away, so the tabs stay visible and tappable.\n        'data-[peek=true]:not-data-swiping:[clip-path:inset(0_0_calc(100%_-_6rem)_0)]')}>\n      <BaseDrawerParts.Drawer.VirtualKeyboardProvider>\n        <div ref={sheet} data-testid=\"agent-layer-sheet\" onFocusCapture={event => { if (!recording && (event.target as HTMLElement).matches('[data-testid=composer-input]')) layer.setSnap('full'); }}\n          className={cn('relative flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain',\n            // The layer's own header carries the title and Close, so the chat's is hidden. At peek: one line of the last reply above the\n            // composer, no empty-state overlay, room for Close.\n            '[&_[data-boring=pi-chat]>header]:hidden',\n            // At peek: ONE compact row (a one-line input, the microphone and Send; the other composer controls wait for half), and the last\n            // reply as a single truncated line above it.\n            peek && ['[&_[data-boring=pi-chat]>.relative]:overflow-hidden [&_[data-boring=pi-chat]>.relative>.pointer-events-none]:hidden',\n              '[&_[data-boring=pi-chat]>footer]:px-2 [&_[data-boring=pi-chat]>footer]:pt-1 [&_[data-boring=pi-chat]>footer]:pb-2',\n              '[&_[data-testid=transcript]]:gap-0 [&_[data-testid=transcript]]:p-0 [&_[data-testid=transcript]]:px-3 [&_[data-testid=transcript]>*]:max-h-5 [&_[data-testid=transcript]>*]:truncate [&_[data-testid=transcript]_button]:hidden',\n              '[&_[data-testid=composer]_[data-slot=input-group]]:flex-row! [&_[data-testid=composer]_[data-slot=input-group]]:items-center',\n              '[&_[data-testid=composer-input]]:min-h-11 [&_[data-testid=composer-input]]:max-h-11 [&_[data-testid=composer-input]]:flex-1 [&_[data-testid=composer-input]]:px-4 [&_[data-testid=composer-input]]:py-2.5',\n              '[&_[data-testid=composer-controls]]:w-auto [&_[data-testid=composer-controls]]:shrink-0 [&_[data-testid=composer-controls]]:py-0 [&_[data-testid=composer-controls]>span.flex-1]:hidden',\n              '[&_[data-testid=composer-plus]]:hidden [&_[data-testid=composer-annotate]]:hidden'])}>\n          {!peek && <Header text={text} title={title} compactSnap={snap} closeRef={closeRef} />}\n          {!peek && <VoiceProblem />}\n          {peek && recording && <div role=\"status\" data-testid=\"agent-listening\" data-phase={voice.phase} className=\"absolute inset-0 z-20 flex items-center justify-center gap-2 bg-popover text-sm font-medium\">\n            <MicIcon className=\"size-4 text-destructive\" aria-hidden=\"true\" />{voice.phase === 'transcribing' ? <><Loader2Icon className=\"size-4 animate-spin motion-reduce:animate-none\" aria-hidden=\"true\" />{voiceClock(voice.seconds)}</> : `${text.listening} ${voiceClock(voice.seconds)}`}\n          </div>}\n          {/* The transcript scrolls and never drags the sheet: only the handle and the title row swipe. */}\n          <div data-base-ui-swipe-ignore=\"\" className=\"flex min-h-0 flex-1 flex-col\"><ChatSlot /></div>\n        </div>\n      </BaseDrawerParts.Drawer.VirtualKeyboardProvider>\n    </DrawerContent>\n  </Drawer>;\n}\n\n/** The panel inside the dock: the same element docked or floating, so a placement change keeps focus and the chats where they are. */\nfunction DockPanel({ api, side }: { readonly api: DockApi; readonly side: DockSide }) {\n  const layer = useInternal();\n  const { text, title } = useTitle();\n  const open = layer.snap !== 'closed';\n  const floating = api.floating;\n  // The chats report this as their placement: the phone drawer and the floating panel are `floating`, the dock is `docked`.\n  const { setDockFloating } = layer;\n  useLayoutEffect(() => { setDockFloating(floating); return () => setDockFloating(false); }, [floating, setDockFloating]);\n  const box = useRef<HTMLDivElement>(null);\n  const [pos, setPos] = useState<{ left: number; top: number } | null>(null);\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape' && !event.defaultPrevented) layer.close(); };\n    document.addEventListener('keydown', onKey);\n    return () => document.removeEventListener('keydown', onKey);\n  }, [open, layer]);\n  // A dock control (or the divider's Alt+Arrow) moves or removes the element that had focus: it goes to the panel's first dock control instead of the page.\n  useLayoutEffect(() => {\n    const lost = !document.activeElement || document.activeElement === document.body;\n    const wanted = layer.restoreFocus.current || (open && lost && api.placement !== 'closed');\n    layer.restoreFocus.current = false;\n    if (wanted) box.current?.querySelector<HTMLElement>('[data-dock-control]')?.focus({ preventScroll: true });\n  }, [api.placement, side, layer.restoreFocus]);\n  const drag = useDraggable({ box, position: open ? pos : null, onPositionChange: setPos, enabled: floating });\n  const act = (run: () => void) => () => { layer.restoreFocus.current = true; run(); };\n  const control = (id: string, label: string, Icon: ComponentType<{ className?: string }>, run: () => void) =>\n    <Button variant=\"ghost\" size=\"icon\" key={id} data-testid={`agent-layer-${id}`} data-dock-control=\"\" aria-label={label} title={label} onClick={act(run)}><Icon data-icon=\"inline-start\" aria-hidden=\"true\" /></Button>;\n  const controls = <>\n    {!floating && control('float', text.float, PictureInPicture2Icon, () => api.float())}\n    {(floating || side === 'right') && control('dock-left', text.dockLeft, PanelLeftIcon, () => { layer.setSide('left'); api.dock(); })}\n    {(floating || side === 'left') && control('dock-right', text.dockRight, PanelRightIcon, () => { layer.setSide('right'); api.dock(); })}\n  </>;\n  // Floating, the host's Card is drawn behind the layer (a sibling layer, so docking or floating never remounts the chat).\n  return <div ref={box} data-testid=\"agent-layer\" data-state={open ? 'open' : 'closed'} data-placement={api.placement} data-side={side} role={floating ? 'dialog' : 'complementary'} aria-label={title}\n    style={floating ? pos ?? { right: 16, bottom: 16 } : undefined}\n    className={cn('app-shell relative flex min-h-0 flex-col',\n      floating ? 'fixed isolate z-(--app-shell-z-layer) h-[min(36rem,calc(100dvh-2rem))] w-[min(24rem,calc(100vw-2rem))]'\n        : 'h-full min-w-0 flex-1 bg-background text-foreground')}>\n    {floating && <Card aria-hidden=\"true\" data-boring=\"chrome\" className=\"pointer-events-none absolute inset-0 -z-10\" />}\n    {!floating && <Separator orientation=\"vertical\" className={cn('absolute inset-y-0', side === 'right' ? 'left-0' : 'right-0')} />}\n    <Header text={text} title={title} controls={controls} className={cn('pt-2', floating && 'cursor-move touch-none select-none')} {...drag} />\n    <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden\"><VoiceProblem /><ChatSlot /></div>\n  </div>;\n}\n\nfunction AgentDock({ side }: { readonly side: DockSide }) {\n  const layer = useInternal();\n  const { title } = useTitle();\n  return <Dock id=\"agent\" side={side} floatable defaultWidth={384} minWidth={320} dragBelow={260} open={layer.snap !== 'closed'} onOpenChange={next => { if (!next) layer.close(); }} labels={{ region: title }}>\n    {api => <DockPanel api={api} side={side} />}\n  </Dock>;\n}\n\n/**\n * Wraps the app's content (placed once by the shell): on a wide screen the agent dock sits on its left or right and the content reflows,\n * or it floats over the content; on a phone this is only the content (the layer is the bottom drawer). Host concern: Pi has no layout.\n */\nexport function AgentDockLayout({ children }: { readonly children: ReactNode }): ReactElement {\n  const layer = useInternal();\n  const dock = layer.expanded && (layer.agent || layer.improve) ? <AgentDock side={layer.side} /> : null;\n  return <DockLayout storageKey={DOCK_KEY} persist=\"local\">\n    {layer.side === 'left' && dock}\n    <DockMain>{children}</DockMain>\n    {layer.side === 'right' && dock}\n  </DockLayout>;\n}\n\n/** The layer itself: the drawer on a phone (the wide dock is `AgentDockLayout`). Placed once by the shell, for point mode on both. */\nexport function AgentLayer(): ReactElement | null {\n  const layer = useInternal();\n  const pointingAgent = usePointing(layer.agent?.feedback), pointingImprove = usePointing(layer.improve?.feedback);\n  const session = pointingAgent ? layer.agent?.feedback : pointingImprove ? layer.improve?.feedback : undefined;\n  const commentingAgent = useCommenting(layer.agent?.feedback), commentingImprove = useCommenting(layer.improve?.feedback);\n  const commenting = commentingAgent ? layer.agent?.feedback : commentingImprove ? layer.improve?.feedback : undefined;\n  // Back ends pointing first (the `point` priority), like Done: the notes wait for the next message. The layer keeps its own history entry underneath.\n  useBackLayer(session !== undefined, () => { void session?.done(); }, 'point');\n  if (!layer.agent && !layer.improve) return null;\n  const pointed = pointingAgent || commentingAgent ? layer.agent : layer.improve;\n  const transcribe = (pointed?.voice ?? layer.agent?.voice)?.transcribe;\n  const locale = pointed?.chatProps?.locale ?? layer.locale;\n  // Comment mode shows its banner either way: on a phone (point mode) above the tab bar, outside the layer, while the compact sheet steps\n  // aside; on a wide screen at the top, the dock beside the app. The note bubble is here only while pointing (else inside the layer).\n  return <>\n    {!layer.expanded && <CompactSheet pointing={session !== undefined} />}\n    {commenting && <CommentBanner session={commenting} bottomOffset={`${layer.tabbar}px`} className=\"z-[60]\" {...(locale === 'fr' ? { labels: feedbackLabelsFr } : {})} />}\n    {session && <NoteBubble session={session} {...(transcribe ? { transcribe } : {})} {...(locale === 'fr' ? { labels: feedbackLabelsFr } : {})} />}\n  </>;\n}\n",
       "type": "registry:component",
       "target": "components/app-shell/agent-layer.tsx"
     },