@hachej/boring-ui-kit 0.4.47 → 0.4.49

package/r/app-shell.json

@@ -4,26 +4,26 @@
   "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.47",
-    "@hachej/boring-ui-kit@^0.4.47",
+    "@hachej/boring-feedback@^0.4.49",
+    "@hachej/boring-ui-kit@^0.4.49",
     "@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.47/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/pi-chat-plugins.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/pi-chat-voice.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/dock.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/feedback.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-chat-plugins.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-chat-voice.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/dock.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/feedback.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/button.json"
   ],
   "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 { useChatVoice } from '@hachej/boring-ui-kit/chat-react/voice';\nimport type { ChatVoiceHandle as Voice } from '@hachej/boring-ui-kit/chat-react/voice';\nimport { appendToDraft, mentionToken, pieces, removeMention } from '@hachej/boring-ui-kit/chat-text';\nimport { Drawer, DrawerContent } from '@/components/ui/drawer';\nimport { usePhone } from '../utils/use-media';\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 { useRecordingCancellation } from '../pi-chat-voice/use-hold-to-record';\nimport { voiceClock } from '../pi-chat/config';\nimport { withChatPlugins } from '../pi-chat-plugins/chat-plugins';\nimport { PendingVoiceBubble, VoiceMessageButton } from '../pi-chat-voice/voice-message';\nimport { chatTextFor } from '../pi-chat/locale';\nimport { NoteBubble, useComposerFeedback } from '../feedback/feedback-session';\nimport { feedbackLabelsFr } from '../feedback/feedback-labels';\nimport { sentFeedbackContent } from '../feedback/sent-content';\nimport { CommentBanner, useCommenting, usePointing } from '../feedback/point-mode';\nimport { cn } from '../utils/utils';\nimport { useBackLayer } from '../utils/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 type { ShellPanel } from './shell-panel';\nimport { HeaderActions } from './header-actions';\nimport type { ScreenHeaderAction } from './header-actions';\n\nexport interface AgentSpec {\n  readonly controller: NativeChatController;\n  /** The agent's name in the expanded sidebar and the header trigger's accessible name (default: the chat's title, then « Assistant »). */\n  readonly label?: string;\n  /** The agent's icon in the sidebar and the header trigger (default: sparkles). */\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  /** The pointing tool, from the `feedback` item: the composer's annotate toggle and point mode on the app's surface. */\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?: 'peek' | 'half' | 'full'): void;\n  close(): void;\n  /** Open the real chat with one card mention. Call directly from a click or swipe release to grant microphone permission. False without an agent. */\n  readonly talkAbout: (mention: string, options?: { readonly voice?: boolean; readonly at?: 'half' | 'full' }) => boolean;\n  readonly expanded: boolean;\n}\n\n// The three fixed snap points: a peek (the file chip, one composer row and a line of the last reply, `PEEK_REM` above the tab bar), 55% and the full height.\nconst PEEK_REM = 8;\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\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: ShellPanel | 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  readonly talkRecording: boolean;\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/** A screen's way to hand the layer an assistant it already owns (see `useAgentLoan`). */\nexport interface AgentLoan {\n  /** False when the shell has its own `agent`: a loan never replaces it. */\n  readonly available: boolean;\n  /** Lends `spec` as the shell's `agent` and opens it at `at` (just lends it without `at`). `undefined` takes it back and closes the layer. */\n  lend(spec: AgentSpec | undefined, at?: 'peek' | 'half' | 'full'): void;\n}\ninterface LoanContextValue extends AgentLoan { readonly compact: boolean }\nconst LoanContext = createContext<LoanContextValue | null>(null);\n\n/**\n * For a screen that owns an assistant (a page-sized `AgentWorkspace`): `lend(spec, 'peek')` shows that same controller in the shell's\n * bottom drawer on a phone, so one chat drawer serves the app; `lend(undefined)` returns it. `null` outside an `AppShell`; `compact` says\n * whether the layer is the phone drawer (below 768px), the only place a loan is shown (a wide shell keeps the screen's own placement).\n */\nexport function useAgentLoan(): (AgentLoan & { readonly compact: boolean }) | null { return useContext(LoanContext); }\n\nconst controllerOf = (spec: AgentSpec | ShellPanel | undefined) => spec && ('controller' in spec ? spec.controller : spec.identity);\n\n/** The layer's state and controls. */\nexport function useAgentLayer(): AgentLayerApi {\n  const { state, showing, open, close, talkAbout, expanded, agent: spec } = useInternal();\n  const agent = spec?.controller;\n  return useMemo(() => ({ state, showing, open, close, talkAbout, expanded, agent }), [state, showing, open, close, talkAbout, 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  return useChatVoice({ controller: agent?.controller, voice: agent?.voice, attachments: agent?.chatProps?.attachments,\n    labels: chatTextFor(agent?.chatProps?.locale ?? locale).labels, onDone: done });\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; `panel` sits beside the app (the product manager). Either may be absent. */\nexport function AgentLayerProvider({ agent: own, panel: improve, locale, agentLink, appName, children }: { readonly agent?: AgentSpec | undefined; readonly panel?: ShellPanel | undefined; readonly locale?: AppShellLocale | undefined; readonly agentLink?: false | undefined; readonly appName?: string | undefined; readonly children: ReactNode }): ReactElement {\n  const compact = usePhone();\n  const expanded = !compact;\n  const [snap, setSnapState] = useState<Snap>('closed');\n  const [dockFloating, setDockFloating] = useState(false);\n  // A screen may lend the layer its assistant (`useAgentLoan`); the shell's own `agent` always wins.\n  const [lent, setLent] = useState<AgentSpec | undefined>();\n  const agent = own ?? lent;\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  // eslint-disable-next-line react-hooks/set-state-in-effect -- localStorage exists only after mount; reading it before paint keeps server and client markup equal without a flash\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  // eslint-disable-next-line react-hooks/refs -- latest-value ref: open/lend/showAgent may be called from a child's layout effect, before this component's own effects run\n  specs.current = { agent, improve, snap, shown };\n  const lentRef = useRef<AgentSpec | undefined>(undefined);\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: 'peek' | '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 === 'peek' && target !== 'agent' ? 'half' : at);\n  }, []);\n  const lend = useCallback((spec: AgentSpec | undefined, at?: 'peek' | 'half' | 'full') => {\n    if (specs.current.agent && specs.current.agent !== lentRef.current) return;\n    lentRef.current = spec;\n    setLent(spec);\n    if (spec && at) { closeShellLayer(); setShown('agent'); setSnapState(at); }\n  }, []);\n  const loan = useMemo<LoanContextValue>(() => ({ available: !own, lend, compact }), [own, lend, compact]);\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  // eslint-disable-next-line react-hooks/set-state-in-effect -- closes the layer once after its spec goes away; the guard (!shownSpec) settles after one pass\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  // eslint-disable-next-line react-hooks/refs -- a monotonic \"ever opened\" latch for this render: no re-render, no setState during render\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  const [firstAgentLink] = useState(agentLink);\n  useEffect(() => {\n    if (launch.current === undefined) {\n      launch.current = firstAgentLink === false ? null : parseAgentLink(window.location.search);\n      if (firstAgentLink !== 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 && controllerOf(current[which]) === controllerOf(spec)) {\n        host?.querySelector<HTMLElement>(`[data-spec=${which}] [data-testid=composer-input]`)?.focus({ preventScroll: true });\n      }\n    }, 520);\n    return () => clearTimeout(timer);\n  }, [host, open, firstAgentLink]);\n\n  const voice = useVoice(agent, locale, outcome => {\n    if (outcome === 'drafted') { setShown('agent'); setSnapState('half'); }\n  });\n  const [talkRecording, setTalkRecording] = useState(false);\n  const cancelTalkRecording = useCallback(() => {\n    if (talkRecording && (voice.phase === 'starting' || voice.phase === 'recording')) voice.cancel();\n  }, [talkRecording, voice]);\n  useRecordingCancellation(cancelTalkRecording);\n  const previousTalk = useRef<{ controller: NativeChatController; path: string } | undefined>(undefined);\n  const focusTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(focusTimer.current), [agent?.controller]);\n  const talkAbout = useCallback<AgentLayerApi['talkAbout']>((token, options = {}) => {\n    const selected = specs.current.agent;\n    if (!selected) return false;\n    clearTimeout(focusTimer.current);\n    const parsed = pieces(token, { mentions: true, skills: [] });\n    if (parsed.length !== 1 || parsed[0]?.kind !== 'mention') throw new TypeError('talkAbout requires one @mention token');\n    const path = parsed[0].value!;\n    const before = previousTalk.current;\n    const draft = selected.controller.getSnapshot().draft.text;\n    const text = before?.controller === selected.controller ? removeMention(draft, before.path) : draft;\n    selected.controller.setText(`${appendToDraft(text, mentionToken(path))} `);\n    previousTalk.current = { controller: selected.controller, path };\n    open('agent', options.at ?? 'half');\n    if (options.voice && selected.voice) {\n      setTalkRecording(true);\n      // No await or effect: permission belongs to the caller's click or swipe release, even before the chat mounts.\n      voice.start();\n    } else {\n      focusTimer.current = setTimeout(() => {\n        if (specs.current.agent?.controller === selected.controller && specs.current.snap !== 'closed' && specs.current.shown === 'agent') host?.querySelector<HTMLElement>('[data-spec=agent] [data-testid=composer-input]')?.focus({ preventScroll: true });\n      }, 520);\n    }\n    return true;\n  }, [open, voice, host]);\n  // eslint-disable-next-line react-hooks/set-state-in-effect -- a completed or refused capture resets this gesture's presentation once\n  useEffect(() => { if (voice.phase === 'idle') setTalkRecording(false); }, [voice.phase]);\n  const revealedFailures = useRef(new Set<number>());\n  const voiceSend = agent?.voice?.send, pendingKey = voice.pending?.map(item => `${item.id}:${item.phase}`).join(',');\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 = voiceSend === '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    // eslint-disable-next-line react-hooks/set-state-in-effect -- reveals a new voice failure once per failure id (the ref guards repeats), so it settles after one pass\n    if (!expanded && shown === 'agent' && snap === 'peek') setSnapState('half');\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- runs when a pending item's id or phase changes (pendingKey), not on every new pending array\n  }, [expanded, shown, snap, voiceSend, voice.captureSequence, voice.problem, pendingKey]);\n\n  // One Back entry for the PM, one more while pointing: Back returns to chat, then closes without leaving the app.\n  const improveOpen = snap !== 'closed' && shown === 'improve';\n  const [pmFull, setPmFull] = useState<{ readonly full: boolean; readonly collapse: () => void }>({ full: false, collapse: () => {} });\n  const onFull = useCallback((full: boolean, collapse: () => void) => setPmFull(current => current.full === full ? current : { full, collapse }), []);\n  useBackLayer(improveOpen, close, 'agent');\n  useBackLayer(improveOpen && pmFull.full, pmFull.collapse, 'sheet');\n  const state: AgentLayerState = snap === 'closed' ? 'closed' : expanded ? 'open' : snap;\n  const value = useMemo<Internal>(() => ({\n    state, showing: snap === 'closed' ? null : shown, open, close, talkAbout, talkRecording, expanded, agent, improve, snap, setSnap, dockFloating, setDockFloating, showAgent, triggerUntil, voice, peekPoint, tabbar, host, locale, side, setSide, restoreFocus,\n  }), [state, snap, shown, open, close, talkAbout, talkRecording, 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  const page = <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    {/* eslint-disable-next-line react-hooks/refs -- reads the \"ever opened\" latch set above in this same render */}\n    {host && opened.current && createPortal(<Chats showing={shown} />, host)}\n  </div>;\n  return <AgentContextProvider>\n    <LayerContext.Provider value={value}><LoanContext.Provider value={loan}>\n      {improve ? <improve.Provider config={improve.config} open={improveOpen} close={close} appName={appName} locale={locale} onFull={onFull}>{page}</improve.Provider> : page}\n    </LoanContext.Provider></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 voiceRef = useRef(voice);\n  useLayoutEffect(() => { voiceRef.current = voice; });\n  const cancelHold = useCallback(() => {\n    const current = hold.current;\n    hold.current = null;\n    if (!current) return;\n    clearTimeout(current.timer);\n    if (current.held) voiceRef.current.cancel();\n  }, []);\n  useRecordingCancellation(cancelHold);\n  const controller = agent?.controller;\n  useEffect(() => () => cancelHold(), [controller, cancelHold]);\n  const { triggerUntil: triggerUntilRef } = layer;\n  if (!agent) return null;\n\n  const toggle = () => {\n    triggerUntilRef.current = Date.now() + 500;\n    // Peek is the collapsed coach: a tap reveals it. Every other open state closes.\n    if (layer.showing === 'agent' && layer.state !== 'closed' && layer.state !== 'peek') 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  const name = agent.label ?? text.open;\n  const Icon = agent.icon;\n  return <Button variant=\"ghost\" size=\"icon\" data-agent-trigger=\"\" data-testid=\"agent-trigger\" aria-label={name} title={name} 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 ?? (Icon ? <Icon className=\"size-5\" /> : <SparklesIcon data-icon=\"inline-start\" aria-hidden=\"true\" />)}\n  </Button>;\n}\n\n/** Tap to start; while active, this same control is the composer's replacement recording row. */\nfunction TalkButton() {\n  const { voice } = useInternal();\n  const busy = voice.phase === 'transcribing';\n  return <VoiceMessageButton testId=\"agent-talk\" disabled={busy || (voice.phase === 'idle' && voice.canStart === false)} voice={{\n    ...voice, phase: busy ? 'processing' : voice.phase, canStart: voice.canStart !== false,\n    pending: voice.pending ?? [], captureSequence: voice.captureSequence ?? 0,\n  }} />;\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 {...withChatPlugins(spec.chatProps ?? {})} {...(locale ? { locale } : {})} controller={spec.controller} keyboardInset={false} placement={layer.expanded && !layer.dockFloating ? 'docked' : 'floating'} {...(feedback ? { feedback } : {})} {...(spec.feedback && !spec.chatProps?.sentContent ? { sentContent: sentFeedbackContent } : {})}\n      {...(role === 'agent' && spec.voice ? { voiceMessage: { transcribe: spec.voice.transcribe, Bubble: PendingVoiceBubble }, tools: <>{spec.chatProps?.tools}<TalkButton /></>, composerRecording: layer.voice.phase === 'starting' || layer.voice.phase === 'recording' ? <TalkButton /> : undefined, 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 } = useInternal();\n  const seen = useRef(new Set<Which>());\n  // eslint-disable-next-line react-hooks/refs -- a monotonic \"ever shown\" set filled during render: no setState, no re-render\n  seen.current.add(showing);\n  // eslint-disable-next-line react-hooks/refs -- reads the \"ever shown\" set filled above in this same render\n  const seenAgent = seen.current.has('agent');\n  return <>\n    {agent && seenAgent && <SpecChat spec={agent} visible={showing === 'agent'} role=\"agent\" />}\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.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 improve = layer.showing === 'improve' ? layer.improve : undefined;\n  const spec = improve ? undefined : layer.agent;\n  const text = appShellText((improve?.locale as AppShellLocale | undefined) ?? spec?.chatProps?.locale ?? layer.locale);\n  const title = improve ? improve.label ?? 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' && layer.showing !== 'improve' && !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  // eslint-disable-next-line react-hooks/refs -- ref cache: the last viewport seen while not recording, pinned during a recording; no setState during render\n  if (!recording) idleViewport.current = liveViewport;\n  // eslint-disable-next-line react-hooks/refs -- reads the pinned viewport cached above in this same render\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  // At half and full the sheet is modal: the page, the trigger included, is inert, so a tap on the trigger lands elsewhere and would count as an\n  // outside press (down to peek). It still means what the trigger means: close. A trigger that gets its own press, or one under the sheet, is left alone.\n  const { close, triggerUntil } = layer;\n  useEffect(() => {\n    if (!open || peek) return;\n    const triggerAt = (event: PointerEvent) => {\n      const target = event.target instanceof Element ? event.target : null;\n      if (target?.closest('[data-agent-trigger], [data-slot=drawer-popup], [data-boring-overlay]')) return null;\n      return [...document.querySelectorAll('[data-agent-trigger]')].find(trigger => {\n        const box = trigger.getBoundingClientRect();\n        return event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;\n      }) ?? null;\n    };\n    let press: { readonly trigger: Element; readonly id: number; readonly at: number } | null = null;\n    const down = (event: PointerEvent) => {\n      if (press) return;\n      const trigger = triggerAt(event);\n      if (!trigger) return;\n      press = { trigger, id: event.pointerId, at: Date.now() };\n      triggerUntil.current = press.at + 500;\n    };\n    const up = (event: PointerEvent) => {\n      if (press?.id !== event.pointerId) return;\n      const { trigger, at } = press;\n      press = null;\n      // A tap, on the trigger it began on. A long press is not one: this trigger records only from a closed or peek layer.\n      if (triggerAt(event) === trigger && Date.now() - at < HOLD_MS) close();\n    };\n    document.addEventListener('pointerdown', down, true);\n    document.addEventListener('pointerup', up, true);\n    return () => {\n      document.removeEventListener('pointerdown', down, true);\n      document.removeEventListener('pointerup', up, true);\n    };\n  }, [open, peek, close, triggerUntil]);\n\n  // While « Améliorer l'app » shows, the PM panel owns the layer's Back entry (AgentLayerProvider).\n  useBackLayer((snap === 'half' || snap === 'full') && layer.showing !== 'improve', 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-peek-height': `${PEEK_REM}rem`, '--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%_-_var(--app-shell-peek-height))_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              voice.phase !== 'starting' && voice.phase !== 'recording' && '[&_[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 aria-hidden=\"true\" data-testid=\"agent-listening\" data-phase={voice.phase} className=\"sr-only\">\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' && layer.showing !== 'improve';\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  const { restoreFocus: restoreFocusRef } = layer;\n  const openRef = useRef(open);\n  useLayoutEffect(() => { openRef.current = open; });\n  useLayoutEffect(() => {\n    const lost = !document.activeElement || document.activeElement === document.body;\n    const wanted = restoreFocusRef.current || (openRef.current && lost && api.placement !== 'closed');\n    restoreFocusRef.current = false;\n    if (wanted) box.current?.querySelector<HTMLElement>('[data-dock-control]')?.focus({ preventScroll: true });\n  }, [api.placement, side, restoreFocusRef]);\n  const drag = useDraggable({ box, position: open ? pos : null, onPositionChange: setPos, enabled: floating });\n  const act = (run: () => void) => () => { restoreFocusRef.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' && layer.showing !== 'improve'} 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);\n  const session = pointingAgent ? layer.agent?.feedback : undefined;\n  const commentingAgent = useCommenting(layer.agent?.feedback);\n  const commenting = commentingAgent ? layer.agent?.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 = layer.agent;\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",
