canopycms 0.9.0 → 0.11.0

package/dist/editor/Editor.js

@@ -64,6 +64,7 @@ import { formatCanopyPath } from './canopy-path.js';
 import { itemKeysOnPath, resolveThreadPath, withItemKeys } from '../item-keys.js';
 import { ENTRY_NOT_LOADED_COMMENT_MESSAGE, NEW_ITEM_COMMENT_MESSAGE, } from './comments/item-anchor-copy.js';
 import { findFieldTarget, focusFieldTarget } from './field-target.js';
+import { PreviewFollowContext, usePreviewFollow } from './hooks/usePreviewFollow.js';
 import { UndoToastMessage } from './components/UndoToastMessage.js';
 import { getNotificationDuration } from './utils/env.js';
 import { MayHaveLandedError } from './unanswered.js';
@@ -149,7 +150,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const commentUserId = userContext?.userId ?? currentUser;
     // Below 64em (1024px) the editor starts stacked and the content panel never docks.
     const wideWindow = useMediaQuery('(min-width: 64em)', true, { getInitialValueInEffect: false }) !== false;
-    const { loaded: layoutLoaded, layout, setLayout, highlightEnabled, setHighlightEnabled, sideSplitPercent, stackedSplitPercent, setSplitPercent, previewWidth, setPreviewWidth, siteChrome, setSiteChrome, contentPanelOpen, setContentPanelOpen, contentPanelWidth, setContentPanelWidth, } = useEditorLayout({
+    const { loaded: layoutLoaded, layout, setLayout, highlightEnabled, setHighlightEnabled, previewFollowsForm, setPreviewFollowsForm, sideSplitPercent, stackedSplitPercent, setSplitPercent, previewWidth, setPreviewWidth, siteChrome, setSiteChrome, contentPanelOpen, setContentPanelOpen, contentPanelWidth, setContentPanelWidth, } = useEditorLayout({
         storageKey: editorLayoutStorageKey(basePath),
         defaultLayout: wideWindow ? 'side' : 'stacked',
     });
@@ -167,7 +168,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     // Reloads the open branch's comments after a request for changes, whose note is a comment; the
     // comment system is built further down.
     const reloadCommentsRef = useRef(() => { });
-    const { branchName: branchNameState, setBranchName, branches, branchSummaries, currentBranch, currentAddress, listedBranch, namesBranch, urlBranchName, branchesLoadFailed, branchesLoaded, addCreatedBranch, handleSubmit, handleWithdraw, handleApprove, handleRequestChanges, handleDelete, handleReloadBranchData, loadBranches, } = useBranchManager({
+    const { branchName: branchNameState, setBranchName, branches, branchSummaries, currentBranch, currentAddress, listedBranch, namesBranch, urlBranchName, branchesLoadFailed, branchesLoaded, addCreatedBranch, handleSubmit, handleWithdraw, handleApprove, handleRequestChanges, handleDelete, handleArchive, handleReloadBranchData, loadBranches, } = useBranchManager({
         initialBranch: branchName,
         operatingMode,
         setBusy: setBranchesLoading,
@@ -388,6 +389,11 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         if (branch === branchNameState)
             void loadComments(branchNameState);
     };
+    const { reveal: previewReveal, follow: followInPreview } = usePreviewFollow({
+        enabled: previewFollowsForm,
+        branch: branchNameState,
+        entryId: currentEntry?.contentId,
+    });
     const { groupsData, groupsLoading, handleSaveGroups, handleSearchUsers, handleGetUserMetadata, handleSearchExternalGroups, } = useGroupManager({ isOpen: groupManagerOpen });
     // The comments and branches responses name their people, without email; a privileged lookup
     // adds the email.
@@ -535,9 +541,14 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     ]);
     // A jump into another entry waits for its value to place the thread; the stored path may be stale.
     const [pendingFieldJump, setPendingFieldJump] = useState(null);
+    // A field whose comments are already open is still followed in the preview.
+    const jumpToField = (entryPath, canopyPath, threadId) => {
+        handleJumpToField(entryPath, canopyPath, threadId);
+        followInPreview?.(canopyPath);
+    };
     const jumpToThreadField = (entryPath, canopyPath, threadId) => {
         if (entryPath === currentEntry?.path) {
-            handleJumpToField(entryPath, canopyPath, threadId);
+            jumpToField(entryPath, canopyPath, threadId);
             return;
         }
         setPendingFieldJump({ entryPath, canopyPath, threadId });
@@ -559,7 +570,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         if (placed?.onRemovedItem)
             handleJumpToEntry(entryPath, threadId);
         else
-            handleJumpToField(entryPath, placed?.canopyPath ?? canopyPath, threadId);
+            jumpToField(entryPath, placed?.canopyPath ?? canopyPath, threadId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- jumpToField reads this render's follow
     }, [pendingFieldJump, selectedPath, currentEntry, displayValue, displayComments]);
     // A thread on an item only the draft has is refused: a discard would leave it on nothing.
     const handleAddDisplayedComment = async (text, type, entryPath, canopyPath, threadId) => {
@@ -1504,7 +1516,15 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             if (maximized && !contentPanelDocked)
                 setNavigatorOpen(false);
             setPreviewMaximized(maximized);
-        }, resizing: paneResizing, siteChrome: siteChrome, onSiteChromeChange: setSiteChrome, onNavigate: openPreviewLink, notice: previewError && (_jsx(Alert, { color: "red", title: "Preview error", withCloseButton: true, onClose: () => setPreviewError(null), radius: 0, children: previewErrorField
+        }, resizing: paneResizing, siteChrome: siteChrome, onSiteChromeChange: setSiteChrome, reveal: previewReveal, previewFollowsForm: previewFollowsForm, 
+        // Only beside a form, the one thing it follows.
+        onPreviewFollowsFormChange: !currentEntryUnavailable &&
+            currentEntry?.canEdit !== false &&
+            schema.length > 0 &&
+            // Kept while the next entry loads, so the toolbar never changes under a switch.
+            (displayValue || previewPending)
+            ? setPreviewFollowsForm
+            : undefined, onNavigate: openPreviewLink, notice: previewError && (_jsx(Alert, { color: "red", title: "Preview error", withCloseButton: true, onClose: () => setPreviewError(null), radius: 0, children: previewErrorField
                 ? `${previewErrorField}: ${previewError.message}`
                 : previewError.message })) })) : (_jsx(Paper, { withBorder: true, shadow: "xs", h: "100%", bg: "var(--mantine-color-body)", style: {
             display: 'flex',
@@ -1654,26 +1674,26 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                         ? 'Setting up your branch workspace…'
                                         : entriesInitializing
                                             ? 'Loading content…'
-                                            : 'Select an item to start editing.' })) : currentEntryUnavailable ? (_jsx(UnavailableEntryNotice, { schemaRefs: currentEntry.unavailable ? [currentEntry.unavailable.schemaRef] : [] })) : currentEntry.canEdit === false ? (_jsx(NoEditPermissionNotice, { entryLabel: currentEntry.label })) : schema.length > 0 && displayValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsx(SiteMdxAllowContext.Provider, { value: mdxAllow, children: _jsx(FormRenderer, { notice: hiddenDraftNotice && (_jsx(ReadOnlyDraftNotice, { permanentlyReadOnly: (currentBranch?.isProtected ?? true) ||
-                                                    currentBranch?.status === 'archived', 
-                                                // A hidden draft's discard changes nothing on screen, so it says so.
-                                                onDiscard: () => handleDiscardFileDraft(() => navigatorToggleRef.current, {
-                                                    announce: true,
-                                                }) })), fields: schema, value: displayValue, readOnly: contentReadOnly, onRemoved: handleFieldRemoved, savedValue: loadedValue, commentBlockedReason: commentBlockedReason, removedItemFieldLabel: commentFieldLabel, onGetUserMetadata: getCommentUserMetadata, header: {
-                                                title: currentEntry.label,
-                                                typeLabel: entryTypeLabel(activeCollections, currentEntry),
-                                            }, 
-                                            // The one writer of drafts. Read-only content gets none, whatever a
-                                            // field emits (MDXEditor's mount-time normalisation included).
-                                            onChange: (next) => {
-                                                const contentId = currentEntry?.contentId;
-                                                if (contentId && !contentReadOnlyRef.current) {
-                                                    // Every list item keeps a key, whatever field made it.
-                                                    const keyed = withItemKeys(schema, next, 'random');
-                                                    setDrafts((prev) => ({ ...prev, [contentId]: keyed }));
-                                                }
-                                            }, customRenderers: customRenderers, branch: branchNameState, comments: displayComments, currentEntryPath: selectedPath, currentUserId: commentUserId, canResolve: canResolveAnyComment, focusedFieldPath: focusedFieldPath, highlightThreadId: highlightThreadId, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, fieldErrors: fieldErrors, format: currentEntry.format, conflictNotice: !!(currentEntry?.contentId &&
-                                                currentBranch?.conflictFiles?.includes(currentEntry.contentId)) }) }) })) : schema.length === 0 ? (_jsx(CenteredMessage, { children: "No fields to edit." })) : loadFailedKey !== `${branchNameState}:${currentEntry.contentId}` ? (_jsx(Stack, { gap: "lg", p: "md", "data-testid": "entry-loading-skeleton", children: [0, 1, 2].map((row) => (_jsxs(Stack, { gap: 6, children: [_jsx(Skeleton, { h: 12, w: 120 }), _jsx(Skeleton, { h: 36 })] }, row))) })) : (_jsx(Alert, { color: "red", variant: "light", m: "md", title: "This entry couldn't be loaded.", "data-testid": "entry-load-failed", children: _jsx(Button, { variant: "default", onClick: () => {
+                                            : 'Select an item to start editing.' })) : currentEntryUnavailable ? (_jsx(UnavailableEntryNotice, { schemaRefs: currentEntry.unavailable ? [currentEntry.unavailable.schemaRef] : [] })) : currentEntry.canEdit === false ? (_jsx(NoEditPermissionNotice, { entryLabel: currentEntry.label })) : schema.length > 0 && displayValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsx(SiteMdxAllowContext.Provider, { value: mdxAllow, children: _jsx(PreviewFollowContext.Provider, { value: followInPreview ?? null, children: _jsx(FormRenderer, { notice: hiddenDraftNotice && (_jsx(ReadOnlyDraftNotice, { permanentlyReadOnly: (currentBranch?.isProtected ?? true) ||
+                                                        currentBranch?.status === 'archived', 
+                                                    // A hidden draft's discard changes nothing on screen, so it says so.
+                                                    onDiscard: () => handleDiscardFileDraft(() => navigatorToggleRef.current, {
+                                                        announce: true,
+                                                    }) })), fields: schema, value: displayValue, readOnly: contentReadOnly, onRemoved: handleFieldRemoved, savedValue: loadedValue, commentBlockedReason: commentBlockedReason, removedItemFieldLabel: commentFieldLabel, onGetUserMetadata: getCommentUserMetadata, header: {
+                                                    title: currentEntry.label,
+                                                    typeLabel: entryTypeLabel(activeCollections, currentEntry),
+                                                }, 
+                                                // The one writer of drafts. Read-only content gets none, whatever a
+                                                // field emits (MDXEditor's mount-time normalisation included).
+                                                onChange: (next) => {
+                                                    const contentId = currentEntry?.contentId;
+                                                    if (contentId && !contentReadOnlyRef.current) {
+                                                        // Every list item keeps a key, whatever field made it.
+                                                        const keyed = withItemKeys(schema, next, 'random');
+                                                        setDrafts((prev) => ({ ...prev, [contentId]: keyed }));
+                                                    }
+                                                }, customRenderers: customRenderers, branch: branchNameState, comments: displayComments, currentEntryPath: selectedPath, currentUserId: commentUserId, canResolve: canResolveAnyComment, focusedFieldPath: focusedFieldPath, highlightThreadId: highlightThreadId, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, fieldErrors: fieldErrors, format: currentEntry.format, conflictNotice: !!(currentEntry?.contentId &&
+                                                    currentBranch?.conflictFiles?.includes(currentEntry.contentId)) }) }) }) })) : schema.length === 0 ? (_jsx(CenteredMessage, { children: "No fields to edit." })) : loadFailedKey !== `${branchNameState}:${currentEntry.contentId}` ? (_jsx(Stack, { gap: "lg", p: "md", "data-testid": "entry-loading-skeleton", children: [0, 1, 2].map((row) => (_jsxs(Stack, { gap: 6, children: [_jsx(Skeleton, { h: 12, w: 120 }), _jsx(Skeleton, { h: 36 })] }, row))) })) : (_jsx(Alert, { color: "red", variant: "light", m: "md", title: "This entry couldn't be loaded.", "data-testid": "entry-load-failed", children: _jsx(Button, { variant: "default", onClick: () => {
                                             setLoadFailedKey(null);
                                             setLoadAttempt((attempt) => attempt + 1);
                                         }, children: "Retry" }) })) }) })] }), overlays: _jsxs(_Fragment, { children: [_jsx(BranchesDrawer, { opened: branchManagerOpen, onClose: () => setBranchManagerOpen(false), confirmOpen: branchConfirmOpen, returnFocusTo: branchReturnTarget, children: _jsx(BranchManager, { startCreating: branchManagerOpening.create, branches: branchSummaries, mode: operatingMode, user: userContext, currentBranchName: currentBranch?.name ?? branchNameState, currentWorkflowBlockedReason: saveAllProgress ? 'Wait for Save all to finish.' : undefined, onSelect: async (name) => {
@@ -1705,6 +1725,10 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                     handleRequestChanges(name).catch((err) => console.error(err));
                                 }, onDelete: (name) => {
                                     handleDelete(name).catch((err) => console.error(err));
+                                }, onArchive: (name) => {
+                                    if (namesBranch(name, branchNameState) && isSaveAllRunning())
+                                        return;
+                                    handleArchive(name).catch((err) => console.error(err));
                                 }, onClose: () => setBranchManagerOpen(false), comments: comments, currentUserId: commentUserId, canResolve: canResolveAnyComment, onAddComment: handleAddComment, onResolveThread: handleResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined, onGetOwnerMetadata: getCommentUserMetadata, onGetCommentUserMetadata: getCommentUserMetadata }, branchManagerOpening.seq) }), changesSubject && (_jsx(LazyEntryChangesDrawer, { opened: changesOpen, onClose: () => setChangesOpen(false), onExited: () => setChangesShown(false), returnFocusTo: changesReturnTarget, base: branchChanges.data?.base ?? currentBranch?.baseBranch ?? 'the base branch', subject: {
                                 ...changesSubject,
                                 unsavedEdits: changesSubject.logicalPath === currentEntry?.path && isSelectedDirty(),

package/dist/editor/PreviewFrame.d.ts

@@ -4,6 +4,11 @@ export interface PreviewMarks {
     count: number;
     paths?: string[];
 }
+/** A field to bring into view in the preview; a new `id` asks again for the same field. */
+export interface PreviewReveal {
+    path: string;
+    id: number;
+}
 /**
  * What a page's handshake says of the site's header and footer: its ready message says it renders
  * them for `chrome=1` or that it does not, or no ready message came in `READY_TIMEOUT_MS`.
@@ -15,7 +20,7 @@ export type SiteChromeSupport = 'supported' | 'unsupported' | 'unanswered';
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
  * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, busy, }: {
+export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, reveal, busy, }: {
     src: string;
     path: string;
     data?: unknown;
@@ -48,4 +53,6 @@ export declare const PreviewFrame: ({ src, path, data, isLoading, className, sty
     onNavigate?: (href: string) => void;
     /** The editor is loading the next page's data: this page stays in view, dimmed and inert. */
     busy?: boolean;
+    /** Sent once the page connects, and each time its `id` changes. */
+    reveal?: PreviewReveal;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewFrame.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_NAVIGATE, CANOPY_PREVIEW_READY, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
+import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_NAVIGATE, CANOPY_PREVIEW_READY, CANOPY_PREVIEW_REVEAL, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
 /**
  * How long after the iframe's `load` the preview has to send its ready message before the frame
  * says live updates are off. Ready can also arrive before `load`, which waits for images too.
@@ -51,7 +51,7 @@ const sendDraftUpdate = (iframe, message, targetOrigin) => {
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
  * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, busy = false, }) => {
+export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, reveal, busy = false, }) => {
     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
@@ -166,6 +166,19 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
         postHighlight();
         // eslint-disable-next-line react-hooks/exhaustive-deps -- postHighlight is tracked via ref
     }, [highlightEnabled]);
+    // Each frame, a retry's or a new page's, gets the latest reveal once it connects.
+    const revealSent = useRef(undefined);
+    useEffect(() => {
+        const contentWindow = iframeRef.current?.contentWindow;
+        if (!reveal || handshake !== 'ready' || !contentWindow || isOpaqueOrigin(previewOrigin))
+            return;
+        const frame = `${retries}:${src}`;
+        if (revealSent.current?.frame === frame && revealSent.current.id === reveal.id)
+            return;
+        revealSent.current = { frame, id: reveal.id };
+        const msg = { type: CANOPY_PREVIEW_REVEAL, path: reveal.path };
+        contentWindow.postMessage(msg, previewOrigin);
+    }, [reveal, handshake, previewOrigin, retries, src]);
     // 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.

package/dist/editor/PreviewPane.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { PreviewWidth } from './hooks/useEditorLayout.js';
-import { type PreviewMarks } from './PreviewFrame.js';
+import { type PreviewMarks, type PreviewReveal } from './PreviewFrame.js';
 import type { InexactMark } from './preview-marks.js';
 import type { PaneArrangement } from './shell/PaneLayout.js';
 import { type PreviewMount } from './preview-path.js';
@@ -54,10 +54,15 @@ export interface PreviewPaneProps {
     onSiteChromeChange?: (siteChrome: boolean) => void;
     /** Called with the absolute URL of a link clicked in the preview; see `PreviewFrame`. */
     onNavigate?: (href: string) => void;
+    /** The field the form is on, for the preview to bring into view; see `usePreviewFollow`. */
+    reveal?: PreviewReveal;
+    /** With `onPreviewFollowsFormChange`, the toolbar shows the follow toggle. */
+    previewFollowsForm?: boolean;
+    onPreviewFollowsFormChange?: (follows: boolean) => void;
 }
 /**
  * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A
  * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
  * down to fit a narrower pane.
  */
-export declare const PreviewPane: ({ src, path, pending, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, siteChrome, onSiteChromeChange, data, isLoading, onMarks, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PreviewPane: ({ src, path, pending, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, siteChrome, onSiteChromeChange, previewFollowsForm, onPreviewFollowsFormChange, reveal, data, isLoading, onMarks, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewPane.js

@@ -4,8 +4,8 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { ActionIcon, Box, Group, Select, Skeleton, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
 import { useClipboard, useElementSize, useWindowEvent } from '@mantine/hooks';
 import { IconCheck, IconExternalLink, IconRefresh } from '@tabler/icons-react';
-import { PreviewFrame } from './PreviewFrame.js';
-import { HighlightToggle, MaximizeToggle, SiteChromeToggle, UnmappedMarksChip, } from './PreviewToolbarTools.js';
+import { PreviewFrame, } from './PreviewFrame.js';
+import { FollowFormToggle, HighlightToggle, MaximizeToggle, SiteChromeToggle, UnmappedMarksChip, } from './PreviewToolbarTools.js';
 import { PANE_HEADER_HEIGHT } from './pane-header.js';
 import { displayPreviewPath, siteChromeSrc } from './preview-path.js';
 import { computePreviewViewport, formatPreviewWidthReadout, PREVIEW_DEVICE_WIDTHS, } from './preview-scale.js';
@@ -28,7 +28,7 @@ const OPEN_SAVED_LABEL = 'Open saved version in a new tab';
  * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
  * down to fit a narrower pane.
  */
-export const PreviewPane = ({ src, path = src, pending = false, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks = [], showMarkDiagnostics = false, layout, maximized = false, onMaximizedChange, resizing = false, siteChrome = false, onSiteChromeChange, data, isLoading, onMarks, ...frameProps }) => {
+export const PreviewPane = ({ src, path = src, pending = false, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks = [], showMarkDiagnostics = false, layout, maximized = false, onMaximizedChange, resizing = false, siteChrome = false, onSiteChromeChange, previewFollowsForm = false, onPreviewFollowsFormChange, reveal, data, isLoading, onMarks, ...frameProps }) => {
     const { ref: viewportRef, width, height } = useElementSize();
     const rootRef = useRef(null);
     const maximizeRef = useRef(null);
@@ -160,13 +160,14 @@ export const PreviewPane = ({ src, path = src, pending = false, mount, previewWi
                             if (isPreviewWidth(value))
                                 onPreviewWidthChange(value);
                         }, allowDeselect: false, size: "xs", w: 96, style: { flexShrink: 0 }, styles: { input: { height: 24, minHeight: 24 } }, comboboxProps: { width: 170, position: 'bottom-end' }, renderOption: ({ option, checked }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", w: "100%", children: [_jsx(IconCheck, { "aria-hidden": true, size: 14, style: { visibility: checked ? 'visible' : 'hidden' } }), _jsx("span", { style: { flex: 1 }, children: option.label }), _jsx(Text, { component: "span", size: "xs", children: WIDTH_OPTIONS.find((o) => o.value === option.value)?.detail })] })) }), width > 0 && (_jsx(Text, { size: "xs", c: "dimmed", "data-testid": "preview-width-readout", style: { flexShrink: 0, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }, children: formatPreviewWidthReadout(viewport) })), (onHighlightToggle ||
+                        onPreviewFollowsFormChange ||
                         showChromeToggle ||
                         (showMarkDiagnostics && inexactMarks.length > 0)) && (_jsxs(Group, { gap: 6, wrap: "nowrap", children: [showChromeToggle && onSiteChromeChange && (_jsx(SiteChromeToggle, { enabled: siteChrome, failed: chromeFallback === 'confirmed', onToggle: () => {
                                     setChromeFallback('off');
                                     onSiteChromeChange(!siteChrome);
-                                } })), onHighlightToggle && (_jsx(HighlightToggle, { enabled: Boolean(frameProps.highlightEnabled), onToggle: onHighlightToggle, marksNothing: marksNothing })), showMarkDiagnostics && _jsx(UnmappedMarksChip, { marks: inexactMarks })] })), _jsxs(Group, { gap: 6, wrap: "nowrap", children: [onMaximizedChange && (_jsx(MaximizeToggle, { maximized: maximized, onChange: onMaximizedChange, maximizeRef: maximizeRef, restoreRef: restoreRef })), _jsx(Tooltip, { label: RELOAD_LABEL, children: _jsx(ActionIcon, { ref: reloadButtonRef, variant: "subtle", size: "md", "aria-label": RELOAD_LABEL, onClick: reload, children: _jsx(IconRefresh, { size: 16 }) }) }), _jsx(Tooltip, { label: OPEN_SAVED_LABEL, children: _jsx(ActionIcon, { component: "a", href: liveSrc, target: "_blank", rel: "noopener noreferrer", variant: "subtle", size: "md", "aria-label": OPEN_SAVED_LABEL, children: _jsx(IconExternalLink, { size: 16 }) }) })] })] }), notice, _jsxs(Box, { ref: viewportRef, pos: "relative", style: { flex: '1 1 auto', minHeight: 0 }, children: [frame ? (_jsx(PreviewFrame, { src: frame.src, path: frame.path, ...frameProps, 
+                                } })), onPreviewFollowsFormChange && (_jsx(FollowFormToggle, { enabled: previewFollowsForm, onToggle: () => onPreviewFollowsFormChange(!previewFollowsForm) })), onHighlightToggle && (_jsx(HighlightToggle, { enabled: Boolean(frameProps.highlightEnabled), onToggle: onHighlightToggle, marksNothing: marksNothing })), showMarkDiagnostics && _jsx(UnmappedMarksChip, { marks: inexactMarks })] })), _jsxs(Group, { gap: 6, wrap: "nowrap", children: [onMaximizedChange && (_jsx(MaximizeToggle, { maximized: maximized, onChange: onMaximizedChange, maximizeRef: maximizeRef, restoreRef: restoreRef })), _jsx(Tooltip, { label: RELOAD_LABEL, children: _jsx(ActionIcon, { ref: reloadButtonRef, variant: "subtle", size: "md", "aria-label": RELOAD_LABEL, onClick: reload, children: _jsx(IconRefresh, { size: 16 }) }) }), _jsx(Tooltip, { label: OPEN_SAVED_LABEL, children: _jsx(ActionIcon, { component: "a", href: liveSrc, target: "_blank", rel: "noopener noreferrer", variant: "subtle", size: "md", "aria-label": OPEN_SAVED_LABEL, children: _jsx(IconExternalLink, { size: 16 }) }) })] })] }), notice, _jsxs(Box, { ref: viewportRef, pos: "relative", style: { flex: '1 1 auto', minHeight: 0 }, children: [frame ? (_jsx(PreviewFrame, { src: frame.src, path: frame.path, ...frameProps, 
                         // A held page gets no draft and its reports go nowhere: it belongs to another entry.
-                        data: pending ? undefined : data, isLoading: pending ? undefined : isLoading, onMarks: pending ? undefined : onMarks, onPreviewError: pending ? undefined : frameProps.onPreviewError, busy: pending, onSiteChrome: onSiteChrome, onReload: () => {
+                        data: pending ? undefined : data, isLoading: pending ? undefined : isLoading, onMarks: pending ? undefined : onMarks, reveal: pending ? undefined : reveal, onPreviewError: pending ? undefined : frameProps.onPreviewError, busy: pending, onSiteChrome: onSiteChrome, onReload: () => {
                             // Retry goes with the frame it sits in; the toolbar's reload offers the same action.
                             reload();
                             reloadButtonRef.current?.focus();

package/dist/editor/PreviewToolbarTools.d.ts

@@ -8,6 +8,12 @@ export interface HighlightToggleProps {
 }
 /** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
 export declare function HighlightToggle({ enabled, onToggle, marksNothing }: HighlightToggleProps): import("react/jsx-runtime").JSX.Element;
+export interface FollowFormToggleProps {
+    enabled: boolean;
+    onToggle: () => void;
+}
+/** Turns on and off the preview following the form to the field it is on. */
+export declare function FollowFormToggle({ enabled, onToggle }: FollowFormToggleProps): import("react/jsx-runtime").JSX.Element;
 export interface SiteChromeToggleProps {
     enabled: boolean;
     onToggle: () => void;

package/dist/editor/PreviewToolbarTools.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from 'react';
 import { ActionIcon, Button, Group, Popover, Stack, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
-import { IconArrowsMaximize, IconArrowsMinimize, IconLayoutNavbar, IconMarquee, } from '@tabler/icons-react';
+import { IconArrowsMaximize, IconArrowsMinimize, IconFocusCentered, IconLayoutNavbar, IconMarquee, } from '@tabler/icons-react';
 const HIGHLIGHT_LABEL = 'Highlight fields in the preview';
 const NOTHING_MARKED_NOTE = "This page marks no editable elements, so nothing can be highlighted or clicked to focus. The site's developer can mark them with fieldProps.";
 /** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
@@ -11,6 +11,11 @@ export function HighlightToggle({ enabled, onToggle, marksNothing = false }) {
     const showNote = enabled && marksNothing;
     return (_jsxs(Group, { gap: 4, wrap: "nowrap", children: [_jsx(Tooltip, { label: HIGHLIGHT_LABEL, children: _jsx(ActionIcon, { variant: enabled ? 'filled' : 'subtle', color: enabled ? 'brand' : 'gray', size: "md", "aria-pressed": enabled, "aria-label": HIGHLIGHT_LABEL, "aria-describedby": showNote ? noteId : undefined, "data-testid": "toggle-highlights-button", onClick: onToggle, children: _jsx(IconMarquee, { size: 16 }) }) }), showNote && (_jsx(Tooltip, { label: NOTHING_MARKED_NOTE, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'nowrap' }, children: ["Nothing to highlight", _jsx(VisuallyHidden, { id: noteId, children: NOTHING_MARKED_NOTE })] }) }))] }));
 }
+const FOLLOW_FORM_LABEL = "Scroll the preview to the field you're on";
+/** Turns on and off the preview following the form to the field it is on. */
+export function FollowFormToggle({ enabled, onToggle }) {
+    return (_jsx(Tooltip, { label: FOLLOW_FORM_LABEL, children: _jsx(ActionIcon, { variant: enabled ? 'filled' : 'subtle', color: enabled ? 'brand' : 'gray', size: "md", "aria-pressed": enabled, "aria-label": FOLLOW_FORM_LABEL, "data-testid": "toggle-follow-form-button", onClick: onToggle, children: _jsx(IconFocusCentered, { size: 16 }) }) }));
+}
 const SITE_CHROME_LABEL = 'Show site header and footer';
 const SITE_CHROME_FAILED_NOTE = "The site couldn't show its header and footer, so the preview shows pages without them. Turn this off and on, or reload the preview, to try again.";
 /** Shows and hides the site's header and footer; says so when the site couldn't show them. */

package/dist/editor/admin/SystemHealthPanel.js

@@ -9,14 +9,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * only for admins (see isAdmin(userContext?.groups)); this component does not
  * re-check that itself, same as GroupManager and PermissionManager.
  */
-import { useRef } from 'react';
-import { Alert, Badge, Button, Code, Group, Loader, Modal, Paper, SegmentedControl, SimpleGrid, Spoiler, Stack, Table, Tabs, Text, ThemeIcon, Tooltip, } from '@mantine/core';
+import { useRef, useState } from 'react';
+import { Alert, Badge, Button, Code, Group, Loader, Modal, NumberInput, Paper, SegmentedControl, SimpleGrid, Spoiler, Stack, Table, Tabs, Text, ThemeIcon, Tooltip, } from '@mantine/core';
 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 { ageDeletionHold, archivedBefore, archivedCutoff, deletableByAge, } from '../../branch-archive.js';
 import { escapeForLog } from '../../utils/escape-text.js';
 import { TooltipDetail } from '../components/TooltipDetail.js';
 import { DISMISS_UNPUBLISHED_ATTRIBUTE, UnpublishedAtMergeAlert } from './UnpublishedAtMergeAlert.js';
@@ -256,6 +257,7 @@ function duplicateScanSummary(health, healthyDirNames) {
         return { text: 'No duplicate content IDs found.', color: 'dimmed' };
     return { text: parts.join(' '), color: 'orange' };
 }
+const DEFAULT_CLEANUP_DAYS = 90;
 const PURGE_CONFIRM_TEXT = 'The directory is moved to a hidden trash name and kept for 30 days, then deleted. Any git work inside was never pushed and will be lost when the trash is swept.';
 export function SystemHealthPanel({ opened, onClose, returnFocusTo }) {
     const health = useSystemHealth({ isOpen: opened });
@@ -348,6 +350,55 @@ function TasksTab({ health }) {
                                 ? corruptRows.map((file) => (_jsxs(Table.Tr, { children: [_jsx(Table.Td, { children: _jsx("span", { title: file.fileName, children: truncate(file.fileName, 30) }) }), _jsxs(Table.Td, { children: [file.size, " bytes"] }), _jsx(Table.Td, { children: file.mtime }), _jsx(Table.Td, { children: _jsx(Code, { block: true, style: { maxWidth: 320, whiteSpace: 'pre-wrap' }, children: file.rawSnippet }) }), _jsx(Table.Td, { children: _jsx(Button, { variant: "light", color: "red", "data-testid": `delete-task-${file.fileName}`, onClick: () => handleDeleteClick('corrupt', file.fileName), children: "Delete" }) })] }, file.fileName)))
                                 : taskRows.map((task) => (_jsxs(Table.Tr, { children: [_jsx(Table.Td, { children: _jsx("span", { title: task.id, children: truncate(task.id, 12) }) }), _jsx(Table.Td, { children: task.action }), _jsx(Table.Td, { children: task.createdAt }), _jsx(Table.Td, { children: task.retryCount ?? 0 }), _jsx(Table.Td, { children: task.error ? (_jsx(Tooltip, { label: task.error, multiline: true, maw: 400, children: _jsx(Text, { size: "xs", style: { cursor: 'help' }, children: truncate(task.error, 50) }) })) : (_jsx(Text, { size: "xs", c: "dimmed", children: "\u2014" })) }), _jsx(Table.Td, { children: _jsxs(Group, { gap: "xs", children: [taskStatus === 'failed' && (_jsx(Button, { variant: "light", "data-testid": `retry-task-${task.id}`, onClick: () => handleRetryClick(task), children: "Retry" })), canDelete && (_jsx(Button, { variant: "light", color: "red", "data-testid": `delete-task-${task.id}`, onClick: () => handleDeleteClick(taskStatus, `${task.id}.json`), children: "Delete" }))] }) })] }, task.id))) })] }) }))] }));
 }
+/** What `lastGitSync.archivedSweep` left undone, or nothing when it finished clean. */
+const sweepTrouble = ({ failed = [], warnings = [] } = {}) => [
+    failed.length === 0
+        ? ''
+        : ` The last sweep could not delete ${failed.map((f) => f.branch).join(', ')} and tries again next sync.`,
+    ...warnings.map((warning) => ` ${endSentence(warning)}`),
+].join('');
+const dayCount = (days) => `${days} ${days === 1 ? 'day' : 'days'}`;
+/** The deployment's retention, and the admin's own delete by the same rule. */
+function ArchivedBranchesCleanup({ health }) {
+    const [days, setDays] = useState(DEFAULT_CLEANUP_DAYS);
+    const workerStatus = health.status?.workerStatus;
+    const generatedAt = health.branchHealth?.generatedAt;
+    const olderThanDays = typeof days === 'number' && Number.isInteger(days) && days > 0 ? days : null;
+    // The scan's own clock, which keeps this render pure and matches the listing it counts.
+    const cutoff = olderThanDays !== null && generatedAt
+        ? archivedCutoff(olderThanDays, Date.parse(generatedAt))
+        : null;
+    const candidates = (health.branchHealth?.entries ?? []).filter((e) => !e.isBaseBranch);
+    const branchesMatching = (matches) => cutoff === null
+        ? []
+        : candidates.flatMap((e) => (e.branch && matches(e.branch, cutoff) ? [e.branch] : []));
+    const due = branchesMatching(deletableByAge);
+    const old = branchesMatching(archivedBefore);
+    const heldFor = (hold) => old.filter((branch) => ageDeletionHold(branch) === hold).map((branch) => branch.name);
+    const notMerged = heldFor('not-merged');
+    const unpublished = heldFor('unpublished');
+    const anyDeletable = candidates.some((e) => e.branch && deletableByAge(e.branch, Number.POSITIVE_INFINITY));
+    const dueLabel = `${due.length} archived ${due.length === 1 ? 'branch' : 'branches'}`;
+    const blockedReason = olderThanDays === null
+        ? 'Enter a whole number of days.'
+        : due.length === 0
+            ? `No merged archived branches are older than ${dayCount(olderThanDays)}.${olderThanDays > 1 && anyDeletable ? ' Lower the number of days to include newer ones.' : ''}${old.length > 0 ? ' Older branches kept from this delete go one at a time, from the "Branches" drawer.' : ''}`
+            : undefined;
+    const handleDeleteClick = () => {
+        if (blockedReason || olderThanDays === null)
+            return;
+        openConfirm({
+            title: 'Delete archived branches',
+            children: (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", children: ["Delete ", dueLabel, " and their comments from the editor? Their GitHub branches stay. This cannot be undone."] }), _jsx(Text, { size: "xs", "data-testid": "delete-archived-names", children: due.map((branch) => branch.name).join(', ') }), notMerged.length > 0 && (_jsxs(Text, { size: "xs", "data-testid": "delete-archived-not-merged", children: ["Kept, as they were not merged: ", notMerged.join(', '), "."] })), unpublished.length > 0 && (_jsxs(Text, { size: "xs", "data-testid": "delete-archived-unpublished", children: ["Kept, as they may hold changes missing from GitHub: ", unpublished.join(', '), "."] }))] })),
+            labels: { confirm: 'Delete branches', cancel: 'Cancel' },
+            confirmProps: { color: 'red', 'data-testid': 'confirm-delete-archived' },
+            onConfirm: () => health.deleteArchivedBranches(olderThanDays, due.map((branch) => branch.name)),
+        });
+    };
+    return (_jsxs(Stack, { gap: 4, mb: "sm", "data-testid": "archived-branches-cleanup", children: [_jsx(Text, { size: "sm", fw: 600, children: "Archived branches" }), _jsxs(Group, { align: "flex-end", gap: "xs", children: [_jsx(NumberInput, { label: "Delete merged archived branches older than", suffix: days === 1 ? ' day' : ' days', size: "xs", w: 280, min: 1, allowDecimal: false, allowNegative: false, value: days, onChange: setDays, "data-testid": "archived-days-input" }), _jsx(Tooltip, { label: blockedReason, disabled: !blockedReason, multiline: true, maw: 280, position: "top-end", children: _jsxs(Button, { size: "xs", variant: "light", color: "red", onClick: handleDeleteClick, loading: health.deletingArchivedBranches, "data-disabled": blockedReason ? true : undefined, "aria-disabled": blockedReason ? true : undefined, "data-testid": "delete-archived-button", children: ["Delete ", blockedReason ? 'archived branches' : dueLabel] }) })] }), workerStatus?.lastGitSync && (_jsxs(Text, { size: "xs", c: "dimmed", "data-testid": "archived-retention-note", children: [workerStatus.archivedBranchRetentionDays === undefined
+                        ? 'This deployment keeps archived branches until someone deletes them.'
+                        : `This deployment deletes merged branches ${dayCount(workerStatus.archivedBranchRetentionDays)} after archiving.`, sweepTrouble(workerStatus.lastGitSync?.archivedSweep)] }))] }));
+}
 function BranchesTab({ health }) {
     const { branchHealth, branchHealthLoading } = health;
     const entries = branchHealth?.entries ?? [];
@@ -399,7 +450,7 @@ function BranchesTab({ health }) {
     if (entries.length === 0) {
         return (_jsx(Text, { size: "sm", c: "dimmed", py: "md", children: "No branch directories found." }));
     }
-    return (_jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", children: [_jsx(Text, { size: "xs", c: duplicateSummary.color, "data-testid": "duplicate-id-summary", children: duplicateSummary.text }), _jsx(Button, { size: "compact-xs", variant: "subtle", loading: health.duplicateIdScanLoading, onClick: () => health.checkDuplicateIds(), children: "Check again" })] }), _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, duplicateIdScan: health.duplicateIdScan
+    return (_jsxs(Stack, { gap: "xs", children: [_jsx(ArchivedBranchesCleanup, { health: health }), _jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", children: [_jsx(Text, { size: "xs", c: duplicateSummary.color, "data-testid": "duplicate-id-summary", children: duplicateSummary.text }), _jsx(Button, { size: "compact-xs", variant: "subtle", loading: health.duplicateIdScanLoading, onClick: () => health.checkDuplicateIds(), children: "Check again" })] }), _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, duplicateIdScan: health.duplicateIdScan
                                     ? (health.duplicateIdScan.byDir[entry.dirName] ?? null)
                                     : undefined, onMarkMerged: handleMarkMergedClick, onRepair: handleRepairClick, onPurge: handlePurgeClick, onDuplicateIds: handleDuplicateIdsClick }, entry.dirName))) })] }) })] }));
 }
