canopycms 0.7.1 → 0.8.0

package/dist/editor/EntryNavigator.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActionIcon, Badge, Box, Button, CloseButton, Group, Highlight, Loader, Menu, ScrollArea, SegmentedControl, Stack, Text, TextInput, Tooltip, Tree, useTree, rem, } from '@mantine/core';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { ActionIcon, Alert, Anchor, Badge, Box, Button, CloseButton, Code, Group, Highlight, Loader, Menu, Skeleton, ScrollArea, SegmentedControl, Stack, Text, TextInput, Tooltip, Tree, VisuallyHidden, useTree, rem, } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
-import { IconArrowDown, IconAlertTriangle, IconArrowUp, IconDots, IconEdit, IconFolderPlus, IconLock, IconPlus, IconSearch, IconTrash, } from '@tabler/icons-react';
+import { IconArrowDown, IconAlertCircle, IconAlertTriangle, IconArrowRight, IconChevronRight, IconArrowUp, IconDots, IconEdit, IconFolderPlus, IconLock, IconPencil, IconPlus, IconSearch, IconSettings, IconTrash, } from '@tabler/icons-react';
 import { calculatePathToEntry } from './editor-utils.js';
 import { entryDetailLine, matchesEntryQuery } from './entry-search.js';
 import { EDITOR_ACTIONS } from './copy.js';
+import { humanizeName } from './schema-label.js';
 import { DestructiveMenuItem } from './components/DestructiveMenuItem.js';
 import { UnsavedMark } from './components/UnsavedMark.js';
 import { BranchRowLock } from './components/BranchRowLock.js';
@@ -16,6 +17,22 @@ import { UnavailableTypeMessage } from './components/UnavailableTypeMessage.js';
 const UnavailableTypeRow = ({ schemaRefs }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", align: "flex-start", mt: 4, "data-testid": "unavailable-type-message", children: [_jsx(Box, { c: "orange", style: { display: 'flex', flexShrink: 0, paddingTop: 2 }, children: _jsx(IconAlertTriangle, { size: 14, "aria-hidden": true }) }), _jsx(Text, { size: "xs", c: "orange", children: _jsx(UnavailableTypeMessage, { schemaRefs: schemaRefs }) })] }));
 /** Where path rules refuse new entries, one line says so in place of the "…" menus they hide. */
 const AddRefusedRow = () => (_jsx(Text, { size: "xs", c: "dimmed", mt: 4, "data-testid": "add-refused-message", children: "You can't add entries here." }));
+const CHANGE_MARKERS = {
+    added: { label: 'New', icon: _jsx(IconPlus, { size: 10, "aria-hidden": true }) },
+    modified: { label: 'Edited', icon: _jsx(IconPencil, { size: 10, "aria-hidden": true }) },
+    moved: { label: 'Moved', icon: _jsx(IconArrowRight, { size: 10, "aria-hidden": true }) },
+    deleted: { label: 'Deleted', icon: _jsx(IconTrash, { size: 10, "aria-hidden": true }) },
+    settings: { label: 'Settings edited', icon: _jsx(IconSettings, { size: 10, "aria-hidden": true }) },
+};
+/**
+ * A row's change against the base: a word and an icon, never colour alone. Its visually hidden
+ * words join the row's accessible name: " on this branch", " from <where>" for a move, none
+ * where a heading already says it (`context: null`).
+ */
+const ChangeMarker = ({ kind, context = ' on this branch', }) => (_jsx(Badge, { size: "xs", variant: "light", color: "gray", leftSection: CHANGE_MARKERS[kind].icon, "data-testid": `change-marker-${kind}`, style: { flexShrink: 0 }, children: kind === 'settings' ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: CHANGE_MARKERS.settings.label }), _jsx(VisuallyHidden, { component: "span", children: "Settings changed on this branch" })] })) : (_jsxs(_Fragment, { children: [CHANGE_MARKERS[kind].label, context && _jsx(VisuallyHidden, { component: "span", children: context })] })) }));
+/** A segment's count, capped so the control keeps its width. */
+const segmentCount = (count) => (count > 99 ? '99+' : String(count));
+const plural = (count, one, many) => `${count} ${count === 1 ? one : many}`;
 const lastSegment = (path) => path.split('/').filter(Boolean).pop() ?? path;
 /** A collection's node value; a single-entry collection's node is its entry. */
 const collectionNodeValue = (nodes, path) => {
@@ -42,8 +59,9 @@ const expandedStateFor = (nodes, acc = {}) => {
 /**
  * The nodes of `nodes` that match `query` and, given `changed`, are in it. An entry matches on
  * label, title or slug; a collection whose label matches keeps its whole subtree, or under `changed` its
- * changed entries, and any other collection survives only with its matching descendants. Nodes keep
- * the position data (`childIndex`, `totalChildrenCount`) of the full tree.
+ * changed entries, and any other collection survives only with its matching descendants or, when
+ * `changed` holds the collection itself, a matching label. Nodes keep the position data
+ * (`childIndex`, `totalChildrenCount`) of the full tree.
  */
 const filterTree = (nodes, query, changed) => {
     const kept = [];
@@ -64,8 +82,9 @@ const filterTree = (nodes, query, changed) => {
             continue;
         }
         const children = filterTree(node.children ?? [], labelMatches ? '' : query, changed);
-        if (children.length > 0)
+        if (children.length > 0 || (labelMatches && changed?.has(node.value))) {
             kept.push({ ...node, children });
+        }
     }
     return kept;
 };
@@ -207,7 +226,7 @@ const stopTreeKeys = (event) => {
         event.stopPropagation();
 };
 const UnsavedDot = ({ label }) => (_jsx(Tooltip, { label: label, withinPortal: true, children: _jsx(UnsavedMark, { role: "img", "aria-label": label, "data-testid": "unsaved-dot" }) }));
-export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, readOnlyReason, dirtyPaths, reveal, onRevealed, onChangedOnlyChange, changedOnly: changedOnlyProp = false, unsavedCount: unsavedCountProp = 0, unsavedEntries, entryListFailed = false, branchNotAvailable = false, onSwitchBranch, onFilterEnter, onFilterEscape, onRowMenuOpen, filterRef, filterShortcut, }) => {
+export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, readOnlyReason, dirtyPaths, reveal, onRevealed, onEntryFilterChange, entryFilter = 'all', branchChanges, onShowUnsaved, onShowDeletedChanges, unsavedCount: unsavedCountProp = 0, unsavedEntries, entryListFailed = false, branchNotAvailable = false, onSwitchBranch, onFilterEnter, onFilterEscape, onRowMenuOpen, filterRef, filterShortcut, }) => {
     // Shadow the entry-mutation callbacks with undefined when readOnly, so every
     // downstream reference (hasEntryMenu, canReorder, the menu items themselves)
     // sees them as absent rather than threading a readOnly check through each
@@ -222,13 +241,31 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     const [query, setQuery] = useState('');
     const filterInputRef = useRef(null);
     const mergedFilterRef = useMergedRef(filterInputRef, filterRef);
-    const changedOnly = changedOnlyProp && !!onChangedOnlyChange;
-    const filtering = query.trim() !== '' || changedOnly;
+    const unsavedOnly = entryFilter === 'unsaved' && !!onEntryFilterChange;
+    const changedMode = entryFilter === 'changed' && !!onEntryFilterChange && !!branchChanges;
+    const filtering = query.trim() !== '' || unsavedOnly || changedMode;
     // Read from the tree's expand/collapse callbacks, which fire from state updaters.
     const filteringRef = useRef(false);
     useEffect(() => {
         filteringRef.current = filtering;
     }, [filtering]);
+    const [otherFilesOpen, setOtherFilesOpen] = useState(false);
+    const otherFilesId = useId();
+    // Announced once per answer shown under Changed (SWR keeps an unchanged answer's identity).
+    const [changesAnnouncement, setChangesAnnouncement] = useState('');
+    const announcedChanges = changedMode ? branchChanges?.data : undefined;
+    useEffect(() => {
+        if (!announcedChanges)
+            return;
+        const entries = announcedChanges.entries.length;
+        const collections = announcedChanges.collections.length;
+        setChangesAnnouncement(entries + collections === 0
+            ? 'No changed entries'
+            : plural(entries, 'changed entry', 'changed entries') +
+                (collections
+                    ? ` and ${plural(collections, 'changed collection', 'changed collections')}`
+                    : ''));
+    }, [announcedChanges]);
     const treeData = useMemo(() => {
         const entryNode = (entry, parent, childIndex, totalChildren) => ({
             value: entry.path,
@@ -384,9 +421,29 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     }, [collections, items, hiddenRootPath]);
     // Filtered from the finished tree, so each node keeps its position in the whole collection and
     // Move up / Move down stay correct while a filter is on.
+    const changes = changedMode ? branchChanges?.data : undefined;
+    // Rows Changed keeps: entries with a row (not deleted ones) and collections whose settings changed.
+    const { changedValues, entryChange, settingsChanged } = useMemo(() => {
+        const values = new Set();
+        const byPath = new Map();
+        const settings = new Set();
+        for (const entry of changes?.entries ?? []) {
+            if (entry.status === 'deleted')
+                continue;
+            values.add(entry.logicalPath);
+            byPath.set(entry.logicalPath, entry);
+        }
+        for (const collection of changes?.collections ?? []) {
+            if (collection.status === 'deleted')
+                continue;
+            values.add(`collection:${collection.logicalPath}`);
+            settings.add(`collection:${collection.logicalPath}`);
+        }
+        return { changedValues: values, entryChange: byPath, settingsChanged: settings };
+    }, [changes]);
     const filteredTree = useMemo(() => filtering
-        ? filterTree(treeData, query, changedOnly ? (dirtyPaths ?? new Set()) : undefined)
-        : treeData, [filtering, treeData, query, changedOnly, dirtyPaths]);
+        ? filterTree(treeData, query, unsavedOnly ? (dirtyPaths ?? new Set()) : changedMode ? changedValues : undefined)
+        : treeData, [filtering, treeData, query, unsavedOnly, changedMode, dirtyPaths, changedValues]);
     // A caller may pass a new but equal `dirtyPaths` as drafts change: that alone never reopens a
     // folder the user closed, while a new query or new folders re-expand.
     const filteredFolders = useMemo(() => Object.keys(expandedStateFor(filteredTree)).join('\n'), [filteredTree]);
@@ -417,19 +474,61 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         walk(treeData);
         return { dirtyCollections: dirty, listedUnsaved: listed };
     }, [treeData, dirtyPaths]);