+      "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. One of the two at a time on a phone and on a screen too\n// narrow for both (below `TOGETHER_FROM`): opening one closes the other. From `TOGETHER_FROM` up the PM column opens beside the dock, each\n// closes on its own, and the shell's closer closes both. 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 { useChatVoice } from '@hachej/boring-ui-kit/chat-react/voice';\nimport type { ChatVoiceHandle as Voice } from '@hachej/boring-ui-kit/chat-react/voice';\nimport { appendToDraft, mentionToken, pieces, removeMention } from '@hachej/boring-ui-kit/chat-text';\nimport { Drawer, DrawerContent } from '@/components/ui/drawer';\nimport { useMedia, usePhone } from '../utils/use-media';\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 { useRecordingCancellation } from '../pi-chat-voice/use-hold-to-record';\nimport { voiceClock } from '../pi-chat/config';\nimport { withChatPlugins } from '../pi-chat-plugins/chat-plugins';\nimport { PendingVoiceBubble, VoiceMessageButton } from '../pi-chat-voice/voice-message';\nimport { chatTextFor } from '../pi-chat/locale';\nimport { NoteBubble, useComposerFeedback } from '../feedback/feedback-session';\nimport { feedbackLabelsFr } from '../feedback/feedback-labels';\nimport { sentFeedbackContent } from '../feedback/sent-content';\nimport { CommentBanner, useCommenting, usePointing } from '../feedback/point-mode';\nimport { cn } from '../utils/utils';\nimport { useBackLayer } from '../utils/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 type { ShellPanel } from './shell-panel';\nimport { HeaderActions } from './header-actions';\nimport type { ScreenHeaderAction } from './header-actions';\n\nexport interface AgentSpec {\n  readonly controller: NativeChatController;\n  /** The agent's name in the expanded sidebar and the header trigger's accessible name (default: the chat's title, then « Assistant »). */\n  readonly label?: string;\n  /** The agent's icon in the sidebar and the header trigger (default: sparkles). */\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  /** The pointing tool, from the `feedback` item: the composer's annotate toggle and point mode on the app's surface. */\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  /** Opens the assistant or the PM. Below `TOGETHER_FROM` (and on a phone) it closes the other; from it, the PM opens beside the assistant. */\n  open(which?: Which, at?: 'peek' | 'half' | 'full'): void;\n  /** Closes what `showing` names: with both open, the assistant (a second call closes the PM). */\n  close(): void;\n  /** Open the real chat with one card mention. Call directly from a click or swipe release to grant microphone permission. False without an agent. */\n  readonly talkAbout: (mention: string, options?: { readonly voice?: boolean; readonly at?: 'half' | 'full' }) => boolean;\n  readonly expanded: boolean;\n}\n\n// The three fixed snap points: a peek (the file chip, one composer row and a line of the last reply, `PEEK_REM` above the tab bar), 55% and the full height.\nconst PEEK_REM = 8;\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 * From this width the assistant dock and the PM column are open together: the expanded sidebar (16rem) + the screen's least width\n * (`DockLayout`'s 360px) + the dock's least width (320px) + the PM column (26rem) = 1352px. Below it they are one at a time, as on a phone.\n */\nconst TOGETHER_FROM = 1360;\nconst TOGETHER_QUERY = `(width >= ${TOGETHER_FROM}px)`;\n/** The PM column's width in px (26rem): while it is open beside the dock, the dock leaves the screen its least width beside both. */\nconst PM_COLUMN = 416;\nconst MIN_MAIN = 360;\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\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  /** The layer's own controls (Close, the trigger, Escape, a swipe): the one snap (the assistant, or the PM where they are one at a time). */\n  readonly close: () => void;\n  /** `AgentLayerApi.close`: what `showing` names. */\n  readonly closeShowing: () => void;\n  readonly agent: AgentSpec | undefined;\n  readonly improve: ShellPanel | 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  /** Wide enough for both and the PM column open: the dock leaves room for it (`AgentDockLayout`). */\n  readonly besidePanel: boolean;\n  /** Until this time (ms) an outside press is the AgentTrigger's own click. */\n  readonly triggerUntil: { current: number };\n  readonly voice: Voice;\n  readonly talkRecording: boolean;\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/** A screen's way to hand the layer an assistant it already owns (see `useAgentLoan`). */\nexport interface AgentLoan {\n  /** False when the shell has its own `agent`: a loan never replaces it. */\n  readonly available: boolean;\n  /** Lends `spec` as the shell's `agent` and opens it at `at` (just lends it without `at`). `undefined` takes it back and closes the layer. */\n  lend(spec: AgentSpec | undefined, at?: 'peek' | 'half' | 'full'): void;\n}\ninterface LoanContextValue extends AgentLoan { readonly compact: boolean }\nconst LoanContext = createContext<LoanContextValue | null>(null);\n\n/**\n * For a screen that owns an assistant (a page-sized `AgentWorkspace`): `lend(spec, 'peek')` shows that same controller in the shell's\n * bottom drawer on a phone, so one chat drawer serves the app; `lend(undefined)` returns it. `null` outside an `AppShell`; `compact` says\n * whether the layer is the phone drawer (below 768px), the only place a loan is shown (a wide shell keeps the screen's own placement).\n */\nexport function useAgentLoan(): (AgentLoan & { readonly compact: boolean }) | null { return useContext(LoanContext); }\n\n/** Whether `which` is on show: the assistant on the one snap; the PM on it too, or in its own column when wide enough for both. */\nfunction onShow(current: { readonly improve: ShellPanel | undefined; readonly snap: Snap; readonly shown: Which; readonly pmOpen: boolean; readonly together: boolean }, which: Which): boolean {\n  if (which === 'agent') return current.snap !== 'closed' && current.shown === 'agent';\n  // A PM column alone stays on show for the one render between a narrowing and its move to the snap (no Back entry dropped and pushed again).\n  return current.improve !== undefined && ((current.snap !== 'closed' && current.shown === 'improve') || (current.pmOpen && (current.together || current.snap === 'closed')));\n}\n\nconst controllerOf = (spec: AgentSpec | ShellPanel | undefined) => spec && ('controller' in spec ? spec.controller : spec.identity);\n\n/** The layer's state and controls. */\nexport function useAgentLayer(): AgentLayerApi {\n  const { state, showing, open, closeShowing: close, talkAbout, expanded, agent: spec } = useInternal();\n  const agent = spec?.controller;\n  return useMemo(() => ({ state, showing, open, close, talkAbout, expanded, agent }), [state, showing, open, close, talkAbout, 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  return useChatVoice({ controller: agent?.controller, voice: agent?.voice, attachments: agent?.chatProps?.attachments,\n    labels: chatTextFor(agent?.chatProps?.locale ?? locale).labels, onDone: done });\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; `panel` sits beside the app (the product manager). Either may be absent. */\nexport function AgentLayerProvider({ agent: own, panel: improve, locale, agentLink, appName, children }: { readonly agent?: AgentSpec | undefined; readonly panel?: ShellPanel | undefined; readonly locale?: AppShellLocale | undefined; readonly agentLink?: false | undefined; readonly appName?: string | undefined; readonly children: ReactNode }): ReactElement {\n  const compact = usePhone();\n  const expanded = !compact;\n  const together = useMedia(TOGETHER_QUERY) && expanded;\n  const [snap, setSnapState] = useState<Snap>('closed');\n  // The PM column beside the dock, used only `together`; below that the PM is `shown === 'improve'` with the one snap, as on a phone.\n  const [pmOpen, setPmOpen] = useState(false);\n  const [dockFloating, setDockFloating] = useState(false);\n  // A screen may lend the layer its assistant (`useAgentLoan`); the shell's own `agent` always wins.\n  const [lent, setLent] = useState<AgentSpec | undefined>();\n  const agent = own ?? lent;\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  // eslint-disable-next-line react-hooks/set-state-in-effect -- localStorage exists only after mount; reading it before paint keeps server and client markup equal without a flash\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, pmOpen, together });\n  // eslint-disable-next-line react-hooks/refs -- latest-value ref: open/lend/showAgent may be called from a child's layout effect, before this component's own effects run\n  specs.current = { agent, improve, snap, shown, pmOpen, together };\n  const lentRef = useRef<AgentSpec | undefined>(undefined);\n\n  const setSnap = useCallback((next: Snap) => setSnapState(next), []);\n  const close = useCallback(() => setSnapState('closed'), []);\n  const closePm = useCallback(() => {\n    setPmOpen(false);\n    if (specs.current.shown === 'improve') setSnapState('closed');\n  }, []);\n  const closeAll = useCallback(() => { setPmOpen(false); setSnapState('closed'); }, []);\n  const closeShowing = useCallback(() => {\n    const current = specs.current;\n    if (current.snap === 'closed' || current.shown === 'improve') setPmOpen(false);\n    if (current.snap !== 'closed') setSnapState('closed');\n  }, []);\n  // Crossing `TOGETHER_FROM` moves the PM between its two representations, so what is on show stays on show and nothing reopens by itself.\n  // Narrowing: a PM alone becomes the one snap; beside the assistant it closes (one at a time), its conversation still mounted. Widening:\n  // a PM on the one snap moves to its column and the assistant's snap is free again.\n  const wasTogether = useRef(together);\n  useLayoutEffect(() => {\n    if (wasTogether.current === together) return;\n    wasTogether.current = together;\n    const current = specs.current;\n    const alone = current.snap === 'closed' && current.improve !== undefined;\n    if (!together) { if (current.pmOpen) { setPmOpen(false); if (alone) { setShown('improve'); setSnapState('half'); } } return; }\n    if (current.snap !== 'closed' && current.shown === 'improve') { setPmOpen(true); setSnapState('closed'); if (current.agent) setShown('agent'); }\n  }, [together]);\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 both.\n  useEffect(() => registerAgentLayerCloser(closeAll), [closeAll]);\n  // The assistant comes on show; below `TOGETHER_FROM` the PM closes (one at a time), from it the PM column stays as it is.\n  const toAgent = useCallback(() => {\n    if (!specs.current.together) setPmOpen(false);\n    setShown('agent');\n  }, []);\n  const open = useCallback((which?: Which, at: 'peek' | 'half' | 'full' = 'half') => {\n    const { agent: a, improve: i, together: both } = specs.current;\n    const target = which ?? (a ? 'agent' : 'improve');\n    if (target === 'agent' ? !a : !i) return;\n    closeShellLayer();\n    if (target === 'agent') { toAgent(); setSnapState(at); return; }\n    // Wide enough for both: the PM opens beside the assistant and leaves it as it is.\n    if (both) { setPmOpen(true); return; }\n    setPmOpen(false);\n    setShown('improve');\n    setSnapState(at === 'peek' ? 'half' : at);\n  }, [toAgent]);\n  const lend = useCallback((spec: AgentSpec | undefined, at?: 'peek' | 'half' | 'full') => {\n    if (specs.current.agent && specs.current.agent !== lentRef.current) return;\n    lentRef.current = spec;\n    setLent(spec);\n    if (spec && at) { closeShellLayer(); toAgent(); setSnapState(at); }\n  }, [toAgent]);\n  const loan = useMemo<LoanContextValue>(() => ({ available: !own, lend, compact }), [own, lend, compact]);\n  const showAgent = useCallback(() => { if (specs.current.agent) toAgent(); }, [toAgent]);\n\n  // A spec that goes away takes the layer with it.\n  const shownSpec = shown === 'agent' ? agent : improve;\n  // eslint-disable-next-line react-hooks/set-state-in-effect -- closes the layer once after its spec goes away; the guard (!shownSpec) settles after one pass\n  useEffect(() => { if (!shownSpec) { setSnapState('closed'); if (shown === 'improve' && agent) setShown('agent'); else if (shown === 'agent' && improve) setShown('improve'); } }, [shownSpec, shown, agent, improve]);\n  // eslint-disable-next-line react-hooks/set-state-in-effect -- a panel that goes away takes its column with it; the guard settles after one pass\n  useEffect(() => { if (!improve && pmOpen) setPmOpen(false); }, [improve, pmOpen]);\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  // eslint-disable-next-line react-hooks/refs -- a monotonic \"ever opened\" latch for this render: no re-render, no setState during render\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  const [firstAgentLink] = useState(agentLink);\n  useEffect(() => {\n    if (launch.current === undefined) {\n      launch.current = firstAgentLink === false ? null : parseAgentLink(window.location.search);\n      if (firstAgentLink !== 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 (onShow(current, which) && controllerOf(current[which]) === controllerOf(spec)) {\n        host?.querySelector<HTMLElement>(`[data-spec=${which}] [data-testid=composer-input]`)?.focus({ preventScroll: true });\n      }\n    }, 520);\n    return () => clearTimeout(timer);\n  }, [host, open, firstAgentLink]);\n\n  const voice = useVoice(agent, locale, outcome => {\n    if (outcome === 'drafted') { toAgent(); setSnapState('half'); }\n  });\n  const [talkRecording, setTalkRecording] = useState(false);\n  const cancelTalkRecording = useCallback(() => {\n    if (talkRecording && (voice.phase === 'starting' || voice.phase === 'recording')) voice.cancel();\n  }, [talkRecording, voice]);\n  useRecordingCancellation(cancelTalkRecording);\n  const previousTalk = useRef<{ controller: NativeChatController; path: string } | undefined>(undefined);\n  const focusTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(focusTimer.current), [agent?.controller]);\n  const talkAbout = useCallback<AgentLayerApi['talkAbout']>((token, options = {}) => {\n    const selected = specs.current.agent;\n    if (!selected) return false;\n    clearTimeout(focusTimer.current);\n    const parsed = pieces(token, { mentions: true, skills: [] });\n    if (parsed.length !== 1 || parsed[0]?.kind !== 'mention') throw new TypeError('talkAbout requires one @mention token');\n    const path = parsed[0].value!;\n    const before = previousTalk.current;\n    const draft = selected.controller.getSnapshot().draft.text;\n    const text = before?.controller === selected.controller ? removeMention(draft, before.path) : draft;\n    selected.controller.setText(`${appendToDraft(text, mentionToken(path))} `);\n    previousTalk.current = { controller: selected.controller, path };\n    open('agent', options.at ?? 'half');\n    if (options.voice && selected.voice) {\n      setTalkRecording(true);\n      // No await or effect: permission belongs to the caller's click or swipe release, even before the chat mounts.\n      voice.start();\n    } else {\n      focusTimer.current = setTimeout(() => {\n        if (specs.current.agent?.controller === selected.controller && specs.current.snap !== 'closed' && specs.current.shown === 'agent') host?.querySelector<HTMLElement>('[data-spec=agent] [data-testid=composer-input]')?.focus({ preventScroll: true });\n      }, 520);\n    }\n    return true;\n  }, [open, voice, host]);\n  // eslint-disable-next-line react-hooks/set-state-in-effect -- a completed or refused capture resets this gesture's presentation once\n  useEffect(() => { if (voice.phase === 'idle') setTalkRecording(false); }, [voice.phase]);\n  const revealedFailures = useRef(new Set<number>());\n  const voiceSend = agent?.voice?.send, pendingKey = voice.pending?.map(item => `${item.id}:${item.phase}`).join(',');\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 = voiceSend === '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    // eslint-disable-next-line react-hooks/set-state-in-effect -- reveals a new voice failure once per failure id (the ref guards repeats), so it settles after one pass\n    if (!expanded && shown === 'agent' && snap === 'peek') setSnapState('half');\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- runs when a pending item's id or phase changes (pendingKey), not on every new pending array\n  }, [expanded, shown, snap, voiceSend, voice.captureSequence, voice.problem, pendingKey]);\n\n  // One Back entry for the PM, one more while pointing: Back returns to chat, then closes the PM (only the PM, beside the dock) without leaving the app.\n  const improveOpen = onShow({ improve, snap, shown, pmOpen, together }, 'improve');\n  const [pmFull, setPmFull] = useState<{ readonly full: boolean; readonly collapse: () => void }>({ full: false, collapse: () => {} });\n  const onFull = useCallback((full: boolean, collapse: () => void) => setPmFull(current => current.full === full ? current : { full, collapse }), []);\n  useBackLayer(improveOpen, closePm, 'agent');\n  useBackLayer(improveOpen && pmFull.full, pmFull.collapse, 'sheet');\n  // Both open: the state is `open` and `showing` the assistant; the PM alone: `improve`.\n  const state: AgentLayerState = snap === 'closed' ? (improveOpen ? 'open' : 'closed') : expanded ? 'open' : snap;\n  const besidePanel = together && improveOpen;\n  const value = useMemo<Internal>(() => ({\n    state, showing: snap !== 'closed' ? shown : improveOpen ? 'improve' : null, open, close, closeShowing, talkAbout, talkRecording, expanded, agent, improve, snap, setSnap, dockFloating, setDockFloating, showAgent, besidePanel, triggerUntil, voice, peekPoint, tabbar, host, locale, side, setSide, restoreFocus,\n  }), [state, snap, shown, improveOpen, open, close, closeShowing, talkAbout, talkRecording, expanded, agent, improve, setSnap, dockFloating, showAgent, besidePanel, 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  const page = <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    {/* eslint-disable-next-line react-hooks/refs -- reads the \"ever opened\" latch set above in this same render */}\n    {host && opened.current && createPortal(<Chats showing={shown} />, host)}\n  </div>;\n  return <AgentContextProvider>\n    <LayerContext.Provider value={value}><LoanContext.Provider value={loan}>\n      {improve ? <improve.Provider config={improve.config} open={improveOpen} close={closePm} appName={appName} locale={locale} onFull={onFull}>{page}</improve.Provider> : page}\n    </LoanContext.Provider></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 voiceRef = useRef(voice);\n  useLayoutEffect(() => { voiceRef.current = voice; });\n  const cancelHold = useCallback(() => {\n    const current = hold.current;\n    hold.current = null;\n    if (!current) return;\n    clearTimeout(current.timer);\n    if (current.held) voiceRef.current.cancel();\n  }, []);\n  useRecordingCancellation(cancelHold);\n  const controller = agent?.controller;\n  useEffect(() => () => cancelHold(), [controller, cancelHold]);\n  const { triggerUntil: triggerUntilRef } = layer;\n  if (!agent) return null;\n\n  const toggle = () => {\n    triggerUntilRef.current = Date.now() + 500;\n    // Peek is the collapsed coach: a tap reveals it. Every other open state closes.\n    if (layer.showing === 'agent' && layer.state !== 'closed' && layer.state !== 'peek') 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  const name = agent.label ?? text.open;\n  const Icon = agent.icon;\n  return <Button variant=\"ghost\" size=\"icon\" data-agent-trigger=\"\" data-testid=\"agent-trigger\" aria-label={name} title={name} 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 ?? (Icon ? <Icon className=\"size-5\" /> : <SparklesIcon data-icon=\"inline-start\" aria-hidden=\"true\" />)}\n  </Button>;\n}\n\n/** Tap to start; while active, this same control is the composer's replacement recording row. */\nfunction TalkButton() {\n  const { voice } = useInternal();\n  const busy = voice.phase === 'transcribing';\n  return <VoiceMessageButton testId=\"agent-talk\" disabled={busy || (voice.phase === 'idle' && voice.canStart === false)} voice={{\n    ...voice, phase: busy ? 'processing' : voice.phase, canStart: voice.canStart !== false,\n    pending: voice.pending ?? [], captureSequence: voice.captureSequence ?? 0,\n  }} />;\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 {...withChatPlugins(spec.chatProps ?? {})} {...(locale ? { locale } : {})} controller={spec.controller} keyboardInset={false} placement={layer.expanded && !layer.dockFloating ? 'docked' : 'floating'} {...(feedback ? { feedback } : {})} {...(spec.feedback && !spec.chatProps?.sentContent ? { sentContent: sentFeedbackContent } : {})}\n      {...(role === 'agent' && spec.voice ? { voiceMessage: { transcribe: spec.voice.transcribe, Bubble: PendingVoiceBubble }, tools: <>{spec.chatProps?.tools}<TalkButton /></>, composerRecording: layer.voice.phase === 'starting' || layer.voice.phase === 'recording' ? <TalkButton /> : undefined, 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 } = useInternal();\n  const seen = useRef(new Set<Which>());\n  // eslint-disable-next-line react-hooks/refs -- a monotonic \"ever shown\" set filled during render: no setState, no re-render\n  seen.current.add(showing);\n  // eslint-disable-next-line react-hooks/refs -- reads the \"ever shown\" set filled above in this same render\n  const seenAgent = seen.current.has('agent');\n  return <>\n    {agent && seenAgent && <SpecChat spec={agent} visible={showing === 'agent'} role=\"agent\" />}\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.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 improve = layer.showing === 'improve' ? layer.improve : undefined;\n  const spec = improve ? undefined : layer.agent;\n  const text = appShellText((improve?.locale as AppShellLocale | undefined) ?? spec?.chatProps?.locale ?? layer.locale);\n  const title = improve ? improve.label ?? 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' && layer.showing !== 'improve' && !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  // eslint-disable-next-line react-hooks/refs -- ref cache: the last viewport seen while not recording, pinned during a recording; no setState during render\n  if (!recording) idleViewport.current = liveViewport;\n  // eslint-disable-next-line react-hooks/refs -- reads the pinned viewport cached above in this same render\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  // At half and full the sheet is modal: the page, the trigger included, is inert, so a tap on the trigger lands elsewhere and would count as an\n  // outside press (down to peek). It still means what the trigger means: close. A trigger that gets its own press, or one under the sheet, is left alone.\n  const { close, triggerUntil } = layer;\n  useEffect(() => {\n    if (!open || peek) return;\n    const triggerAt = (event: PointerEvent) => {\n      const target = event.target instanceof Element ? event.target : null;\n      if (target?.closest('[data-agent-trigger], [data-slot=drawer-popup], [data-boring-overlay]')) return null;\n      return [...document.querySelectorAll('[data-agent-trigger]')].find(trigger => {\n        const box = trigger.getBoundingClientRect();\n        return event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;\n      }) ?? null;\n    };\n    let press: { readonly trigger: Element; readonly id: number; readonly at: number } | null = null;\n    const down = (event: PointerEvent) => {\n      if (press) return;\n      const trigger = triggerAt(event);\n      if (!trigger) return;\n      press = { trigger, id: event.pointerId, at: Date.now() };\n      triggerUntil.current = press.at + 500;\n    };\n    const up = (event: PointerEvent) => {\n      if (press?.id !== event.pointerId) return;\n      const { trigger, at } = press;\n      press = null;\n      // A tap, on the trigger it began on. A long press is not one: this trigger records only from a closed or peek layer.\n      if (triggerAt(event) === trigger && Date.now() - at < HOLD_MS) close();\n    };\n    document.addEventListener('pointerdown', down, true);\n    document.addEventListener('pointerup', up, true);\n    return () => {\n      document.removeEventListener('pointerdown', down, true);\n      document.removeEventListener('pointerup', up, true);\n    };\n  }, [open, peek, close, triggerUntil]);\n\n  // While « Améliorer l'app » shows, the PM panel owns the layer's Back entry (AgentLayerProvider).\n  useBackLayer((snap === 'half' || snap === 'full') && layer.showing !== 'improve', 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-peek-height': `${PEEK_REM}rem`, '--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%_-_var(--app-shell-peek-height))_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              voice.phase !== 'starting' && voice.phase !== 'recording' && '[&_[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 aria-hidden=\"true\" data-testid=\"agent-listening\" data-phase={voice.phase} className=\"sr-only\">\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' && layer.showing !== 'improve';\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  const { restoreFocus: restoreFocusRef } = layer;\n  const openRef = useRef(open);\n  useLayoutEffect(() => { openRef.current = open; });\n  useLayoutEffect(() => {\n    const lost = !document.activeElement || document.activeElement === document.body;\n    const wanted = restoreFocusRef.current || (openRef.current && lost && api.placement !== 'closed');\n    restoreFocusRef.current = false;\n    if (wanted) box.current?.querySelector<HTMLElement>('[data-dock-control]')?.focus({ preventScroll: true });\n  }, [api.placement, side, restoreFocusRef]);\n  const drag = useDraggable({ box, position: open ? pos : null, onPositionChange: setPos, enabled: floating });\n  const act = (run: () => void) => () => { restoreFocusRef.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' && layer.showing !== 'improve'} 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  // The PM column sits inside the main content: while it is open beside the dock, the dock leaves the screen its least width beside it.\n  return <DockLayout storageKey={DOCK_KEY} persist=\"local\" minMain={MIN_MAIN + (layer.besidePanel ? PM_COLUMN : 0)}>\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);\n  const session = pointingAgent ? layer.agent?.feedback : undefined;\n  const commentingAgent = useCommenting(layer.agent?.feedback);\n  const commenting = commentingAgent ? layer.agent?.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 = layer.agent;\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"
     },
