canopycms 0.0.67 → 0.0.68-int.101

package/dist/editor/Editor.js

@@ -6,10 +6,11 @@ import { IconChevronDown, IconChevronUp, IconDots, IconFolderPlus, IconPlus, } f
 import { notifications } from '@mantine/notifications';
 import { EntryNavigator } from './EntryNavigator.js';
 import { FormRenderer } from './FormRenderer.js';
-import { PreviewFrame } from './preview-bridge.js';
+import { PreviewFrame } from './PreviewFrame.js';
 import { EditorPanes } from './EditorPanes.js';
 import { CanopyCMSProvider } from './theme.js';
 import { BranchManager } from './BranchManager.js';
+import { BranchesDrawer } from './components/BranchesDrawer.js';
 import { CommentsPanel } from './CommentsPanel.js';
 import { GroupManager } from './GroupManager.js';
 import { PermissionManager } from './PermissionManager.js';
@@ -24,15 +25,16 @@ import { EditorFooter, EditorHeader, EditorSidebar } from './components/index.js
 import { RenameEntryModal } from './components/RenameEntryModal.js';
 import { EntryCreateModal } from './components/EntryCreateModal.js';
 import { ConfirmDeleteModal } from './components/ConfirmDeleteModal.js';
+import { NoEditPermissionNotice } from './components/NoEditPermissionNotice.js';
 import { CollectionEditor } from './schema-editor/index.js';
-import { AssetContextProvider, useApiClient } from './context/index.js';
+import { AssetContextProvider, authenticatedAssetBase, useApiClient } from './context/index.js';
 import { EntryLinkContext } from './fields/entry-link/index.js';
 import { MediaLibrary } from './media/MediaLibrary.js';
 /**
  * High-level editor wrapper that wires entry navigation, form rendering,
  * saving/loading, and preview rendering using entry definitions.
  */
-export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtitle = subtitle, branchName = '', collections, contentRoot, entryLinkUrl, initialSelectedId, initialValues, renderPreview, onCreateEntry, themeOptions, operatingMode, previewBaseByCollection, currentUser = 'current-user', canResolveComments = true, assetBaseUrl, basePath, AccountComponent, onAccountClick, onLogoutClick, customRenderers, }) => {
+export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtitle = subtitle, branchName = '', collections, contentRoot, entryLinkUrl, initialSelectedId, initialValues, renderPreview, onCreateEntry, themeOptions, operatingMode, previewBaseByCollection, previewPrefix, currentUser = 'current-user', canResolveComments = true, basePath, AccountComponent, onAccountClick, onLogoutClick, customRenderers, }) => {
     const [branchesLoading, setBranchesLoading] = useState(false);
     const [entriesLoading, setEntriesLoading] = useState(false);
     const [commentsLoading] = useState(false);
@@ -70,7 +72,7 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
     // Comments state (shared between useCommentSystem and useBranchManager)
     const [commentsForBranchSummaries, setCommentsForBranchSummaries] = useState([]);
     // 1. Branch manager (provides branchNameState, no dependencies)
-    const { branchName: branchNameState, setBranchName, branchSummaries, currentBranch, handleSubmit, handleWithdraw, handleRequestChanges, handleDelete, handleReloadBranchData, loadBranches, } = useBranchManager({
+    const { branchName: branchNameState, setBranchName, branchSummaries, currentBranch, addCreatedBranch, handleSubmit, handleWithdraw, handleRequestChanges, handleDelete, handleReloadBranchData, loadBranches, } = useBranchManager({
         initialBranch: branchName,
         operatingMode,
         setBusy: setBranchesLoading,
@@ -89,15 +91,15 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
     // loading state during that window anyway.
     const branchContentLocked = currentBranch?.writeBlocked ?? true;
     // 2. Entry manager (depends on branchNameState, owns selectedPath)
-    const { selectedPath, setSelectedPath, entries: entriesState, collections: collectionsFromApi, currentEntry, availableSchemas, entriesInitializing, navigatorOpen, setNavigatorOpen, refreshEntries, handleCreateEntry, renameEntry, loadEntry, saveEntry, getEntryVersion, createModalOpen, createModalCollection, createModalError, createModalCreating, createModalExistingSlugs, handleCreateModalSubmit, closeCreateModal, } = useEntryManager({
+    const { selectedPath, setSelectedPath, entries: entriesState, collections: collectionsFromApi, currentEntry, availableSchemas, entriesInitializing, navigatorOpen, setNavigatorOpen, refreshEntries, handleCreateEntry, renameEntry, loadEntry, readEntryValue, saveEntry, getEntryVersion, createModalOpen, createModalCollection, createModalError, createModalCreating, createModalExistingSlugs, handleCreateModalSubmit, closeCreateModal, } = useEntryManager({
         initialEntries: entries,
         initialSelectedId,
         branchName: branchNameState,
         collections,
-        previewBaseByCollection,
         resolvePreviewSrc: (entry) => buildPreviewSrc(entry, {
             branchName: branchNameState,
             previewBaseByCollection,
+            previewPrefix,
             contentRoot,
             basePath,
         }),
@@ -125,13 +127,14 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
         setPreviewLoadingState({});
     }, [currentEntry?.contentId]);
     // 3. Draft manager (depends on branchNameState, selectedPath from useEntryManager)
-    const { setDrafts, loadedValues, setLoadedValues, effectiveValue, modifiedCount, editedFiles, handleSave, handleDiscardDrafts, handleDiscardFileDraft, handleReload, isSelectedDirty, isAnyDirty, fieldErrors, } = useDraftManager({
+    const { setDrafts, loadedValues, setLoadedValues, effectiveValue, modifiedCount, editedFiles, handleSave, handleDiscardDrafts, handleDiscardFileDraft, handleReload, isSelectedDirty, resolveUnsaved, fieldErrors, } = useDraftManager({
         branchName: branchNameState,
         selectedPath,
         currentEntry,
         entries: entriesState,
         initialValues,
         loadEntry,
+        readEntryValue,
         saveEntry,
         getEntryVersion,
         setBusy: setEntriesLoading,
@@ -139,12 +142,14 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
             void refreshEntries(branchNameState).catch((err) => console.error('Failed to refresh entries after save', err));
         },
     });
-    // 4. Branch actions (depends on isAnyDirty, setBranchName)
-    const { handleBranchChange, handleCreateBranch } = useBranchActions({
+    // 4. Branch actions (depends on resolveUnsaved, setBranchName)
+    const { handleBranchChange, confirmCreate: confirmCreateBranch, handleCreateBranch, confirmOpen: branchConfirmOpen, } = useBranchActions({
         branchName: branchNameState,
         setBranchName,
-        isAnyDirty,
+        getUnsaved: resolveUnsaved,
         onReloadBranches: () => loadBranches(),
+        onBranchCreated: addCreatedBranch,
+        userId: userContext?.userId,
     });
     // 5. Comment system (depends on branchNameState)
     const { comments, focusedFieldPath, highlightThreadId, commentsPanelOpen, setCommentsPanelOpen, handleAddComment, handleResolveThread, handleJumpToField, handleJumpToEntry, handleJumpToBranch, } = useCommentSystem({
@@ -224,9 +229,8 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                 // branch's content. Writing it would (a) show it as the new branch's
                 // content and (b) satisfy the skip gate above, permanently suppressing
                 // the new branch's own load -- which also leaves the new branch's OCC
-                // token unset, turning the next save into a blind overwrite that can
-                // never 409. Drop it instead; the new branch has its own load running
-                // under its own key.
+                // token unset, so saveEntry refuses every save of the entry. Drop it
+                // instead; the new branch has its own load running under its own key.
                 if (currentBranchRef.current !== requestBranch)
                     return;
                 setLoadedValues((prev) => ({ ...prev, [contentId]: loaded }));
@@ -599,7 +603,7 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                     width: '100%',
                     height: '100%',
                     border: '1px solid var(--mantine-color-gray-3)',
-                }, highlightEnabled: highlightEnabled, onPreviewError: setPreviewError })] })) : (_jsx(Paper, { withBorder: true, shadow: "xs", h: "100%", bg: "white", style: {
+                }, highlightEnabled: highlightEnabled, onPreviewError: setPreviewError, assetBase: authenticatedAssetBase(basePath) })] })) : (_jsx(Paper, { withBorder: true, shadow: "xs", h: "100%", bg: "white", style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -607,12 +611,14 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                 ? 'Setting up your branch workspace…'
                 : entriesInitializing
                     ? 'Loading content…'
-                    : 'Select an item to start editing.' }) }));
+                    : currentEntry && !currentEntry.previewSrc
+                        ? 'No preview for this entry.'
+                        : 'Select an item to start editing.' }) }));
     const sidebarWidth = 64;
     const footerHeight = 40;
     const headerTitle = currentEntry?.label ?? currentEntry?.slug ?? title;
     const breadcrumbSegments = useMemo(() => buildBreadcrumbSegments(currentEntry, collectionLabels), [collectionLabels, currentEntry]);
