@parhelia/core 0.3.12831 → 0.4.12796

package/dist/editor/client/EditorShell.js

@@ -740,8 +740,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // moved into useWorkbox
     // Initialize tour state from URL parameter to survive navigation/remounts
     // Memoize to avoid triggering Router state updates during render
-    const tourRestoredFromUrl = useMemo(() => Boolean(configuration.activeTour) &&
-        searchParams.get("tour") === "active", [configuration.activeTour, searchParams]);
+    const tourRestoredFromUrl = useMemo(() => {
+        const tour = searchParams.get("tour");
+        return (Boolean(configuration.activeTour) &&
+            (tour === "active" || tour === configuration.activeTour));
+    }, [configuration.activeTour, searchParams]);
     const [isTourActive, setIsTourActive] = useState(tourRestoredFromUrl);
     // Track if tour was restored from URL to skip prepareAction on initial render
     const tourRestoredRef = useRef(tourRestoredFromUrl);
@@ -1400,7 +1403,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         // Persist tour state to URL so it survives navigation/remounts
         // Use history.replaceState instead of router.replace to avoid triggering React navigation
         const params = new URLSearchParams(window.location.search);
-        params.set("tour", "active");
+        params.set("tour", configuration.activeTour);
         const newUrl = `${window.location.pathname}?${params.toString()}`;
         window.history.replaceState(getCurrentHistoryState(), "", newUrl);
     }, [configuration.activeTour, setIsTourActive]);
@@ -1876,42 +1879,30 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         };
     }, []);
     const media = useMediaSelector();
+    const canStartTour = useMemo(() => searchParams.get("noTour") === null &&
+        startupChecks.state === "complete" &&
+        !startupChecks.hasBlockingIssues &&
+        !(viewName === "settings" && searchParams.get("ccpanel") === "status") &&
+        Boolean(configuration.activeTour), [
+        configuration.activeTour,
+        searchParams,
+        startupChecks.hasBlockingIssues,
+        startupChecks.state,
+        viewName,
+    ]);
+    const sandboxTourShown = configuration.activeTour === "sandbox" &&
+        Boolean(localStorageService.getString("editor.tourShown.sandbox"));
     useEffect(() => {
-        // Suppress auto-start tour when `noTour` query parameter is present
-        if (searchParams.get("noTour") !== null) {
-            return;
-        }
-        // Don't start tour when there are setup errors (user is or will be on system status page)
-        if (startupChecks.state === "complete" && startupChecks.hasBlockingIssues) {
-            return;
-        }
-        // Don't start tour when already on settings system status page
-        if (viewName === "settings" && searchParams.get("ccpanel") === "status") {
-            return;
-        }
-        // Wait for startup checks so we know whether we'll redirect to status
-        if (startupChecks.state !== "complete") {
+        if (!canStartTour || showSandboxWelcome)
             return;
-        }
         const tour = configuration.activeTour;
-        if (!tour) {
-            return;
-        }
         const key = tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
         const tourShown = localStorageService.getString(key);
         if (!tourShown) {
             startTour();
             localStorageService.setString(key, "true");
         }
-    }, [
-        user,
-        startupChecks.state,
-        startupChecks.hasBlockingIssues,
-        viewName,
-        searchParams,
-        configuration.activeTour,
-        startTour,
-    ]);
+    }, [canStartTour, configuration.activeTour, showSandboxWelcome, startTour]);
     // WebSocket initialization is performed after messageHandler is defined
     // Defer URL sync until loadItem is defined below
     // Mark end of initial load phase
@@ -4864,732 +4855,747 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         };
     }
     const factoriesRef = globalThis.__editorContextFactoriesRef;