@@ -47,7 +47,7 @@
     },
     {
       "path": "registry/app-shell/shell-layer.ts",
-      "content": "'use client';\n\n// A full-screen app view (a document sheet, a pushed view of the app) that takes part in the shell's one-layer-at-a-time rule: opening it\n// closes the agent and product manager layers, and opening either of those closes it. Its Back is the shared Back manager's `sheet` layer\n// (`useBackLayer`), so the browser's Back closes it first. Host concern: Pi has no layers; this is the shell's own presentation rule.\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\nimport { useBackLayer } from '../utils/back';\n\n/** The shell's agent and product manager layers share one close; the agent layer registers it while mounted. */\nconst agentClosers = new Set<() => void>();\n/** The one view on show, by id. Opening a view replaces the view on show. */\nlet shown: string | undefined;\nconst listeners = new Set<() => void>();\nconst emit = (): void => { for (const listener of [...listeners]) listener(); };\nconst subscribe = (listener: () => void): (() => void) => { listeners.add(listener); return () => { listeners.delete(listener); }; };\n\n/** Registers how the agent layer closes (called by `AgentLayerProvider`). Returns the unregister function. */\nexport function registerAgentLayerCloser(close: () => void): () => void {\n  agentClosers.add(close);\n  return () => { agentClosers.delete(close); };\n}\n\n/** Closes the agent and product manager layers. The agent layer calls it before it opens; a view calls it before it opens. */\nexport function closeAgentLayers(): void {\n  for (const close of [...agentClosers]) close();\n}\n\n/** Closes the view on show, if any (the agent layer calls it before it opens, so one layer is open at a time). */\nexport function closeShellLayer(): void {\n  if (shown === undefined) return;\n  shown = undefined;\n  emit();\n}\n\nexport interface ShellLayer {\n  readonly open: () => void;\n  readonly close: () => void;\n  readonly isOpen: boolean;\n}\n\nexport interface ShellLayerOptions {\n  /** Asked when the browser's Back would close the view: `false` keeps it open (the history entry is pushed again). */\n  readonly confirmBack?: () => boolean;\n}\n\n/** The one owner of each view id: its component registers Back and the history entry. Other callers only observe. */\nconst owners = new Map<string, symbol>();\n\n/**\n * The handle of one full-screen view, `id` being its name in the shell. `open` closes the agent and product manager layers and any other\n * view; `close` closes this one (a no-op when it is not on show). The first component that calls `useShellLayer(id)` owns the view: only\n * it registers the Back layer and the history entry, and only it closes the view when it unmounts. Any other caller (a host's trigger)\n * observes `isOpen` and can open or close, and its own unmount releases nothing but its subscription.\n */\nexport function useShellLayer(id: string, options?: ShellLayerOptions): ShellLayer {\n  // The owner is the first component of this id to render (parents render before their children). Claimed while rendering, so a parent\n  // that mounts with an observer child is the owner; the claim is released by the owner's own cleanup.\n  const [me] = useState(() => {\n    const token = Symbol(id);\n    const claimed = !owners.has(id);\n    if (claimed) owners.set(id, token);\n    return { token, owner: claimed };\n  });\n  const owner = me.owner;\n  const isOpen = useSyncExternalStore(subscribe, () => shown === id, () => false);\n  const open = useCallback(() => {\n    closeAgentLayers();\n    if (shown === id) return;\n    shown = id;\n    emit();\n  }, [id]);\n  const close = useCallback(() => {\n    if (shown !== id) return;\n    shown = undefined;\n    emit();\n  }, [id]);\n  useEffect(() => {\n    if (!owner) return undefined;\n    if (!owners.has(id)) owners.set(id, me.token);\n    return () => {\n      if (owners.get(id) !== me.token) return;\n      // The owner's component is gone: its view goes with it (its history entry is released by the Back layer's cleanup).\n      owners.delete(id);\n      close();\n    };\n  }, [id, owner, me, close]);\n  const confirmBack = useRef(options?.confirmBack);\n  const wanted = options?.confirmBack;\n  useLayoutEffect(() => { confirmBack.current = wanted; });\n  const back = useCallback(() => {\n    // A refused Back keeps the view and its entry: the entry the browser just popped is pushed again.\n    if (confirmBack.current && !confirmBack.current()) { history.pushState({ appShell: 'sheet' }, ''); return; }\n    close();\n  }, [close]);\n  // The view is one history entry while it is open, owned by one component only (the Back manager's rules).\n  useBackLayer(owner && isOpen, back, 'sheet');\n  return { open, close, isOpen };\n}\n",
+      "content": "'use client';\n\n// A full-screen app view (a document sheet, a pushed view of the app) that takes part in the shell's one-layer-at-a-time rule: opening it\n// closes the agent and product manager layers (both, when a wide screen shows them side by side), and opening either of those closes it.\n// Between the agent and the product manager the rule is the agent layer's own: one at a time on a phone and below `TOGETHER_FROM`. Its Back is the shared Back manager's `sheet` layer\n// (`useBackLayer`), so the browser's Back closes it first. Host concern: Pi has no layers; this is the shell's own presentation rule.\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\nimport { useBackLayer } from '../utils/back';\n\n/** The shell's agent and product manager layers share one close; the agent layer registers it while mounted. */\nconst agentClosers = new Set<() => void>();\n/** The one view on show, by id. Opening a view replaces the view on show. */\nlet shown: string | undefined;\nconst listeners = new Set<() => void>();\nconst emit = (): void => { for (const listener of [...listeners]) listener(); };\nconst subscribe = (listener: () => void): (() => void) => { listeners.add(listener); return () => { listeners.delete(listener); }; };\n\n/** Registers how the agent layer closes (called by `AgentLayerProvider`). Returns the unregister function. */\nexport function registerAgentLayerCloser(close: () => void): () => void {\n  agentClosers.add(close);\n  return () => { agentClosers.delete(close); };\n}\n\n/** Closes the agent and product manager layers. The agent layer calls it before it opens; a view calls it before it opens. */\nexport function closeAgentLayers(): void {\n  for (const close of [...agentClosers]) close();\n}\n\n/** Closes the view on show, if any (the agent layer calls it before it opens, so one layer is open at a time). */\nexport function closeShellLayer(): void {\n  if (shown === undefined) return;\n  shown = undefined;\n  emit();\n}\n\nexport interface ShellLayer {\n  readonly open: () => void;\n  readonly close: () => void;\n  readonly isOpen: boolean;\n}\n\nexport interface ShellLayerOptions {\n  /** Asked when the browser's Back would close the view: `false` keeps it open (the history entry is pushed again). */\n  readonly confirmBack?: () => boolean;\n}\n\n/** The one owner of each view id: its component registers Back and the history entry. Other callers only observe. */\nconst owners = new Map<string, symbol>();\n\n/**\n * The handle of one full-screen view, `id` being its name in the shell. `open` closes the agent and product manager layers and any other\n * view; `close` closes this one (a no-op when it is not on show). The first component that calls `useShellLayer(id)` owns the view: only\n * it registers the Back layer and the history entry, and only it closes the view when it unmounts. Any other caller (a host's trigger)\n * observes `isOpen` and can open or close, and its own unmount releases nothing but its subscription.\n */\nexport function useShellLayer(id: string, options?: ShellLayerOptions): ShellLayer {\n  // The owner is the first component of this id to render (parents render before their children). Claimed while rendering, so a parent\n  // that mounts with an observer child is the owner; the claim is released by the owner's own cleanup.\n  const [me] = useState(() => {\n    const token = Symbol(id);\n    const claimed = !owners.has(id);\n    if (claimed) owners.set(id, token);\n    return { token, owner: claimed };\n  });\n  const owner = me.owner;\n  const isOpen = useSyncExternalStore(subscribe, () => shown === id, () => false);\n  const open = useCallback(() => {\n    closeAgentLayers();\n    if (shown === id) return;\n    shown = id;\n    emit();\n  }, [id]);\n  const close = useCallback(() => {\n    if (shown !== id) return;\n    shown = undefined;\n    emit();\n  }, [id]);\n  useEffect(() => {\n    if (!owner) return undefined;\n    if (!owners.has(id)) owners.set(id, me.token);\n    return () => {\n      if (owners.get(id) !== me.token) return;\n      // The owner's component is gone: its view goes with it (its history entry is released by the Back layer's cleanup).\n      owners.delete(id);\n      close();\n    };\n  }, [id, owner, me, close]);\n  const confirmBack = useRef(options?.confirmBack);\n  const wanted = options?.confirmBack;\n  useLayoutEffect(() => { confirmBack.current = wanted; });\n  const back = useCallback(() => {\n    // A refused Back keeps the view and its entry: the entry the browser just popped is pushed again.\n    if (confirmBack.current && !confirmBack.current()) { history.pushState({ appShell: 'sheet' }, ''); return; }\n    close();\n  }, [close]);\n  // The view is one history entry while it is open, owned by one component only (the Back manager's rules).\n  useBackLayer(owner && isOpen, back, 'sheet');\n  return { open, close, isOpen };\n}\n",
       "type": "registry:lib",
       "target": "components/app-shell/shell-layer.ts"
     },
