@hachej/boring-ui-kit 0.4.51 → 0.4.53

package/dist/chat-react-session.d.ts

@@ -74,6 +74,11 @@ export interface ChatSessionOptions<Content = unknown> extends Partial<DeriveOpt
     readonly labels: ChatSessionLabels;
     readonly actions?: {
         readonly withdraw?: ((id: QueuedMessage['id']) => Promise<unknown>) | undefined;
+        /** Resolves a waiting question. With it, a message typed while a question waits is that question's answer. */
+        readonly answer?: ((questionId: string, answer: string) => Promise<{
+            readonly kind: string;
+            readonly reason?: string | undefined;
+        }>) | undefined;
     } | undefined;
     readonly toolRenderers?: Readonly<Record<string, (call: ToolCall, result: ToolResultMessage | undefined) => ChatCard<Content> | undefined>> | undefined;
     readonly artifacts?: (NonNullable<DeriveOptions<Content>['artifacts']> & {
@@ -129,6 +134,7 @@ export declare function useChatSession<Content = unknown>(options: ChatSessionOp
     queueActions: QueueActions | undefined;
     working: boolean;
     waitingForAnswer: boolean;
+    answersQuestion: boolean;
     connected: boolean;
     sendBlocked: boolean;
     error: string | null;

package/dist/chat-react-session.js

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
-import { derive, isFileBlock, object, queuedMessages, waitingForAnswer as waitsForAnswer } from './chat-view.js';
+import { derive, isFileBlock, object, queuedMessages, waitingPart } from './chat-view.js';
 import { appendToDraft, displayName, kindMentionDraft, looksLikeMarkdown, mentionKind, mentionToken, pieces, prependToDraft, withoutKindMentions, writeKindMentionDraft } from './chat-text.js';
 /** Headless session over the public native controller snapshot/commands. Borrows it; cleanup only aborts this hook's uploads. */
 /**
@@ -158,11 +158,38 @@ export function useChatSession(options) {
     // Working from the moment of sending: the status shows before the server has taken the message.
     const sending = Boolean(echo?.some(item => item.state === 'sending'));
     const working = Boolean(run) || sending;
-    const waitingForAnswer = waitsForAnswer(derived.rows);
+    const delivering = useRef(Promise.resolve());
+    const settledQuestion = useRef(undefined);
+    const waitingFor = waitingPart(derived.rows);
+    const waitingForAnswer = waitingFor !== undefined;
+    // The run waits for this answer, so a message queued behind it would never go: what the person types answers the question.
+    const question = waitingFor?.kind === 'question' ? waitingFor.questionId : undefined;
+    const answersQuestion = question !== undefined && actions?.answer !== undefined && (state.draft.text.trim() !== '' || state.draft.attachments.length > 0);
+    /**
+     * Answers the waiting question with this message. A picture cannot be part of an answer, so it follows as its own message. A question that
+     * cannot take the message (options only, too long, not started) is superseded: the run that holds it stops, or the message would wait behind it.
+     * One at a time and once per question: a second message goes after the first, as an ordinary message, and stops nothing.
+     */
+    const deliver = (text, images, restore) => {
+        const turn = delivering.current.catch(() => { }).then(async () => {
+            if (question !== undefined && actions?.answer && settledQuestion.current !== question) {
+                const outcome = await actions.answer(question, text.trim() || images.map(image => image.name).join(', '));
+                settledQuestion.current = question;
+                if (outcome.kind === 'answered')
+                    return images.length ? await controller.send('followUp', { text: '', attachments: images, restore: { text: '', attachments: images } }) ?? true : true;
+                if ((outcome.kind === 'denied' || outcome.kind === 'unknown-question') && run)
+                    await controller.stop();
+            }
+            return controller.send('followUp', { text, attachments: images, restore });
+        });
+        delivering.current = turn;
+        return turn;
+    };
     const send = () => {
         if (sendBlocked || !current())
             return;
-        const attach = feedback && feedback.count > 0 ? feedback.attach : undefined;
+        // An answer is what the person typed, shown on the card as is: pending feedback stays for their next message.
+        const attach = feedback && feedback.count > 0 && !answersQuestion ? feedback.attach : undefined;
         if (attach) {
             // The pending feedback goes with this message: the host attaches it to the text, then the native send reads the draft.
             act(async () => {
@@ -202,12 +229,12 @@ export function useChatSession(options) {
         }
         const typed = controller.getSnapshot().draft;
         const words = withoutKindMentions(typed.text, mentions);
-        if (words !== typed.text) {
+        if (words !== typed.text || answersQuestion) {
             controller.setText('');
             controller.setAttachments([]);
             act(async () => {
                 try {
-                    await controller.send('followUp', { text: typed.text, attachments: typed.attachments, restore: { text: words, attachments: typed.attachments } });
+                    await deliver(typed.text, typed.attachments, { text: words, attachments: typed.attachments });
                 }
                 catch (cause) {
                     putBack(words, typed.attachments);
@@ -398,7 +425,7 @@ export function useChatSession(options) {
     };
     const empty = connected && !state.view?.entries.length && !rows.length;
     const loading = (state.connection.kind === 'idle' || state.connection.kind === 'connecting') && !state.view && !echo?.length;
-    return { state, derived, rows, queued, queueActions, working, waitingForAnswer, connected, sendBlocked, error, setError, report, act, current,
+    return { state, derived, rows, queued, queueActions, working, waitingForAnswer, answersQuestion, connected, sendBlocked, error, setError, report, act, current,
         files, empty, loading, developer, natural, sending, send, putBack, upload, pasteText, picked, pending, uploading, activateMention,
         pickMention: (path) => setPicked(value => value.includes(path) ? value : [...value, path]),
         dismissUpload: (id) => setPending(items => items.filter(item => item.id !== id)),

package/dist/chat-view.js

@@ -124,8 +124,9 @@ export function derive(view, options) {
     const status = (result) => result ? (result.isError ? 'failed' : 'completed') : run ? 'running' : 'unfinished';
     function toolPart(call, key, committed) {
         const result = results.get(call);
+        // A question that failed (stopped, refused arguments) has nothing a reader can act on, and its result is harness text with the model's arguments.
         if (call.name === ASK_USER_TOOL)
-            return { kind: 'question', key, call, result, live: !committed, questionId: questionIds.get(call) };
+            return natural && result?.isError ? undefined : { kind: 'question', key, call, result, live: !committed, questionId: questionIds.get(call) };
         // A call gated by `requireApproval` identifies itself: it publishes its summary under APPROVAL_DETAILS before it asks.
         const slotDetails = result ? undefined : (Array.isArray(live?.['tools']) ? live['tools'] : []).map(object).find(slot => slot?.['callId'] === call.id)?.['details'];
         const record = approvalRecord(result ? result.details : slotDetails);

package/dist/file-tree-view.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronRight, Download, File, FileCode, FileImage, FileSpreadsheet, FileText, Folder, FolderInput, FolderOpen, History, LoaderCircle, MoreHorizontal, Pencil, Search, Trash2, Upload, X } from 'lucide-react';
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
-import { createFileTreeController } from './file-tree.js';
+import { createFileTreeController, folderWritable } from './file-tree.js';
 /** Every word of the tree, so a host can translate it. Functions receive what they name. */
 export const defaultFileTreeLabels = {
     region: 'Workspace files',
@@ -199,11 +199,11 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
             return;
         shownKey.current = refreshKey;
         const { query, expanded } = controller.getSnapshot();
+        // Open folders are read again while searching too: their listing carries the host's word on writing in them.
         if (query)
             void controller.search(query);
-        else
-            for (const directory of ['', ...expanded])
-                void controller.refresh(directory);
+        for (const directory of ['', ...expanded])
+            void controller.refresh(directory);
     }, [controller, refreshKey]);
     const tree = useRef(null);
     const fileInput = useRef(null);
@@ -269,6 +269,13 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
             }
         }
     };
+    // The host's per-folder word (`FilePage.writable`): a folder it marks read-only offers no upload, retry, rename, move, delete or drop.
+    const writableIn = (folder) => folderWritable(state.directories, folder);
+    const isListedFolder = (path) => [...state.directories.values(), state.search].some(listing => listing.entries.some(entry => entry.path === path && entry.kind === 'directory'));
+    /** A row changes its folder (and a folder row its own content): both must be writable. */
+    const pathWritable = (path, folder = isListedFolder(path)) => writableIn(parentPath(path)) && (!folder || writableIn(path));
+    const entryWritable = (entry) => pathWritable(entry.path, entry.kind === 'directory');
+    const canUpload = upload && writableIn(uploadDirectory);
     const uploadRows = new Map();
     for (const item of state.uploads) {
         if (item.state.kind === 'pending')
@@ -279,11 +286,14 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
             uploadRows.set(item.path, { kind: 'failed', size: item.size,
                 reason: item.state.result.reason,
                 retryLabel: item.state.result.kind === 'unknown' ? labels.checkUpload : labels.retry,
-                retry: () => { void controller.retry(item.operationId).catch(error => setUploadError(error instanceof Error ? error.message : labels.uploadStatusUnavailable)); } });
+                // Checking an unconfirmed upload writes nothing; trying a refused one again writes, so a read-only folder offers only the first.
+                ...(item.state.result.kind === 'unknown' || writableIn(parentPath(item.path)) ? {
+                    retry: () => { void controller.retry(item.operationId).catch(error => setUploadError(error instanceof Error ? error.message : labels.uploadStatusUnavailable)); }
+                } : {}) });
     }
     for (const [path, failure] of localFailures)
         uploadRows.set(path, { kind: 'failed', size: failure.file.size, reason: failure.reason,
-            retryLabel: labels.retry, retry: () => { void uploadFiles([failure.file]); } });
+            retryLabel: labels.retry, ...(writableIn(parentPath(path)) ? { retry: () => { void uploadFiles([failure.file]); } } : {}) });
     const uploadButton = _jsxs(Button, { type: "button", variant: "secondary", "data-file-upload": true, onClick: () => fileInput.current?.click(), children: [_jsx(Upload, { "aria-hidden": "true" }), labels.upload] });
     const mutationRows = new Map();
     for (const item of state.mutations)
@@ -314,7 +324,8 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
     };
     const commitRename = (path, value) => {
         const name = value.trim();
-        if (!name || name === baseName(path)) {
+        // The folder may have become read-only while the name was typed: nothing is sent.
+        if (!name || name === baseName(path) || !pathWritable(path)) {
             setRenaming(undefined);
             focus(path);
             return;
@@ -331,7 +342,7 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
     };
     const moveTo = (path, folder) => {
         setAsking(undefined);
-        if (parentPath(path) === folder)
+        if (parentPath(path) === folder || !pathWritable(path) || !writableIn(folder))
             return;
         void controller.move(path, folder).then(report).catch(refused(path));
     };
@@ -339,7 +350,7 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
         requestAnimationFrame(() => focus(path)); };
     const draggedPath = (event) => event.dataTransfer.types.includes(DRAGGED_FILE) ? dragged ?? event.dataTransfer.getData(DRAGGED_FILE) : undefined;
     /** A folder (or `''`, the root) accepts a dragged file that is not already in it. */
-    const dropHandlers = (folder) => can.rename ? {
+    const dropHandlers = (folder) => can.rename && writableIn(folder) ? {
         onDragEnter: (event) => { const path = draggedPath(event); if (path === undefined || parentPath(path) === folder)
             return; event.preventDefault(); event.stopPropagation(); setDropTarget(folder); },
         onDragOver: (event) => { const path = draggedPath(event); if (path === undefined || parentPath(path) === folder)
@@ -355,7 +366,7 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
             event.stopPropagation();
             setDropTarget(undefined);
             setDragged(undefined);
-            if (path && parentPath(path) !== folder)
+            if (path && parentPath(path) !== folder && pathWritable(path))
                 void controller.move(path, folder).then(report).catch(refused(path));
         },
     } : {};
@@ -389,7 +400,7 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
                 node.focus();
     };
     /** Files only: a provider renames and deletes regular files, and a row busy uploading or changing waits. */
-    const mutable = (entry) => !temporaryPaths.has(entry.path) && uploadRows.get(entry.path)?.kind !== 'pending' && mutationRows.get(entry.path)?.state.kind !== 'pending';
+    const mutable = (entry) => entryWritable(entry) && !temporaryPaths.has(entry.path) && uploadRows.get(entry.path)?.kind !== 'pending' && mutationRows.get(entry.path)?.state.kind !== 'pending';
     /** A blob pointer's row shows the file it stands for, not the pointer's own name: it can be moved or deleted, not renamed in place. */
     const renameable = (entry) => !entry.blob;
     const keyboard = (event, entry) => {
@@ -452,7 +463,7 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
         if (listing.kind === 'error')
             return _jsxs("li", { role: "none", children: [_jsx("span", { role: "alert", children: listing.reason }), " ", _jsx(Button, { type: "button", variant: "ghost", onClick: () => { void (search ? controller.search(state.query) : controller.refresh(directory)); }, children: labels.retry })] });
         return _jsxs(_Fragment, { children: [listing.entries.length === 0 && (directory || temporaryEntries.length === 0) && _jsx("li", { role: "none", className: list && !directory ? undefined : 'file-tree-status', children: list && !directory
-                        ? _jsx(Empty, { className: "file-tree-empty", icon: _jsx(FolderOpen, { "aria-hidden": "true" }), title: search ? labels.noMatches : labels.empty, description: search ? undefined : labels.emptyHint, children: !search && upload && uploadButton })
+                        ? _jsx(Empty, { className: "file-tree-empty", icon: _jsx(FolderOpen, { "aria-hidden": "true" }), title: search ? labels.noMatches : labels.empty, description: search ? undefined : labels.emptyHint, children: !search && canUpload && uploadButton })
                         : _jsx("span", { children: search ? labels.noMatches : labels.empty }) }), listing.cursor !== undefined && _jsx("li", { role: "none", children: _jsx(Button, { type: "button", variant: "ghost", onClick: () => { void (search ? controller.moreSearch() : controller.more(directory)); }, children: labels.loadMore }) })] });
     };
     const renderEntries = (directory, level) => _jsxs(_Fragment, { children: [(state.directories.get(directory)?.entries ?? []).map(entry => renderEntry(entry, level)), listingStatus(state.directories.get(directory), directory)] });
@@ -474,7 +485,7 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
         const decoration = decorate?.(entry) ?? undefined;
         const button = _jsxs(Button, { type: "button", variant: selectedPath === entry.path ? 'secondary' : 'ghost', "data-active": selectedPath === entry.path, tabIndex: -1, title: entry.path, disabled: temporary, className: "file-tree-row-button", draggable: draggable || undefined, onClick: () => { focus(entry.path); if (!folder)
                 onOpen?.(entry.path); }, children: [folder ? _jsx(ChevronRight, { "aria-hidden": "true" }) : list && _jsx("span", { className: "file-tree-chevron-space", "aria-hidden": "true" }), _jsx(Icon, { "aria-hidden": "true" }), _jsxs("span", { className: "file-tree-copy", children: [_jsx("span", { className: "file-tree-name", children: name }), list ? folder ? childCount !== undefined && _jsx("span", { "data-file-meta": true, children: childCount }) : _jsxs("span", { "data-file-meta": true, children: [kind.label, " \u00B7 ", fileSize(blob?.size ?? entry.size, locale), parent && ` · ${parent}`] }) : parent && _jsx("span", { className: "file-tree-parent", "data-file-meta": true, children: parent }), decoration?.detail && _jsx("span", { "data-file-detail": true, children: decoration.detail })] })] });
-        const editing = renaming?.path === entry.path && can.rename;
+        const editing = renaming?.path === entry.path && can.rename && entryWritable(entry);
         const mutationFailed = mutation?.state.kind === 'settled';
         const item = _jsxs(SidebarMenuItem, { role: "treeitem", "data-path": entry.path, "data-blob-type": blob?.type, "data-upload-state": status?.kind, "data-mutation-state": mutation ? mutationFailed ? 'failed' : 'pending' : undefined, "data-drop-target": folder && dropTarget === entry.path ? 'true' : undefined, "data-dragging": dragged === entry.path || undefined, "aria-busy": status?.kind === 'pending' || mutation?.state.kind === 'pending' || undefined, ...(folder ? dropHandlers(entry.path) : {}), ...(draggable ? {
                 onDragStart: (event) => {
@@ -507,43 +518,46 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
                                         setRenaming(current => current?.path === entry.path ? undefined : current); } })] }) : folder ? _jsx(CollapsibleTrigger, { render: button }) : button, decoration?.badge && !editing && (() => {
                             const badge = { tone: decoration.badge.tone, children: decoration.badge.label, role: 'note', 'aria-label': `${name}: ${decoration.badge.label}`, title: decoration.badge.label, 'data-file-badge': '', 'data-tone': decoration.badge.tone };
                             return Badge ? _jsx(Badge, { ...badge }) : _jsx("span", { role: badge.role, "aria-label": badge['aria-label'], title: badge.title, "data-file-badge": "", "data-tone": badge.tone, children: badge.children });
-                        })(), (status?.kind === 'pending' || mutation?.state.kind === 'pending') && _jsx(LoaderCircle, { "data-upload-spinner": status ? '' : undefined, "data-mutation-spinner": mutation ? '' : undefined, className: "animate-spin motion-reduce:animate-none", "aria-hidden": "true" }), status?.kind === 'failed' && _jsx(Button, { type: "button", variant: "ghost", "data-upload-retry": true, "aria-label": status.retryLabel, onClick: status.retry, children: status.retryLabel }), mutation && mutationFailed && _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-mutation-dismiss": true, "aria-label": labels.dismiss(entry.path), title: labels.dismiss(entry.path), onClick: () => controller.dismiss(mutation.operationId), children: _jsx(X, { "aria-hidden": "true" }) }), !temporary && !status && !editing && mutation?.state.kind !== 'pending' && (!folder || changeable && (can.rename || can.delete)) && _jsx(FileActions, { Actions: Actions, controller: controller, entry: entry, labels: labels, onOpen: onOpen && !folder ? () => onOpen(entry.path) : undefined, onHistory: history && !folder ? () => setHistoryPath(entry.path) : undefined, onError: setUploadError, onRename: changeable && can.rename && renameable(entry) ? () => startRename(entry.path) : undefined, onMove: changeable && can.rename && Dialog ? () => ask('move', entry.path) : undefined, onDelete: changeable && can.delete ? () => ask('delete', entry.path) : undefined })] }), status?.kind === 'failed' && _jsx("span", { "data-upload-error": true, children: status.reason }), editing && renaming?.error && _jsx("span", { "data-mutation-error": true, role: "alert", children: renaming.error }), mutation && mutationFailed && _jsx("span", { "data-mutation-error": true, children: mutationReason(mutation) }), folder && !state.query && _jsx(CollapsibleContent, { render: _jsx(SidebarMenuSub, { role: "group" }), children: renderEntries(entry.path, level + 1) })] }, entry.path);
+                        })(), (status?.kind === 'pending' || mutation?.state.kind === 'pending') && _jsx(LoaderCircle, { "data-upload-spinner": status ? '' : undefined, "data-mutation-spinner": mutation ? '' : undefined, className: "animate-spin motion-reduce:animate-none", "aria-hidden": "true" }), status?.kind === 'failed' && status.retry && _jsx(Button, { type: "button", variant: "ghost", "data-upload-retry": true, "aria-label": status.retryLabel, onClick: status.retry, children: status.retryLabel }), mutation && mutationFailed && _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-mutation-dismiss": true, "aria-label": labels.dismiss(entry.path), title: labels.dismiss(entry.path), onClick: () => controller.dismiss(mutation.operationId), children: _jsx(X, { "aria-hidden": "true" }) }), !temporary && !status && !editing && mutation?.state.kind !== 'pending' && (!folder || changeable && (can.rename || can.delete)) && _jsx(FileActions, { Actions: Actions, controller: controller, entry: entry, labels: labels, onOpen: onOpen && !folder ? () => onOpen(entry.path) : undefined, onHistory: history && !folder ? () => setHistoryPath(entry.path) : undefined, onError: setUploadError, onRename: changeable && can.rename && renameable(entry) ? () => startRename(entry.path) : undefined, onMove: changeable && can.rename && Dialog ? () => ask('move', entry.path) : undefined, onDelete: changeable && can.delete ? () => ask('delete', entry.path) : undefined })] }), status?.kind === 'failed' && _jsx("span", { "data-upload-error": true, children: status.reason }), editing && renaming?.error && _jsx("span", { "data-mutation-error": true, role: "alert", children: renaming.error }), mutation && mutationFailed && _jsx("span", { "data-mutation-error": true, children: mutationReason(mutation) }), folder && !state.query && _jsx(CollapsibleContent, { render: _jsx(SidebarMenuSub, { role: "group" }), children: renderEntries(entry.path, level + 1) })] }, entry.path);
         return folder ? _jsx(CollapsibleRoot, { render: item, open: state.expanded.has(entry.path), onOpenChange: () => { void controller.toggle(entry.path); } }, entry.path) : item;
     };
     const visibleListing = state.query ? state.search : state.directories.get('');
     const paginated = visibleListing?.kind === 'ready' && visibleListing.cursor !== undefined;
     const rootDrop = dropHandlers('');
     const dialogPath = asking?.path ?? '';
-    const dialogIsFolder = [...state.directories.values(), state.search].some(listing => listing.entries.some(entry => entry.path === dialogPath && entry.kind === 'directory'));
-    const folders = asking?.kind === 'move' ? [...new Set(['', ...[...state.directories.values(), state.search].flatMap(listing => listing.entries.filter(entry => entry.kind === 'directory').map(entry => entry.path))])].filter(folder => folder !== dialogPath && !folder.startsWith(`${dialogPath}/`)).sort() : [];
-    return _jsxs("section", { "data-boring": "file-tree", "data-variant": variant, "data-dropping": dropping || undefined, "data-drop-target": dropTarget === '' ? 'true' : undefined, className: className, "aria-label": labels.region, onDragEnter: event => { rootDrop.onDragEnter?.(event); if (upload && event.dataTransfer.types.includes('Files')) {
+    const dialogIsFolder = isListedFolder(dialogPath);
+    // A dialog opened before its folder became read-only closes, and its confirm checks again.
+    const askingAllowed = asking !== undefined && pathWritable(asking.path, dialogIsFolder);
+    const folders = asking?.kind === 'move' ? [...new Set(['', ...[...state.directories.values(), state.search].flatMap(listing => listing.entries.filter(entry => entry.kind === 'directory').map(entry => entry.path))])].filter(folder => folder !== dialogPath && !folder.startsWith(`${dialogPath}/`) && writableIn(folder)).sort() : [];
+    return _jsxs("section", { "data-boring": "file-tree", "data-variant": variant, "data-dropping": dropping || undefined, "data-drop-target": dropTarget === '' ? 'true' : undefined, className: className, "aria-label": labels.region, onDragEnter: event => { rootDrop.onDragEnter?.(event); if (canUpload && event.dataTransfer.types.includes('Files')) {
             event.preventDefault();
             dragDepth.current++;
             setDropping(true);
-        } }, onDragOver: event => { rootDrop.onDragOver?.(event); if (upload && event.dataTransfer.types.includes('Files')) {
+        } }, onDragOver: event => { rootDrop.onDragOver?.(event); if (canUpload && event.dataTransfer.types.includes('Files')) {
             event.preventDefault();
             event.dataTransfer.dropEffect = 'copy';
-        } }, onDragLeave: event => { rootDrop.onDragLeave?.(event); if (upload && event.dataTransfer.types.includes('Files')) {
+        } }, onDragLeave: event => { rootDrop.onDragLeave?.(event); if (canUpload && event.dataTransfer.types.includes('Files')) {
             dragDepth.current = Math.max(0, dragDepth.current - 1);
             if (!dragDepth.current)
                 setDropping(false);
-        } }, onDrop: event => { rootDrop.onDrop?.(event); if (upload && event.dataTransfer.types.includes('Files')) {
+        } }, onDrop: event => { rootDrop.onDrop?.(event); if (canUpload && event.dataTransfer.types.includes('Files')) {
             event.preventDefault();
             dragDepth.current = 0;
             setDropping(false);
             void uploadFiles(Array.from(event.dataTransfer.files));
-        } }, children: [list && _jsxs("header", { className: "file-tree-header", children: [_jsx("h2", { children: title ?? labels.library }), _jsxs("span", { className: "file-tree-count", "aria-label": labels.shownItems(rows.length), children: [rows.length, paginated ? '+' : ''] }), upload && uploadButton, onClose && _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-file-close": true, "aria-label": labels.close, onClick: onClose, children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs("div", { className: "file-tree-toolbar", children: [_jsxs("div", { className: "file-tree-search", children: [list && _jsx(Search, { "aria-hidden": "true" }), _jsx(Input, { type: "search", "aria-label": labels.search, placeholder: labels.searchPlaceholder, value: state.query, onChange: event => { void controller.search(event.currentTarget.value); } })] }), refresh && _jsx(Button, { type: "button", variant: "ghost", "aria-label": labels.refresh, onClick: () => { void (state.query ? controller.search(state.query) : controller.refresh()); }, children: labels.refresh }), !list && upload && uploadButton] }), upload && _jsx(Input, { ref: fileInput, "aria-label": labels.uploadFiles, type: "file", multiple: true, onChange: event => {
+        } }, children: [list && _jsxs("header", { className: "file-tree-header", children: [_jsx("h2", { children: title ?? labels.library }), _jsxs("span", { className: "file-tree-count", "aria-label": labels.shownItems(rows.length), children: [rows.length, paginated ? '+' : ''] }), canUpload && uploadButton, onClose && _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-file-close": true, "aria-label": labels.close, onClick: onClose, children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs("div", { className: "file-tree-toolbar", children: [_jsxs("div", { className: "file-tree-search", children: [list && _jsx(Search, { "aria-hidden": "true" }), _jsx(Input, { type: "search", "aria-label": labels.search, placeholder: labels.searchPlaceholder, value: state.query, onChange: event => { void controller.search(event.currentTarget.value); } })] }), refresh && _jsx(Button, { type: "button", variant: "ghost", "aria-label": labels.refresh, onClick: () => { void (state.query ? controller.search(state.query) : controller.refresh()); }, children: labels.refresh }), !list && canUpload && uploadButton] }), canUpload && _jsx(Input, { ref: fileInput, "aria-label": labels.uploadFiles, type: "file", multiple: true, onChange: event => {
                     const files = Array.from(event.currentTarget.files ?? []);
                     event.currentTarget.value = '';
                     void uploadFiles(files);
                 } }), dropping && _jsx("div", { className: "file-tree-drop", role: "status", children: _jsx(Empty, { icon: _jsx(Upload, { "aria-hidden": "true" }), title: labels.dropFiles }) }), uploadError && _jsx("p", { role: "alert", children: uploadError }), blobUploads.size > 0 && _jsx("ul", { "aria-label": labels.uploads, className: "file-tree-blob-uploads", children: [...blobUploads].map(([key, item]) => {
                     const percent = item.progress && item.progress.total > 0 ? Math.min(100, Math.round(item.progress.loaded / item.progress.total * 100)) : null;
                     return _jsxs("li", { "data-blob-upload": item.name, "data-progress": percent ?? undefined, className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: item.name }), Progress ? _jsx("span", { className: "w-24 shrink-0", children: _jsx(Progress, { value: percent, "aria-label": labels.uploadProgress(item.name) }) }) : _jsx("span", { role: "status", children: percent === null ? labels.uploading : `${percent}%` }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-blob-upload-cancel": true, "aria-label": labels.cancelUpload(item.name), title: labels.cancelUpload(item.name), onClick: () => item.abort.abort(), children: _jsx(X, { "aria-hidden": "true" }) })] }, key);
-                }) }), _jsxs(SidebarMenu, { ref: tree, role: "tree", "aria-label": labels.tree, className: "file-tree-menu", children: [state.query ? _jsxs(_Fragment, { children: [state.search.entries.map(entry => renderEntry(entry, 1)), listingStatus(state.search, '', true)] }) : renderEntries('', 1), temporaryEntries.map(entry => renderEntry(entry, 1))] }), _jsxs("ul", { "aria-label": labels.uploads, "aria-live": "polite", "aria-relevant": "additions text", className: "file-tree-announcements", children: [state.uploads.map(upload => _jsxs("li", { "data-operation": upload.operationId, children: [upload.path, ": ", upload.state.kind === 'pending' ? labels.uploading : upload.state.result.kind === 'committed' ? labels.saved : upload.state.result.reason] }, upload.operationId)), [...localFailures].map(([path, failure]) => _jsxs("li", { children: [path, ": ", failure.reason] }, path)), state.mutations.map(item => _jsxs("li", { "data-operation": item.operationId, children: [item.path, ": ", mutationReason(item)] }, item.operationId))] }), Dialog && _jsx(Dialog, { open: asking !== undefined, onOpenChange: open => { if (!open)
+                }) }), _jsxs(SidebarMenu, { ref: tree, role: "tree", "aria-label": labels.tree, className: "file-tree-menu", children: [state.query ? _jsxs(_Fragment, { children: [state.search.entries.map(entry => renderEntry(entry, 1)), listingStatus(state.search, '', true)] }) : renderEntries('', 1), temporaryEntries.map(entry => renderEntry(entry, 1))] }), _jsxs("ul", { "aria-label": labels.uploads, "aria-live": "polite", "aria-relevant": "additions text", className: "file-tree-announcements", children: [state.uploads.map(upload => _jsxs("li", { "data-operation": upload.operationId, children: [upload.path, ": ", upload.state.kind === 'pending' ? labels.uploading : upload.state.result.kind === 'committed' ? labels.saved : upload.state.result.reason] }, upload.operationId)), [...localFailures].map(([path, failure]) => _jsxs("li", { children: [path, ": ", failure.reason] }, path)), state.mutations.map(item => _jsxs("li", { "data-operation": item.operationId, children: [item.path, ": ", mutationReason(item)] }, item.operationId))] }), Dialog && _jsx(Dialog, { open: askingAllowed, onOpenChange: open => { if (!open)
                     closeAsking(); }, title: asking?.kind === 'move' ? labels.moveTitle(baseName(dialogPath)) : labels.deleteTitle(baseName(dialogPath)), description: asking?.kind === 'move' ? labels.moveDescription : dialogIsFolder ? labels.deleteFolderDescription : labels.deleteDescription, footer: asking?.kind === 'delete' ? _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "outline", "data-confirm": "cancel", onClick: closeAsking, children: labels.cancel }), _jsxs(Button, { type: "button", variant: "destructive", "data-confirm": "delete", onClick: () => {
                                 const path = dialogPath;
                                 setAsking(undefined);
-                                void controller.remove(path).then(report).catch(refused(path));
+                                if (pathWritable(path, dialogIsFolder))
+                                    void controller.remove(path).then(report).catch(refused(path));
                             }, children: [_jsx(Trash2, { "aria-hidden": "true" }), labels.delete] })] }) : _jsx(Button, { type: "button", variant: "outline", "data-confirm": "cancel", onClick: closeAsking, children: labels.cancel }), children: asking?.kind === 'move' && _jsx("ul", { className: "file-tree-destinations", "aria-label": labels.moveTitle(baseName(dialogPath)), children: folders.map(folder => _jsx("li", { children: _jsxs(Button, { type: "button", variant: "ghost", "data-destination": folder, disabled: folder === parentPath(dialogPath), onClick: () => moveTo(dialogPath, folder), children: [folder ? _jsx(Folder, { "aria-hidden": "true" }) : _jsx(FolderOpen, { "aria-hidden": "true" }), _jsx("span", { className: "file-tree-name", children: folder || labels.root })] }) }, folder)) }) }), history && historyPath !== undefined && _jsx(FileHistory, { components: components, locale: locale, controller: controller, path: historyPath, labels: labels, reload: historyKey, onClose: () => setHistoryPath(undefined) }, historyPath)] });
 }
 /** The message of a host refusal `{ error: { code, message } }` (or an Error's), if any. */

package/dist/file-tree.d.ts

@@ -1,16 +1,23 @@
 import type { PublicationResult, ResourceRef } from '@hachej/boring-files';
 import type { FileEntry, RevisionProvider, SavedRevision } from '@hachej/boring-files/revision';
+/**
+ * `writable`: the host's word on writing in this folder (`FilePage.writable`); `false` also when the host refused the listing (403). A
+ * reload or a failed read keeps the last word, so a read-only folder never regains its controls while it is read again.
+ */
 export type FileListing = {
     readonly kind: 'loading';
     readonly entries: readonly FileEntry[];
+    readonly writable?: boolean;
 } | {
     readonly kind: 'ready';
     readonly entries: readonly FileEntry[];
     readonly cursor?: string;
+    readonly writable?: boolean;
 } | {
     readonly kind: 'error';
     readonly entries: readonly FileEntry[];
     readonly reason: string;
+    readonly writable?: boolean;
 };
 export interface FileUpload {
     readonly operationId: string;
@@ -84,6 +91,11 @@ export interface FileTreeController {
     readonly dismiss: (operationId: string) => void;
     readonly dispose: () => void;
 }
+/**
+ * Whether the host lets the caller write in `folder` (`''` is the root): the flag of its own listing, or of the nearest listed folder
+ * above it while it is not listed. True when no listing says otherwise, so a host that sends no flag keeps every control.
+ */
+export declare function folderWritable(directories: ReadonlyMap<string, FileListing>, folder: string): boolean;
 /** Browsing state belongs to one borrowed binding. Disposal fences late results; it never closes the workspace. */
 export declare function createFileTreeController({ revisionProvider }: {
     readonly revisionProvider: RevisionProvider;

package/dist/file-tree.js

@@ -1,6 +1,31 @@
 import { parsePublicationResult, PublicationNotDispatchedError, publicationDigest, publicationSnapshot } from '@hachej/boring-files/publication';
 import { randomUUID } from '@hachej/boring-files/platform';
 const message = (error) => error instanceof Error ? error.message : 'Files could not be loaded';
+/**
+ * What a folder listing's failure means for the tree, read by shape (a hand-built binding may throw a `RevisionError` from another copy
+ * of the package): the host's 403 makes the folder read-only, its 404 makes it gone. A `denied` without that 403 (a 409 binding
+ * mismatch, an answer for another workspace) stays an error.
+ */
+function refusal(error) {
+    if (!(error instanceof Error) || error.name !== 'RevisionError' || !('kind' in error))
+        return undefined;
+    if (error.kind === 'missing')
+        return 'gone';
+    return error.kind === 'denied' && 'status' in error && error.status === 403 ? 'read-only' : undefined;
+}
+/**
+ * Whether the host lets the caller write in `folder` (`''` is the root): the flag of its own listing, or of the nearest listed folder
+ * above it while it is not listed. True when no listing says otherwise, so a host that sends no flag keeps every control.
+ */
+export function folderWritable(directories, folder) {
+    for (let path = folder;; path = path.slice(0, Math.max(0, path.lastIndexOf('/')))) {
+        const listing = directories.get(path);
+        if (listing?.writable !== undefined)
+            return listing.writable;
+        if (!path)
+            return true;
+    }
+}
 const empty = { kind: 'ready', entries: [] };
 const parentOf = (path) => path.slice(0, Math.max(0, path.lastIndexOf('/')));
 const nameOf = (path) => path.slice(path.lastIndexOf('/') + 1);
@@ -49,18 +74,30 @@ export function createFileTreeController({ revisionProvider }) {
         const signal = AbortSignal.any([abort.signal, lifetime.signal]);
         const query = state.query;
         const set = (value) => search ? update({ ...state, search: value }) : directory(path, value);
-        set({ kind: 'loading', entries: previous.entries });
+        const known = search || previous.writable === undefined ? {} : { writable: previous.writable };
+        set({ kind: 'loading', entries: previous.entries, ...known });
         try {
             const page = await (search ? revisionProvider.search({ query, ...(cursor ? { cursor } : {}) }, signal)
                 : revisionProvider.list({ directory: path, ...(cursor ? { cursor } : {}) }, signal));
             if (signal.aborted || loads.get(key) !== abort)
                 return;
             const entries = append ? [...new Map([...previous.entries, ...page.entries].map(entry => [entry.path, entry])).values()] : [...page.entries];
-            set({ kind: 'ready', entries, ...(page.cursor === undefined ? {} : { cursor: page.cursor }) });
+            // A next page without the flag keeps the first page's word; a fresh read takes the host's word as it is now.
+            const writable = search ? {} : typeof page.writable === 'boolean' ? { writable: page.writable } : append ? known : {};
+            set({ kind: 'ready', entries, ...(page.cursor === undefined ? {} : { cursor: page.cursor }), ...writable });
         }
         catch (error) {
-            if (!signal.aborted && loads.get(key) === abort)
-                set({ kind: 'error', entries: previous.entries, reason: message(error) });
+            if (signal.aborted || loads.get(key) !== abort)
+                return;
+            const kind = search || !path ? undefined : refusal(error);
+            // A folder the host refuses to list (403) is shown read-only and empty, with no error; one it says is not there (404) leaves the
+            // tree: its row, its listing and its open state. The root keeps its error, the workspace itself being out of reach.
+            if (kind === 'read-only')
+                set({ kind: 'ready', entries: [], writable: false });
+            else if (kind === 'gone')
+                gone(path);
+            else
+                set({ kind: 'error', entries: previous.entries, reason: message(error), ...known });
         }
         finally {
             if (loads.get(key) === abort)
@@ -68,6 +105,21 @@ export function createFileTreeController({ revisionProvider }) {
         }
     }
     const refresh = (path = '') => load(path, false);
+    /** A folder the host says is not there: removed with everything under it (listings, pending reads, search rows) and from its parent. */
+    function gone(path) {
+        const under = (item) => item === path || item.startsWith(`${path}/`);
+        for (const [key, pending] of loads)
+            if (key.startsWith('directory:') && under(key.slice('directory:'.length))) {
+                pending.abort();
+                loads.delete(key);
+            }
+        const directories = new Map([...state.directories].filter(([folder]) => !under(folder)));
+        const parent = directories.get(parentOf(path));
+        if (parent)
+            directories.set(parentOf(path), { ...parent, entries: parent.entries.filter(entry => entry.path !== path) });
+        const search = state.search.entries.some(entry => under(entry.path)) ? { ...state.search, entries: state.search.entries.filter(entry => !under(entry.path)) } : state.search;
+        update({ ...state, directories, search, expanded: new Set([...state.expanded].filter(folder => !under(folder))) });
+    }
     function uploadState(operationId, result) {
         const attempt = attempts.get(operationId);
         if (!attempt)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.4.51",
+  "version": "0.4.53",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -154,7 +154,7 @@
     }
   },
   "peerDependencies": {
-    "@hachej/boring-files": "^0.4.51",
+    "@hachej/boring-files": "^0.4.53",
     "@earendil-works/pi-durable": "~1.4.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/r/agent-target.json

@@ -4,15 +4,15 @@
   "title": "Point and dictate on app data",
   "description": "Tap explicitly marked JSON app context, dictate once and show the same app agent’s native reply without opening chat. Host-controlled presentation; no feedback report or second controller.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.51",
-    "@hachej/boring-feedback@^0.4.51",
+    "@hachej/boring-ui-kit@^0.4.53",
+    "@hachej/boring-feedback@^0.4.53",
     "@earendil-works/pi-durable@~1.4.0",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/pi-chat.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json"
   ],
   "files": [
     {

package/r/app-shell.json

@@ -4,21 +4,21 @@
   "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.51",
-    "@hachej/boring-ui-kit@^0.4.51",
+    "@hachej/boring-feedback@^0.4.53",
+    "@hachej/boring-ui-kit@^0.4.53",
     "@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.51/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/pi-chat-plugins.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/pi-chat-voice.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/dock.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/feedback.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.51/r/button.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-plugins.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/pi-chat-voice.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/dock.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/feedback.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.53/r/button.json"
   ],
   "files": [
     {
@@ -59,7 +59,7 @@
     },
     {
       "path": "registry/app-shell/app-shell.tsx",
-      "content": "'use client';\n\n// The app shell. Layout A (`screen`): one screen at a time. Compact: bottom tabs (at most four; more give three plus « Plus »), or with `compactNav=\"sheet\"` no bar and the sidebar as a sheet from the header. Expanded:\n// the shadcn sidebar (icon rail plus NavUser). Layout B (`workspace`): the same, with a screen made of a `ListDetail`; the sidebar starts\n// as the icon rail because the list pane is the wide navigation. Layout C (`chat`): the one nav item renders the app's `AgentWorkspace`,\n// untouched, below the same sidebar, account menu and header; there is no shell agent (the page is the chat). The shell imports nothing from pi-app: a layout C app installs the `pi-app` item itself. One header per screen\n// (`useScreenHeader`). The AgentLayer is mounted once, here.\n// Host concern: Pi has no layout; the screen on show travels as the agent's context (useAgentContext -> createPromptContext).\nimport { useEffect, useState, useSyncExternalStore } from 'react';\nimport { afterStacksBack } from '../utils/back';\nimport type { ReactNode } from 'react';\nimport { SidebarProvider } from '@/components/ui/sidebar';\nimport { Button } from '@/components/ui/button';\nimport { AccountAvatar, AccountChoices } from './account';\nimport type { AccountSpec } from './account';\nimport { AgentDockLayout, AgentLayer, AgentLayerProvider } from './agent-layer';\nimport type { AgentSpec } from './agent-layer';\nimport { NoPanelLayout } from './shell-panel';\nimport type { ShellPanel } from './shell-panel';\nimport { ScreenActiveContext, useAgentContext } from './agent-context';\nimport { useIsCompact } from './compact';\nimport { HeaderProvider, ScreenHeader } from './header';\nimport { AppSidebar, TabBar } from './nav';\nimport type { NavItem } from './nav';\nimport { AppSheet } from './app-sheet';\nimport { appShellText } from './text';\nimport { ScreenHeaderSlotContext } from '../utils/screen-header-slot';\nimport type { AppShellLocale, AppShellText } from './text';\n\nexport interface AppShellProps {\n  /** A `screen` (tabs), B `workspace` (list and detail), C `chat` (the app's `AgentWorkspace`; no `agent`). */\n  readonly layout: 'screen' | 'workspace' | 'chat';\n  readonly title: string;\n  readonly nav: readonly NavItem[];\n  /** Wide-screen navigation: `hover` reveals labels over the page on hover or keyboard focus. Default: `icon` (the native sidebar toggle). */\n  readonly rail?: 'icon' | 'hover';\n  /** Phone navigation: `tabs` (default) is the bottom tab bar; `sheet` has no bar, the header's leading button opens the sidebar (the nav items, a screen's `sidebar` content and the account) as a sheet. */\n  readonly compactNav?: 'tabs' | 'sheet';\n  readonly agent?: AgentSpec;\n  /** Consume agent/open/input launch parameters on mount (default). `false` leaves the URL and layer untouched. */\n  readonly agentLink?: false;\n  /** A panel beside the app, opened from the account menu. The product manager is `pmPanel` from the Factory's `platform-ui/pm-panel`. */\n  readonly panel?: ShellPanel;\n  readonly account?: AccountSpec;\n  /** The language of the shell's own words and the layer's (« Se déconnecter », « Plus », « Ouvrir l’assistant »…). The agent's `chatProps.locale` wins when it sets one; else this; else English. */\n  readonly locale?: AppShellLocale;\n  /** The app's router owns the URL; the shell only reports the choice. */\n  readonly route: { readonly id: string; readonly onChange: (id: string) => void };\n  /**\n   * `false`: no backdrop blur behind dialogs, sheets and drawers (blurring the page costs frames on slow phones), only their dim.\n   * Default `true`. Overlays live in a portal, so the shell marks `<html data-overlay-blur=\"off\">` while it is mounted; the app's\n   * own CSS drops the blur there (the rule is in registry/README.md: an item's CSS stays inside `.app-shell`).\n   */\n  readonly overlayBlur?: boolean;\n}\n\n/** `<html data-overlay-blur=\"off\">` while a shell asks for it. */\nfunction useOverlayBlur(blur: boolean) {\n  useEffect(() => {\n    if (blur || typeof document === 'undefined') return;\n    const root = document.documentElement;\n    root.dataset.overlayBlur = 'off';\n    return () => { delete root.dataset.overlayBlur; };\n  }, [blur]);\n}\n\n/** Registers what is on show for the agent. A screen's own `useAgentContext` is mounted later and wins. */\nfunction ShellContext({ name }: { readonly name: string }): null {\n  useAgentContext({ name, params: {} });\n  return null;\n}\n\nfunction ScreenBody({ item }: { readonly item: NavItem }): ReactNode { return item.render(); }\n\n/** Every screen stays mounted; the ones not on show are `hidden` and do not register a header or a context. */\nfunction Screens({ items, activeId, scrolls, slot }: { readonly items: readonly NavItem[]; readonly activeId: string; readonly scrolls: boolean; readonly slot: HTMLElement | null }) {\n  return <div className=\"relative min-h-0 flex-1\">\n    {items.map(item => <ScreenActiveContext.Provider key={item.id} value={item.id === activeId}><ScreenHeaderSlotContext.Provider value={item.id === activeId ? slot : null}>\n      <div hidden={item.id !== activeId} data-testid={`screen-${item.id}`} className={scrolls ? 'h-full overflow-y-auto overscroll-contain' : 'h-full overflow-hidden'}><ScreenBody item={item} /></div>\n    </ScreenHeaderSlotContext.Provider></ScreenActiveContext.Provider>)}\n  </div>;\n}\n\nfunction Shell({ compactNav, layout, rail, title, nav, agent, panel, account, route, text }: { readonly compactNav: NonNullable<AppShellProps['compactNav']>; readonly rail: NonNullable<AppShellProps['rail']>; readonly layout: AppShellProps['layout']; readonly title: string; readonly nav: readonly NavItem[]; readonly agent: AgentSpec | undefined; readonly panel: ShellPanel | undefined; readonly account: AccountSpec | undefined; readonly route: AppShellProps['route']; readonly text: AppShellText }) {\n  const improve = panel ? panel.label ?? text.improve : undefined;\n  const Layout = panel?.Layout ?? NoPanelLayout;\n  const compact = useIsCompact();\n  const sheet = compact && compactNav === 'sheet';\n  const [accountOpen, setAccountOpen] = useState(false);\n  // The header's slot for the screen on show (an embedded AgentWorkspace puts its bar's controls there).\n  const [slot, setSlot] = useState<HTMLElement | null>(null);\n  const active = nav.find(item => item.id === route.id) ?? nav[0];\n  if (!active) return null;\n  // A nav choice waits for an open detail's stack entry to go back, so the app's router can replace the URL without that Back restoring\n  // the detail's. Choosing the screen already on show changes nothing and keeps the detail.\n  const choose = (id: string) => { if (id === active.id) route.onChange(id); else afterStacksBack(() => route.onChange(id)); };\n  const hasAccount = Boolean(account) || improve;\n  const avatar = hasAccount ? <>\n    <Button variant=\"ghost\" size=\"icon\" data-testid=\"account-button\" aria-label={account?.name ?? text.account} title={account?.name ?? text.account} onClick={() => setAccountOpen(true)}><AccountAvatar account={account} /></Button>\n    <AppSheet open={accountOpen} onOpenChange={setAccountOpen} title={text.account}>\n      <AccountChoices account={account} improve={improve} text={text} done={() => setAccountOpen(false)} />\n    </AppSheet>\n  </> : null;\n  // The structure is the same compact or expanded, so a resize never remounts a screen.\n  return <SidebarProvider data-testid=\"app-shell\" defaultOpen={rail !== 'hover' && layout === 'screen'} className=\"app-shell h-dvh min-h-0 overflow-hidden\">\n    {(!compact || sheet) && <AppSidebar rail={sheet ? 'icon' : rail} title={title} items={nav} activeId={active.id} onChange={choose} agent={agent} account={account} improve={improve} text={text} />}\n    <AgentDockLayout>\n      <div data-slot=\"sidebar-inset\" className=\"relative flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden bg-background\">\n      <Layout screen={active.label} navigation={compact && !sheet ? <TabBar items={nav} activeId={active.id} onChange={choose} text={text} /> : undefined}>\n        <ShellContext name={active.label} />\n        <ScreenHeader fallbackTitle={active.label} compact={compact} avatar={avatar} menu={sheet} text={text} slotRef={setSlot} />\n        <Screens items={nav} activeId={active.id} scrolls={layout === 'screen'} slot={slot} />\n      </Layout>\n      </div>\n    </AgentDockLayout>\n    <AgentLayer />\n  </SidebarProvider>;\n}\n\nconst never = () => () => {};\n\nexport function AppShell(props: AppShellProps) {\n  const { layout, rail = 'icon', compactNav = 'tabs', agent, panel, title, nav, account, route } = props;\n  if (layout === 'chat' && agent) throw new Error('AppShell layout \"chat\" takes no `agent`: the page is the chat (use `panel` for the product manager)');\n  const text = appShellText(agent?.chatProps?.locale ?? (panel?.locale as AppShellLocale | undefined) ?? props.locale);\n  useOverlayBlur(props.overlayBlur ?? true);\n  const alone = useSyncExternalStore(never, () => panel?.page?.matches() ?? false, () => false);\n  if (alone && panel?.page) return <panel.page.Page config={panel.config} appName={title} locale={props.locale} />;\n  return <AgentLayerProvider agent={agent} panel={panel} locale={props.locale} agentLink={props.agentLink} appName={props.title}>\n    <HeaderProvider><Shell compactNav={compactNav} layout={layout} rail={rail} title={title} nav={nav} agent={agent} account={account} route={route} panel={panel} text={text} /></HeaderProvider>\n  </AgentLayerProvider>;\n}\n",
+      "content": "'use client';\n\n// The app shell. Layout A (`screen`): one screen at a time. Compact: bottom tabs (at most four; more give three plus « Plus »), or with `compactNav=\"sheet\"` no bar and the sidebar as a sheet from the header. Expanded:\n// the shadcn sidebar (icon rail plus NavUser). Layout B (`workspace`): the same, with a screen made of a `ListDetail`; the sidebar starts\n// as the icon rail because the list pane is the wide navigation. Layout C (`chat`): the one nav item renders the app's `AgentWorkspace`,\n// untouched, below the same sidebar, account menu and header; there is no shell agent (the page is the chat). The shell imports nothing from pi-app: a layout C app installs the `pi-app` item itself. One header per screen\n// (`useScreenHeader`). The AgentLayer is mounted once, here.\n// Host concern: Pi has no layout; the screen on show travels as the agent's context (useAgentContext -> createPromptContext).\nimport { useEffect, useState, useSyncExternalStore } from 'react';\nimport { afterStacksBack } from '../utils/back';\nimport type { ReactNode } from 'react';\nimport { SidebarProvider } from '@/components/ui/sidebar';\nimport { Button } from '@/components/ui/button';\nimport { AccountAvatar, AccountChoices } from './account';\nimport type { AccountSpec } from './account';\nimport { AgentDockLayout, AgentLayer, AgentLayerProvider } from './agent-layer';\nimport type { AgentSpec } from './agent-layer';\nimport { NoPanelLayout } from './shell-panel';\nimport type { ShellPanel } from './shell-panel';\nimport { ScreenActiveContext, useAgentContext } from './agent-context';\nimport { useIsCompact } from './compact';\nimport { HeaderProvider, ScreenHeader } from './header';\nimport { AppSidebar, TabBar } from './nav';\nimport type { NavItem } from './nav';\nimport { AppSheet } from './app-sheet';\nimport { appShellText } from './text';\nimport { ScreenHeaderSlotContext } from '../utils/screen-header-slot';\nimport type { AppShellLocale, AppShellText } from './text';\n\nexport interface AppShellProps {\n  /** A `screen` (tabs), B `workspace` (list and detail), C `chat` (the app's `AgentWorkspace`; no `agent`). */\n  readonly layout: 'screen' | 'workspace' | 'chat';\n  readonly title: string;\n  readonly nav: readonly NavItem[];\n  /** Wide-screen navigation: `hover` reveals labels over the page on hover or keyboard focus. Default: `icon` (the native sidebar toggle). */\n  readonly rail?: 'icon' | 'hover';\n  /** Phone navigation: `tabs` (default) is the bottom tab bar; `sheet` has no bar, the header's leading button opens the sidebar (the nav items, a screen's `sidebar` content and the account) as a sheet. */\n  readonly compactNav?: 'tabs' | 'sheet';\n  readonly agent?: AgentSpec;\n  /** Consume agent/open/input launch parameters on mount (default). `false` leaves the URL and layer untouched. */\n  readonly agentLink?: false;\n  /** A panel beside the app, opened from the account menu. The product manager is `pmPanel` from the Factory's `platform-ui/pm-panel`. */\n  readonly panel?: ShellPanel;\n  readonly account?: AccountSpec;\n  /** The language of the shell's own words and the layer's (« Se déconnecter », « Plus », « Ouvrir l’assistant »…). The agent's `chatProps.locale` wins when it sets one; else this; else English. */\n  readonly locale?: AppShellLocale;\n  /** The app's router owns the URL; the shell only reports the choice. */\n  readonly route: { readonly id: string; readonly onChange: (id: string) => void };\n  /**\n   * `false`: no backdrop blur behind dialogs, sheets and drawers (blurring the page costs frames on slow phones), only their dim.\n   * Default `true`. Overlays live in a portal, so the shell marks `<html data-overlay-blur=\"off\">` while it is mounted; the app's\n   * own CSS drops the blur there (the rule is in registry/README.md: an item's CSS stays inside `.app-shell`).\n   */\n  readonly overlayBlur?: boolean;\n}\n\n/** `<html data-overlay-blur=\"off\">` while a shell asks for it. */\nfunction useOverlayBlur(blur: boolean) {\n  useEffect(() => {\n    if (blur || typeof document === 'undefined') return;\n    const root = document.documentElement;\n    root.dataset.overlayBlur = 'off';\n    return () => { delete root.dataset.overlayBlur; };\n  }, [blur]);\n}\n\n/** Registers what is on show for the agent. A screen's own `useAgentContext` is mounted later and wins. */\nfunction ShellContext({ name }: { readonly name: string }): null {\n  useAgentContext({ name, params: {} });\n  return null;\n}\n\nfunction ScreenBody({ item }: { readonly item: NavItem }): ReactNode { return item.render(); }\n\n/** Every screen stays mounted; the ones not on show are `hidden` and do not register a header or a context. */\nfunction Screens({ items, activeId, scrolls, slot }: { readonly items: readonly NavItem[]; readonly activeId: string; readonly scrolls: boolean; readonly slot: HTMLElement | null }) {\n  return <div className=\"relative min-h-0 flex-1\">\n    {items.map(item => <ScreenActiveContext.Provider key={item.id} value={item.id === activeId}><ScreenHeaderSlotContext.Provider value={item.id === activeId ? slot : null}>\n      <div hidden={item.id !== activeId} data-testid={`screen-${item.id}`} className={scrolls ? 'h-full overflow-y-auto overscroll-contain' : 'h-full overflow-hidden'}><ScreenBody item={item} /></div>\n    </ScreenHeaderSlotContext.Provider></ScreenActiveContext.Provider>)}\n  </div>;\n}\n\nfunction Shell({ compactNav, layout, rail, title, nav, agent, panel, account, route, text }: { readonly compactNav: NonNullable<AppShellProps['compactNav']>; readonly rail: NonNullable<AppShellProps['rail']>; readonly layout: AppShellProps['layout']; readonly title: string; readonly nav: readonly NavItem[]; readonly agent: AgentSpec | undefined; readonly panel: ShellPanel | undefined; readonly account: AccountSpec | undefined; readonly route: AppShellProps['route']; readonly text: AppShellText }) {\n  const improve = panel && panel.menu !== false ? panel.label ?? text.improve : undefined;\n  const Layout = panel?.Layout ?? NoPanelLayout;\n  const compact = useIsCompact();\n  const sheet = compact && compactNav === 'sheet';\n  const [accountOpen, setAccountOpen] = useState(false);\n  // The header's slot for the screen on show (an embedded AgentWorkspace puts its bar's controls there).\n  const [slot, setSlot] = useState<HTMLElement | null>(null);\n  const active = nav.find(item => item.id === route.id) ?? nav[0];\n  if (!active) return null;\n  // A nav choice waits for an open detail's stack entry to go back, so the app's router can replace the URL without that Back restoring\n  // the detail's. Choosing the screen already on show changes nothing and keeps the detail.\n  const choose = (id: string) => { if (id === active.id) route.onChange(id); else afterStacksBack(() => route.onChange(id)); };\n  const hasAccount = Boolean(account) || improve;\n  const avatar = hasAccount ? <>\n    <Button variant=\"ghost\" size=\"icon\" data-testid=\"account-button\" aria-label={account?.name ?? text.account} title={account?.name ?? text.account} onClick={() => setAccountOpen(true)}><AccountAvatar account={account} /></Button>\n    <AppSheet open={accountOpen} onOpenChange={setAccountOpen} title={text.account}>\n      <AccountChoices account={account} improve={improve} text={text} done={() => setAccountOpen(false)} />\n    </AppSheet>\n  </> : null;\n  // The structure is the same compact or expanded, so a resize never remounts a screen.\n  return <SidebarProvider data-testid=\"app-shell\" defaultOpen={rail !== 'hover' && layout === 'screen'} className=\"app-shell h-dvh min-h-0 overflow-hidden\">\n    {(!compact || sheet) && <AppSidebar rail={sheet ? 'icon' : rail} title={title} items={nav} activeId={active.id} onChange={choose} agent={agent} account={account} improve={improve} text={text} />}\n    <AgentDockLayout>\n      <div data-slot=\"sidebar-inset\" className=\"relative flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden bg-background\">\n      <Layout screen={active.label} navigation={compact && !sheet ? <TabBar items={nav} activeId={active.id} onChange={choose} text={text} /> : undefined}>\n        <ShellContext name={active.label} />\n        <ScreenHeader fallbackTitle={active.label} compact={compact} avatar={avatar} menu={sheet} text={text} slotRef={setSlot} />\n        <Screens items={nav} activeId={active.id} scrolls={layout === 'screen'} slot={slot} />\n      </Layout>\n      </div>\n    </AgentDockLayout>\n    <AgentLayer />\n  </SidebarProvider>;\n}\n\nconst never = () => () => {};\n\nexport function AppShell(props: AppShellProps) {\n  const { layout, rail = 'icon', compactNav = 'tabs', agent, panel, title, nav, account, route } = props;\n  if (layout === 'chat' && agent) throw new Error('AppShell layout \"chat\" takes no `agent`: the page is the chat (use `panel` for the product manager)');\n  const text = appShellText(agent?.chatProps?.locale ?? (panel?.locale as AppShellLocale | undefined) ?? props.locale);\n  useOverlayBlur(props.overlayBlur ?? true);\n  const alone = useSyncExternalStore(never, () => panel?.page?.matches() ?? false, () => false);\n  if (alone && panel?.page) return <panel.page.Page config={panel.config} appName={title} locale={props.locale} />;\n  return <AgentLayerProvider agent={agent} panel={panel} locale={props.locale} agentLink={props.agentLink} appName={props.title}>\n    <HeaderProvider><Shell compactNav={compactNav} layout={layout} rail={rail} title={title} nav={nav} agent={agent} account={account} route={route} panel={panel} text={text} /></HeaderProvider>\n  </AgentLayerProvider>;\n}\n",
       "type": "registry:component",
       "target": "components/app-shell/app-shell.tsx"
     },
@@ -107,7 +107,7 @@
     },
     {
       "path": "registry/app-shell/shell-panel.tsx",
-      "content": "'use client';\n\n// The shell's panel place: a second agent or tool beside the app, opened from the account menu. The shell knows only this shape, so an app\n// plugs in what it wants (the product manager is `pmPanel` from the Factory's `platform-ui/pm-panel`) and an app without one installs nothing more.\nimport type { ComponentType, ReactNode } from 'react';\n\nexport interface ShellPanelProviderProps {\n  /** `ShellPanel.config`, as the panel wrote it. */\n  readonly config: unknown;\n  readonly open: boolean;\n  readonly close: () => void;\n  readonly appName?: string | undefined;\n  readonly locale?: string | undefined;\n  /** The panel took the whole screen, or gave it back; `collapse` is what Back runs. */\n  readonly onFull?: ((full: boolean, collapse: () => void) => void) | undefined;\n  readonly children: ReactNode;\n}\n\nexport interface ShellPanelLayoutProps {\n  readonly children: ReactNode;\n  /** The phone tab bar. The layout hides it while the panel covers the page. */\n  readonly navigation?: ReactNode;\n  /** The label of the screen on show. */\n  readonly screen?: string;\n}\n\nexport interface ShellPanelPageProps {\n  readonly config: unknown;\n  readonly appName: string;\n  readonly locale?: string | undefined;\n}\n\n/** Keep `Provider`, `Layout` and `page.Page` the same across renders: a new component remounts the app. */\nexport interface ShellPanel {\n  /** Passed back to `Provider` and `page.Page`. */\n  readonly config: unknown;\n  /** Wraps the whole shell, so the panel's state outlives its closing. */\n  readonly Provider: ComponentType<ShellPanelProviderProps>;\n  /** Wraps the screen and draws the panel beside it. */\n  readonly Layout: ComponentType<ShellPanelLayoutProps>;\n  /** The account menu's row and the layer's title. Default: the shell's « Améliorer l'app ». */\n  readonly label?: string;\n  /** The panel's language, for the shell's own words when the app has no agent to say it. */\n  readonly locale?: string | undefined;\n  /** Changes when the panel's conversation changes; a launch link's focus waits on it. */\n  readonly identity?: unknown;\n  /** The address that shows only the panel, without the shell. */\n  readonly page?: { readonly matches: () => boolean; readonly Page: ComponentType<ShellPanelPageProps> };\n}\n\n/** The screen when the app has no panel. */\nexport function NoPanelLayout({ children, navigation }: ShellPanelLayoutProps) {\n  return <div className=\"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n    <div className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">{children}</div>\n    <div className=\"shrink-0 md:hidden\">{navigation}</div>\n  </div>;\n}\n",
+      "content": "'use client';\n\n// The shell's panel place: a second agent or tool beside the app, opened from the account menu. The shell knows only this shape, so an app\n// plugs in what it wants (the product manager is `pmPanel` from the Factory's `platform-ui/pm-panel`) and an app without one installs nothing more.\nimport type { ComponentType, ReactNode } from 'react';\n\nexport interface ShellPanelProviderProps {\n  /** `ShellPanel.config`, as the panel wrote it. */\n  readonly config: unknown;\n  readonly open: boolean;\n  readonly close: () => void;\n  readonly appName?: string | undefined;\n  readonly locale?: string | undefined;\n  /** The panel took the whole screen, or gave it back; `collapse` is what Back runs. */\n  readonly onFull?: ((full: boolean, collapse: () => void) => void) | undefined;\n  readonly children: ReactNode;\n}\n\nexport interface ShellPanelLayoutProps {\n  readonly children: ReactNode;\n  /** The phone tab bar. The layout hides it while the panel covers the page. */\n  readonly navigation?: ReactNode;\n  /** The label of the screen on show. */\n  readonly screen?: string;\n}\n\nexport interface ShellPanelPageProps {\n  readonly config: unknown;\n  readonly appName: string;\n  readonly locale?: string | undefined;\n}\n\n/** Keep `Provider`, `Layout` and `page.Page` the same across renders: a new component remounts the app. */\nexport interface ShellPanel {\n  /** Passed back to `Provider` and `page.Page`. */\n  readonly config: unknown;\n  /** Wraps the whole shell, so the panel's state outlives its closing. */\n  readonly Provider: ComponentType<ShellPanelProviderProps>;\n  /** Wraps the screen and draws the panel beside it. */\n  readonly Layout: ComponentType<ShellPanelLayoutProps>;\n  /** The account menu's row and the layer's title. Default: the shell's « Améliorer l'app ». */\n  readonly label?: string;\n  /** `false`: no account menu row for the panel, which still mounts (a host that already shows the panel, around a framed app). Default: the row. */\n  readonly menu?: false;\n  /** The panel's language, for the shell's own words when the app has no agent to say it. */\n  readonly locale?: string | undefined;\n  /** Changes when the panel's conversation changes; a launch link's focus waits on it. */\n  readonly identity?: unknown;\n  /** The address that shows only the panel, without the shell. */\n  readonly page?: { readonly matches: () => boolean; readonly Page: ComponentType<ShellPanelPageProps> };\n}\n\n/** The screen when the app has no panel. */\nexport function NoPanelLayout({ children, navigation }: ShellPanelLayoutProps) {\n  return <div className=\"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n    <div className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">{children}</div>\n    <div className=\"shrink-0 md:hidden\">{navigation}</div>\n  </div>;\n}\n",
       "type": "registry:component",
       "target": "components/app-shell/shell-panel.tsx"
     },