-    // Unsaved entries the tree has no row for, which Changed offers beneath it.
-    const unlistedNamed = useMemo(() => {
-        if (!changedOnly || !unsavedEntries?.length)
-            return [];
+    const treeRows = useMemo(() => {
         const rows = new Set();
         const walk = (nodes) => nodes.forEach((node) => {
             rows.add(node.value);
             walk(node.children ?? []);
         });
         walk(treeData);
-        return unsavedEntries.filter((entry) => !rows.has(entry.path));
-    }, [changedOnly, unsavedEntries, treeData]);
+        return rows;
+    }, [treeData]);
+    // Unsaved entries the tree has no row for, which Unsaved offers beneath it.
+    const unlistedNamed = useMemo(() => (unsavedOnly ? (unsavedEntries ?? []).filter((entry) => !treeRows.has(entry.path)) : []), [unsavedOnly, unsavedEntries, treeRows]);
     const unlistedMatches = useMemo(() => unlistedNamed.filter((entry) => matchesEntryQuery({ label: entry.label }, query)), [unlistedNamed, query]);
+    // A collection's label from the tree, else its last segment humanised, as for one deleted.
+    const collectionLabel = useMemo(() => {
+        const labels = new Map();
+        const walk = (list) => list.forEach((col) => {
+            labels.set(col.path, col.label);
+            walk(col.children ?? []);
+        });
+        walk(collections ?? []);
+        return (path) => labels.get(path) ?? humanizeName(lastSegment(path));
+    }, [collections]);
+    const slugLabel = (path) => humanizeName(lastSegment(path));
+    const movedFrom = (entry) => {
+        const previous = entry.previousLogicalPath;
+        if (!previous)
+            return undefined;
+        const parent = previous.slice(0, previous.lastIndexOf('/'));
+        return parent === entry.collectionPath
+            ? ` from ${slugLabel(previous)}`
+            : ` from ${collectionLabel(parent)} › ${slugLabel(previous)}`;
+    };
+    // Under Changed: entries with no row, the deleted ones and any the entry list doesn't hold yet,
+    // and collections whose settings row is not drawn, such as the hidden root's.
+    const changedBeneath = useMemo(() => {
+        const matches = (label) => matchesEntryQuery({ label }, query);
+        const unlisted = (changes?.entries ?? [])
+            .filter((e) => e.status !== 'deleted' && !treeRows.has(e.logicalPath))
+            .map((e) => ({ entry: e, path: e.logicalPath, label: e.title || slugLabel(e.logicalPath) }))
+            .filter((e) => matches(e.label));
+        const deleted = (changes?.entries ?? [])
+            .filter((e) => e.status === 'deleted')
+            .map((e) => ({
+            entry: e,
+            path: e.logicalPath,
+            label: e.title || slugLabel(e.logicalPath),
+            collection: collectionLabel(e.collectionPath),
+        }))
+            .filter((e) => matches(e.label));
+        const settings = (changes?.collections ?? [])
+            .filter((c) => c.status === 'deleted' || !treeRows.has(`collection:${c.logicalPath}`))
+            .map((c) => ({ path: c.logicalPath, label: collectionLabel(c.logicalPath) }))
+            .filter((c) => matches(c.label));
+        return { unlisted, deleted, settings };
+    }, [changes, treeRows, query, collectionLabel]);
     // The hidden root's own row never renders, so its message is shown once above the tree.
     const hiddenRootAddRefused = !readOnly &&
         !!hiddenRootPath &&
@@ -544,7 +643,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             servedRevealRef.current = reveal.seq;
             onRevealed?.();
         };