@@ -419,7 +470,7 @@ const firstFailed = (iso) => {
 function BranchHealthRow({ entry, baseWarning, duplicateIdScan, onMarkMerged, onRepair, onPurge, onDuplicateIds, }) {
     if (entry.kind === 'healthy' && entry.branch) {
         const b = entry.branch;
-        // The worker looks at every branch but 'archived' (already merged): one in review is not
+        // The worker looks at every branch but 'archived' (finished): one in review is not
         // rebased, but commits from GitHub are still brought into it. An exclusion, not a list of
         // statuses, so a status added later still shows its failures by default.
         const showRebaseFailure = b.status !== 'archived' && !!b.rebaseFailure;
@@ -429,7 +480,9 @@ function BranchHealthRow({ entry, baseWarning, duplicateIdScan, onMarkMerged, on
             : !inReview
                 ? b.unpublishedAtMerge
                     ? { kind: 'unpublished-at-merge' }
-                    : undefined
+                    : b.status === 'archived' && b.rewrittenOnGitHub !== undefined
+                        ? { kind: 'rewritten-at-merge', commit: b.rewrittenOnGitHub }
+                        : undefined
                 : b.submitUnfinished
                     ? {
                         kind: 'submit-unfinished',
@@ -437,7 +490,9 @@ function BranchHealthRow({ entry, baseWarning, duplicateIdScan, onMarkMerged, on
                         notQueued: b.submitNotQueued,
                     }
                     : b.pullRequestHold;
-        const canMarkMerged = (b.status === 'submitted' || b.status === 'approved') && !!b.pullRequestNumber;
+        const canMarkMerged = (b.status === 'submitted' || b.status === 'approved') &&
+            !!b.pullRequestNumber &&
+            b.pullRequestState !== 'closed';
         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: branchStatusPresentation(b.status)?.color ?? 'neutral', variant: "light", children: branchStatusPresentation(b.status)?.label }) }), _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(TooltipDetail, { preLine: true, detail: syncFailedDetail(b.syncFailureReason, hold?.kind !== 'rewritten' &&
                             b.status !== 'archived' &&
                             !(b.submitUnfinished && b.submitNotQueued)), 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, children: [!!b.conflictFiles?.length && (_jsxs(Badge, { color: "orange", variant: "light", children: [b.conflictFiles.length, " conflict", b.conflictFiles.length === 1 ? '' : 's'] })), hold && (_jsx(TooltipDetail, { detail: branchHoldMessage(hold, {

package/dist/editor/admin/useSystemHealth.d.ts

@@ -51,6 +51,9 @@ export interface UseSystemHealthReturn {
     purgeDir: (dirName: string) => Promise<void>;
     repairDir: (dirName: string) => Promise<void>;
     markMerged: (branchName: string) => Promise<void>;
+    /** Deletes those of `branches` still past `olderThanDays`, then says what it could not. */
+    deleteArchivedBranches: (olderThanDays: number, branches: string[]) => Promise<void>;
+    deletingArchivedBranches: boolean;
     /** Stops listing a branch merged with an unfinished submit, a warning that doesn't come back. */
     dismissUnpublished: (dirName: string) => Promise<void>;
 }

package/dist/editor/admin/useSystemHealth.js

@@ -16,7 +16,16 @@ import { useSWRConfig } from 'swr';
 import { notifications } from '@mantine/notifications';
 import { useApiClient } from '../context/index.js';
 import { BRANCHES_KEY } from '../hooks/useBranchesData.js';
+import { isGatewayFailure, isUnanswered, UnansweredError } from '../unanswered.js';
 const POLL_INTERVAL_MS = 30_000;
+const EMPTY_DELETE = {
+    deleted: [],
+    skipped: { notMerged: [], unpublished: [] },
+    failed: [],
+    remaining: 0,
+    warnings: [],
+};
+const countBranches = (count) => `${count} archived ${count === 1 ? 'branch' : 'branches'}`;
 /**
  * Crash-loop rider window: a worker that fatally exits and restarts
  * repeatedly can flap between 'absent' and 'alive' and never sit still long
@@ -38,6 +47,7 @@ export function useSystemHealth(options) {
     const [duplicateIdScan, setDuplicateIdScan] = useState(null);
     const [duplicateIdScanLoading, setDuplicateIdScanLoading] = useState(false);
     const [duplicateIdScanError, setDuplicateIdScanError] = useState(null);
+    const [deletingArchivedBranches, setDeletingArchivedBranches] = useState(false);
     const [error, setError] = useState(null);
     // refresh() has no status argument, so it needs the CURRENT taskStatus
     // without depending on it (that would tear down/rebuild the poll interval
@@ -266,6 +276,53 @@ export function useSystemHealth(options) {
             notifications.show({ message, color: 'red' });
         }
     }, [apiClient, refresh]);
+    const deleteArchivedBranches = useCallback(async (olderThanDays, branches) => {
+        setDeletingArchivedBranches(true);
+        try {
+            const result = await apiClient.admin.deleteArchivedBranches({ olderThanDays, branches });
+            if (isGatewayFailure(result))
+                throw new UnansweredError();
+            if (!result.ok)
+                throw new Error(result.error || 'Failed to delete archived branches');
+            const { deleted, skipped, failed, remaining, warnings } = result.data ?? EMPTY_DELETE;
+            const left = [
+                failed.length > 0
+                    ? `${countBranches(failed.length)} not deleted: busy, or changed since listed`
+                    : '',
+                remaining > 0 ? `${countBranches(remaining)} not reached, run this again` : '',
+                skipped.notMerged.length > 0
+                    ? `${countBranches(skipped.notMerged.length)} kept: not merged`
+                    : '',
+                skipped.unpublished.length > 0
+                    ? `${countBranches(skipped.unpublished.length)} kept: may hold unpublished changes`
+                    : '',
+                ...warnings,
+            ].filter(Boolean);
+            const message = `Deleted ${countBranches(deleted.length)}`;
+            notifications.show(left.length > 0
+                ? { message: `${message}. ${left.join('. ')}.`, color: 'yellow', autoClose: false }
+                : { message, color: 'green' });
+            await mutate(BRANCHES_KEY);
+            await refresh();
+        }
+        catch (err) {
+            if (isUnanswered(err)) {
+                notifications.show({
+                    message: 'Deleting archived branches may have gone through even though the server didn\'t answer. Check the "Branches" tab.',
+                    color: 'yellow',
+                    autoClose: false,
+                });
+                await mutate(BRANCHES_KEY);
+                await refresh();
+                return;
+            }
+            const message = err instanceof Error ? err.message : 'Failed to delete archived branches';
+            notifications.show({ message, color: 'red', autoClose: false });
+        }
+        finally {
+            setDeletingArchivedBranches(false);
+        }
+    }, [apiClient, mutate, refresh]);
     return {
         status,
         statusLoading,
@@ -288,6 +345,8 @@ export function useSystemHealth(options) {
         purgeDir,
         repairDir,
         markMerged,
+        deleteArchivedBranches,
+        deletingArchivedBranches,
         dismissUnpublished,
     };
 }

package/dist/editor/branch-status.js

@@ -77,6 +77,15 @@ export function branchHoldMessage(hold, viewer) {
                     : '';
             return `${stuck} ${retry}${instead}.`;
         }
+        case 'rewritten-at-merge': {
+            const commit = hold.commit
+                ? ` GitHub no longer contains commit ${escapeForLog(hold.commit)}.`
+                : '';
+            const stuck = `This branch was changed on GitHub before it was archived, so some changes here may be missing from GitHub.${commit}`;
+            return viewer.isAdmin
+                ? `${stuck} Check them before deleting the branch.`
+                : `${stuck} Ask an admin to check it.`;
+        }
         case 'unpublished-at-merge': {
             const stuck = 'This pull request merged before the last submit finished, so some changes may not be in the merge.';
             if (viewer.inSystemHealth)

package/dist/editor/comments/CommentThreadsPopover.d.ts

@@ -33,6 +33,8 @@ export interface CommentThreadsPopoverProps {
      * Shown before anyone types; the box stays usable, so a draft survives until it can be posted.
      */
     composeBlockedReason?: string;
+    /** Called each time the popover opens, by any route. */
+    onOpened?: () => void;
     testId: string;
 }
 export interface OpenRequest {

package/dist/editor/comments/CommentThreadsPopover.js

@@ -24,7 +24,7 @@ const openThreadsLabel = (count) => count === 1 ? '1 open thread' : `${count} op
  * with reply and Resolve, and a box for a new thread. Comments stay open on a read-only form,
  * since reviewers comment on submitted branches.
  */
-export const CommentThreadsPopover = ({ threads, subject, variant, revealed = false, anchors, openRequest, currentUserId, canResolve, onAddComment, onResolveThread, onGetUserMetadata, highlightThreadId, threadFieldLabel, composeBlockedReason, testId, }) => {
+export const CommentThreadsPopover = ({ threads, subject, variant, revealed = false, anchors, openRequest, currentUserId, canResolve, onAddComment, onResolveThread, onGetUserMetadata, highlightThreadId, threadFieldLabel, composeBlockedReason, onOpened, testId, }) => {
     const [opened, setOpened] = useState(false);
     const [composing, setComposing] = useState(false);
     // Drafts live here, not in the dropdown, which unmounts whenever the popover closes.
@@ -139,6 +139,14 @@ export const CommentThreadsPopover = ({ threads, subject, variant, revealed = fa
         }, 20);
         return () => window.clearTimeout(timer);
     }, [opened]);
+    const onOpenedRef = useRef(onOpened);
+    useEffect(() => {
+        onOpenedRef.current = onOpened;
+    });
+    useEffect(() => {
+        if (opened)
+            onOpenedRef.current?.();
+    }, [opened]);
     useEffect(() => {
         if (!flashThreadId)
             return;