-    const editContext = useMemo(() => ({
-        operations: operationsContext.ops,
-        itemsRepository,
-        configuration,
-        updateUrl,
-        openSplashScreen: () => {
-            const currentParams = new URLSearchParams(window.location.search);
-            const isAlreadyOnHome = workspaceId === "home" &&
-                (!currentParams.get("workspace") ||
-                    currentParams.get("workspace") === "home");
-            if (isAlreadyOnHome) {
-                // Already on home workspace, no need to navigate - this prevents reloading the tour
-                return;
-            }
-            // Ensure we actually land on the home workspace (not just change the URL).
-            // This is especially important when called from the tour, where the current workspace
-            // might be the editor and URL-only navigation would get "corrected" back.
-            try {
-                switchWorkspace("home", {
-                    skipConfirmation: true,
-                    skipNavigationHistory: true,
-                });
-            }
-            catch { }
-            const preservedParams = new URLSearchParams();
-            if (currentParams.get("fullscreen") === "true") {
-                preservedParams.set("fullscreen", "true");
-            }
-            // Preserve tour state so the tour survives navigation
-            if (currentParams.get("tour") === "active") {
-                preservedParams.set("tour", "active");
-            }
-            const queryString = preservedParams.toString();
-            // Use the current Next.js pathname so this works correctly with or without
-            // a configured basePath (e.g. basePath="/parhelia" in the static export).
-            // Avoid hard-coding "/parhelia" here because Next will automatically
-            // prepend the basePath when navigating.
-            const basePath = pathname || "/";
-            const newUrl = queryString ? `${basePath}?${queryString}` : basePath;
-            router.push(newUrl, { scroll: false });
-        },
-        item: item || page?.item,
-        itemLanguages,
-        itemVersions,
-        isLoadingVersions,
-        loadItemVersions,
-        sessionId: sessionId,
-        readonly: isReadOnly,
-        getSelection: () => selectionRef.current,
-        select: (ids) => {
-            // Re-selecting the same components is a no-op: without this bail a
-            // fresh array identity re-renders every selection consumer.
-            const current = selectionRef.current;
-            if (ids.length === current.length &&
-                ids.every((id, index) => id === current[index])) {
-                perfTraceStep("shell:setSelection-bailed (unchanged)", { ids });
-                return;
-            }
-            perfTraceStep("shell:setSelection-state-update", { ids });
-            setSelection(ids);
-        },
-        selectWithoutAutoScroll,
-        consumeNextSelectionAutoScrollSuppression,
-        consumeNextFocusedFieldAutoScrollSuppression,
-        contentTreeSelection,
-        setContentTreeSelection,
-        selectedForInsertion,
-        setSelectedForInsertion,
-        dragObject,
-        getDragObject: () => dragObjectRef.current,
-        clipboard,
-        setClipboard,
-        workboxItems,
-        isWorkboxLoading,
-        refreshWorkbox,
-        requestRefresh,
-        refreshCompletedFlag,
-        openCreatePageDialog: () => {
-            const current = new URLSearchParams(searchParams.toString());
-            current.delete("version");
-            current.delete("itemid");
-            current.delete("workspace"); // Clear workspace
-            current.set("create", "1");
-            const newUrl = `${pathname}?${current.toString()}`;
-            const oldUrl = `${pathname}?${searchParams.toString()}`;
-            router.push(newUrl, { scroll: false });
-        },
-        selectMedia: media.selectMedia,
-        showToast: (message) => {
-            // Ensure only strings are passed to toast to prevent accidental JSON display
-            if (typeof message === "string") {
-                toast(message);
-            }
-            else {
-                console.warn("showToast called with non-string value:", message);
-                toast("An operation occurred");
-            }
-        },
-        scrollIntoView,
-        setScrollIntoView,
-        focusedField,
-        setFocusedField: setFocusedFieldWithLock,
-        getComponentCommands: async (components, providerContext) => {
-            return await getComponentCommands(components, editContext, providerContext);
-        },
-        dragStart: (nextDragObject) => {
-            // A drag supersedes any unresolved scroll request (e.g. a comment
-            // target still waiting for geometry). Left pending, it would replay
-            // against the post-drop refresh and yank the canvas to a stale spot.
-            setScrollIntoView(undefined);
-            dragObjectRef.current = nextDragObject;
-            setDragObject(nextDragObject);
-        },
-        dragEnd: () => {
-            dragObjectRef.current = undefined;
-            setDragObject(undefined);
-        },
-        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption, spotPosition, color) => {
-            const droppedDragObject = dragObjectRef.current;
-            if ((!droppedDragObject && !insertOption) || !page) {
-                return { committed: false };
-            }
-            dragObjectRef.current = undefined;
-            setDragObject(undefined);
-            const placeholderKeyComponents = placeholderKey.split("_");
-            const parentId = placeholderKeyComponents.length === 1
-                ? undefined
-                : placeholderKeyComponents[1];
-            // Selection is left alone at drop. The server response's focus id
-            // selects the moved/added component (executeEditOperation); selecting
-            // the drop target's parent here made the single-selection frame
-            // FLIP-animate component -> parent -> component around every drop.
-            let op;
-            // A placeholder is rendered from this page model, so its insertion
-            // must target the same item. The shell-level descriptor can briefly
-            // lag while slots or a newly created page settle; using it here could
-            // either discard a valid click or write the component to another page.
-            const dropTargetDescriptor = page.item.descriptor;
-            let insertionSequence;
-            if ((spotPosition || spotPositionElement) && spotPositionAnchor) {
-                insertionSequence = ++insertingSequenceRef.current;
-                setInserting({
-                    position: spotPosition,
-                    positionElement: spotPositionElement,
-                    positionAnchor: spotPositionAnchor,
-                    color,
-                });
-            }
-            let operationPromise;
-            if (insertOption) {
-                // Clear any selected component type for insertion once the component
-                // has been dropped into a placeholder. This ensures that insert mode
-                // can exit cleanly and the editor header updates from "Add Component"
-                // to the actual component name after the operation completes.
-                setSelectedForInsertion("");
-                operationPromise = operations.addComponent(insertOption.typeId, placeholderKey, index, dropTargetDescriptor, { showIndicator: false });
-            }
-            else if (droppedDragObject?.type == "template") {
-                operationPromise = operations.addComponent(droppedDragObject.typeId, placeholderKey, index, dropTargetDescriptor, { showIndicator: false });
-            }
-            else if (droppedDragObject?.type == "component" ||
-                (droppedDragObject?.type == "items" && droppedDragObject.items)) {
-                const parentComponent = parentId && page ? getComponentById(parentId, page) : null;
-                if (droppedDragObject.type == "items" && droppedDragObject.items) {
-                    op = {
-                        type: "link-component",
-                        mainItem: page.item.descriptor,
-                        parent: parentId && {
-                            id: parentId,
-                            language: page.item.descriptor.language,
-                            version: page.item.descriptor.version,
-                            name: parentComponent?.name,
-                        },
-                        placeholderKey,
-                        placeholderIndex: index,
-                        date: new Date().toISOString(),
-                        id: uuid(),
-                        linkedComponentItem: droppedDragObject.items[0],
-                        title: "Link component",
-                    };
+    /**
+     * Workspaces shown in the rail: not hidden, allowed by the server's workspace list (when provided) and,
+     * for workspaces with a dynamic `visible` callback, visible for the given (complete) context.
+     */
+    const filterVisibleWorkspaces = (context) => (context.configuration.editor.workspaces ?? [])
+        .filter((w) => {
+        if (w.hidden)
+            return false;
+        if (w.visible && !w.visible(context))
+            return false;
+        // Filter by workspace settings from Sitecore (if provided)
+        const serverWorkspaces = context.userInfo?.workspaces;
+        if (serverWorkspaces && serverWorkspaces.length > 0) {
+            return serverWorkspaces.some((ws) => ws.id === w.id);
+        }
+        return true;
+    })
+        .sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100));
+    const editContext = useMemo(() => {
+        // Typed as the context (for contextual parameter types) plus the runtime-only extras the literal carries.
+        const editContextValue = {
+            operations: operationsContext.ops,
+            itemsRepository,
+            configuration,
+            updateUrl,
+            openSplashScreen: () => {
+                const currentParams = new URLSearchParams(window.location.search);
+                const isAlreadyOnHome = workspaceId === "home" &&
+                    (!currentParams.get("workspace") ||
+                        currentParams.get("workspace") === "home");
+                if (isAlreadyOnHome) {
+                    // Already on home workspace, no need to navigate - this prevents reloading the tour
+                    return;
+                }
+                // Ensure we actually land on the home workspace (not just change the URL).
+                // This is especially important when called from the tour, where the current workspace
+                // might be the editor and URL-only navigation would get "corrected" back.
+                try {
+                    switchWorkspace("home", {
+                        skipConfirmation: true,
+                        skipNavigationHistory: true,
+                    });
+                }
+                catch { }
+                const preservedParams = new URLSearchParams();
+                if (currentParams.get("fullscreen") === "true") {
+                    preservedParams.set("fullscreen", "true");
+                }
+                // Preserve tour state so the tour survives navigation
+                const currentTour = currentParams.get("tour");
+                if (currentTour) {
+                    preservedParams.set("tour", currentTour);
+                }
+                const queryString = preservedParams.toString();
+                // Use the current Next.js pathname so this works correctly with or without
+                // a configured basePath (e.g. basePath="/parhelia" in the static export).
+                // Avoid hard-coding "/parhelia" here because Next will automatically
+                // prepend the basePath when navigating.
+                const basePath = pathname || "/";
+                const newUrl = queryString ? `${basePath}?${queryString}` : basePath;
+                router.push(newUrl, { scroll: false });
+            },
+            item: item || page?.item,
+            itemLanguages,
+            itemVersions,
+            isLoadingVersions,
+            loadItemVersions,
+            sessionId: sessionId,
+            readonly: isReadOnly,
+            getSelection: () => selectionRef.current,
+            select: (ids) => {
+                // Re-selecting the same components is a no-op: without this bail a
+                // fresh array identity re-renders every selection consumer.
+                const current = selectionRef.current;
+                if (ids.length === current.length &&
+                    ids.every((id, index) => id === current[index])) {
+                    perfTraceStep("shell:setSelection-bailed (unchanged)", { ids });
+                    return;
+                }
+                perfTraceStep("shell:setSelection-state-update", { ids });
+                setSelection(ids);
+            },
+            selectWithoutAutoScroll,
+            consumeNextSelectionAutoScrollSuppression,
+            consumeNextFocusedFieldAutoScrollSuppression,
+            contentTreeSelection,
+            setContentTreeSelection,
+            selectedForInsertion,
+            setSelectedForInsertion,
+            dragObject,
+            getDragObject: () => dragObjectRef.current,
+            clipboard,
+            setClipboard,
+            workboxItems,
+            isWorkboxLoading,
+            refreshWorkbox,
+            requestRefresh,
+            refreshCompletedFlag,
+            openCreatePageDialog: () => {
+                const current = new URLSearchParams(searchParams.toString());
+                current.delete("version");
+                current.delete("itemid");
+                current.delete("workspace"); // Clear workspace
+                current.set("create", "1");
+                const newUrl = `${pathname}?${current.toString()}`;
+                const oldUrl = `${pathname}?${searchParams.toString()}`;
+                router.push(newUrl, { scroll: false });
+            },
+            selectMedia: media.selectMedia,
+            showToast: (message) => {
+                // Ensure only strings are passed to toast to prevent accidental JSON display
+                if (typeof message === "string") {
+                    toast(message);
                 }
                 else {
-                    const componentIds = droppedDragObject.components?.map((c) => c.id) ?? [];
-                    if (componentIds.length > 0) {
+                    console.warn("showToast called with non-string value:", message);
+                    toast("An operation occurred");
+                }
+            },
+            scrollIntoView,
+            setScrollIntoView,
+            focusedField,
+            setFocusedField: setFocusedFieldWithLock,
+            getComponentCommands: async (components, providerContext) => {
+                return await getComponentCommands(components, editContext, providerContext);
+            },
+            dragStart: (nextDragObject) => {
+                // A drag supersedes any unresolved scroll request (e.g. a comment
+                // target still waiting for geometry). Left pending, it would replay
+                // against the post-drop refresh and yank the canvas to a stale spot.
+                setScrollIntoView(undefined);
+                dragObjectRef.current = nextDragObject;
+                setDragObject(nextDragObject);
+            },
+            dragEnd: () => {
+                dragObjectRef.current = undefined;
+                setDragObject(undefined);
+            },
+            droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption, spotPosition, color) => {
+                const droppedDragObject = dragObjectRef.current;
+                if ((!droppedDragObject && !insertOption) || !page) {
+                    return { committed: false };
+                }
+                dragObjectRef.current = undefined;
+                setDragObject(undefined);
+                const placeholderKeyComponents = placeholderKey.split("_");
+                const parentId = placeholderKeyComponents.length === 1
+                    ? undefined
+                    : placeholderKeyComponents[1];
+                // Selection is left alone at drop. The server response's focus id
+                // selects the moved/added component (executeEditOperation); selecting
+                // the drop target's parent here made the single-selection frame
+                // FLIP-animate component -> parent -> component around every drop.
+                let op;
+                // A placeholder is rendered from this page model, so its insertion
+                // must target the same item. The shell-level descriptor can briefly
+                // lag while slots or a newly created page settle; using it here could
+                // either discard a valid click or write the component to another page.
+                const dropTargetDescriptor = page.item.descriptor;
+                let insertionSequence;
+                if ((spotPosition || spotPositionElement) && spotPositionAnchor) {
+                    insertionSequence = ++insertingSequenceRef.current;
+                    setInserting({
+                        position: spotPosition,
+                        positionElement: spotPositionElement,
+                        positionAnchor: spotPositionAnchor,
+                        color,
+                    });
+                }
+                let operationPromise;
+                if (insertOption) {
+                    // Clear any selected component type for insertion once the component
+                    // has been dropped into a placeholder. This ensures that insert mode
+                    // can exit cleanly and the editor header updates from "Add Component"
+                    // to the actual component name after the operation completes.
+                    setSelectedForInsertion("");
+                    operationPromise = operations.addComponent(insertOption.typeId, placeholderKey, index, dropTargetDescriptor, { showIndicator: false });
+                }
+                else if (droppedDragObject?.type == "template") {
+                    operationPromise = operations.addComponent(droppedDragObject.typeId, placeholderKey, index, dropTargetDescriptor, { showIndicator: false });
+                }
+                else if (droppedDragObject?.type == "component" ||
+                    (droppedDragObject?.type == "items" && droppedDragObject.items)) {
+                    const parentComponent = parentId && page ? getComponentById(parentId, page) : null;
+                    if (droppedDragObject.type == "items" && droppedDragObject.items) {
                         op = {
-                            type: "move-component",
+                            type: "link-component",
                             mainItem: page.item.descriptor,
                             parent: parentId && {
                                 id: parentId,
                                 language: page.item.descriptor.language,
                                 version: page.item.descriptor.version,
+                                name: parentComponent?.name,
                             },
                             placeholderKey,
                             placeholderIndex: index,
-                            componentIds,
                             date: new Date().toISOString(),
                             id: uuid(),
-                            title: "Move component",
+                            linkedComponentItem: droppedDragObject.items[0],
+                            title: "Link component",
                         };
                     }
+                    else {
+                        const componentIds = droppedDragObject.components?.map((c) => c.id) ?? [];
+                        if (componentIds.length > 0) {
+                            op = {
+                                type: "move-component",
+                                mainItem: page.item.descriptor,
+                                parent: parentId && {
+                                    id: parentId,
+                                    language: page.item.descriptor.language,
+                                    version: page.item.descriptor.version,
+                                },
+                                placeholderKey,
+                                placeholderIndex: index,
+                                componentIds,
+                                date: new Date().toISOString(),
+                                id: uuid(),
+                                title: "Move component",
+                            };
+                        }
+                    }
                 }
-            }
-            if (op)
-                operationPromise = operations.executeEditOperation(op);
-            if (!operationPromise) {
-                if (insertionSequence !== undefined &&
-                    insertingSequenceRef.current === insertionSequence) {
-                    setInserting(undefined);
-                }
-                return { committed: false };
-            }
-            let operationFailed = false;
-            try {
-                // executeOp resolves (instead of throwing) with a failed status when
-                // the server rejects the operation — no refresh follows then.
-                const result = (await operationPromise);
-                operationFailed = result?.executionStatus === "failed";
-            }
-            catch (err) {
-                operationFailed = true;
-                console.error("Failed to drop component in placeholder", err);
-            }
-            finally {
-                if (insertionSequence !== undefined &&
-                    insertingSequenceRef.current === insertionSequence) {
-                    if (operationFailed) {
+                if (op)
+                    operationPromise = operations.executeEditOperation(op);
+                if (!operationPromise) {
+                    if (insertionSequence !== undefined &&
+                        insertingSequenceRef.current === insertionSequence) {
                         setInserting(undefined);
                     }
-                    else {
-                        // The server accepted the drop; the canvas has not repainted
-                        // yet. Hold the indicator until the refresh lands so it stops
-                        // when the component actually appears, not seconds earlier.
-                        holdInsertingUntilCanvasRefresh(insertionSequence);
-                    }
+                    return { committed: false };
                 }
-            }
-            return { committed: !operationFailed };
-        },
-        page,
-        triggerFieldAction: async (fieldDescriptor, actionButton, parameters, event) => {
-            const field = await itemsRepository.getField(fieldDescriptor);
-            if (!field)
-                return;
-            const op = {
-                field: fieldDescriptor,
-                //  actionButton,
-                label: actionButton.label,
-                state: "running",
-            };
-            const fieldItem = fieldDescriptor.item;
-            if ("clientAction" in actionButton) {
-                await actionButton.clientAction({
-                    field,
-                    editContext,
-                    event,
-                    //dialogContext,
-                });
-            }
-            if (actionButton.action) {
-                setActiveFieldActions((prevFieldActions) => {
-                    const isSameField = (x) => x.field.fieldId == fieldDescriptor.fieldId &&
-                        x.field.item.id == fieldItem.id &&
-                        x.field.item.language == fieldItem.language &&
-                        x.field.item.version == fieldItem.version;
-                    const existing = prevFieldActions.find(isSameField);
-                    // Preserve any existing state/message (e.g., an early websocket error)
-                    // to avoid overwriting it with a stale "running" state
-                    const mergedOp = existing
-                        ? {
-                            ...op,
-                            state: existing.state,
-                            message: existing.message,
-                            label: existing.label ?? op.label,
-                        }
-                        : op;
-                    return [
-                        ...prevFieldActions.filter((x) => !isSameField(x)),
-                        mergedOp,
-                    ];
-                });
+                let operationFailed = false;
                 try {
-                    await executeFieldServerAction(fieldDescriptor.item, fieldDescriptor.fieldId, item.descriptor, actionButton.action, editContext.sessionId, selectedRange?.text || "", parameters || {}, (data) => {
-                        // Update progress message if available
-                        if (data?.responseText) {
-                            op.message = data.responseText;
-                            setActiveFieldActions((prevFieldActions) => [
-                                ...prevFieldActions,
-                            ]);
+                    // executeOp resolves (instead of throwing) with a failed status when
+                    // the server rejects the operation — no refresh follows then.
+                    const result = (await operationPromise);
+                    operationFailed = result?.executionStatus === "failed";
+                }
+                catch (err) {
+                    operationFailed = true;
+                    console.error("Failed to drop component in placeholder", err);
+                }
+                finally {
+                    if (insertionSequence !== undefined &&
+                        insertingSequenceRef.current === insertionSequence) {
+                        if (operationFailed) {
+                            setInserting(undefined);
                         }
-                        // Handle error state from the server response
-                        if (data?.state === "Error" || data?.state === "failed") {
-                            op.state = "error";
-                            op.message = data.errorMessage || "Field action failed";
-                            setActiveFieldActions((prevFieldActions) => [
-                                ...prevFieldActions,
-                            ]);
+                        else {
+                            // The server accepted the drop; the canvas has not repainted
+                            // yet. Hold the indicator until the refresh lands so it stops
+                            // when the component actually appears, not seconds earlier.
+                            holdInsertingUntilCanvasRefresh(insertionSequence);
                         }
+                    }
+                }
+                return { committed: !operationFailed };
+            },
+            page,
+            triggerFieldAction: async (fieldDescriptor, actionButton, parameters, event) => {
+                const field = await itemsRepository.getField(fieldDescriptor);
+                if (!field)
+                    return;
+                const op = {
+                    field: fieldDescriptor,
+                    //  actionButton,
+                    label: actionButton.label,
+                    state: "running",
+                };
+                const fieldItem = fieldDescriptor.item;
+                if ("clientAction" in actionButton) {
+                    await actionButton.clientAction({
+                        field,
+                        editContext,
+                        event,
+                        //dialogContext,
                     });
-                    itemsRepository.refreshItems([fieldDescriptor.item]);
-                    // Only mark as success if no websocket error has been reported
-                    if (op.state === "running") {
-                        op.state = "success";
-                        // Auto-dismiss successful actions after a brief delay
-                        setTimeout(() => {
-                            setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
-                                x.field.item.id === fieldDescriptor.item.id &&
-                                x.field.item.language ===
-                                    fieldDescriptor.item.language &&
-                                x.field.item.version === fieldDescriptor.item.version &&
-                                x.state === "success")));
-                        }, 500);
+                }
+                if (actionButton.action) {
+                    setActiveFieldActions((prevFieldActions) => {
+                        const isSameField = (x) => x.field.fieldId == fieldDescriptor.fieldId &&
+                            x.field.item.id == fieldItem.id &&
+                            x.field.item.language == fieldItem.language &&
+                            x.field.item.version == fieldItem.version;
+                        const existing = prevFieldActions.find(isSameField);
+                        // Preserve any existing state/message (e.g., an early websocket error)
+                        // to avoid overwriting it with a stale "running" state
+                        const mergedOp = existing
+                            ? {
+                                ...op,
+                                state: existing.state,
+                                message: existing.message,
+                                label: existing.label ?? op.label,
+                            }
+                            : op;
+                        return [
+                            ...prevFieldActions.filter((x) => !isSameField(x)),
+                            mergedOp,
+                        ];
+                    });
+                    try {
+                        await executeFieldServerAction(fieldDescriptor.item, fieldDescriptor.fieldId, item.descriptor, actionButton.action, editContext.sessionId, selectedRange?.text || "", parameters || {}, (data) => {
+                            // Update progress message if available
+                            if (data?.responseText) {
+                                op.message = data.responseText;
+                                setActiveFieldActions((prevFieldActions) => [
+                                    ...prevFieldActions,
+                                ]);
+                            }
+                            // Handle error state from the server response
+                            if (data?.state === "Error" || data?.state === "failed") {
+                                op.state = "error";
+                                op.message = data.errorMessage || "Field action failed";
+                                setActiveFieldActions((prevFieldActions) => [
+                                    ...prevFieldActions,
+                                ]);
+                            }
+                        });
+                        itemsRepository.refreshItems([fieldDescriptor.item]);
+                        // Only mark as success if no websocket error has been reported
+                        if (op.state === "running") {
+                            op.state = "success";
+                            // Auto-dismiss successful actions after a brief delay
+                            setTimeout(() => {
+                                setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
+                                    x.field.item.id === fieldDescriptor.item.id &&
+                                    x.field.item.language ===
+                                        fieldDescriptor.item.language &&
+                                    x.field.item.version === fieldDescriptor.item.version &&
+                                    x.state === "success")));
+                            }, 500);
+                        }
+                        else if (op.state === "error") {
+                            // Auto-dismiss error after a longer delay (matching the catch block)
+                            setTimeout(() => {
+                                setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
+                                    x.field.item.id === fieldDescriptor.item.id &&
+                                    x.field.item.language ===
+                                        fieldDescriptor.item.language &&
+                                    x.field.item.version === fieldDescriptor.item.version)));
+                            }, 3000);
+                        }
+                        requestRefresh("immediate");
                     }
-                    else if (op.state === "error") {
-                        // Auto-dismiss error after a longer delay (matching the catch block)
+                    catch (error) {
+                        console.error("Field action failed", error);
+                        // Mark as failed and show error message
+                        op.state = "error";
+                        op.message =
+                            error instanceof Error ? error.message : "Field action failed";
+                        // Update the field action state to show error
+                        setActiveFieldActions((prevFieldActions) => {
+                            const isSameField = (x) => x.field.fieldId == fieldDescriptor.fieldId &&
+                                x.field.item.id == fieldItem.id &&
+                                x.field.item.language == fieldItem.language &&
+                                x.field.item.version == fieldItem.version;
+                            return [...prevFieldActions.filter((x) => !isSameField(x)), op];
+                        });
+                        // Auto-dismiss error after a longer delay
                         setTimeout(() => {
                             setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
                                 x.field.item.id === fieldDescriptor.item.id &&
-                                x.field.item.language ===
-                                    fieldDescriptor.item.language &&
+                                x.field.item.language === fieldDescriptor.item.language &&
                                 x.field.item.version === fieldDescriptor.item.version)));
                         }, 3000);
                     }
-                    requestRefresh("immediate");
                 }
-                catch (error) {
-                    console.error("Field action failed", error);
-                    // Mark as failed and show error message
-                    op.state = "error";
-                    op.message =
-                        error instanceof Error ? error.message : "Field action failed";
-                    // Update the field action state to show error
-                    setActiveFieldActions((prevFieldActions) => {
-                        const isSameField = (x) => x.field.fieldId == fieldDescriptor.fieldId &&
-                            x.field.item.id == fieldItem.id &&
-                            x.field.item.language == fieldItem.language &&
-                            x.field.item.version == fieldItem.version;
-                        return [...prevFieldActions.filter((x) => !isSameField(x)), op];
-                    });
-                    // Auto-dismiss error after a longer delay
-                    setTimeout(() => {
-                        setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
-                            x.field.item.id === fieldDescriptor.item.id &&
-                            x.field.item.language === fieldDescriptor.item.language &&
-                            x.field.item.version === fieldDescriptor.item.version)));
-                    }, 3000);
+            },
+            dismissFieldAction: (fieldDescriptor) => {
+                setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
+                    x.field.item.id === fieldDescriptor.item.id &&
+                    x.field.item.language === fieldDescriptor.item.language &&
+                    x.field.item.version === fieldDescriptor.item.version)));
+            },
+            addFieldAction: (action) => {
+                setActiveFieldActions((prev) => {
+                    const isSameField = (x) => x.field.fieldId === action.field.fieldId &&
+                        x.field.item.id === action.field.item.id &&
+                        x.field.item.language === action.field.item.language &&
+                        x.field.item.version === action.field.item.version;
+                    return [...prev.filter((x) => !isSameField(x)), action];
+                });
+            },
+            updateFieldAction: (fieldDescriptor, updates) => {
+                setActiveFieldActions((prev) => prev.map((x) => x.field.fieldId === fieldDescriptor.fieldId &&
+                    x.field.item.id === fieldDescriptor.item.id &&
+                    x.field.item.language === fieldDescriptor.item.language &&
+                    x.field.item.version === fieldDescriptor.item.version
+                    ? { ...x, ...updates }
+                    : x));
+            },
+            activeFieldActions,
+            showContextMenu: (event, items, options) => {
+                contextMenuRef.current?.show(event, items);
+                setContextMenuSource(options?.source);
+                setCurrentOverlay("context-menu");
+            },
+            updateContextMenu: (items) => {
+                contextMenuRef.current?.update(items);
+            },
+            showFieldEditorPopup: (fields, sections, ev) => {
+                setCurrentOverlay("fields");
+                fieldEditorPopupRef.current?.show(fields, sections, ev);
+            },
+            inserting,
+            removingComponentIds,
+            validating,
+            validationResult,
+            loadItem,
+            editHistory: editHistory,
+            historyMode,
+            setHistoryMode,
+            showOnlyMyChanges,
+            setShowOnlyMyChanges,
+            filterByCurrentLanguage,
+            setFilterByCurrentLanguage,
+            historySearchQuery,
+            setHistorySearchQuery,
+            refreshHistory,
+            isRefreshing,
+            isHistoryLoading,
+            canLoadMoreHistory,
+            isHistoryLoadingMore,
+            loadMoreHistory,
+            activeSessions,
+            remoteCarets,
+            unlockField: async () => {
+                setLockedField(undefined); // Clear client-side lock state
+                await releaseFieldLocks(sessionId);
+            },
+            isCommandDisabled: ({ command, data, }) => {
+                const props = {
+                    editContext,
+                    pathname,
+                    router,
+                    searchParams,
+                    data,
+                    openDialog,
+                };
+                return command.disabled(props);
+            },
+            executeCommand,
+            // Workspace state
+            workspace: currentWorkspace,
+            // Filled in below: a workspace's dynamic `visible` callback receives the finished context object.
+            // Evaluating it inside this literal would read `editContext` before its initialization.
+            visibleWorkspaces: [],
+            workspaceId,
+            previousWorkspaceId,
+            switchWorkspace,
+            // Sidebar state
+            availableSidebars: getSidebarsForWorkspace(workspaceId),
+            openSidebars,
+            pinnedSidebars,
+            lockedSidebars,
+            sidebarStacks,
+            toggleSidebar,
+            openSidebar,
+            toggleSidebarPin,
+            toggleSidebarLock,
+            stackSidebar,
+            moveSidebarToColumn,
+            unstackSidebar,
+            reorderSidebarInStack,
+            reorderPinnedSidebars,
+            reorderOpenSidebars,
+            getResolvedSidebar,
+            compareMode,
+            setCompareMode,
+            fullscreen,
+            setFullscreen,
+            componentDesignerComponent,
+            setComponentDesignerComponent,
+            componentDesignerRendering,
+            setComponentDesignerRendering,
+            insertMode,
+            setInsertMode,
+            currentOverlay,
+            contextMenuSource,
+            setCurrentOverlay,
+            lockedField,
+            timings,
+            setTimings,
+            selectedRange,
+            setSelectedRange,
+            replaceSelectedText,
+            insertTextAtCursor,
+            confirm: (props) => {
+                confirmationDialogRef.current?.confirm(props);
+            },
+            showMessageDialog: (props) => {
+                confirmationDialogRef.current?.confirm({
+                    header: props.header,
+                    message: props.message,
+                    accept: () => { },
+                    acceptLabel: "Ok",
+                });
+            },
+            showInfoToast,
+            showErrorToast,
+            browseHistory,
+            setCenterPanelView,
+            handleKeyDown,
+            startTour,
+            addSocketMessageListener,
+            sendSocketMessage,
+            socketConnectionVersion,
+            socketDiagnostics,
+            currentItemDescriptor,
+            editorSlots,
+            activeSlotId,
+            slotContexts,
+            registerSlotContext,
+            unregisterSlotContext,
+            getActiveSlotContext,
+            getActiveSlotId,
+            getFieldModificationStoreForSlot,
+            closeEditorSlot,
+            setActiveSlot,
+            revision,
+            fullReloadToken,
+            notifyPageModelReady,
+            pageModelReadyToken,
+            selectedComment,
+            setSelectedComment,
+            selectedSuggestedEdit,
+            setSelectedSuggestedEdit,
+            comments,
+            commentsLoaded,
+            availableCommentTags,
+            loadComments,
+            loadSuggestedEdits,
+            setComments,
+            showComments,
+            setShowComments,
+            showResolvedComments,
+            setShowResolvedComments,
+            addComment: async (options) => {
+                const descriptor = item?.descriptor;
+                if (!descriptor)
+                    return;
+                // Only keep a single empty draft comment at a time. Clicking
+                // "add comment" again while an unsaved draft already exists should
+                // focus that draft instead of stacking up more empty inputs.
+                const existingDraft = comments.find((c) => c.isNew);
+                if (existingDraft) {
+                    await activateCommentsModeForWriting("comment-add");
+                    setSelectedComment(existingDraft);
+                    setSelectedSuggestedEdit(undefined);
+                    return;
                 }
-            }
-        },
-        dismissFieldAction: (fieldDescriptor) => {
-            setActiveFieldActions((prevFieldActions) => prevFieldActions.filter((x) => !(x.field.fieldId === fieldDescriptor.fieldId &&
-                x.field.item.id === fieldDescriptor.item.id &&
-                x.field.item.language === fieldDescriptor.item.language &&
-                x.field.item.version === fieldDescriptor.item.version)));
-        },
-        addFieldAction: (action) => {
-            setActiveFieldActions((prev) => {
-                const isSameField = (x) => x.field.fieldId === action.field.fieldId &&
-                    x.field.item.id === action.field.item.id &&
-                    x.field.item.language === action.field.item.language &&
-                    x.field.item.version === action.field.item.version;
-                return [...prev.filter((x) => !isSameField(x)), action];
-            });
-        },
-        updateFieldAction: (fieldDescriptor, updates) => {
-            setActiveFieldActions((prev) => prev.map((x) => x.field.fieldId === fieldDescriptor.fieldId &&
-                x.field.item.id === fieldDescriptor.item.id &&
-                x.field.item.language === fieldDescriptor.item.language &&
-                x.field.item.version === fieldDescriptor.item.version
-                ? { ...x, ...updates }
-                : x));
-        },
-        activeFieldActions,
-        showContextMenu: (event, items, options) => {
-            contextMenuRef.current?.show(event, items);
-            setContextMenuSource(options?.source);
-            setCurrentOverlay("context-menu");
-        },
-        updateContextMenu: (items) => {
-            contextMenuRef.current?.update(items);
-        },
-        showFieldEditorPopup: (fields, sections, ev) => {
-            setCurrentOverlay("fields");
-            fieldEditorPopupRef.current?.show(fields, sections, ev);
-        },
-        inserting,
-        removingComponentIds,
-        validating,
-        validationResult,
-        loadItem,
-        editHistory: editHistory,
-        historyMode,
-        setHistoryMode,
-        showOnlyMyChanges,
-        setShowOnlyMyChanges,
-        filterByCurrentLanguage,
-        setFilterByCurrentLanguage,
-        historySearchQuery,
-        setHistorySearchQuery,
-        refreshHistory,
-        isRefreshing,
-        isHistoryLoading,
-        canLoadMoreHistory,
-        isHistoryLoadingMore,
-        loadMoreHistory,
-        activeSessions,
-        remoteCarets,
-        unlockField: async () => {
-            setLockedField(undefined); // Clear client-side lock state
-            await releaseFieldLocks(sessionId);
-        },
-        isCommandDisabled: ({ command, data, }) => {
-            const props = {
-                editContext,
-                pathname,
-                router,
-                searchParams,
-                data,
-                openDialog,
-            };
-            return command.disabled(props);
-        },
-        executeCommand,
-        // Workspace state
-        workspace: currentWorkspace,
-        visibleWorkspaces: (configuration.editor.workspaces ?? [])
-            .filter((w) => {
-            if (w.hidden)
-                return false;
-            if (w.visible && !w.visible(editContext))
-                return false;
-            // Filter by workspace settings from Sitecore (if provided)
-            if (userInfo.workspaces && userInfo.workspaces.length > 0) {
-                return userInfo.workspaces.some((ws) => ws.id === w.id);
-            }
-            return true;
-        })
-            .sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100)),
-        workspaceId,
-        previousWorkspaceId,
-        switchWorkspace,
-        // Sidebar state
-        availableSidebars: getSidebarsForWorkspace(workspaceId),
-        openSidebars,
-        pinnedSidebars,
-        lockedSidebars,
-        sidebarStacks,
-        toggleSidebar,
-        openSidebar,
-        toggleSidebarPin,
-        toggleSidebarLock,
-        stackSidebar,
-        moveSidebarToColumn,
-        unstackSidebar,
-        reorderSidebarInStack,
-        reorderPinnedSidebars,
-        reorderOpenSidebars,
-        getResolvedSidebar,
-        compareMode,
-        setCompareMode,
-        fullscreen,
-        setFullscreen,
-        componentDesignerComponent,
-        setComponentDesignerComponent,
-        componentDesignerRendering,
-        setComponentDesignerRendering,
-        insertMode,
-        setInsertMode,
-        currentOverlay,
-        contextMenuSource,
-        setCurrentOverlay,
-        lockedField,
-        timings,
-        setTimings,
-        selectedRange,
-        setSelectedRange,
-        replaceSelectedText,
-        insertTextAtCursor,
-        confirm: (props) => {
-            confirmationDialogRef.current?.confirm(props);
-        },
-        showMessageDialog: (props) => {
-            confirmationDialogRef.current?.confirm({
-                header: props.header,
-                message: props.message,
-                accept: () => { },
-                acceptLabel: "Ok",
-            });
-        },
-        showInfoToast,
-        showErrorToast,
-        browseHistory,
-        setCenterPanelView,
-        handleKeyDown,
-        startTour,
-        addSocketMessageListener,
-        sendSocketMessage,
-        socketConnectionVersion,
-        socketDiagnostics,
-        currentItemDescriptor,
-        editorSlots,
-        activeSlotId,
-        slotContexts,
-        registerSlotContext,
-        unregisterSlotContext,
-        getActiveSlotContext,
-        getActiveSlotId,
-        getFieldModificationStoreForSlot,
-        closeEditorSlot,
-        setActiveSlot,
-        revision,
-        fullReloadToken,
-        notifyPageModelReady,
-        pageModelReadyToken,
-        selectedComment,
-        setSelectedComment,
-        selectedSuggestedEdit,
-        setSelectedSuggestedEdit,
-        comments,
-        commentsLoaded,
-        availableCommentTags,
-        loadComments,
-        loadSuggestedEdits,
-        setComments,
-        showComments,
-        setShowComments,
-        showResolvedComments,
-        setShowResolvedComments,
-        addComment: async (options) => {
-            const descriptor = item?.descriptor;
-            if (!descriptor)
-                return;
-            // Only keep a single empty draft comment at a time. Clicking
-            // "add comment" again while an unsaved draft already exists should
-            // focus that draft instead of stacking up more empty inputs.
-            const existingDraft = comments.find((c) => c.isNew);
-            if (existingDraft) {
+                // Snapshot selection context up-front so switching views doesn't change what we comment on.
+                const hintedFieldSnapshot = options?.field;
+                const focusedFieldSnapshot = focusedFieldRef.current;
+                const selectedRangeCandidate = isUsableTextSelectionRange(selectedRange)
+                    ? selectedRange
+                    : lastTextSelectionRangeRef.current;
+                const selectedRangeSnapshot = !hintedFieldSnapshot ||
+                    selectionRangeMatchesField(selectedRangeCandidate, hintedFieldSnapshot)
+                    ? selectedRangeCandidate
+                    : undefined;
+                const selectedRangeFieldSnapshot = isUsableTextSelectionRange(selectedRangeSnapshot)
+                    ? {
+                        fieldId: selectedRangeSnapshot.fieldId,
+                        item: {
+                            id: selectedRangeSnapshot.itemId,
+                            language: selectedRangeSnapshot.language || descriptor.language,
+                            version: typeof selectedRangeSnapshot.version === "number"
+                                ? selectedRangeSnapshot.version
+                                : descriptor.version,
+                        },
+                    }
+                    : undefined;
+                const commentFieldSnapshot = selectedRangeFieldSnapshot ??
+                    hintedFieldSnapshot ??
+                    focusedFieldSnapshot;
+                const itemId = commentFieldSnapshot?.item.id ||
+                    (selection.length > 0 ? selection[0] : undefined) ||
+                    descriptor.id;
+                if (!itemId)
+                    return;
+                // Ensure the promoted comments surface is active when adding a comment.
                 await activateCommentsModeForWriting("comment-add");
-                setSelectedComment(existingDraft);
-                setSelectedSuggestedEdit(undefined);
-                return;
-            }
-            // Snapshot selection context up-front so switching views doesn't change what we comment on.
-            const hintedFieldSnapshot = options?.field;
-            const focusedFieldSnapshot = focusedFieldRef.current;
-            const selectedRangeCandidate = isUsableTextSelectionRange(selectedRange)
-                ? selectedRange
-                : lastTextSelectionRangeRef.current;
-            const selectedRangeSnapshot = !hintedFieldSnapshot ||
-                selectionRangeMatchesField(selectedRangeCandidate, hintedFieldSnapshot)
-                ? selectedRangeCandidate
-                : undefined;
-            const selectedRangeFieldSnapshot = isUsableTextSelectionRange(selectedRangeSnapshot)
-                ? {
-                    fieldId: selectedRangeSnapshot.fieldId,
-                    item: {
-                        id: selectedRangeSnapshot.itemId,
-                        language: selectedRangeSnapshot.language || descriptor.language,
-                        version: typeof selectedRangeSnapshot.version === "number"
-                            ? selectedRangeSnapshot.version
-                            : descriptor.version,
-                    },
-                }
-                : undefined;
-            const commentFieldSnapshot = selectedRangeFieldSnapshot ??
-                hintedFieldSnapshot ??
-                focusedFieldSnapshot;
-            const itemId = commentFieldSnapshot?.item.id ||
-                (selection.length > 0 ? selection[0] : undefined) ||
-                descriptor.id;
-            if (!itemId)
-                return;
-            // Ensure the promoted comments surface is active when adding a comment.
-            await activateCommentsModeForWriting("comment-add");
-            const language = commentFieldSnapshot?.item.language || descriptor.language;
-            const version = typeof commentFieldSnapshot?.item.version === "number"
-                ? commentFieldSnapshot.item.version
-                : descriptor.version;
-            const getFieldName = async () => {
-                if (!commentFieldSnapshot)
-                    return "";
-                const field = await itemsRepository.getField(commentFieldSnapshot);
-                return field?.name;
-            };
-            const getItemName = async () => {
-                const item = await itemsRepository.getItem({
-                    id: itemId,
+                const language = commentFieldSnapshot?.item.language || descriptor.language;
+                const version = typeof commentFieldSnapshot?.item.version === "number"
+                    ? commentFieldSnapshot.item.version
+                    : descriptor.version;
+                const getFieldName = async () => {
+                    if (!commentFieldSnapshot)
+                        return "";
+                    const field = await itemsRepository.getField(commentFieldSnapshot);
+                    return field?.name;
+                };
+                const getItemName = async () => {
+                    const item = await itemsRepository.getItem({
+                        id: itemId,
+                        language,
+                        version,
+                    });
+                    return item?.name;
+                };
+                const newComment = {
+                    id: uuid(),
+                    isNew: true,
+                    itemId,
+                    itemName: await getItemName(),
+                    fieldId: commentFieldSnapshot?.fieldId,
+                    fieldName: await getFieldName(),
+                    mainItemId: descriptor.id,
                     language,
                     version,
-                });
-                return item?.name;
-            };
-            const newComment = {
-                id: uuid(),
-                isNew: true,
-                itemId,
-                itemName: await getItemName(),
-                fieldId: commentFieldSnapshot?.fieldId,
-                fieldName: await getFieldName(),
-                mainItemId: descriptor.id,
-                language,
-                version,
-                position: 0,
-                rangeStart: isUsableTextSelectionRange(selectedRangeSnapshot)
-                    ? selectedRangeSnapshot.startOffset
-                    : 0,
-                rangeEnd: isUsableTextSelectionRange(selectedRangeSnapshot)
-                    ? selectedRangeSnapshot.endOffset
-                    : 0,
-                author: user?.name,
-                authorDisplayName: user?.fullName,
-                created: new Date().toISOString(),
-            };
-            if (selectedRangeSnapshot?.clientRect) {
-                newComment[COMMENT_TRANSIENT_SELECTION_RECT] =
-                    selectedRangeSnapshot.clientRect;
-            }
-            if (selectedRangeSnapshot?.elementKey) {
-                newComment[COMMENT_TRANSIENT_ELEMENT_KEY] =
-                    selectedRangeSnapshot.elementKey;
-            }
-            setComments([newComment, ...comments]);
-            setSelectedComment(newComment);
-            setSelectedSuggestedEdit(undefined);
-            lastTextSelectionRangeRef.current = undefined;
-        },
-        mode,
-        changeMode,
-        setMode,
-        registerModeChangeParticipant,
-        modeTransitionRevision,
-        previewDate,
-        setPreviewDate,
-        layoutMode,
-        setLayoutMode,
-        user,
-        reviews,
-        statusMessage,
-        setStatusMessage,
-        suggestedEdits,
-        setSuggestedEdits,
-        getCurrentSuggestedEdits,
-        suggestionVariantSelection,
-        setSuggestionVariantSelection,
-        showSuggestedEdits,
-        setShowSuggestedEdits,
-        showSuggestedEditsDiff,
-        setShowSuggestedEditsDiff,
-        showVersionDiffHighlighting,
-        setShowVersionDiffHighlighting,
-        enableCompletions,
-        setEnableCompletions,
-        showComponentNavigator,
-        setShowComponentNavigator: handleSetShowComponentNavigator,
-        isComponentNavigatorOpenForSlot,
-        setComponentNavigatorOpenForSlot,
-        showAgentsPanel,
-        setShowAgentsPanel: handleSetShowAgentsPanel,
-        waitForSurfaceSettled: settleRegistry.waitForSurfaceSettled,
-        notifySurfaceSettled: settleRegistry.notifySettled,
-        isEditorFormHiddenForSlot,
-        setEditorFormHiddenForSlot,
-        editorFormHintSeen,
-        markEditorFormHintSeen,
-        editorFormHintVisible,
-        showEditorFormHint,
-        dismissEditorFormHint,
-        editorFormToggleButtonRef,
-        showMinimap: effectiveShowMinimap,
-        setShowMinimap: handleSetShowMinimap,
-        showHelpTerminal,
-        setShowHelpTerminal: handleSetShowHelpTerminal,
-        toggleHelpTerminal,
-        helpTerminalInitialPrompt,
-        helpTerminalProfileName,
-        helpTerminalActiveTab,
-        setHelpTerminalActiveTab,
-        selectedHelpSectionId,
-        setSelectedHelpSectionId,
-        showAgentsWorkspaceEditor,
-        setShowAgentsWorkspaceEditor: handleSetShowAgentsWorkspaceEditor,
-        selectedAgentsWorkspaceAgentId,
-        setSelectedAgentsWorkspaceAgentId,
-        activeEditorTab,
-        setActiveEditorTab,
-        showLayoutComponents,
-        setShowLayoutComponents: handleSetShowLayoutComponents,
-        quotaInfo,
-        isQuotaExceeded: isQuotaExceeded(),
-        getQuotaWarningMessage,
-        isMobile,
-        mobileEditorPanelOpen,
-        setMobileEditorPanelOpen: handleSetMobileEditorPanelOpen,
-        openDialog,
-        webSocketMessages,
-        clearWebSocketMessages: () => setWebSocketMessages([]),
-        userInfo: userInfo,
-        parheliaSettings: effectiveParheliaSettings,
-        setUserPreferences,
-        currentWizardId,
-        setCurrentWizardId,
-        favorites,
-        loadFavorites,
-        refreshFavorites,
-        isQuickSwitcherVisible: quickSwitcherVisible,
-        // Context factory registry methods
-        registerContextFactory: (name, factory) => {
-            try {
-                factoriesRef.map.set(name, factory);
-            }
-            catch { }
-        },
-        unregisterContextFactory: (name) => {
-            try {
-                factoriesRef.map.delete(name);
-            }
-            catch { }
-        },
-        getContextFactory: (name) => {
-            try {
-                return factoriesRef.map.get(name);
-            }
-            catch {
-                return undefined;
-            }
-        },
-    }), [
+                    position: 0,
+                    rangeStart: isUsableTextSelectionRange(selectedRangeSnapshot)
+                        ? selectedRangeSnapshot.startOffset
+                        : 0,
+                    rangeEnd: isUsableTextSelectionRange(selectedRangeSnapshot)
+                        ? selectedRangeSnapshot.endOffset
+                        : 0,
+                    author: user?.name,
+                    authorDisplayName: user?.fullName,
+                    created: new Date().toISOString(),
+                };
+                if (selectedRangeSnapshot?.clientRect) {
+                    newComment[COMMENT_TRANSIENT_SELECTION_RECT] =
+                        selectedRangeSnapshot.clientRect;
+                }
+                if (selectedRangeSnapshot?.elementKey) {
+                    newComment[COMMENT_TRANSIENT_ELEMENT_KEY] =
+                        selectedRangeSnapshot.elementKey;
+                }
+                setComments([newComment, ...comments]);
+                setSelectedComment(newComment);
+                setSelectedSuggestedEdit(undefined);
+                lastTextSelectionRangeRef.current = undefined;
+            },
+            mode,
+            changeMode,
+            setMode,
+            registerModeChangeParticipant,
+            modeTransitionRevision,
+            previewDate,
+            setPreviewDate,
+            layoutMode,
+            setLayoutMode,
+            user,
+            reviews,
+            statusMessage,
+            setStatusMessage,
+            suggestedEdits,
+            setSuggestedEdits,
+            getCurrentSuggestedEdits,
+            suggestionVariantSelection,
+            setSuggestionVariantSelection,
+            showSuggestedEdits,
+            setShowSuggestedEdits,
+            showSuggestedEditsDiff,
+            setShowSuggestedEditsDiff,
+            showVersionDiffHighlighting,
+            setShowVersionDiffHighlighting,
+            enableCompletions,
+            setEnableCompletions,
+            showComponentNavigator,
+            setShowComponentNavigator: handleSetShowComponentNavigator,
+            isComponentNavigatorOpenForSlot,
+            setComponentNavigatorOpenForSlot,
+            showAgentsPanel,
+            setShowAgentsPanel: handleSetShowAgentsPanel,
+            waitForSurfaceSettled: settleRegistry.waitForSurfaceSettled,
+            notifySurfaceSettled: settleRegistry.notifySettled,
+            isEditorFormHiddenForSlot,
+            setEditorFormHiddenForSlot,
+            editorFormHintSeen,
+            markEditorFormHintSeen,
+            editorFormHintVisible,
+            showEditorFormHint,
+            dismissEditorFormHint,
+            editorFormToggleButtonRef,
+            showMinimap: effectiveShowMinimap,
+            setShowMinimap: handleSetShowMinimap,
+            showHelpTerminal,
+            setShowHelpTerminal: handleSetShowHelpTerminal,
+            toggleHelpTerminal,
+            helpTerminalInitialPrompt,
+            helpTerminalProfileName,
+            helpTerminalActiveTab,
+            setHelpTerminalActiveTab,
+            selectedHelpSectionId,
+            setSelectedHelpSectionId,
+            showAgentsWorkspaceEditor,
+            setShowAgentsWorkspaceEditor: handleSetShowAgentsWorkspaceEditor,
+            selectedAgentsWorkspaceAgentId,
+            setSelectedAgentsWorkspaceAgentId,
+            activeEditorTab,
+            setActiveEditorTab,
+            showLayoutComponents,
+            setShowLayoutComponents: handleSetShowLayoutComponents,
+            quotaInfo,
+            isQuotaExceeded: isQuotaExceeded(),
+            getQuotaWarningMessage,
+            isMobile,
+            mobileEditorPanelOpen,
+            setMobileEditorPanelOpen: handleSetMobileEditorPanelOpen,
+            openDialog,
+            webSocketMessages,
+            clearWebSocketMessages: () => setWebSocketMessages([]),
+            userInfo: userInfo,
+            parheliaSettings: effectiveParheliaSettings,
+            setUserPreferences,
+            currentWizardId,
+            setCurrentWizardId,
+            favorites,
+            loadFavorites,
+            refreshFavorites,
+            isQuickSwitcherVisible: quickSwitcherVisible,
+            // Context factory registry methods
+            registerContextFactory: (name, factory) => {
+                try {
+                    factoriesRef.map.set(name, factory);
+                }
+                catch { }
+            },
+            unregisterContextFactory: (name) => {
+                try {
+                    factoriesRef.map.delete(name);
+                }
+                catch { }
+            },
+            getContextFactory: (name) => {
+                try {
+                    return factoriesRef.map.get(name);
+                }
+                catch {
+                    return undefined;
+                }
+            },
+        };
+        editContextValue.visibleWorkspaces =
+            filterVisibleWorkspaces(editContextValue);
+        return editContextValue;
+    }, [
         operationsContext.ops,
         itemsRepository,
         configuration,
@@ -6034,7 +6040,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         ? `${window.location.pathname}?${queryString}`
                         : window.location.pathname;
                     window.history.replaceState(getCurrentHistoryState(), "", newUrl);
-                }, configuration: configuration, restoredFromUrl: tourRestoredRef.current })), showSandboxWelcome && (_jsx(SandboxWelcomeOverlay, { userName: userInfo.user.fullName, onDismiss: dismissSandboxWelcome })), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(GuidanceOverlay, {}) }), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(AgentDialogHandler, {}) })] }));
+                }, configuration: configuration, restoredFromUrl: tourRestoredRef.current })), showSandboxWelcome && (_jsx(SandboxWelcomeOverlay, { userName: userInfo.user.fullName, onDismiss: dismissSandboxWelcome, onReplayTour: sandboxTourShown
+                    ? () => {
+                        dismissSandboxWelcome();
+                        startTour();
+                    }
+                    : undefined, replayEnabled: canStartTour })), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(GuidanceOverlay, {}) }), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(AgentDialogHandler, {}) })] }));
     const showRefreshSpinner = editContext.isRefreshing && !activePageViewContext.iframeSupportsRefresh;
     return (_jsx(LicenseProvider, { initialLicenseStatus: initialLicenseStatus, initialStatusLoaded: initialLicenseStatusLoaded, children: _jsx("div", { className: `editor h-full w-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(FieldsEditContextProvider, { value: fieldsEditContext, children: _jsx(EditContextProvider, { value: editContext, children: _jsxs(SelectionContextProvider, { value: selectionContextValue, children: [_jsx(DevModeIndicator, {}), startupChecks.state === "loading" && _jsx(EditorLoadingOverlay, {}), showRefreshSpinner && (_jsx("div", { className: "text-neutral-grey-50 pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center opacity-50 select-none", children: _jsx(Spinner, {}) })), (currentWorkspace.id === "agents" ||
                                     currentWorkspace.id === "taskboard" ||