@@ -83,7 +83,7 @@
     },
     {
       "path": "registry/app-shell/nav.tsx",
-      "content": "'use client';\n\n// The navigation: a bottom tab bar when compact, the shadcn sidebar (icon rail plus NavUser, the sidebar-07 and sidebar-08 patterns) when\n// expanded. Choosing an item only calls `route.onChange`: the app's router owns the URL, and the shell adds no history entry.\nimport { useEffect, useRef, useState } from 'react';\nimport type { ComponentType, KeyboardEvent, ReactNode } from 'react';\nimport { EllipsisIcon, SparklesIcon } from 'lucide-react';\nimport { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, SidebarSeparator, useSidebar } from '@/components/ui/sidebar';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Separator } from '@/components/ui/separator';\nimport { afterBack } from '../utils/back';\nimport { NavUser } from './account';\nimport { useAgentLayer } from './agent-layer';\nimport type { AgentSpec } from './agent-layer';\nimport type { AccountSpec } from './account';\nimport { AppSheet, SHEET_ROW } from './app-sheet';\nimport type { AppShellText } from './text';\n\nexport interface NavItem {\n  readonly id: string;\n  readonly label: string;\n  readonly icon: ComponentType<{ className?: string }>;\n  readonly badge?: boolean;\n  readonly render: () => ReactNode;\n  /** The screen's own content inside the shell's sidebar (its list, say) while this item is on show: above the nav items, which move below it. `collapsed` is true on the icon rail, so the content can fold with it. */\n  readonly sidebar?: (state: { readonly collapsed: boolean }) => ReactNode;\n}\n\n/** The most tabs the bar shows. */\nconst MAX_TABS = 4;\n\n/** Up to four items are all tabs; more than four give three tabs and the rest behind « Plus ». */\nexport function splitNav<T>(items: readonly T[]): { readonly tabs: readonly T[]; readonly overflow: readonly T[] } {\n  return items.length <= MAX_TABS ? { tabs: items, overflow: [] } : { tabs: items.slice(0, MAX_TABS - 1), overflow: items.slice(MAX_TABS - 1) };\n}\n\n/** The host's Badge marks a screen with news. Its classes only place it. */\nconst Dot = ({ className }: { readonly className?: string }) => <Badge aria-hidden=\"true\" data-testid=\"nav-badge\" className={className} />;\n\n/** Publishes the bar's measured height as `--app-shell-tabbar` on the document root (the drawer is portaled, so the shell root is too high up to reach it). */\nfunction useTabbarHeight(bar: { readonly current: HTMLElement | null }, shown: boolean): void {\n  useEffect(() => {\n    const root = document.documentElement;\n    const node = bar.current;\n    if (!shown || !node) { root.style.setProperty('--app-shell-tabbar', '0px'); return; }\n    const measure = () => root.style.setProperty('--app-shell-tabbar', `${node.getBoundingClientRect().height}px`);\n    measure();\n    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : undefined;\n    observer?.observe(node);\n    return () => { observer?.disconnect(); root.style.removeProperty('--app-shell-tabbar'); };\n  }, [bar, shown]);\n}\n\n/** Layout for a tab on the host's Button: icon over label, filling its share of the bar. */\nconst TAB = 'relative h-auto min-w-0 flex-1 flex-col gap-0.5';\n\n/** The tab bar's arrow keys: Left and Right move the focus between the tabs (wrapping). */\nconst arrows = (event: KeyboardEvent<HTMLElement>) => {\n  const buttons = [...event.currentTarget.querySelectorAll<HTMLElement>('[role=tab]')];\n  const at = buttons.indexOf(document.activeElement as HTMLElement);\n  const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n  if (at < 0 || !step) return;\n  event.preventDefault();\n  buttons[(at + step + buttons.length) % buttons.length]!.focus();\n};\n\n/** The compact tab bar. With one item there is none. Exported for tests. */\nexport function TabBar({ items, activeId, onChange, text }: { readonly items: readonly NavItem[]; readonly activeId: string; readonly onChange: (id: string) => void; readonly text: AppShellText }) {\n  const bar = useRef<HTMLElement>(null);\n  const [plusOpen, setPlusOpen] = useState(false);\n  const shown = items.length > 1;\n  useTabbarHeight(bar, shown);\n  if (!shown) return null;\n  const { tabs, overflow } = splitNav(items);\n  const inOverflow = overflow.find(item => item.id === activeId);\n  const tab = (item: NavItem) => <Button key={item.id} variant={item.id === activeId ? 'secondary' : 'ghost'} role=\"tab\" data-testid={`tab-${item.id}`} aria-selected={item.id === activeId} tabIndex={item.id === activeId ? 0 : -1}\n    onClick={() => onChange(item.id)} className={TAB}>\n    <item.icon />{item.label}{item.badge && <Dot className=\"absolute top-1 left-1/2 ml-2\" />}\n  </Button>;\n  const Plus = overflow.length ? (inOverflow?.icon ?? EllipsisIcon) : undefined;\n  return <nav ref={bar} role=\"tablist\" aria-label={text.tabs} data-testid=\"tabbar\" data-feedback-ignore=\"\" onKeyDown={arrows}\n    className=\"relative z-(--app-shell-z-tabs) box-border flex min-h-[calc(3.5rem+env(safe-area-inset-bottom))] shrink-0 bg-background pb-[env(safe-area-inset-bottom)]\">\n    <Separator className=\"absolute inset-x-0 top-0\" />\n    {tabs.map(tab)}\n    {Plus && <>\n      <Button variant={inOverflow ? 'secondary' : 'ghost'} role=\"tab\" data-testid=\"tab-plus\" aria-selected={Boolean(inOverflow)} aria-haspopup=\"dialog\" tabIndex={inOverflow ? 0 : -1} onClick={() => setPlusOpen(true)}\n        className={TAB}>\n        <Plus />{inOverflow?.label ?? text.more}{!inOverflow && overflow.some(item => item.badge) && <Dot className=\"absolute top-1 left-1/2 ml-2\" />}\n      </Button>\n      <AppSheet open={plusOpen} onOpenChange={setPlusOpen} title={text.more}>\n        {overflow.map(item => <Button key={item.id} variant={item.id === activeId ? 'secondary' : 'ghost'} size=\"lg\" data-testid={`plus-${item.id}`} aria-current={item.id === activeId} className={SHEET_ROW}\n          onClick={() => { setPlusOpen(false); afterBack(() => onChange(item.id)); }}>\n          <item.icon data-icon=\"inline-start\" />{item.label}{item.badge && <Dot className=\"ml-auto\" />}\n        </Button>)}\n      </AppSheet>\n    </>}\n  </nav>;\n}\n\n/** The expanded sidebar: the app title, the nav items (none with one item) and the account in the footer. */\nexport function AppSidebar({ rail = 'icon', title, items, activeId, onChange, agent, account, improve, text }: {\n  readonly rail?: 'icon' | 'hover'; readonly title: string; readonly items: readonly NavItem[]; readonly activeId: string; readonly onChange: (id: string) => void;\n  readonly agent: AgentSpec | undefined; readonly account: AccountSpec | undefined; readonly improve: string | undefined; readonly text: AppShellText;\n}) {\n  const { setOpen, setOpenMobile, state, isMobile } = useSidebar();\n  // In the phone sheet, choosing a screen closes it.\n  const choose = (id: string) => { setOpenMobile(false); onChange(id); };\n  const own = items.find(item => item.id === activeId)?.sidebar?.({ collapsed: state === 'collapsed' && !isMobile });\n  const layer = useAgentLayer();\n  const pressed = layer.state !== 'closed' && layer.showing === 'agent';\n  const AgentIcon = agent?.icon ?? SparklesIcon;\n  const agentLabel = agent?.label ?? agent?.chatProps?.labels?.title ?? text.assistant;\n  const sidebar = <Sidebar collapsible=\"icon\" variant=\"inset\" data-testid=\"app-sidebar\">\n    {/* The phone sheet is portaled out of the shell root, so the `.app-shell` reset would not reach its buttons: this wrapper carries it (`contents`: no box of its own). */}\n    <div className=\"app-shell contents\">\n    <SidebarHeader><p data-testid=\"sidebar-title\" className=\"m-0 truncate px-2 py-1 text-base font-semibold group-data-[collapsible=icon]:hidden\">{title}</p></SidebarHeader>\n    <SidebarContent>\n      {own != null && <div data-testid=\"sidebar-screen\" className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">{own}</div>}\n      {items.length > 1 && <SidebarGroup className={own != null ? 'shrink-0' : undefined}><SidebarGroupContent><SidebarMenu>\n        {items.map(item => <SidebarMenuItem key={item.id}>\n          <SidebarMenuButton isActive={item.id === activeId} tooltip={item.label} data-testid={`nav-${item.id}`} className=\"pointer-coarse:min-h-11 pointer-coarse:min-w-11\" onClick={() => choose(item.id)}>\n            <item.icon />\n            <span>{item.label}</span>\n            {item.badge && <Dot className=\"ml-auto group-data-[collapsible=icon]:hidden\" />}\n          </SidebarMenuButton>\n        </SidebarMenuItem>)}\n      </SidebarMenu></SidebarGroupContent></SidebarGroup>}\n      {/* The assistant is a layer, never a destination: no route, it toggles the right panel. */}\n      {agent && <>\n        {items.length > 1 && <SidebarSeparator />}\n        <SidebarGroup><SidebarGroupContent><SidebarMenu><SidebarMenuItem>\n          <SidebarMenuButton isActive={pressed} aria-pressed={pressed} tooltip={agentLabel} data-testid=\"nav-agent\" className=\"pointer-coarse:min-h-11 pointer-coarse:min-w-11\"\n            onClick={() => { setOpenMobile(false); if (pressed) layer.close(); else layer.open('agent', 'half'); }}>\n            <AgentIcon /><span>{agentLabel}</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem></SidebarMenu></SidebarGroupContent></SidebarGroup>\n      </>}\n    </SidebarContent>\n    <SidebarFooter><NavUser account={account} improve={improve} text={text} /></SidebarFooter>\n    <SidebarRail />\n    </div>\n  </Sidebar>;\n  if (rail !== 'hover') return sidebar;\n  // Reserve the native inset icon gap even while the fixed sidebar reveals its labels over the page.\n  return <div data-rail=\"hover\" className=\"relative z-20 w-[calc(var(--sidebar-width-icon)+(--spacing(4)))] shrink-0\"\n    onPointerEnter={event => { if (event.pointerType === 'mouse' || event.pointerType === 'pen') setOpen(true); }}\n    onPointerLeave={() => setOpen(false)}\n    onFocusCapture={event => { if (event.target.matches(':focus-visible')) setOpen(true); }}\n    onBlurCapture={event => { if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false); }}\n    onKeyDownCapture={event => { if (event.key === 'Escape' && event.target instanceof Node && event.currentTarget.contains(event.target)) { event.preventDefault(); event.stopPropagation(); setOpen(false); } }}>\n    {sidebar}\n  </div>;\n}\n",
+      "content": "'use client';\n\n// The navigation: a bottom tab bar when compact, the shadcn sidebar (icon rail plus NavUser, the sidebar-07 and sidebar-08 patterns) when\n// expanded. Choosing an item only calls `route.onChange`: the app's router owns the URL, and the shell adds no history entry.\nimport { useEffect, useRef, useState } from 'react';\nimport type { ComponentType, KeyboardEvent, ReactNode } from 'react';\nimport { EllipsisIcon, SparklesIcon } from 'lucide-react';\nimport { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, SidebarSeparator, useSidebar } from '@/components/ui/sidebar';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Separator } from '@/components/ui/separator';\nimport { afterBack } from '../utils/back';\nimport { NavUser } from './account';\nimport { useAgentLayer } from './agent-layer';\nimport type { AgentSpec } from './agent-layer';\nimport type { AccountSpec } from './account';\nimport { AppSheet, SHEET_ROW } from './app-sheet';\nimport type { AppShellText } from './text';\n\nexport interface NavItem {\n  readonly id: string;\n  readonly label: string;\n  readonly icon: ComponentType<{ className?: string }>;\n  readonly badge?: boolean;\n  readonly render: () => ReactNode;\n  /** The screen's own content inside the shell's sidebar (its list, say) while this item is on show: above the nav items, which move below it. `collapsed` is true on the icon rail, so the content can fold with it. */\n  readonly sidebar?: (state: { readonly collapsed: boolean }) => ReactNode;\n  /** Where this item sits against a screen's own sidebar content: `'before-sidebar'` puts it above that content, `'after-sidebar'` (the default) below. Items marked before come first everywhere (the tab bar and the phone sheet too); each side keeps the registered order. */\n  readonly placement?: 'before-sidebar' | 'after-sidebar';\n}\n\n/** The items marked `before-sidebar`, then the others, each in registered order. */\nexport function placeNav<T extends Pick<NavItem, 'placement'>>(items: readonly T[]): { readonly before: readonly T[]; readonly after: readonly T[] } {\n  return { before: items.filter(item => item.placement === 'before-sidebar'), after: items.filter(item => item.placement !== 'before-sidebar') };\n}\n\n/** The most tabs the bar shows. */\nconst MAX_TABS = 4;\n\n/** Up to four items are all tabs; more than four give three tabs and the rest behind « Plus ». */\nexport function splitNav<T>(items: readonly T[]): { readonly tabs: readonly T[]; readonly overflow: readonly T[] } {\n  return items.length <= MAX_TABS ? { tabs: items, overflow: [] } : { tabs: items.slice(0, MAX_TABS - 1), overflow: items.slice(MAX_TABS - 1) };\n}\n\n/** The host's Badge marks a screen with news. Its classes only place it. */\nconst Dot = ({ className }: { readonly className?: string }) => <Badge aria-hidden=\"true\" data-testid=\"nav-badge\" className={className} />;\n\n/** Publishes the bar's measured height as `--app-shell-tabbar` on the document root (the drawer is portaled, so the shell root is too high up to reach it). */\nfunction useTabbarHeight(bar: { readonly current: HTMLElement | null }, shown: boolean): void {\n  useEffect(() => {\n    const root = document.documentElement;\n    const node = bar.current;\n    if (!shown || !node) { root.style.setProperty('--app-shell-tabbar', '0px'); return; }\n    const measure = () => root.style.setProperty('--app-shell-tabbar', `${node.getBoundingClientRect().height}px`);\n    measure();\n    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : undefined;\n    observer?.observe(node);\n    return () => { observer?.disconnect(); root.style.removeProperty('--app-shell-tabbar'); };\n  }, [bar, shown]);\n}\n\n/** Layout for a tab on the host's Button: icon over label, filling its share of the bar. */\nconst TAB = 'relative h-auto min-w-0 flex-1 flex-col gap-0.5';\n\n/** The tab bar's arrow keys: Left and Right move the focus between the tabs (wrapping). */\nconst arrows = (event: KeyboardEvent<HTMLElement>) => {\n  const buttons = [...event.currentTarget.querySelectorAll<HTMLElement>('[role=tab]')];\n  const at = buttons.indexOf(document.activeElement as HTMLElement);\n  const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n  if (at < 0 || !step) return;\n  event.preventDefault();\n  buttons[(at + step + buttons.length) % buttons.length]!.focus();\n};\n\n/** The compact tab bar. With one item there is none. Exported for tests. */\nexport function TabBar({ items, activeId, onChange, text }: { readonly items: readonly NavItem[]; readonly activeId: string; readonly onChange: (id: string) => void; readonly text: AppShellText }) {\n  const bar = useRef<HTMLElement>(null);\n  const [plusOpen, setPlusOpen] = useState(false);\n  const shown = items.length > 1;\n  useTabbarHeight(bar, shown);\n  if (!shown) return null;\n  const { before, after } = placeNav(items);\n  const { tabs, overflow } = splitNav([...before, ...after]);\n  const inOverflow = overflow.find(item => item.id === activeId);\n  const tab = (item: NavItem) => <Button key={item.id} variant={item.id === activeId ? 'secondary' : 'ghost'} role=\"tab\" data-testid={`tab-${item.id}`} aria-selected={item.id === activeId} tabIndex={item.id === activeId ? 0 : -1}\n    onClick={() => onChange(item.id)} className={TAB}>\n    <item.icon />{item.label}{item.badge && <Dot className=\"absolute top-1 left-1/2 ml-2\" />}\n  </Button>;\n  const Plus = overflow.length ? (inOverflow?.icon ?? EllipsisIcon) : undefined;\n  return <nav ref={bar} role=\"tablist\" aria-label={text.tabs} data-testid=\"tabbar\" data-feedback-ignore=\"\" onKeyDown={arrows}\n    className=\"relative z-(--app-shell-z-tabs) box-border flex min-h-[calc(3.5rem+env(safe-area-inset-bottom))] shrink-0 bg-background pb-[env(safe-area-inset-bottom)]\">\n    <Separator className=\"absolute inset-x-0 top-0\" />\n    {tabs.map(tab)}\n    {Plus && <>\n      <Button variant={inOverflow ? 'secondary' : 'ghost'} role=\"tab\" data-testid=\"tab-plus\" aria-selected={Boolean(inOverflow)} aria-haspopup=\"dialog\" tabIndex={inOverflow ? 0 : -1} onClick={() => setPlusOpen(true)}\n        className={TAB}>\n        <Plus />{inOverflow?.label ?? text.more}{!inOverflow && overflow.some(item => item.badge) && <Dot className=\"absolute top-1 left-1/2 ml-2\" />}\n      </Button>\n      <AppSheet open={plusOpen} onOpenChange={setPlusOpen} title={text.more}>\n        {overflow.map(item => <Button key={item.id} variant={item.id === activeId ? 'secondary' : 'ghost'} size=\"lg\" data-testid={`plus-${item.id}`} aria-current={item.id === activeId} className={SHEET_ROW}\n          onClick={() => { setPlusOpen(false); afterBack(() => onChange(item.id)); }}>\n          <item.icon data-icon=\"inline-start\" />{item.label}{item.badge && <Dot className=\"ml-auto\" />}\n        </Button>)}\n      </AppSheet>\n    </>}\n  </nav>;\n}\n\n/** The expanded sidebar: the app title, the nav items (none with one item) and the account in the footer. */\nexport function AppSidebar({ rail = 'icon', title, items, activeId, onChange, agent, account, improve, text }: {\n  readonly rail?: 'icon' | 'hover'; readonly title: string; readonly items: readonly NavItem[]; readonly activeId: string; readonly onChange: (id: string) => void;\n  readonly agent: AgentSpec | undefined; readonly account: AccountSpec | undefined; readonly improve: string | undefined; readonly text: AppShellText;\n}) {\n  const { setOpen, setOpenMobile, state, isMobile } = useSidebar();\n  // In the phone sheet, choosing a screen closes it.\n  const choose = (id: string) => { setOpenMobile(false); onChange(id); };\n  const own = items.find(item => item.id === activeId)?.sidebar?.({ collapsed: state === 'collapsed' && !isMobile });\n  const { before, after } = placeNav(items);\n  const navGroup = (group: readonly NavItem[], className?: string, testId?: string) => group.length > 0 && <SidebarGroup className={className} data-testid={testId}><SidebarGroupContent><SidebarMenu>\n    {group.map(item => <SidebarMenuItem key={item.id}>\n      <SidebarMenuButton isActive={item.id === activeId} tooltip={item.label} data-testid={`nav-${item.id}`} className=\"pointer-coarse:min-h-11 pointer-coarse:min-w-11\" onClick={() => choose(item.id)}>\n        <item.icon />\n        <span>{item.label}</span>\n        {item.badge && <Dot className=\"ml-auto group-data-[collapsible=icon]:hidden\" />}\n      </SidebarMenuButton>\n    </SidebarMenuItem>)}\n  </SidebarMenu></SidebarGroupContent></SidebarGroup>;\n  const layer = useAgentLayer();\n  const pressed = layer.state !== 'closed' && layer.showing === 'agent';\n  const AgentIcon = agent?.icon ?? SparklesIcon;\n  const agentLabel = agent?.label ?? agent?.chatProps?.labels?.title ?? text.assistant;\n  const sidebar = <Sidebar collapsible=\"icon\" variant=\"inset\" data-testid=\"app-sidebar\">\n    {/* The phone sheet is portaled out of the shell root, so the `.app-shell` reset would not reach its buttons: this wrapper carries it (`contents`: no box of its own). */}\n    <div className=\"app-shell contents\">\n    <SidebarHeader><p data-testid=\"sidebar-title\" className=\"m-0 truncate px-2 py-1 text-base font-semibold group-data-[collapsible=icon]:hidden\">{title}</p></SidebarHeader>\n    <SidebarContent>\n      {/* Without the screen's own content, one group in placed order; with it, the before items above it and the rest below. */}\n      {items.length > 1 && own != null && navGroup(before, 'shrink-0', 'nav-before')}\n      {own != null && <div data-testid=\"sidebar-screen\" className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">{own}</div>}\n      {items.length > 1 && (own != null ? navGroup(after, 'shrink-0') : navGroup([...before, ...after]))}\n      {/* The assistant is a layer, never a destination: no route, it toggles the right panel. */}\n      {agent && <>\n        {items.length > 1 && <SidebarSeparator />}\n        <SidebarGroup><SidebarGroupContent><SidebarMenu><SidebarMenuItem>\n          <SidebarMenuButton isActive={pressed} aria-pressed={pressed} tooltip={agentLabel} data-testid=\"nav-agent\" className=\"pointer-coarse:min-h-11 pointer-coarse:min-w-11\"\n            onClick={() => { setOpenMobile(false); if (pressed) layer.close(); else layer.open('agent', 'half'); }}>\n            <AgentIcon /><span>{agentLabel}</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem></SidebarMenu></SidebarGroupContent></SidebarGroup>\n      </>}\n    </SidebarContent>\n    <SidebarFooter><NavUser account={account} improve={improve} text={text} /></SidebarFooter>\n    <SidebarRail />\n    </div>\n  </Sidebar>;\n  if (rail !== 'hover') return sidebar;\n  // Reserve the native inset icon gap even while the fixed sidebar reveals its labels over the page.\n  return <div data-rail=\"hover\" className=\"relative z-20 w-[calc(var(--sidebar-width-icon)+(--spacing(4)))] shrink-0\"\n    onPointerEnter={event => { if (event.pointerType === 'mouse' || event.pointerType === 'pen') setOpen(true); }}\n    onPointerLeave={() => setOpen(false)}\n    onFocusCapture={event => { if (event.target.matches(':focus-visible')) setOpen(true); }}\n    onBlurCapture={event => { if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false); }}\n    onKeyDownCapture={event => { if (event.key === 'Escape' && event.target instanceof Node && event.currentTarget.contains(event.target)) { event.preventDefault(); event.stopPropagation(); setOpen(false); } }}>\n    {sidebar}\n  </div>;\n}\n",
       "type": "registry:component",
       "target": "components/app-shell/nav.tsx"
     },

package/r/board-viewer.json

@@ -4,17 +4,17 @@
   "title": "Board viewer",
   "description": "A board@1 artifact kind for *.board.json. Lazy native tldraw projection of maquette screens, sandboxed HTML mock-ups, goto arrows and notes. Conditional board-file autosave; phone viewing without accidental frame edits. Hosts supply their resource client, asset URLs and license key.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.47",
-    "@hachej/boring-files@^0.4.47",
+    "@hachej/boring-ui-kit@^0.4.49",
+    "@hachej/boring-files@^0.4.49",
     "react@^19.0.0",
     "lucide-react@1.51.0",
     "tldraw@5.5.2"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/maquette-viewer.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/mockup-viewer.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/pi-artifacts.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/utils.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/maquette-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/mockup-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-artifacts.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/utils.json"
   ],
   "files": [
     {

package/r/button.json

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

package/r/dock.json

@@ -7,7 +7,7 @@
     "react@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/utils.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/utils.json"
   ],
   "files": [
     {

package/r/documents.json

@@ -4,22 +4,22 @@
   "title": "Documents: the Library, a file and its revisions",
   "description": "The workspace's Library as the list, the chosen file in its viewer and its retained revisions beside it (an older one opens read-only). DocumentSheet opens one document over the app for a host's « Voir la fiche », with an optional « Toutes les fiches ». Every read goes through one revisionProvider binding.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.47",
-    "@hachej/boring-files@^0.4.47",
+    "@hachej/boring-ui-kit@^0.4.49",
+    "@hachej/boring-files@^0.4.49",
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/button.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/pi-artifacts.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/pi-app.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/pi-app-kinds.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/file-tree.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/viewer-frame.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/viewer-image.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/viewer-pdf.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-artifacts.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-app.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-app-kinds.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/file-tree.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/viewer-frame.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/viewer-image.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/viewer-pdf.json"
   ],
   "files": [
     {

package/r/feedback.json

@@ -4,17 +4,17 @@
   "title": "Feedback",
   "description": "Feedback from the chat composer: one Feedback button starts feedback mode on the application page (hover, click to pin a numbered note, hold ⌥ to use the app, optional voice), and one chip carries the notes to the next message. FeedbackBar, NoteBubble, FeedbackChip with its review, useComposerFeedback for the pi-chat composer, and PickerOverlay styles. Optional, not mounted by default: PointButton, AnnotateSheet, FeedbackList and FeedbackReport. Picking, masking, anchoring and placement stay in @hachej/boring-feedback/page and /ui, so restyling cannot weaken them.",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.47",
-    "@hachej/boring-ui-kit@^0.4.47",
-    "@hachej/boring-files@^0.4.47",
+    "@hachej/boring-feedback@^0.4.49",
+    "@hachej/boring-ui-kit@^0.4.49",
+    "@hachej/boring-files@^0.4.49",
     "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.47/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/pi-chat-voice.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.47/r/utils.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/pi-chat-voice.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.49/r/utils.json"
   ],
   "files": [
     {