-    return (_jsx(CanopyCMSProvider, { ...(themeOptions ?? {}), children: _jsx(AssetContextProvider, { baseUrl: assetBaseUrl, basePath: basePath, children: _jsxs(Box, { bg: "gray.0", style: { minHeight: '100vh', width: '100%' }, children: [_jsx(EditorHeader, { ref: headerRef, siteTitle: siteTitle, siteSubtitle: siteSubtitle, headerTitle: headerTitle, currentEntry: currentEntry, branchName: branchNameState, operatingMode: operatingMode, branchStatus: currentBranch?.status, busy: busy, breadcrumbSegments: breadcrumbSegments, editedFiles: editedFiles, modifiedCount: modifiedCount, unresolvedCommentCount: comments.filter((t) => !t.resolved).length, comments: comments, hasUnsavedChanges: isSelectedDirty(), userContext: userContext, branchCreatedBy: currentBranch?.createdBy, branchAccess: currentBranch?.access, 
+    return (_jsx(CanopyCMSProvider, { ...(themeOptions ?? {}), children: _jsx(AssetContextProvider, { basePath: basePath, children: _jsxs(Box, { bg: "gray.0", style: { minHeight: '100vh', width: '100%' }, children: [_jsx(EditorHeader, { ref: headerRef, siteTitle: siteTitle, siteSubtitle: siteSubtitle, headerTitle: headerTitle, currentEntry: currentEntry, branchName: branchNameState, operatingMode: operatingMode, branchStatus: currentBranch?.status, busy: busy, breadcrumbSegments: breadcrumbSegments, editedFiles: editedFiles, modifiedCount: modifiedCount, unresolvedCommentCount: comments.filter((t) => !t.resolved).length, comments: comments, hasUnsavedChanges: isSelectedDirty(), userContext: userContext, branchCreatedBy: currentBranch?.createdBy, branchAccess: currentBranch?.access, 
                         // Fail-closed for the same reason branchContentLocked above is:
                         // isProtected/writeBlocked gate real actions in EditorHeader (hiding
                         // Submit, disabling Save), so a missing wire value must read as
@@ -628,7 +634,13 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                             // revalidateOnFocus false, and useBranchesData's refreshInterval
                             // is 0 without data. Reloading is idempotent.
                             loadBranches().catch(console.error);
-                        }, onCommentsPanelOpen: () => setCommentsPanelOpen(true), onSave: handleSave, onSubmit: () => branchNameState && handleSubmit(branchNameState), onWithdraw: () => branchNameState && handleWithdraw(branchNameState) }), _jsx(Box, { style: {
+                        }, onCommentsPanelOpen: () => setCommentsPanelOpen(true), onSave: handleSave, onSubmit: () => {
+                            if (branchNameState)
+                                handleSubmit(branchNameState).catch(console.error);
+                        }, onWithdraw: () => {
+                            if (branchNameState)
+                                handleWithdraw(branchNameState).catch(console.error);
+                        } }), _jsx(Box, { style: {
                             paddingTop: headerHeight,
                             paddingBottom: footerHeight,
                             paddingRight: sidebarWidth,
@@ -644,7 +656,7 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                                                 ? 'Setting up your branch workspace…'
                                                 : entriesInitializing
                                                     ? 'Loading content…'
-                                                    : 'Select an item to start editing.' })) : currentEntry.canEdit === false ? (_jsx(CenteredMessage, { children: "You don't have permission to edit this content." })) : schema.length > 0 && effectiveValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsx(FormRenderer, { fields: schema, value: effectiveValue, onChange: (next) => {
+                                                    : 'Select an item to start editing.' })) : currentEntry.canEdit === false ? (_jsx(NoEditPermissionNotice, { entryPath: currentEntry.path })) : schema.length > 0 && effectiveValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsx(FormRenderer, { fields: schema, value: effectiveValue, onChange: (next) => {
                                                     const contentId = currentEntry?.contentId;
                                                     if (contentId) {
                                                         setDrafts((prev) => ({ ...prev, [contentId]: next }));
@@ -662,7 +674,7 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                                                     })), selectedPath: selectedPath, onSelect: (id) => {
                                                     setSelectedPath(id);
                                                     setNavigatorOpen(false);
-                                                }, onTreeControllerReady: handleTreeControllerReady, expandedStateRef: treeExpandedStateRef, onExpandedStateChange: handleExpandedStateChange, onDeleteEntry: handleDeleteEntry, onRenameEntry: handleRenameEntry, onReorderEntry: handleReorderEntry, hiddenRootPath: hiddenRootPath, loading: entriesInitializing, readOnly: branchContentLocked }) }) })] })] }), _jsx(Drawer, { opened: branchManagerOpen, onClose: () => setBranchManagerOpen(false), position: "right", title: _jsxs("div", { children: [_jsx(Title, { order: 4, children: "Branches" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Manage access, status, and lifecycle" })] }), padding: "md", size: 420, overlayProps: { blur: 2 }, children: _jsx(BranchManager, { branches: branchSummaries, mode: operatingMode, user: userContext, onSelect: async (name) => {
+                                                }, onTreeControllerReady: handleTreeControllerReady, expandedStateRef: treeExpandedStateRef, onExpandedStateChange: handleExpandedStateChange, onDeleteEntry: handleDeleteEntry, onRenameEntry: handleRenameEntry, onReorderEntry: handleReorderEntry, hiddenRootPath: hiddenRootPath, loading: entriesInitializing, readOnly: branchContentLocked }) }) })] })] }), _jsx(BranchesDrawer, { opened: branchManagerOpen, onClose: () => setBranchManagerOpen(false), confirmOpen: branchConfirmOpen, children: _jsx(BranchManager, { branches: branchSummaries, mode: operatingMode, user: userContext, onSelect: async (name) => {
                                 try {
                                     await handleBranchChange(name);
                                     setBranchManagerOpen(false);
@@ -671,9 +683,7 @@ export const Editor = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                                     console.error('Branch change failed or was cancelled:', err);
                                     // Don't close branch manager if there was an error or user cancelled
                                 }
-                            }, onCreate: (branch) => {
-                                handleCreateBranch(branch).catch((err) => console.error(err));
-                            }, onSubmit: (name) => {
+                            }, onBeforeCreate: confirmCreateBranch, onCreate: handleCreateBranch, onSubmit: (name) => {
                                 handleSubmit(name).catch((err) => console.error(err));
                             }, onWithdraw: (name) => {
                                 handleWithdraw(name).catch((err) => console.error(err));

package/dist/editor/FormRenderer.js

@@ -15,11 +15,24 @@ import { ReferenceField } from './fields/ReferenceField.js';
 import { CodeField } from './fields/CodeField.js';
 import { ImageField } from './fields/ImageField.js';
 import { ObjectField } from './fields/ObjectField.js';
+import { FieldDescription, groupDescriptionProps } from './fields/FieldDescription.js';
 import { InlineGroupField } from './fields/InlineGroupField.js';
 import { formatCanopyPath, normalizeCanopyPath } from './canopy-path.js';
 import { FieldWrapper } from './comments/FieldWrapper.js';
 import { EntryComments } from './comments/EntryComments.js';
 import { useReferenceResolution } from './hooks/useReferenceResolution.js';
+/**
+ * Card heading for an object-list item: the value of its `itemTitleField` when that is a
+ * non-blank string or a number, otherwise `fallback`.
+ */
+const listItemTitle = (item, itemTitleField, fallback) => {
+    const raw = itemTitleField ? item?.[itemTitleField] : undefined;
+    if (typeof raw === 'number' && Number.isFinite(raw))
+        return String(raw);
+    if (typeof raw === 'string' && raw.trim() !== '')
+        return raw.trim();
+    return fallback;
+};
 const normalizeOptions = (options) => {
     if (!options)
         return [];
@@ -75,28 +88,28 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
         switch (field.type) {
             case 'string':
                 if (field.list) {
-                    return wrapWithComments(_jsx(StringListField, { id: fieldId, label: label, value: Array.isArray(currentValue) ? currentValue : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                    return wrapWithComments(_jsx(StringListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue) ? currentValue : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
                 }
-                return wrapWithComments(_jsx(TextField, { id: fieldId, label: label, value: currentValue ?? '', onChange: update, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(TextField, { id: fieldId, label: label, description: field.description, value: currentValue ?? '', onChange: update, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             case 'boolean':
-                return wrapWithComments(_jsx(ToggleField, { id: fieldId, label: label, value: Boolean(currentValue), onChange: (v) => update(Boolean(v)), dataCanopyField: normalizeCanopyPath(path), testId: `field-toggle-${field.name}` }, fieldKey(path)));
+                return wrapWithComments(_jsx(ToggleField, { id: fieldId, label: label, description: field.description, value: Boolean(currentValue), onChange: (v) => update(Boolean(v)), dataCanopyField: normalizeCanopyPath(path), testId: `field-toggle-${field.name}` }, fieldKey(path)));
             case 'number':
                 if (field.list) {
-                    return wrapWithComments(_jsx(NumberListField, { id: fieldId, label: label, value: Array.isArray(currentValue)
+                    return wrapWithComments(_jsx(NumberListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue)
                             ? currentValue.filter((v) => typeof v === 'number')
                             : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
                 }
-                return wrapWithComments(_jsx(NumberField, { id: fieldId, label: label, value: typeof currentValue === 'number' ? currentValue : undefined, onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(NumberField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'number' ? currentValue : undefined, onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             case 'datetime':
-                return wrapWithComments(_jsx(DateTimeField, { id: fieldId, label: label, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(DateTimeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             case 'markdown':
             case 'mdx':
-                return wrapWithComments(_jsx(MarkdownField, { id: fieldId, label: label, value: currentValue ?? '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(MarkdownField, { id: fieldId, label: label, description: field.description, value: currentValue ?? '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             case 'select': {
                 const selectField = field;
                 const options = normalizeOptions(selectField.options);
                 const isMulti = Boolean(selectField.list);
-                return wrapWithComments(_jsx(SelectField, { id: fieldId, label: label, options: options, value: isMulti
+                return wrapWithComments(_jsx(SelectField, { id: fieldId, label: label, description: field.description, options: options, value: isMulti
                         ? Array.isArray(currentValue)
                             ? currentValue
                             : []
@@ -108,7 +121,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                     ? normalizeOptions(referenceField.options)
                     : undefined;
                 const isMulti = Boolean(referenceField.list);
-                return wrapWithComments(_jsx(ReferenceField, { id: fieldId, label: label, options: staticOptions?.map((opt) => ({
+                return wrapWithComments(_jsx(ReferenceField, { id: fieldId, label: label, description: field.description, options: staticOptions?.map((opt) => ({
                         label: opt.label,
                         value: opt.value,
                     })), collections: referenceField.collections, entryTypes: referenceField.entryTypes, displayField: referenceField.displayField, branch: branch, value: isMulti
@@ -119,7 +132,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
             }
             case 'image': {
                 const imageField = field;
-                return wrapWithComments(_jsx(ImageField, { id: fieldId, label: label, value: currentValue, onChange: (next) => update(next), aspect: imageField.aspect, altOptional: imageField.altOptional, dataCanopyField: canopyPath, errors: {
+                return wrapWithComments(_jsx(ImageField, { id: fieldId, label: label, description: field.description, value: currentValue, onChange: (next) => update(next), aspect: imageField.aspect, altOptional: imageField.altOptional, dataCanopyField: canopyPath, errors: {
                         src: fieldErrors?.[`${canopyPath}.src`],
                         alt: fieldErrors?.[`${canopyPath}.alt`],
                         crop: fieldErrors?.[`${canopyPath}.crop`],
@@ -127,7 +140,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
             }
             case 'block': {
                 const blockField = field;
-                return wrapWithComments(_jsx(BlockField, { label: label, templates: blockField.templates, value: (Array.isArray(currentValue) ? currentValue : []), onChange: (next) => update(next), renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(BlockField, { label: label, description: field.description, templates: blockField.templates, value: (Array.isArray(currentValue) ? currentValue : []), onChange: (next) => update(next), renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             }
             case 'object': {
                 const objectField = field;
@@ -135,11 +148,14 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                     const items = Array.isArray(currentValue)
                         ? currentValue
                         : [];
-                    return wrapWithComments(_jsx(Paper, { withBorder: true, radius: "md", p: "md", shadow: "xs", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "sm", fw: 600, children: label }), _jsx(Button, { size: "xs", variant: "light", onClick: () => update([...items, {}]), children: "Add item" })] }), _jsxs(Stack, { gap: "sm", children: [items.map((item, idx) => (_jsx(Paper, { withBorder: true, radius: "md", p: "sm", shadow: "xs", children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", children: [_jsxs(Text, { size: "xs", fw: 700, children: [label, " #", idx + 1] }), _jsx(Button, { size: "xs", variant: "subtle", color: "red", onClick: () => update(items.filter((_, i) => i !== idx)), children: "Remove" })] }), _jsx(ObjectField, { label: objectField.label, fields: objectField.fields, value: item, onChange: (next) => {
-                                                            const nextItems = [...items];
-                                                            nextItems[idx] = next;
-                                                            update(nextItems);
-                                                        }, renderField: renderField, path: [...path, idx], dataCanopyField: normalizeCanopyPath([...path, idx]) })] }) }, fieldKey([...path, idx])))), items.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No items yet. Add one to get started." }))] })] }) }, fieldKey(path)));
+                    return wrapWithComments(_jsx(Paper, { withBorder: true, radius: "md", p: "md", shadow: "xs", ...groupDescriptionProps(fieldId, field.description), children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "sm", fw: 600, children: label }), _jsx(Button, { size: "xs", variant: "light", onClick: () => update([...items, {}]), children: "Add item" })] }), _jsx(FieldDescription, { baseId: fieldId, description: field.description }), _jsxs(Stack, { gap: "sm", children: [items.map((item, idx) => {
+                                            const itemTitle = listItemTitle(item, objectField.itemTitleField, `${label} #${idx + 1}`);
+                                            return (_jsx(Paper, { role: "group", "aria-label": itemTitle, withBorder: true, radius: "md", p: "sm", shadow: "xs", children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "xs", fw: 700, children: itemTitle }), _jsx(Button, { size: "xs", variant: "subtle", color: "red", onClick: () => update(items.filter((_, i) => i !== idx)), children: "Remove" })] }), _jsx(ObjectField, { fields: objectField.fields, value: item, onChange: (next) => {
+                                                                const nextItems = [...items];
+                                                                nextItems[idx] = next;
+                                                                update(nextItems);
+                                                            }, renderField: renderField, path: [...path, idx], dataCanopyField: normalizeCanopyPath([...path, idx]) })] }) }, fieldKey([...path, idx])));
+                                        }), items.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No items yet. Add one to get started." }))] })] }) }, fieldKey(path)));
                 }
                 // Unlike the list branch above (each item has its own Remove button), a
                 // non-list object has no other way back to `undefined`: a required child
@@ -151,10 +167,10 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                 // doesn't read as deleting the field from the schema.
                 const hasValue = currentValue !== undefined && currentValue !== null;
                 const canClear = objectField.required !== true && hasValue;
-                return wrapWithComments(_jsx(ObjectField, { label: label, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onRemove: canClear ? () => update(undefined) : undefined, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(ObjectField, { label: label, description: field.description, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onRemove: canClear ? () => update(undefined) : undefined, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             }
             case 'code':
-                return wrapWithComments(_jsx(CodeField, { id: fieldId, label: label, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(CodeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             default:
                 return (_jsxs(Text, { size: "xs", c: "dimmed", children: ["Unsupported field: ", field.type] }, fieldKey(path)));
         }

package/dist/editor/PreviewFrame.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+/**
+ * Lightweight iframe wrapper to keep the preview in sync with form state.
+ * It posts the latest draft data to the iframe after load and when data changes.
+ */
+export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, assetBase, }: {
+    src: string;
+    path: string;
+    data?: unknown;
+    isLoading?: unknown;
+    className?: string;
+    style?: CSSProperties;
+    highlightEnabled?: boolean;
+    /**
+     * The editor's authenticated asset route, a same-origin path, so it is sent with drafts only to
+     * a same-origin preview: another origin would resolve it against itself.
+     */
+    assetBase?: string;
+    /** Called when the preview reports a draft compile/render error; null clears it. */
+    onPreviewError?: (error: {
+        message: string;
+        fieldPath?: string;
+    } | null) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewFrame.js

@@ -0,0 +1,140 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_READY, isOpaqueOrigin, resolveMessageOrigin, } from './preview-bridge.js';
+const sendDraftUpdate = (iframe, message, targetOrigin) => {
+    if (!iframe?.contentWindow)
+        return;
+    const target = targetOrigin ?? resolveMessageOrigin(iframe.src);
+    if (isOpaqueOrigin(target))
+        return;
+    iframe.contentWindow.postMessage(message, target);
+};
+/**
+ * Lightweight iframe wrapper to keep the preview in sync with form state.
+ * It posts the latest draft data to the iframe after load and when data changes.
+ */
+export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, assetBase, }) => {
+    const iframeRef = useRef(null);
+    // Pin the preview origin from the src prop: outbound messages target it (never '*'),
+    // and inbound messages must come from it. An iframe that navigates cross-origin
+    // silently stops participating in the bridge.
+    const previewOrigin = resolveMessageOrigin(src);
+    // Show progress bar while waiting for the preview's ready handshake.
+    const [syncPending, setSyncPending] = useState(data !== undefined);
+    // Reset when navigating to a different entry (src change = new iframe page load).
+    const [prevSrc, setPrevSrc] = useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setSyncPending(data !== undefined);
+    }
+    // Inject the progress bar keyframe animation once per page.
+    useEffect(() => {
+        const styleId = 'canopycms-preview-sync-style';
+        if (!document.getElementById(styleId)) {
+            const el = document.createElement('style');
+            el.id = styleId;
+            el.textContent = `@keyframes canopy-preview-sync { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }`;
+            document.head.appendChild(el);
+        }
+    }, []);
+    const post = () => {
+        if (data === undefined)
+            return;
+        const sameOrigin = previewOrigin === window.location.origin;
+        sendDraftUpdate(iframeRef.current, {
+            type: CANOPY_PREVIEW_MESSAGE,
+            path,
+            data,
+            isLoading,
+            ...(assetBase !== undefined && sameOrigin ? { assetBase } : {}),
+        }, previewOrigin);
+    };
+    const postHighlight = () => {
+        if (!iframeRef.current?.contentWindow)
+            return;
+        if (isOpaqueOrigin(previewOrigin))
+            return;
+        const msg = {
+            type: CANOPY_PREVIEW_HIGHLIGHT,
+            enabled: Boolean(highlightEnabled),
+        };
+        iframeRef.current.contentWindow.postMessage(msg, previewOrigin);
+    };
+    // Keep refs pointing at the latest closures so the message handler below never goes stale.
+    const postRef = useRef(post);
+    const postHighlightRef = useRef(postHighlight);
+    const onPreviewErrorRef = useRef(onPreviewError);
+    useEffect(() => {
+        postRef.current = post;
+        postHighlightRef.current = postHighlight;
+        onPreviewErrorRef.current = onPreviewError;
+    });
+    useEffect(() => {
+        post();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- post is tracked via ref
+    }, [data, isLoading]);
+    useEffect(() => {
+        postHighlight();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- postHighlight is tracked via ref
+    }, [highlightEnabled]);
+    // When the preview page's React effects have run and its message listener is ready,
+    // it sends CANOPY_PREVIEW_READY. We respond with the current data so the preview
+    // receives the draft even if it wasn't ready when onLoad fired.
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (!iframeRef.current || event.source !== iframeRef.current.contentWindow)
+                return;
+            // Source check alone is insufficient if the iframe navigated cross-origin.
+            if (isOpaqueOrigin(previewOrigin) || event.origin !== previewOrigin)
+                return;
+            const type = event.data?.type;
+            if (type === CANOPY_PREVIEW_READY) {
+                postRef.current();
+                postHighlightRef.current();
+                setSyncPending(false);
+            }
+            else if (type === CANOPY_PREVIEW_ERROR) {
+                const msg = event.data;
+                // Shape-check the payload: an adopter passing an Error object (instead of
+                // err.message) must not crash the editor when rendered as a React child.
+                if (msg.message != null && typeof msg.message !== 'string')
+                    return;
+                const fieldPath = typeof msg.fieldPath === 'string' ? msg.fieldPath : undefined;
+                onPreviewErrorRef.current?.(msg.message == null
+                    ? null
+                    : { message: msg.message, ...(fieldPath ? { fieldPath } : {}) });
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [previewOrigin]);
+    return (_jsxs("div", { className: className, style: { position: 'relative', overflow: 'hidden', ...style }, children: [syncPending && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: 3,
+                    zIndex: 1,
+                    overflow: 'hidden',
+                }, children: _jsx("div", { style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        height: '100%',
+                        width: '40%',
+                        background: 'var(--mantine-color-blue-filled, #228be6)',
+                        borderRadius: '0 2px 2px 0',
+                        animation: 'canopy-preview-sync 1.5s ease-in-out infinite',
+                    } }) })), _jsx("iframe", { ref: iframeRef, src: src, style: {
+                    display: 'block',
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    border: 'none',
+                }, onLoad: () => {
+                    post();
+                    postHighlight();
+                } })] }));
+};

package/dist/editor/admin/SystemHealthPanel.js

@@ -59,7 +59,9 @@ function purgeGateFor(entry) {
     }
     return {
         disabled: lockFresh,
-        tooltip: lockFresh ? 'Provisioning may be in progress' : undefined,
+        tooltip: lockFresh
+            ? 'Provisioning, or the worker syncing this branch, may be in progress'
+            : undefined,
     };
 }
 function workerLivenessBadge(worker, mode) {
@@ -76,6 +78,33 @@ function workerLivenessBadge(worker, mode) {
             return { color: 'red', label: 'Worker: absent' };
     }
 }
+const BASE_REFRESH_LABELS = {
+    refreshed: 'fast-forwarded',
+    'up-to-date': 'up to date',
+    'skipped-dirty': 'refresh skipped (uncommitted changes)',
+    'skipped-locked': 'refresh skipped (workspace busy: provisioning or an admin action)',
+    'skipped-not-provisioned': 'not yet provisioned',
+    failed: 'refresh failed',
+};
+/**
+ * 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.
+ */
+function baseRefreshWarning(report) {
+    if (!report)
+        return null;
+    const lines = [];
+    if (report.outcome === 'skipped-dirty' || report.outcome === 'failed') {
+        lines.push(`Base branch ${BASE_REFRESH_LABELS[report.outcome]}${report.message ? `: ${report.message}` : ''}`);
+        if (report.dirtyFiles?.length)
+            lines.push(`Uncommitted: ${report.dirtyFiles.join(', ')}`);
+    }
+    if (report.trackedCanopyMeta?.length) {
+        lines.push(`The site repo tracks canopycms state (${report.trackedCanopyMeta.join(', ')}). ` +
+            'Untrack it with `git rm -r --cached .canopy-meta`, add `.canopy-meta/` to .gitignore, and commit.');
+    }
+    return lines.length > 0 ? lines.join('\n') : null;
+}
 // Mirrors BranchManager.tsx's statusColorMap -- kept local (not exported
 // there) rather than shared, same tiny lookup either way.
 const branchStatusColorMap = {
@@ -121,9 +150,19 @@ function OverviewTab({ health }) {
     const liveness = workerLivenessBadge(status.worker, status.mode);
     const lastFatalError = status.workerStatus?.lastFatalError;
     const lastGitSync = status.workerStatus?.lastGitSync;
-    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: "Worker crash detected", children: [_jsx(Text, { size: "sm", children: lastFatalError.message }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["at ", lastFatalError.at, " (", lastFatalError.phase, ")"] })] })), status.statusReadError && (_jsxs(Text, { size: "xs", c: "orange", children: ["Warning: could not read worker status (", status.statusReadError, ")"] })), 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] })] })), lastGitSync && (_jsxs(Paper, { withBorder: true, p: "sm", radius: "md", children: [_jsx(Text, { size: "sm", fw: 600, children: "Last git sync" }), _jsxs(Text, { size: "xs", c: "dimmed", children: [status.workerStatus?.lastGitSyncAt ?? 'unknown time', " \u00B7 ", lastGitSync.durationMs, "ms \u00B7", ' ', lastGitSync.rebased.length, " rebased \u00B7 ", lastGitSync.skippedDirty.length, " skipped (dirty)", lastGitSync.skippedLocked && lastGitSync.skippedLocked.length > 0
-                                ? ` · ${lastGitSync.skippedLocked.length} skipped (content write in progress)`
-                                : ''] }), lastGitSync.failed.length > 0 && (_jsx(Spoiler, { maxHeight: 0, showLabel: `${lastGitSync.failed.length} failed — show details`, hideLabel: "Hide", children: _jsx(Stack, { gap: 4, mt: 4, children: lastGitSync.failed.map((f) => (_jsxs(Text, { size: "xs", c: "red", children: [f.branch, ": ", f.error] }, f.branch))) }) }))] })), _jsx(SimpleGrid, { cols: 5, spacing: "xs", children: ['pending', 'processing', 'completed', 'failed', 'corrupt'].map((key) => (_jsxs(Paper, { withBorder: true, p: "xs", radius: "md", ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", tt: "capitalize", children: key }), _jsx(Text, { size: "lg", fw: 700, c: (key === 'failed' || key === 'corrupt') && status.queue[key] > 0 ? 'red' : undefined, children: status.queue[key] })] }, key))) }), status.queue.oldestPendingAgeMs !== undefined && (_jsxs(Text, { size: "xs", c: "dimmed", children: ["Oldest pending task: ", formatAgeMs(status.queue.oldestPendingAgeMs), " old"] })), _jsxs(Group, { justify: "space-between", align: "center", children: [_jsxs(Text, { size: "xs", c: "dimmed", children: ["Generated at ", status.generatedAt] }), _jsx(Button, { size: "xs", variant: "light", onClick: () => refresh(), loading: statusLoading, children: "Refresh" })] }), _jsx(Text, { size: "xs", c: "dimmed", children: "Data may lag up to ~60s (shared-filesystem caching)" })] }));
+    const baseWarning = baseRefreshWarning(lastGitSync?.baseRefresh);
+    const { build } = status;
+    // Absent for a worker that predates the field, which is not evidence of skew;
+    // nor is a stale or absent worker's leftover status file, which names no running build.
+    const workerVersion = status.workerStatus?.workerVersion || undefined;
+    const versionSkew = status.worker.state === 'alive' &&
+        workerVersion !== undefined &&
+        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: "Worker crash detected", children: [_jsx(Text, { size: "sm", children: lastFatalError.message }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["at ", lastFatalError.at, " (", lastFatalError.phase, ")"] })] })), 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.statusReadError && (_jsxs(Text, { size: "xs", c: "orange", children: ["Warning: could not read worker status (", status.statusReadError, ")"] })), 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", radius: "md", 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'] }), _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
+                                ? 'available'
+                                : `unavailable — new editor image sizes and crops fail, and uploads skip decode validation${status.imageProcessing.error ? ` (${status.imageProcessing.error})` : ''}`] })] }), lastGitSync && (_jsxs(Paper, { withBorder: true, p: "sm", radius: "md", children: [_jsx(Text, { size: "sm", fw: 600, children: "Last git sync" }), _jsxs(Text, { size: "xs", c: "dimmed", children: [status.workerStatus?.lastGitSyncAt ?? 'unknown time', " \u00B7 ", lastGitSync.durationMs, "ms \u00B7", ' ', lastGitSync.rebased.length, " rebased \u00B7 ", lastGitSync.skippedDirty.length, " skipped (dirty)", lastGitSync.skippedLocked && lastGitSync.skippedLocked.length > 0
+                                ? ` · ${lastGitSync.skippedLocked.length} skipped (busy: a content write, provisioning or purge)`
+                                : ''] }), lastGitSync.baseRefresh && (_jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "base-refresh-outcome", children: ["Base branch: ", BASE_REFRESH_LABELS[lastGitSync.baseRefresh.outcome]] })), baseWarning && (_jsx(Text, { size: "xs", c: "orange", style: { whiteSpace: 'pre-line' }, "data-testid": "base-refresh-warning", children: baseWarning })), lastGitSync.failed.length > 0 && (_jsx(Spoiler, { maxHeight: 0, showLabel: `${lastGitSync.failed.length} failed — show details`, hideLabel: "Hide", children: _jsx(Stack, { gap: 4, mt: 4, children: lastGitSync.failed.map((f) => (_jsxs(Text, { size: "xs", c: "red", children: [f.branch, ": ", f.error] }, f.branch))) }) }))] })), _jsx(SimpleGrid, { cols: 5, spacing: "xs", children: ['pending', 'processing', 'completed', 'failed', 'corrupt'].map((key) => (_jsxs(Paper, { withBorder: true, p: "xs", radius: "md", ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", tt: "capitalize", children: key }), _jsx(Text, { size: "lg", fw: 700, c: (key === 'failed' || key === 'corrupt') && status.queue[key] > 0 ? 'red' : undefined, children: status.queue[key] })] }, key))) }), status.queue.oldestPendingAgeMs !== undefined && (_jsxs(Text, { size: "xs", c: "dimmed", children: ["Oldest pending task: ", formatAgeMs(status.queue.oldestPendingAgeMs), " old"] })), _jsxs(Group, { justify: "space-between", align: "center", children: [_jsxs(Text, { size: "xs", c: "dimmed", children: ["Generated at ", status.generatedAt] }), _jsx(Button, { size: "xs", variant: "light", onClick: () => refresh(), loading: statusLoading, children: "Refresh" })] }), _jsx(Text, { size: "xs", c: "dimmed", children: "Data may lag up to ~60s (shared-filesystem caching)" })] }));
 }
 function TasksTab({ health }) {
     const { taskStatus, setTaskStatus, tasks, tasksLoading } = health;
@@ -160,6 +199,7 @@ function TasksTab({ health }) {
 function BranchesTab({ health }) {
     const { branchHealth, branchHealthLoading } = health;
     const entries = branchHealth?.entries ?? [];
+    const baseWarning = baseRefreshWarning(health.status?.workerStatus?.lastGitSync?.baseRefresh);
     const handleMarkMergedClick = (branchName) => {
         modals.openConfirmModal({
             title: 'Mark branch as merged',
@@ -193,9 +233,9 @@ function BranchesTab({ health }) {
     if (entries.length === 0) {
         return (_jsx(Text, { size: "sm", c: "dimmed", py: "md", children: "No branch directories found." }));
     }
-    return (_jsx(Table.ScrollContainer, { minWidth: 700, children: _jsxs(Table, { children: [_jsx(Table.Thead, { children: _jsxs(Table.Tr, { children: [_jsx(Table.Th, { children: "Name" }), _jsx(Table.Th, { children: "Status" }), _jsx(Table.Th, { children: "PR" }), _jsx(Table.Th, { children: "Sync" }), _jsx(Table.Th, { children: "Warnings" }), _jsx(Table.Th, { children: "Updated" }), _jsx(Table.Th, { children: "Actions" })] }) }), _jsx(Table.Tbody, { children: entries.map((entry) => (_jsx(BranchHealthRow, { entry: entry, onMarkMerged: handleMarkMergedClick, onRepair: handleRepairClick, onPurge: handlePurgeClick }, entry.dirName))) })] }) }));
+    return (_jsx(Table.ScrollContainer, { minWidth: 700, children: _jsxs(Table, { children: [_jsx(Table.Thead, { children: _jsxs(Table.Tr, { children: [_jsx(Table.Th, { children: "Name" }), _jsx(Table.Th, { children: "Status" }), _jsx(Table.Th, { children: "PR" }), _jsx(Table.Th, { children: "Sync" }), _jsx(Table.Th, { children: "Warnings" }), _jsx(Table.Th, { children: "Updated" }), _jsx(Table.Th, { children: "Actions" })] }) }), _jsx(Table.Tbody, { children: entries.map((entry) => (_jsx(BranchHealthRow, { entry: entry, baseWarning: entry.isBaseBranch ? baseWarning : null, onMarkMerged: handleMarkMergedClick, onRepair: handleRepairClick, onPurge: handlePurgeClick }, entry.dirName))) })] }) }));
 }
-function BranchHealthRow({ entry, onMarkMerged, onRepair, onPurge, }) {
+function BranchHealthRow({ entry, baseWarning, onMarkMerged, onRepair, onPurge, }) {
     if (entry.kind === 'healthy' && entry.branch) {
         const b = entry.branch;
         // Mirrors the rebase loop's skip logic (worker/rebase.ts): the worker
@@ -207,7 +247,7 @@ function BranchHealthRow({ entry, onMarkMerged, onRepair, onPurge, }) {
         const canMarkMerged = (b.status === 'submitted' || b.status === 'approved') && !!b.pullRequestNumber;
         return (_jsxs(Table.Tr, { children: [_jsx(Table.Td, { children: _jsxs(Group, { gap: 4, wrap: "nowrap", children: [_jsx(Text, { size: "sm", children: entry.dirName }), entry.isBaseBranch && (_jsx(Badge, { size: "xs", color: "gray", variant: "outline", children: "base" }))] }) }), _jsx(Table.Td, { children: _jsx(Badge, { color: branchStatusColorMap[b.status] ?? 'neutral', variant: "light", children: b.status }) }), _jsx(Table.Td, { children: b.pullRequestNumber ? (_jsxs(Text, { size: "xs", c: "blue", component: "a", href: b.pullRequestUrl, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'underline' }, children: ["PR #", b.pullRequestNumber, b.pullRequestState ? ` (${b.pullRequestState})` : ''] })) : (_jsx(Text, { size: "xs", c: "dimmed", children: "\u2014" })) }), _jsx(Table.Td, { children: b.syncStatus === 'sync-failed' ? (_jsx(Tooltip, { label: b.syncFailureReason
                             ? `${b.syncFailureReason} — retry from the Tasks tab`
-                            : 'GitHub sync failed — retry from the Tasks tab', multiline: true, maw: 320, children: _jsx(Badge, { color: "red", variant: "light", children: "sync-failed" }) })) : b.syncStatus === 'pending-sync' ? (_jsx(Badge, { color: "gray", variant: "light", children: "pending-sync" })) : null }), _jsx(Table.Td, { children: _jsxs(Group, { gap: 6, wrap: "nowrap", children: [!!b.conflictFiles?.length && (_jsxs(Badge, { color: "orange", variant: "light", children: [b.conflictFiles.length, " conflict", b.conflictFiles.length === 1 ? '' : 's'] })), showRebaseFailure && b.rebaseFailure && (_jsx(Tooltip, { label: `${b.rebaseFailure.message} (failing since ${b.rebaseFailure.firstAt})`, multiline: true, maw: 320, children: _jsx(ThemeIcon, { color: "yellow", variant: "light", size: "sm", radius: "xl", "data-testid": `rebase-failure-${entry.dirName}`, children: _jsx(IconAlertTriangle, { size: 12 }) }) })), !!entry.duplicateContentIds?.length && (_jsx(Tooltip, { label: entry.duplicateContentIds
+                            : 'GitHub sync failed — retry from the Tasks tab', multiline: true, maw: 320, children: _jsx(Badge, { color: "red", variant: "light", children: "sync-failed" }) })) : b.syncStatus === 'pending-sync' ? (_jsx(Badge, { color: "gray", variant: "light", children: "pending-sync" })) : null }), _jsx(Table.Td, { children: _jsxs(Group, { gap: 6, wrap: "nowrap", children: [!!b.conflictFiles?.length && (_jsxs(Badge, { color: "orange", variant: "light", children: [b.conflictFiles.length, " conflict", b.conflictFiles.length === 1 ? '' : 's'] })), showRebaseFailure && b.rebaseFailure && (_jsx(Tooltip, { label: `${b.rebaseFailure.message} (failing since ${b.rebaseFailure.firstAt})`, multiline: true, maw: 320, children: _jsx(ThemeIcon, { color: "yellow", variant: "light", size: "sm", radius: "xl", "data-testid": `rebase-failure-${entry.dirName}`, children: _jsx(IconAlertTriangle, { size: 12 }) }) })), baseWarning && (_jsx(Tooltip, { label: baseWarning, multiline: true, maw: 420, style: { whiteSpace: 'pre-line' }, children: _jsx(ThemeIcon, { color: "yellow", variant: "light", size: "sm", radius: "xl", "data-testid": `base-refresh-warning-${entry.dirName}`, children: _jsx(IconAlertTriangle, { size: 12 }) }) })), !!entry.duplicateContentIds?.length && (_jsx(Tooltip, { label: entry.duplicateContentIds
                                     .map((d) => `${d.id}: kept ${d.keptPath}; also on ${d.droppedPaths.join(', ')}`)
                                     .join('\n'), multiline: true, maw: 420, style: { whiteSpace: 'pre-line' }, children: _jsxs(Badge, { color: "orange", variant: "light", "data-testid": `duplicate-content-ids-${entry.dirName}`, children: [entry.duplicateContentIds.length, " duplicate ID", entry.duplicateContentIds.length === 1 ? '' : 's'] }) }))] }) }), _jsx(Table.Td, { children: _jsx(Text, { size: "xs", c: "dimmed", children: b.updatedAt }) }), _jsx(Table.Td, { children: canMarkMerged && (_jsx(Button, { size: "xs", variant: "light", "data-testid": `mark-merged-${b.name}`, onClick: () => onMarkMerged(b.name), children: "Mark merged" })) })] }));
     }

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface BranchesDrawerProps {
+    opened: boolean;
+    onClose: () => void;
+    /** A confirm opened from inside is on screen: the drawer yields Escape to it (Mantine listens for Escape on window, capture phase). */
+    confirmOpen: boolean;
+    children: React.ReactNode;
+}
+export declare const BranchesDrawer: React.FC<BranchesDrawerProps>;

package/dist/editor/components/BranchesDrawer.js

@@ -0,0 +1,4 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer, Text, Title } from '@mantine/core';
+export const BranchesDrawer = ({ opened, onClose, confirmOpen, children, }) => (_jsx(Drawer, { opened: opened, onClose: onClose, closeOnEscape: !confirmOpen, position: "right", title: _jsxs("div", { children: [_jsx(Title, { order: 4, children: "Branches" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Manage access, status, and lifecycle" })] }), padding: "md", size: 420, overlayProps: { blur: 2 }, children: children }));