-        if (reveal.kind === 'changed') {
+        if (reveal.kind === 'unsaved') {
             setQuery('');
             served();
             return;
@@ -577,8 +676,8 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                 ...wanted,
             };
             setQuery('');
-            if (changedOnly)
-                onChangedOnlyChange?.(false);
+            if (entryFilter !== 'all')
+                onEntryFilterChange?.('all');
             return;
         }
         if (Object.keys(wanted).some((key) => !tree.expandedState[key])) {
@@ -615,7 +714,9 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                 onFilterEscape?.();
         }
         else if (event.key === 'Enter' && filtering) {
-            const path = firstEntryPath(filteredTree, query) ?? unlistedMatches[0]?.path;
+            const path = firstEntryPath(filteredTree, query) ??
+                unlistedMatches[0]?.path ??
+                (changedMode ? changedBeneath.unlisted[0]?.path : undefined);
             if (path) {
                 event.preventDefault();
                 (onFilterEnter ?? onSelect)(path);
@@ -691,6 +792,12 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             !entryLocked &&
             !!(onDeleteEntryProp || onRenameEntryProp || onReorderEntryProp);
         const showsLockSlot = readOnly && (wouldHaveCollectionMenu || wouldHaveEntryMenu);
+        const rowChange = isEntry ? entryChange.get(node.value) : undefined;
+        const changeMarker = rowChange
+            ? rowChange.status
+            : !isEntry && settingsChanged.has(node.value)
+                ? 'settings'
+                : undefined;
         const showEntryDirtyDot = isEntry && !!entryPath && !!dirtyPaths?.has(entryPath);
         const showCollectionDirtyDot = !isEntry && dirtyCollections.has(node.value);
         const adminItems = onAddSubCollection || onEdit || onDelete;
@@ -718,7 +825,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                                             flexShrink: 0,
                                             alignItems: 'center',
                                             justifyContent: 'center',
-                                        }, children: _jsx(Chevron, { expanded: expanded, visible: showChevron }) }), _jsxs(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: [_jsxs(Group, { gap: 6, wrap: "nowrap", style: { minWidth: 0 }, children: [_jsx(TruncatedLabel, { label: label, highlight: filtering ? query.trim() : '', fw: selected ? 600 : 500 }), showEntryDirtyDot && _jsx(UnsavedDot, { label: "Unsaved changes" }), showCollectionDirtyDot && _jsx(UnsavedDot, { label: "Contains unsaved changes" }), conflictNotice && (_jsx(Tooltip, { label: "This content was updated on the base branch \u2014 a reviewer will reconcile", withArrow: true, children: _jsx(Badge, { size: "xs", variant: "light", color: "orange", "data-testid": "conflict-badge", style: { flexShrink: 0 }, children: "Conflict" }) })), entryLocked && (_jsx(Tooltip, { label: "You can't edit this entry", withinPortal: true, children: _jsx(Box, { component: "span", role: "img", "aria-label": "You can't edit this entry", "data-testid": "entry-lock", c: "dimmed", style: { display: 'inline-flex', flexShrink: 0 }, children: _jsx(IconLock, { size: 14, "aria-hidden": true }) }) }))] }), detail && (_jsx(Box, { "data-testid": "entry-nav-detail", style: { minWidth: 0 }, children: _jsx(TruncatedLabel, { label: detail, size: "xs", 
+                                        }, children: _jsx(Chevron, { expanded: expanded, visible: showChevron }) }), _jsxs(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: [_jsxs(Group, { gap: 6, wrap: "nowrap", style: { minWidth: 0 }, children: [_jsx(TruncatedLabel, { label: label, highlight: filtering ? query.trim() : '', fw: selected ? 600 : 500 }), changeMarker && (_jsx(ChangeMarker, { kind: changeMarker, context: (rowChange && movedFrom(rowChange)) ?? undefined })), showEntryDirtyDot && _jsx(UnsavedDot, { label: "Unsaved changes" }), showCollectionDirtyDot && _jsx(UnsavedDot, { label: "Contains unsaved changes" }), conflictNotice && (_jsx(Tooltip, { label: "This content was updated on the base branch \u2014 a reviewer will reconcile", withArrow: true, children: _jsx(Badge, { size: "xs", variant: "light", color: "orange", "data-testid": "conflict-badge", style: { flexShrink: 0 }, children: "Conflict" }) })), entryLocked && (_jsx(Tooltip, { label: "You can't edit this entry", withinPortal: true, children: _jsx(Box, { component: "span", role: "img", "aria-label": "You can't edit this entry", "data-testid": "entry-lock", c: "dimmed", style: { display: 'inline-flex', flexShrink: 0 }, children: _jsx(IconLock, { size: 14, "aria-hidden": true }) }) }))] }), detail && (_jsx(Box, { "data-testid": "entry-nav-detail", style: { minWidth: 0 }, children: _jsx(TruncatedLabel, { label: detail, size: "xs", 
                                                     // A missing file is an error, in error text, not a dimmed type.
                                                     c: entryMissing ? 'var(--canopy-danger-text)' : 'dimmed' }) }))] })] }), _jsxs(Group, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [hasCollectionMenu && (_jsxs(Menu, { shadow: "md", width: 200, withinPortal: true, position: "bottom-end", onOpen: onRowMenuOpen, children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "xs", variant: "subtle", color: "gray", onClick: (event) => event.stopPropagation(), "aria-label": "Collection actions", "data-testid": `collection-menu-${testIdSuffix}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { onKeyDown: stopTreeKeys, children: [onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: (event) => {
                                                             event.stopPropagation();
@@ -757,23 +864,72 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                                                                     onDeleteEntry(entryPath);
                                                                 }, "data-testid": "delete-entry-menu-item", children: "Delete entry" })] }))] })] }))] })] }), isCollection && unavailableSchemaRefs && unavailableSchemaRefs.length > 0 && (_jsx(UnavailableTypeRow, { schemaRefs: unavailableSchemaRefs })), isCollection && addRefused && _jsx(AddRefusedRow, {})] }) }));
     };
-    // Changed can't list every entry it counts: those with no row are offered beneath the tree, and
+    // Unsaved can't list every entry it counts: those with no row are offered beneath the tree, and
     // drafts whose entries aren't named yet are counted there.
     const unsavedCount = Math.max(unsavedCountProp, listedUnsaved + unlistedNamed.length);
     const unnamedUnsaved = unsavedCount - listedUnsaved - unlistedNamed.length;
     const showAll = () => {
-        onChangedOnlyChange?.(false);
+        onEntryFilterChange?.('all');
         filterInputRef.current?.focus();
     };
-    const outsideRows = unlistedMatches.length > 0 && (_jsxs(Stack, { gap: 2, py: 4, align: "flex-start", "data-testid": "entry-nav-changed-outside", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Not in the content tree" }), unlistedMatches.map((entry) => (_jsx(Button, { size: "compact-sm", variant: "subtle", color: "gray", leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: () => onSelect(entry.path), children: entry.label }, entry.path)))] }));
-    const changedNotice = !changedOnly ? null : entryListFailed ? (_jsx(Text, { size: "sm", c: "dimmed", py: "sm", "data-testid": "entry-nav-changed-failed", children: "The list of entries couldn't be loaded, so unsaved entries can't be shown. Choose \"Refresh branch\" in the branch menu to try again." })) : query.trim() ? (_jsxs(_Fragment, { children: [filteredTree.length === 0 && !outsideRows && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-changed-no-match", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No unsaved entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Search all entries" })] })), outsideRows] })) : unsavedCount === 0 ? (treeData.length > 0 && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-changed-none", children: [_jsx(Text, { size: "sm", c: "dimmed", children: "No unsaved changes on this branch." }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Show all entries" })] }))) : (_jsxs(_Fragment, { children: [outsideRows, unnamedUnsaved > 0 && (_jsxs(Text, { size: "sm", c: "dimmed", py: 4, "data-testid": "entry-nav-changed-unlisted", children: [listedUnsaved + unlistedNamed.length > 0
+    const outsideRows = unlistedMatches.length > 0 && (_jsxs(Stack, { gap: 2, py: 4, align: "flex-start", "data-testid": "entry-nav-unsaved-outside", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Not in the content tree" }), unlistedMatches.map((entry) => (_jsx(Button, { size: "compact-sm", variant: "subtle", color: "gray", leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: () => onSelect(entry.path), children: entry.label }, entry.path)))] }));
+    const unsavedNotice = !unsavedOnly ? null : entryListFailed ? (_jsx(Text, { size: "sm", c: "dimmed", py: "sm", "data-testid": "entry-nav-unsaved-failed", children: "The list of entries couldn't be loaded, so unsaved entries can't be shown. Choose \"Refresh branch\" in the branch menu to try again." })) : query.trim() ? (_jsxs(_Fragment, { children: [filteredTree.length === 0 && !outsideRows && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-unsaved-no-match", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No unsaved entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Search all entries" })] })), outsideRows] })) : unsavedCount === 0 ? (treeData.length > 0 && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-unsaved-none", children: [_jsx(Text, { size: "sm", c: "dimmed", children: "No unsaved changes on this branch." }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Show all entries" })] }))) : (_jsxs(_Fragment, { children: [outsideRows, unnamedUnsaved > 0 && (_jsxs(Text, { size: "sm", c: "dimmed", py: 4, "data-testid": "entry-nav-unsaved-unlisted", children: [listedUnsaved + unlistedNamed.length > 0
                         ? `${unnamedUnsaved} more: `
                         : `${unnamedUnsaved} unsaved ${unnamedUnsaved === 1 ? 'entry' : 'entries'}: `, unnamedUnsaved === 1 ? 'loading its name…' : 'loading their names…'] }))] }));
+    // Changed: what the branch differs from its base in.
+    const changesData = branchChanges?.data;
+    const changedCount = changesData && changesData.entries.length + changesData.collections.length;
+    const changesError = changedMode ? branchChanges?.error : undefined;
+    const changesLoading = changedMode && !changesData && !changesError;
+    const base = branchChanges?.base ?? '';
+    const changedHeader = changedMode && (_jsxs(_Fragment, { children: [changesError && (_jsx(Alert, { my: 4, p: "xs", variant: "light", color: changesError.kind === 'syncing' ? 'yellow' : 'red', icon: changesError.kind === 'syncing' ? (_jsx(IconAlertTriangle, { size: 16 })) : (_jsx(IconAlertCircle, { size: 16 })), "data-testid": `entry-nav-branch-changed-${changesError.kind}`, children: _jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Text, { size: "sm", children: changesError.kind === 'syncing'
+                                ? (changesError.message ??
+                                    `This branch is being synced with ${base}. Try again in a moment.`)
+                                : changesData
+                                    ? 'Couldn’t refresh this branch’s changes. The list may be out of date.'
+                                    : 'Couldn’t load this branch’s changes.' }), _jsx(Button, { size: "compact-sm", variant: "subtle", loading: branchChanges?.retrying, onClick: branchChanges?.onRetry, children: "Retry" })] }) })), changesData?.baseMissing && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-branch-changed-missing", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["Couldn\u2019t compare this branch with ", base, ": ", base, " no longer exists."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Show all entries" })] })), changesData?.baseUnavailable && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-branch-changed-unavailable", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["Couldn\u2019t compare this branch with ", base, ": they share no history."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Show all entries" })] })), changesData?.hiddenChanges && (_jsx(Text, { size: "sm", c: "dimmed", py: 4, "data-testid": "entry-nav-branch-changed-hidden", children: "Some changes are in entries you can\u2019t view." }))] }));
+    const { unlisted: changedUnlisted, deleted: changedDeleted, settings } = changedBeneath;
+    const changedRows = (changedUnlisted.length > 0 ||
+        changedDeleted.length > 0 ||
+        settings.length > 0) && (_jsxs(_Fragment, { children: [(changedUnlisted.length > 0 || settings.length > 0) && (_jsxs(Stack, { gap: 2, py: 4, align: "flex-start", "data-testid": "entry-nav-branch-changed-outside", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Not in the content tree" }), changedUnlisted.map((entry) => (_jsx(Button, { size: "compact-sm", variant: "subtle", color: "gray", rightSection: _jsx(ChangeMarker, { kind: entry.entry.status, context: movedFrom(entry.entry) ?? undefined }), onClick: () => onSelect(entry.path), children: entry.label }, entry.path))), settings.map((collection) => (_jsxs(Group, { gap: 6, px: 10, wrap: "nowrap", children: [_jsx(Text, { size: "sm", children: collection.label }), _jsx(ChangeMarker, { kind: "settings" })] }, collection.path)))] })), changedDeleted.length > 0 && (_jsxs(Stack, { gap: 2, py: 4, align: "flex-start", "data-testid": "entry-nav-branch-changed-deleted", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Deleted on this branch" }), changedDeleted.map((entry) => {
+                        const name = (_jsxs(Text, { component: "span", size: "sm", truncate: "end", style: { minWidth: 0 }, children: [entry.label, ' ', _jsx(Text, { component: "span", size: "xs", c: "dimmed", children: entry.collection })] }));
+                        return onShowDeletedChanges ? (_jsx(Button, { size: "compact-sm", variant: "subtle", color: "gray", maw: "100%", rightSection: _jsx(ChangeMarker, { kind: "deleted", context: null }), "aria-label": `${entry.label} in ${entry.collection}, deleted on this branch. ${EDITOR_ACTIONS.showChanges}`, onClick: () => onShowDeletedChanges(entry.entry, entry.label), "data-testid": "entry-nav-deleted-entry", children: name }, entry.path)) : (_jsxs(Group, { gap: 6, px: 10, wrap: "nowrap", style: { minWidth: 0 }, children: [name, _jsx(ChangeMarker, { kind: "deleted", context: null })] }, entry.path));
+                    })] }))] }));
+    const otherFiles = changedMode ? (changesData?.otherFiles ?? []) : [];
+    const otherFilesDetails = otherFiles.length > 0 && (_jsxs(Stack, { gap: 2, py: 4, align: "flex-start", "data-testid": "entry-nav-branch-changed-other", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Other files changed" }), _jsxs(Anchor, { component: "button", type: "button", size: "xs", px: 10, "aria-expanded": otherFilesOpen, "aria-controls": otherFilesOpen ? otherFilesId : undefined, onClick: () => setOtherFilesOpen((open) => !open), style: { display: 'inline-flex', alignItems: 'center', gap: 2 }, children: [_jsx(IconChevronRight, { size: 12, "aria-hidden": true, style: {
+                            transform: otherFilesOpen ? 'rotate(90deg)' : undefined,
+                            transition: 'transform 120ms ease',
+                        } }), "Details"] }), otherFilesOpen && (_jsxs(Stack, { id: otherFilesId, gap: 2, w: "100%", children: [_jsx(Code, { block: true, style: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' }, children: otherFiles.join('\n') }), changesData?.otherFilesTruncated && (_jsxs(Text, { size: "xs", c: "dimmed", children: ["List shows the first ", otherFiles.length, " files."] }))] }))] }));
+    const nothingChanged = !!changesData &&
+        !changesData.baseUnavailable &&
+        !changesData.baseMissing &&
+        !changesData.hiddenChanges &&
+        changesData.entries.length === 0 &&
+        changesData.collections.length === 0;
+    const branchChangedNotice = !changedMode || !changesData ? null : query.trim() &&
+        filteredTree.length === 0 &&
+        !changedRows ? (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-branch-changed-no-match", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No changed entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Search all entries" })] })) : (_jsxs(_Fragment, { children: [nothingChanged && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-branch-changed-none", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["Nothing on this branch differs from ", base, " yet."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Show all entries" }), unsavedCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", c: "dimmed", "data-testid": "entry-nav-branch-changed-unsaved", children: unsavedCount === 1
+                                    ? '1 unsaved entry isn’t included until it’s saved.'
+                                    : `${unsavedCount} unsaved entries aren’t included until they’re saved.` }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: onShowUnsaved ?? (() => onEntryFilterChange?.('unsaved')), children: "Show unsaved" })] }))] })), changedRows, otherFilesDetails] }));
+    const modeNotice = unsavedOnly ? unsavedNotice : branchChangedNotice;
+    const changesSkeleton = (_jsx(Stack, { gap: 10, py: "sm", px: 10, "aria-hidden": true, "data-testid": "entry-nav-branch-changed-loading", children: [70, 55, 80, 45].map((width, i) => (_jsxs(Group, { gap: 6, wrap: "nowrap", pl: i % 2 ? 18 : 0, children: [_jsx(Skeleton, { h: 12, w: `${width}%` }), _jsx(Skeleton, { h: 12, w: 40 })] }, i))) }));
     return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "entry-navigator", children: [treeData.length > 0 && (_jsx(TextInput, { ref: mergedFilterRef, size: "sm", py: 4, "aria-label": "Find entries", "aria-keyshortcuts": filterShortcut?.keys, spellCheck: false, "data-autofocus": true, placeholder: "Find entries", value: query, onChange: (event) => setQuery(event.currentTarget.value), onKeyDown: handleFilterKeyDown, leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), rightSection: query ? (_jsx(Tooltip, { label: "Clear search", withinPortal: true, children: _jsx(CloseButton, { size: "sm", "aria-label": "Clear search", onClick: clearFilter }) })) : filterShortcut ? (
                 // The placeholder's colour, so it never reads brighter than the placeholder beside it.
-                _jsx(Text, { size: "xs", c: "var(--mantine-color-placeholder)", "aria-hidden": true, "data-testid": "entry-nav-filter-shortcut", children: filterShortcut.label })) : null, rightSectionWidth: query || !filterShortcut ? undefined : 'auto', rightSectionPointerEvents: query ? undefined : 'none', rightSectionProps: query || !filterShortcut ? undefined : { style: { paddingInline: 8 } }, "data-mantine-stop-propagation": query || onFilterEscape ? 'true' : undefined, "data-testid": "entry-nav-filter" })), onChangedOnlyChange && (treeData.length > 0 || unsavedCount > 0) && (_jsx(SegmentedControl, { size: "xs", fullWidth: true, mb: 4, "aria-label": "Entries shown", value: changedOnly ? 'changed' : 'all', onChange: (value) => onChangedOnlyChange(value === 'changed'), data: [
+                _jsx(Text, { size: "xs", c: "var(--mantine-color-placeholder)", "aria-hidden": true, "data-testid": "entry-nav-filter-shortcut", children: filterShortcut.label })) : null, rightSectionWidth: query || !filterShortcut ? undefined : 'auto', rightSectionPointerEvents: query ? undefined : 'none', rightSectionProps: query || !filterShortcut ? undefined : { style: { paddingInline: 8 } }, "data-mantine-stop-propagation": query || onFilterEscape ? 'true' : undefined, "data-testid": "entry-nav-filter" })), onEntryFilterChange && (treeData.length > 0 || unsavedCount > 0 || !!branchChanges) && (_jsx(SegmentedControl, { size: "xs", fullWidth: true, mb: 4, "aria-label": "Entries shown", value: unsavedOnly ? 'unsaved' : changedMode ? 'changed' : 'all', onChange: (value) => onEntryFilterChange(value), data: [
                     { value: 'all', label: 'All' },
-                    { value: 'changed', label: unsavedCount > 0 ? `Changed ${unsavedCount}` : 'Changed' },
-                ], "data-testid": "entry-nav-changed-filter" })), _jsxs(ScrollArea, { type: "auto", scrollbars: "y", offsetScrollbars: true, style: { flex: 1 }, children: [hiddenRootUnavailableRefs && hiddenRootUnavailableRefs.length > 0 && (_jsx(Box, { pt: "sm", children: _jsx(UnavailableTypeRow, { schemaRefs: hiddenRootUnavailableRefs }) })), hiddenRootAddRefused && (_jsx(Box, { pt: "sm", children: _jsx(AddRefusedRow, {}) })), treeData.length === 0 ? (branchNotAvailable ? (_jsx(BranchNotAvailableNotice, { onSwitchBranch: onSwitchBranch, "data-testid": "entry-nav-branch-not-available" })) : loading ? (_jsxs(Group, { gap: "xs", py: "sm", children: [_jsx(Loader, { size: "xs" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Loading content\u2026" })] })) : changedNotice ? (changedNotice) : (_jsx(Text, { size: "xs", c: "dimmed", py: "sm", children: "No content" }))) : filteredTree.length === 0 && changedOnly ? (changedNotice) : filteredTree.length === 0 ? (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-filter-empty", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: clearFilter, children: "Clear search" })] })) : (_jsxs(Box, { py: "sm", ref: treeBoxRef, children: [_jsx(Tree, { data: filteredTree, tree: tree, renderNode: renderNode, selectOnClick: false, levelOffset: "sm" }), changedNotice] }))] })] }));
+                    {
+                        value: 'unsaved',
+                        label: unsavedCount > 0 ? `Unsaved ${segmentCount(unsavedCount)}` : 'Unsaved',
+                    },
+                    ...(branchChanges
+                        ? [
+                            {
+                                value: 'changed',
+                                label: changedCount ? `Changed ${segmentCount(changedCount)}` : 'Changed',
+                            },
+                        ]
+                        : []),
+                ], "data-testid": "entry-nav-shown" })), branchChanges && (_jsx(VisuallyHidden, { role: "status", "data-testid": "entry-nav-branch-changed-status", children: changesAnnouncement })), _jsxs(ScrollArea, { type: "auto", scrollbars: "y", offsetScrollbars: true, style: { flex: 1 }, children: [changedHeader, hiddenRootUnavailableRefs && hiddenRootUnavailableRefs.length > 0 && (_jsx(Box, { pt: "sm", children: _jsx(UnavailableTypeRow, { schemaRefs: hiddenRootUnavailableRefs }) })), hiddenRootAddRefused && (_jsx(Box, { pt: "sm", children: _jsx(AddRefusedRow, {}) })), treeData.length === 0 ? (branchNotAvailable ? (_jsx(BranchNotAvailableNotice, { onSwitchBranch: onSwitchBranch, "data-testid": "entry-nav-branch-not-available" })) : loading ? (_jsxs(Group, { gap: "xs", py: "sm", children: [_jsx(Loader, { size: "xs" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Loading content\u2026" })] })) : changesLoading ? (changesSkeleton) : modeNotice ? (modeNotice) : (_jsx(Text, { size: "xs", c: "dimmed", py: "sm", children: "No content" }))) : changesLoading ? (changesSkeleton) : changedMode && !changesData ? null : filteredTree.length === 0 &&
+                        (unsavedOnly || changedMode) ? (modeNotice) : filteredTree.length === 0 ? (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-filter-empty", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: clearFilter, children: "Clear search" })] })) : (_jsxs(Box, { py: "sm", ref: treeBoxRef, children: [_jsx(Tree, { data: filteredTree, tree: tree, renderNode: renderNode, selectOnClick: false, levelOffset: "sm" }), modeNotice] }))] })] }));
 };
 export default EntryNavigator;

package/dist/editor/admin/SystemHealthPanel.js

@@ -15,6 +15,7 @@ import { IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react';
 import { openConfirm } from '../utils/confirm-modal.js';
 import { focusReturnProps } from '../utils/focus-return.js';
 import { formatRelativeTime } from '../relative-time.js';
+import { EDITOR_ACTIONS } from '../copy.js';
 import { useSystemHealth, } from './useSystemHealth.js';
 import { escapeForLog } from '../../utils/escape-text.js';
 import { branchStatusPresentation } from '../branch-status.js';
@@ -122,6 +123,35 @@ function BaseHoldAlert({ hold }) {
 function DivergedBranchesAlert({ names }) {
     return (_jsx(Alert, { color: "orange", icon: _jsx(IconAlertTriangle, { size: 16 }), title: `${plural(names.length, 'branch')} diverged from GitHub`, "data-testid": "diverged-branches-alert", children: _jsxs(Stack, { gap: 4, children: [_jsx(Text, { size: "sm", children: "This deployment's copy of each branch below holds editor work that conflicts with the branch on GitHub, usually because the GitHub branch was rebased or force-pushed, or because another CanopyCMS deployment sharing this repository uses the same branch name. Neither copy has been changed, and publishing the branch fails until they agree." }), _jsx(Text, { size: "sm", children: "A developer decides which version to keep. To keep GitHub's, first push it to a new branch name on GitHub, because \"Delete branch\" in the editor also deletes a published branch on GitHub; then delete this branch in the editor (withdraw it from review first if it is in review). The editor's changes cannot be copied to another branch: to keep them, leave this branch as it is, or re-enter them by hand in a new branch. For the base branch or a settings branch, ask a developer to check what changed on GitHub." }), _jsx(Group, { gap: 4, children: names.map((name) => (_jsx(Code, { children: escapeForLog(name) }, name))) })] }) }));
 }
+/**
+ * The branch namespace the CMS creates branches in, against the one the GitHub gateway writes. A
+ * mismatch leaves every new branch unpublishable, so it is shown before anything else needs it.
+ */
+function BranchNamespaceAlert({ own, gateway, }) {
+    if (own === undefined)
+        return null;
+    if (!own.ok) {
+        return (_jsx(Alert, { color: "red", icon: _jsx(IconAlertTriangle, { size: 16 }), title: "The branch namespace is not valid", "data-testid": "branch-namespace-alert", children: _jsx(Text, { size: "sm", children: own.error }) }));
+    }
+    if (gateway === undefined || gateway === own.namespace)
+        return null;
+    return (_jsx(Alert, { color: "red", icon: _jsx(IconAlertTriangle, { size: 16 }), title: "New branches cannot be published", "data-testid": "branch-namespace-alert", children: _jsxs(Text, { size: "sm", children: ["The CMS creates branches starting ", _jsx(Code, { children: escapeForLog(own.namespace) }), ", but the GitHub gateway writes only branches starting ", _jsx(Code, { children: escapeForLog(gateway) }), ". A developer sets branchNamespace, or CANOPYCMS_BRANCH_NAMESPACE, to the same value for both."] }) }));
+}
+/** Branch refs from metadata the CMS Lambda can write, so each is shown escaped. */
+function BranchRefs({ branches }) {
+    return (_jsx(Group, { gap: 4, children: branches.map((branch, i) => (_jsx(Code, { children: escapeForLog(branch.name) }, i))) }));
+}
+/**
+ * Editor branches the GitHub gateway will not publish, by ref, which is what a developer lists
+ * (worker/unpublishable-branches.ts), grouped by what would publish each.
+ */
+function UnpublishableBranchesAlert({ report, namespace, }) {
+    const unlisted = report.count - report.branches.length;
+    const listable = report.branches.filter((b) => b.reason === undefined);
+    const blocking = report.branches.filter((b) => b.reason === 'blocks-namespace');
+    const unlistable = report.branches.filter((b) => b.reason === 'unlistable');
+    return (_jsx(Alert, { color: "orange", icon: _jsx(IconAlertTriangle, { size: 16 }), title: `${plural(report.count, 'branch')} cannot be published`, "data-testid": "unpublishable-branches-alert", children: _jsxs(Stack, { gap: 4, children: [_jsxs(Text, { size: "sm", children: ["The GitHub gateway refuses to push each branch below, so submitting it for review fails. Either it is outside the branch namespace", namespace !== undefined && (_jsxs(_Fragment, { children: [' ', _jsx(Code, { children: escapeForLog(namespace) })] })), ' ', "and legacyBranches does not list it, or it is protected: the base branch, GitHub's default branch, or a match for an entry in protectedBranches."] }), listable.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", "data-testid": "unpublishable-listable", children: "A developer lists each branch from outside the namespace in legacyBranches (CANOPYCMS_LEGACY_BRANCHES on the GitHub gateway), and takes a protected one out of protectedBranches, or makes another branch GitHub's default. Otherwise, an editor re-enters its changes by hand in a new branch, which is created inside the namespace. A branch named like one inside the namespace with dashes for its slashes needs neither: an older worker renamed it, and the next git sync restores its name." }), _jsx(BranchRefs, { branches: listable })] })), blocking.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { size: "sm", "data-testid": "unpublishable-blocking", children: ["Delete each of these branches in the CMS, and by hand on GitHub too if it is there. One in review needs ", EDITOR_ACTIONS.withdrawFromReview, " first. While one exists, no branch in the namespace can be created or published."] }), _jsx(BranchRefs, { branches: blocking })] })), unlistable.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", "data-testid": "unpublishable-unlistable", children: "legacyBranches cannot hold these names, so an editor re-enters each branch's changes by hand in a new branch, which is created inside the namespace." }), _jsx(BranchRefs, { branches: unlistable })] })), unlisted > 0 && _jsxs(Text, { size: "sm", children: ["And ", unlisted, " more."] }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["As of", ' ', _jsx(TooltipDetail, { detail: absoluteTime(report.at), children: formatRelativeTime(report.at) })] })] }) }));
+}
 /**
  * Why the base branch needs an operator, or null when its last refresh needs
  * nothing. Shared by the overview and the base row's warning tooltip.
@@ -243,7 +273,7 @@ function OverviewTab({ health }) {
         workerVersion !== build.canopycmsVersion;
     return (_jsxs(Stack, { gap: "md", children: [error && (_jsx(Alert, { color: "red", icon: _jsx(IconAlertCircle, { size: 16 }), variant: "light", children: error })), _jsxs(Group, { gap: "sm", children: [_jsx(Badge, { color: liveness.color, variant: "light", size: "lg", children: liveness.label }), status.mode === 'dev' && (_jsx(Text, { size: "xs", c: "dimmed", children: "No worker runs in dev mode" }))] }), isRecentFatalError && lastFatalError && (_jsxs(Alert, { color: "red", icon: _jsx(IconAlertCircle, { size: 16 }), title: lastFatalError.phase === 'startup'
                     ? 'The worker failed to start'
-                    : 'The worker stopped while running', children: [_jsx(Text, { size: "sm", children: lastFatalError.message }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["at ", lastFatalError.at] })] })), status.settingsWorkspaceError && (_jsx(Alert, { color: "red", icon: _jsx(IconAlertCircle, { size: 16 }), title: "Settings workspace unavailable: groups and path rules are not loading", children: _jsx(Text, { size: "sm", children: status.settingsWorkspaceError }) })), status.schemaIssues && status.schemaIssues.length > 0 && (_jsx(Alert, { color: "yellow", icon: _jsx(IconAlertTriangle, { size: 16 }), title: "Content types this editor version doesn't know", "data-testid": "schema-issues-alert", children: _jsx(Stack, { gap: 4, children: status.schemaIssues.map((issue) => (_jsx(Text, { size: "sm", children: issue.kind === 'unknown-schema' ? (_jsxs(_Fragment, { children: [_jsx(Code, { children: issue.metaFile }), " names ", _jsx(Code, { children: issue.schemaRef }), ", so entry type ", _jsx(Code, { children: issue.entryType }), " is unavailable"] })) : (issue.message) }, `${issue.kind}:${issue.message}`))) }) })), status.workerStatus?.baseHold && _jsx(BaseHoldAlert, { hold: status.workerStatus.baseHold }), status.statusReadError && (_jsxs(Text, { size: "xs", c: "orange", children: ["Warning: could not read worker status (", status.statusReadError, ")"] })), lastGitSync?.tracked && lastGitSync.tracked.diverged.length > 0 && (_jsx(DivergedBranchesAlert, { names: lastGitSync.tracked.diverged })), status.workerStatus?.lastGitSyncError && (_jsxs(Alert, { color: "orange", icon: _jsx(IconAlertCircle, { size: 16 }), title: "Last git sync failed", children: [_jsx(Text, { size: "sm", children: status.workerStatus.lastGitSyncError.message }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["at ", status.workerStatus.lastGitSyncError.at] })] })), versionSkew && (_jsx(Alert, { color: "orange", icon: _jsx(IconAlertCircle, { size: 16 }), title: "API and worker versions differ", "data-testid": "version-skew-warning", children: _jsxs(Text, { size: "sm", children: ["The API runs canopycms ", build.canopycmsVersion, " but the worker runs canopycms", ' ', workerVersion, ". They were deployed from different builds."] }) })), _jsxs(Paper, { withBorder: true, p: "sm", children: [_jsx(Text, { size: "sm", fw: 600, children: "Build" }), _jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "build-api-version", children: ["API: canopycms ", build.canopycmsVersion] }), _jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "build-source-revision", children: ["Source revision:", ' ', build.sourceRevision ? (_jsx(Tooltip, { label: build.sourceRevision, children: _jsx(Code, { children: build.sourceRevision.slice(0, 12) }) })) : ('not set (pass the CANOPY_SOURCE_SHA build arg to the image build)')] }), _jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "build-worker-version", children: ["Worker version: ", workerVersion ? `canopycms ${workerVersion}` : 'unknown'] }), lastShutdown && (_jsxs(Text, { size: "xs", c: lastShutdown.outcome === 'drained' ? 'dimmed' : 'orange', "data-testid": "build-last-shutdown", children: ["Last worker shutdown: ", lastShutdown.reason, " at ", lastShutdown.at, lastShutdown.outcome === 'deadline' &&
+                    : 'The worker stopped while running', children: [_jsx(Text, { size: "sm", children: lastFatalError.message }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["at ", lastFatalError.at] })] })), status.settingsWorkspaceError && (_jsx(Alert, { color: "red", icon: _jsx(IconAlertCircle, { size: 16 }), title: "Settings workspace unavailable: groups and path rules are not loading", children: _jsx(Text, { size: "sm", children: status.settingsWorkspaceError }) })), status.schemaIssues && status.schemaIssues.length > 0 && (_jsx(Alert, { color: "yellow", icon: _jsx(IconAlertTriangle, { size: 16 }), title: "Content types this editor version doesn't know", "data-testid": "schema-issues-alert", children: _jsx(Stack, { gap: 4, children: status.schemaIssues.map((issue) => (_jsx(Text, { size: "sm", children: issue.kind === 'unknown-schema' ? (_jsxs(_Fragment, { children: [_jsx(Code, { children: issue.metaFile }), " names ", _jsx(Code, { children: issue.schemaRef }), ", so entry type ", _jsx(Code, { children: issue.entryType }), " is unavailable"] })) : (issue.message) }, `${issue.kind}:${issue.message}`))) }) })), _jsx(BranchNamespaceAlert, { own: status.branchNamespace, gateway: status.workerStatus?.gatewayBranchNamespace }), status.workerStatus?.baseHold && _jsx(BaseHoldAlert, { hold: status.workerStatus.baseHold }), status.statusReadError && (_jsxs(Text, { size: "xs", c: "orange", children: ["Warning: could not read worker status (", status.statusReadError, ")"] })), lastGitSync?.tracked && lastGitSync.tracked.diverged.length > 0 && (_jsx(DivergedBranchesAlert, { names: lastGitSync.tracked.diverged })), status.workerStatus?.unpublishableBranches && (_jsx(UnpublishableBranchesAlert, { report: status.workerStatus.unpublishableBranches, namespace: status.workerStatus.gatewayBranchNamespace })), status.workerStatus?.lastGitSyncError && (_jsxs(Alert, { color: "orange", icon: _jsx(IconAlertCircle, { size: 16 }), title: "Last git sync failed", children: [_jsx(Text, { size: "sm", children: status.workerStatus.lastGitSyncError.message }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["at ", status.workerStatus.lastGitSyncError.at] })] })), versionSkew && (_jsx(Alert, { color: "orange", icon: _jsx(IconAlertCircle, { size: 16 }), title: "API and worker versions differ", "data-testid": "version-skew-warning", children: _jsxs(Text, { size: "sm", children: ["The API runs canopycms ", build.canopycmsVersion, " but the worker runs canopycms", ' ', workerVersion, ". They were deployed from different builds."] }) })), _jsxs(Paper, { withBorder: true, p: "sm", children: [_jsx(Text, { size: "sm", fw: 600, children: "Build" }), _jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "build-api-version", children: ["API: canopycms ", build.canopycmsVersion] }), _jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "build-source-revision", children: ["Source revision:", ' ', build.sourceRevision ? (_jsx(Tooltip, { label: build.sourceRevision, children: _jsx(Code, { children: build.sourceRevision.slice(0, 12) }) })) : ('not set (pass the CANOPY_SOURCE_SHA build arg to the image build)')] }), _jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "build-worker-version", children: ["Worker version: ", workerVersion ? `canopycms ${workerVersion}` : 'unknown'] }), lastShutdown && (_jsxs(Text, { size: "xs", c: lastShutdown.outcome === 'drained' ? 'dimmed' : 'orange', "data-testid": "build-last-shutdown", children: ["Last worker shutdown: ", lastShutdown.reason, " at ", lastShutdown.at, lastShutdown.outcome === 'deadline' &&
                                 ` · drain deadline hit, aborted ${lastShutdown.abandoned?.join(', ') ?? 'in-flight work'}`, lastShutdown.outcome === 'drained' &&
                                 lastShutdown.drainMs !== undefined &&
                                 ` · drained in ${(lastShutdown.drainMs / 1000).toFixed(1)}s`, lastShutdown.outcome === 'not-drained' && ' (a crash or a forced stop)'] })), lastFatalError?.phase === 'startup' && (_jsxs(Text, { size: "xs", c: "orange", "data-testid": "build-failed-start", children: ["Last start failed at ", lastFatalError.at] })), _jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "build-media", children: ["Media storage:", ' ', status.assetStore.configured ? 'configured' : 'not configured — uploads are disabled'] }), _jsxs(Text, { size: "xs", c: status.imageProcessing.available ? 'dimmed' : 'orange', "data-testid": "build-image-processing", children: ["Image processing:", ' ', status.imageProcessing.available
@@ -344,6 +374,11 @@ function BranchesTab({ health }) {
 function DuplicateRepairDetails({ dirName, duplicates, }) {
     return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Text, { size: "sm", children: ["Branch ", _jsx(Code, { children: dirName })] }), _jsx(Text, { size: "sm", children: DUPLICATE_REPAIR_CONFIRM_TEXT }), duplicates.map((d) => (_jsxs(Paper, { withBorder: true, p: "xs", radius: "sm", "data-testid": `duplicate-id-${d.id}`, children: [_jsxs(Text, { size: "xs", fw: 600, children: ["Content ID ", _jsx(Code, { children: d.id })] }), _jsxs(Text, { size: "xs", children: ["Keep: ", _jsx(Code, { children: d.keptPath })] }), d.droppedPaths.map((p) => (_jsxs(Text, { size: "xs", children: ["Archive: ", _jsx(Code, { children: p })] }, p)))] }, d.id))), _jsx(Text, { size: "xs", c: "dimmed", children: DUPLICATE_REPAIR_EDITOR_NOTE })] }));
 }
+/** The absolute time a relative one's tooltip shows, or `iso` when it does not parse. */
+const absoluteTime = (iso) => {
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+};
 /** "2d ago, 1/1/2026, 9:00:00 AM": inside a tooltip, so the absolute date sits beside it. */
 const firstFailed = (iso) => {
     const date = new Date(iso);

package/dist/editor/admin/useSystemHealth.js

@@ -237,6 +237,7 @@ export function useSystemHealth(options) {
             const result = await apiClient.workflow.markMerged({ branch: branchName });
             if (!result.ok)
                 throw new Error(result.error || 'Failed to mark branch as merged');
+            // Diagnosis keeps the full ref; the Branches table beside it shows the workspace directory.
             notifications.show({ message: `Branch "${branchName}" marked as merged`, color: 'green' });
             await refresh();
         }

package/dist/editor/branch-names.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The names an editor sees one branch by. A listed branch has its full name (`name`, the ref
+ * `canopycms/prod/spring`), which keys everything the editor stores, and a short name
+ * (`shortName`, `spring`; a branch outside the namespace lists its full name), which the person
+ * sees and, unless another branch's short name shadows it, the URL carries (`branchUrlName`).
+ * Requests name a listed branch by the exact form instead (`requestSegments`).
+ */
+import type { BranchListItem } from '../api/branch.js';
+type Named = Pick<BranchListItem, 'name' | 'shortName'>;
+/** What a person is shown for a branch. */
+export declare function displayBranchName(branch: Named): string;
+/**
+ * The listed branch `name` opens: `resolveExactly`'s answer, else the branch whose full name is
+ * `name` sanitized, which catches a bookmark carrying a name's raw form ("feature/x" for the
+ * persisted "feature-x"). A sanitized match counts only when its own name resolves back to it:
+ * the server refuses the raw form, and a shadowed branch would open a different one.
+ */
+export declare function resolveListedBranch<B extends Named>(branches: readonly B[], name: string): B | undefined;
+/**
+ * The `?branch=` value for `branch`: its short name when that opens the same branch, else its full
+ * name when that does, else the exact form. Only the exact form opens a
+ * branch outside the namespace whose name a namespace branch's short name takes.
+ */
+export declare function branchUrlName<B extends Named>(branches: readonly B[], branch: B): string;
+/**
+ * The `/:branch` segment requests name each listed branch by, keyed by full name: the exact form,
+ * which the server resolves to that branch alone. Any other form it resolves again on every
+ * request, so a dev active-branch change (`git checkout -b spring`) or a branch hidden from the
+ * requester could put a different branch behind the same short name.
+ */
+export declare function requestSegments<B extends Named>(branches: readonly B[]): Map<string, string>;
+/**
+ * The `/:branch` segment of a name no listed branch maps: the exact form when it holds a `/`, as a
+ * short name does only when it is a full name (paths/branch-name.ts `branchShortName`), so no path
+ * carries `%2F`; else the name as given, which a short name needs.
+ */
+export declare function unlistedSegment(name: string): string;
+/**
+ * A name the editor resolves (`resolveListedBranch`) to `branch`, for an action on its card: its
+ * full name, else its `branchUrlName` when another branch's short name shadows the full name.
+ */
+export declare function branchAddress<B extends Named>(branches: readonly B[], branch: B): string;
+export {};

package/dist/editor/branch-names.js

@@ -0,0 +1,75 @@
+// NOT branch or the '../paths' barrel: both pull node:fs into the browser bundle.
+import { sanitizeBranchName } from '../paths/branch-name.js';
+import { exactBranchName, exactBranchSegment, isExactBranchForm } from '../paths/validation.js';
+/** What a person is shown for a branch. */
+export function displayBranchName(branch) {
+    return branch.shortName ?? branch.name;
+}
+/**
+ * The listed branch `name` opens, as the server resolves it (branch-param.ts): by the exact form
+ * (`exactBranchSegment`) only the branch with that full name; else a namespace branch by its short
+ * name, then any branch by its full name. The server's first step, the base or active branch
+ * exactly, needs none here: while it applies, `shortNameOf` lists no namespace branch under
+ * either's name, and when the base cannot be resolved the server skips it too. A branch outside the
+ * namespace lists its full name as its short name, so only a namespace branch matches by short name.
+ */
+function resolveExactly(branches, name) {
+    if (isExactBranchForm(name)) {
+        const exact = exactBranchName(name);
+        return exact === null ? undefined : branches.find((b) => b.name === exact);
+    }
+    return (branches.find((b) => b.shortName === name && b.name !== name) ??
+        branches.find((b) => b.name === name));
+}
+/**
+ * The listed branch `name` opens: `resolveExactly`'s answer, else the branch whose full name is
+ * `name` sanitized, which catches a bookmark carrying a name's raw form ("feature/x" for the
+ * persisted "feature-x"). A sanitized match counts only when its own name resolves back to it:
+ * the server refuses the raw form, and a shadowed branch would open a different one.
+ */
+export function resolveListedBranch(branches, name) {
+    const exact = resolveExactly(branches, name);
+    if (exact)
+        return exact;
+    const sanitized = branches.find((b) => b.name === sanitizeBranchName(name));
+    return sanitized && resolveExactly(branches, sanitized.name) === sanitized ? sanitized : undefined;
+}
+/**
+ * The `?branch=` value for `branch`: its short name when that opens the same branch, else its full
+ * name when that does, else the exact form. Only the exact form opens a
+ * branch outside the namespace whose name a namespace branch's short name takes.
+ */
+export function branchUrlName(branches, branch) {
+    const short = displayBranchName(branch);
+    if (resolveExactly(branches, short) === branch)
+        return short;
+    if (resolveExactly(branches, branch.name) === branch)
+        return branch.name;
+    return exactBranchSegment(branch.name);
+}
+/**
+ * The `/:branch` segment requests name each listed branch by, keyed by full name: the exact form,
+ * which the server resolves to that branch alone. Any other form it resolves again on every
+ * request, so a dev active-branch change (`git checkout -b spring`) or a branch hidden from the
+ * requester could put a different branch behind the same short name.
+ */
+export function requestSegments(branches) {
+    return new Map(branches.map((b) => [b.name, exactBranchSegment(b.name)]));
+}
+/**
+ * The `/:branch` segment of a name no listed branch maps: the exact form when it holds a `/`, as a
+ * short name does only when it is a full name (paths/branch-name.ts `branchShortName`), so no path
+ * carries `%2F`; else the name as given, which a short name needs.
+ */
+export function unlistedSegment(name) {
+    return name.includes('/') ? exactBranchSegment(name) : name;
+}
+/**
+ * A name the editor resolves (`resolveListedBranch`) to `branch`, for an action on its card: its
+ * full name, else its `branchUrlName` when another branch's short name shadows the full name.
+ */
+export function branchAddress(branches, branch) {
+    return resolveExactly(branches, branch.name) === branch
+        ? branch.name
+        : branchUrlName(branches, branch);
+}

package/dist/editor/components/BranchPill.d.ts

@@ -12,7 +12,7 @@ export interface BranchPillProps {
     pillRef?: Ref<HTMLButtonElement>;
 }
 /**
- * The branch's name. Its menu, headed by the full name, holds the branch actions. Below `sm` the
- * name truncates shorter, so the actions don't clip.
+ * The branch's name. Its menu, headed by the name untruncated, holds the branch actions. Below
+ * `sm` the name truncates shorter, so the actions don't clip.
  */
 export declare function BranchPill({ branchName, loading, unsavedCount: unsaved, onSwitchBranch, onRefreshBranch, onDiscardAll, pillRef, }: BranchPillProps): import("react/jsx-runtime").JSX.Element;