@hachej/boring-ui-kit 0.4.50 → 0.4.52

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

@@ -1,5 +1,8 @@
-export type ConversationControllerState<C> = {
+export type ConversationControllerState<C> = 
+/** `controller`: created, its `connect` still running (absent before creation). Hosts that wait for `ready` can ignore it. */
+{
     readonly status: 'connecting';
+    readonly controller?: C;
 } | {
     readonly status: 'offline';
     readonly error: unknown;

package/dist/chat-react-controller.js

@@ -34,6 +34,7 @@ export function useControllerPerConversation(options) {
                         await retire();
                         return;
                     }
+                    publish({ status: 'connecting', controller: owned });
                     await connect?.(owned);
                     if (off) {
                         await retire();
@@ -43,6 +44,9 @@ export function useControllerPerConversation(options) {
                     return;
                 }
                 catch (error) {
+                    // A controller handed out while connecting is withdrawn before it is disposed, so no host holds a disposed one.
+                    if (owned)
+                        publish({ status: 'connecting' });
                     try {
                         await retire();
                     }

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

@@ -4,18 +4,32 @@ export type ChatPlacement = 'docked' | 'floating';
 /** Reports the placement of the chat showing `controller` while the caller is mounted. */
 export declare function useChatPlacement(controller: ChatController, placement: ChatPlacement): void;
 export declare function readChatPlacement(controller: ChatController | undefined): ChatPlacement | undefined;
+type RemoteActions = Partial<Pick<RemoteChat, 'answer' | 'withdraw'>>;
+/**
+ * `connecting` carries the controller as soon as it exists (D-1434, before the host's first view lands): its composer takes messages at
+ * once, shows them as the person's own and sends them, in order, once connected; the transcript appears with the first view. `actions` and
+ * `configure` wait for the connection. `ready` still means the first view landed, with the same controller; a host that waits for `ready`
+ * (or ignores `controller` while connecting) behaves as before. If connecting fails the state turns `offline` without a controller, and
+ * the messages not sent come back in the next attempt's composer.
+ */
 export type RemoteChatState = {
     readonly status: 'connecting';
     readonly conversationId: string | undefined;
+    readonly controller?: NativeChatController;
+    readonly actions?: RemoteActions;
+    readonly configure?: RemoteChat['configure'];
 } | {
     readonly status: 'offline';
     readonly conversationId: string | undefined;
     readonly error: string;
+    readonly controller?: undefined;
+    readonly actions?: undefined;
+    readonly configure?: undefined;
 } | {
     readonly status: 'ready';
     readonly conversationId: string;
     readonly controller: NativeChatController;
-    readonly actions: Partial<Pick<RemoteChat, 'answer' | 'withdraw'>>;
+    readonly actions: RemoteActions;
     readonly configure: RemoteChat['configure'];
 };
 export interface RemoteChatHookOptions {
@@ -30,4 +44,5 @@ export interface RemoteChatHookOptions {
 }
 /** One owned native controller per selection; the remote transport itself reopens dropped streams. Failed acquisition retries each second. */
 export declare function useRemoteChat({ conversationId, endpoint, fetch, identity, requestContext, transport, webSocket }: RemoteChatHookOptions): RemoteChatState;
+export {};
 //# sourceMappingURL=chat-react-remote.d.ts.map

package/dist/chat-react-remote.js

@@ -1,5 +1,6 @@
 'use client';
 import { useLayoutEffect, useMemo, useRef } from 'react';
+import { BACKGROUND_CONTEXT } from '@earendil-works/chord/context';
 import { createNativeChatController } from './native-chat.js';
 import { createRemoteChat } from './remote-chat.js';
 import { useControllerPerConversation } from './chat-react-controller.js';
@@ -24,6 +25,34 @@ export function useChatPlacement(controller, placement) {
 export function readChatPlacement(controller) {
     return controller ? placements.get(controller)?.at(-1)?.placement : undefined;
 }
+/**
+ * The conversation and link the controller borrows while the remote chat opens. Each member waits for the remote and then forwards
+ * to it unchanged; the identity is the selection until the server's view names it (the controller reads it again on connect).
+ */
+function pendingConversation(pending, selection) {
+    const forward = (name) => (async (...args) => (await pending.remote).conversation[name](...args));
+    const conversation = {
+        get id() { return (pending.current?.conversation.id ?? selection); },
+        watch: forward('watch'), submit: forward('submit'), abort: forward('abort'), entries: forward('entries'),
+        commit: async (change, context) => (await pending.remote).conversation.commit(change, context),
+    };
+    const link = {
+        reconnecting: () => pending.current?.link.reconnecting() ?? false,
+        subscribe: listener => {
+            let off, gone = false;
+            void pending.remote.then(remote => { if (!gone)
+                off = remote.link.subscribe(listener); }, () => { });
+            return () => { gone = true; off?.(); };
+        },
+    };
+    return { conversation, link };
+}
+/** What a controller that never connected still holds (messages taken from the composer, then the draft), to give to the next attempt. */
+function unsent(controller) {
+    const snapshot = controller.getSnapshot(), drafts = [...snapshot.echo.map(item => item.draft), snapshot.draft];
+    const attachments = drafts.flatMap(item => item.attachments).filter((item, index, all) => all.findIndex(other => other.id === item.id) === index);
+    return { text: drafts.map(item => item.text).filter(text => text.trim()).join('\n'), attachments };
+}
 /** One owned native controller per selection; the remote transport itself reopens dropped streams. Failed acquisition retries each second. */
 export function useRemoteChat({ conversationId, endpoint, fetch, identity, requestContext, transport, webSocket }) {
     const url = conversationId === undefined ? undefined : String(endpoint(conversationId));
@@ -32,30 +61,57 @@ export function useRemoteChat({ conversationId, endpoint, fetch, identity, reque
     useLayoutEffect(() => { latest.current = { fetch, requestContext, webSocket }; });
     // Transport ownership stays with the controller that acquired it, including when connect or selection changes race.
     const remotes = useMemo(() => new WeakMap(), []);
+    // Messages a failed attempt never sent, by selection, for the next attempt's composer.
+    const carried = useMemo(() => new Map(), []);
     const selected = useControllerPerConversation({ key,
-        create: async () => {
+        // The controller exists at once; the remote chat opens behind it (D-1434). Its watch, submits and actions wait for the first view.
+        create: () => {
             let controller;
-            const remote = await createRemoteChat({ endpoint: url, fetch: request => latest.current.fetch(request),
+            const remote = createRemoteChat({ endpoint: url, fetch: request => latest.current.fetch(request),
                 requestContext: () => {
                     const placement = readChatPlacement(controller), screen = latest.current.requestContext?.();
                     return placement || screen ? { ...screen, ...(placement && { placement }) } : undefined;
                 }, ...(transport ? { transport } : {}), ...(latest.current.webSocket ? { webSocket: latest.current.webSocket } : {}) });
+            const pending = { remote,
+                actions: { answer: async (...args) => (await remote).answer(...args), withdraw: async (...args) => (await remote).withdraw(...args) },
+                configure: async (...args) => (await remote).configure(...args) };
+            void remote.then(value => { pending.current = value; }, () => { });
             try {
-                controller = createNativeChatController({ identity: identity, ...remote });
-                remotes.set(controller, remote);
-                return controller;
+                const { conversation, link } = pendingConversation(pending, conversationId);
+                controller = createNativeChatController({ identity: identity, conversation, context: BACKGROUND_CONTEXT, link,
+                    definitelyNotAdmitted: error => pending.current?.definitelyNotAdmitted(error) ?? false });
             }
             catch (error) {
-                await remote.close();
+                void remote.then(value => value.close(), () => { });
                 throw error;
             }
+            remotes.set(controller, pending);
+            const back = carried.get(String(key));
+            if (back) {
+                carried.delete(String(key));
+                if (back.text)
+                    controller.setText(back.text);
+                if (back.attachments.length)
+                    controller.setAttachments(back.attachments);
+            }
+            // `connecting` at once, so the chat shows it and takes messages; the native watch opening waits for the remote's first view.
+            void controller.connect();
+            return controller;
         },
-        connect: controller => controller.connect(),
+        connect: async (controller) => { await remotes.get(controller).remote; await controller.connect(); },
         dispose: async (controller) => {
+            const remote = remotes.get(controller);
+            // Disposed before its first view (a failed connect, or another selection): what it took was held, never submitted (see `send`). Its
+            // words come back in the composer of this selection's next controller, never sent by themselves.
+            if (!controller.getSnapshot().view) {
+                const back = unsent(controller);
+                if (back.text || back.attachments.length)
+                    carried.set(String(key), back);
+            }
             // Start both: closing a transport may release a pending native watch opening.
             const pending = controller.dispose();
             try {
-                await remotes.get(controller)?.close();
+                await (remote?.current ?? await remote?.remote.catch(() => undefined))?.close();
             }
             finally {
                 await pending;
@@ -63,10 +119,13 @@ export function useRemoteChat({ conversationId, endpoint, fetch, identity, reque
             }
         }, });
     if (selected.status === 'ready' && conversationId !== undefined) {
-        const remote = remotes.get(selected.controller);
+        const remote = remotes.get(selected.controller).current;
         const actions = { ...(typeof remote.answer === 'function' ? { answer: remote.answer } : {}),
             ...(typeof remote.withdraw === 'function' ? { withdraw: remote.withdraw } : {}) };
         return { status: 'ready', conversationId, controller: selected.controller, actions, configure: remote.configure };
     }
-    return selected.status === 'offline' ? { status: 'offline', conversationId, error: String(selected.error?.message ?? selected.error) } : { status: 'connecting', conversationId };
+    if (selected.status === 'offline')
+        return { status: 'offline', conversationId, error: String(selected.error?.message ?? selected.error) };
+    const early = selected.controller && remotes.get(selected.controller);
+    return early && selected.controller ? { status: 'connecting', conversationId, controller: selected.controller, actions: early.actions, configure: early.configure } : { status: 'connecting', conversationId };
 }

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

@@ -1,5 +1,5 @@
 import type { ToolCall, ToolResultMessage } from '@earendil-works/pi-ai';
-import type { ChatAttachment, ChatController } from './native-chat.js';
+import type { ChatAttachment, ChatController, ChatSnapshot } from './native-chat.js';
 import type { ChatCard, DeriveOptions, Mode, QueuedMessage, Row } from './chat-view.js';
 /** A conversation's observed file; opening remains a host operation, not workspace ownership. */
 export interface ConversationFile {
@@ -116,9 +116,8 @@ export interface ChatSessionOptions<Content = unknown> extends Partial<DeriveOpt
     /** Focus is presentation; called only by actions, never during render. */
     readonly onFocus?: (() => void) | undefined;
 }
-/** Headless session over the public native controller snapshot/commands. Borrows it; cleanup only aborts this hook's uploads. */
 export declare function useChatSession<Content = unknown>(options: ChatSessionOptions<Content>): {
-    state: import("./native-chat.js").ChatSnapshot;
+    state: ChatSnapshot;
     derived: import("./chat-view.js").Derived<Content>;
     rows: Row<Content>[];
     queued: {

package/dist/chat-react-session.js

@@ -3,6 +3,30 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalS
 import { derive, isFileBlock, object, queuedMessages, waitingForAnswer as waitsForAnswer } 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. */
+/**
+ * The snapshot once the controller has its first view (its conversation id is then the server's); undefined if it is disposed, fails or
+ * `signal` aborts first.
+ */
+function connectedSnapshot(controller, signal) {
+    return new Promise(resolve => {
+        let off = () => { }, done = false;
+        const finish = (value) => { if (done)
+            return; done = true; off(); signal.removeEventListener('abort', aborted); resolve(value); };
+        const aborted = () => finish(undefined);
+        const check = () => {
+            const snapshot = controller.getSnapshot(), kind = snapshot.connection.kind;
+            if (signal.aborted)
+                finish(undefined);
+            else if (snapshot.view || snapshot.disposed || kind === 'error' || kind === 'closed')
+                finish(snapshot.view && !snapshot.disposed ? snapshot : undefined);
+        };
+        check();
+        if (done)
+            return;
+        off = controller.subscribe(check);
+        signal.addEventListener('abort', aborted, { once: true });
+    });
+}
 export function useChatSession(options) {
     const { controller, activeController: active, mode, presentation, actions, renderEntry, hideLine, renderTool: catchAll, toolRenderers, groupTool, subagent, onOpenImage, onFiles, mentions, slash, attachments, model, effort, artifacts, afterSend, feedback, onOpenFile, onPickFiles, commandMentions, onFocus, labels } = options;
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
@@ -118,7 +142,10 @@ export function useChatSession(options) {
     // Only a submission whose outcome is unknown blocks, until it is checked or retried.
     const unconfirmed = state.send.kind === 'unknown';
     const connected = state.connection.kind === 'connected';
-    const sendBlocked = uploading > 0 || state.disposed || !connected || unconfirmed;
+    // Before the first view the composer already takes messages: the controller holds them, shown as the person's own, and sends them once
+    // connected (or puts them back if the connection fails).
+    const firstConnect = state.connection.kind === 'connecting' && !state.view;
+    const sendBlocked = uploading > 0 || state.disposed || !(connected || firstConnect) || unconfirmed;
     /** Puts a message back into the composer ahead of whatever is there now (nothing is dropped). */
     const putBack = (text, images) => {
         if (controller.getSnapshot().disposed)
@@ -271,8 +298,15 @@ export function useChatSession(options) {
                         paths = [...paths, result.path];
                 }
             }
-            else
-                added = await onFiles(files, { identity: state.identity, conversationId: state.conversationId, signal: abort.signal });
+            else {
+                // While the chat connects its conversation id is still the host's selection: the host's upload waits for the first view's.
+                const target = await connectedSnapshot(controller, abort.signal);
+                if (abort.signal.aborted || !current())
+                    return;
+                if (!target)
+                    throw new Error(labels.uploadFailedShort);
+                added = await onFiles(files, { identity: target.identity, conversationId: target.conversationId, signal: abort.signal });
+            }
             if (current() && !abort.signal.aborted) {
                 if (added.length)
                     controller.setAttachments([...controller.getSnapshot().draft.attachments, ...added]);
@@ -363,7 +397,7 @@ export function useChatSession(options) {
             act(async () => catalog.onActivate({ name: selected.name, behavior: selected.behavior }));
     };
     const empty = connected && !state.view?.entries.length && !rows.length;
-    const loading = (state.connection.kind === 'idle' || state.connection.kind === 'connecting') && !state.view;
+    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,
         files, empty, loading, developer, natural, sending, send, putBack, upload, pasteText, picked, pending, uploading, activateMention,
         pickMention: (path) => setPicked(value => value.includes(path) ? value : [...value, path]),

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)