@parhelia/core 0.1.12907 → 0.1.12909

package/dist/editor/client/EditorShell.js

@@ -1,18 +1,20 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useCallback, useSyncExternalStore, useMemo, startTransition, } from "react";
+import React, { useState, useEffect, useRef, useCallback, useMemo, startTransition, } from "react";
 import { toast } from "sonner";
 import { EditContextProvider, FieldsEditContextProvider, OperationsContextProvider, useEditContext, } from "./editContext";
-import { fieldModificationStore } from "./fieldModificationStore";
+import { aggregateModifiedFieldsFromStores, areModifiedFieldSnapshotsEqual, FieldModificationStore, } from "./fieldModificationStore";
 import { SplashScreenAgentProvider } from "../../splash-screen/SplashScreenAgentContext";
 import { useRouter, useSearchParams, usePathname } from "./navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
 import { getOperationsContext } from "./operations";
 import { handleErrorResult } from "./helpers";
+import { isManualShowMeFocusTransfer, isManualShowMeTarget, } from "./manualShowMeFocus";
 import { executeFieldAction as executeFieldServerAction, connectSocket, getEditHistory, getRunningOperations, reconnectSession, releaseFieldLocks, validateItems, } from "../services/editService";
 import { emitAgentDocumentsChanged } from "../services/agentService";
 import { onSocketReconnect as onAgentSocketReconnect } from "../services/agentSubscriptionRegistry";
 import { useEditorWebSocket } from "./hooks/useEditorWebSocket";
+import { getEditorRealtime } from "./realtime/realtimeTransport";
 import { createEditorSocketDiagnostics, } from "./socketDiagnostics";
 import { localStorageService } from "../services/localStorageService";
 import { useSocketMessageHandler } from "./hooks/useSocketMessageHandler";
@@ -20,6 +22,7 @@ import "react-json-view-lite/dist/index.css";
 import { MediaSelector, } from "../media-selector/MediaSelector";
 import { getComponentCommands } from "../commands/componentCommands";
 import { getLanguagesAndVersions, } from "../services/contentService";
+import { getAllFavorites } from "../services/favouritesService";
 import ConfirmationDialog from "../ConfirmationDialog";
 import { getItemDescriptor } from "../utils";
 import { EditContextMenu } from "../ContextMenu";
@@ -27,10 +30,13 @@ import { InlineAiTrigger } from "../ai/InlineAiTrigger";
 import { EditorFormHintPopover } from "../page-viewer/EditorFormHintPopover";
 import { FieldEditorPopup } from "../FieldEditorPopup";
 import { ConcurrentUserLimitDialog } from "../ConcurrentUserLimitDialog";
+import { SessionExpiredOverlay } from "./SessionExpiredOverlay";
 import { post } from "../services/serviceHelper";
+import { CONTENT_TREE_SIDEBAR_ID } from "../sidebar/contentTreeConstants";
 import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
 import { useItemsRepository } from "./itemsRepository";
 import { Spinner } from "../ui/Spinner";
+import { createSettleRegistry } from "../ui/animationSettle";
 import { cleanId } from "../utils/id-helper";
 import { useDebouncedCallback } from "use-debounce";
 import { useKeyboardNavigation } from "../utils/keyboardNavigation";
@@ -38,11 +44,14 @@ import { Toaster } from "../../components/ui/sonner";
 import { Tour } from "../../tour/Tour";
 import { GuidanceOverlay } from "../ai/GuidanceOverlay";
 import { AgentDialogHandler } from "../ai/dialogs";
+import { setActiveAgentConversation } from "../ai/useActiveAgentConversation";
 import { usePageViewContext, } from "../page-viewer/pageViewContext";
 import { QuickItemSwitcher } from "../QuickItemSwitcher";
 import { useEditorSlotContext, } from "../views/editorSlotContext";
 import { getComments, getAvailableCommentTags, } from "../services/reviewsService";
 import { useReviews } from "../reviews/useReviews";
+import { isSuggestedEditRemoved } from "../reviews/suggestedEditState";
+import { COMMENT_TRANSIENT_ELEMENT_KEY, COMMENT_TRANSIENT_SELECTION_RECT, } from "../reviews/commentTransientSelection";
 import uuid from "react-uuid";
 import { flushSync } from "react-dom";
 import { getSuggestedEdits } from "../services/suggestedEditsService";
@@ -50,19 +59,44 @@ import { requestQuota } from "../services/aiService";
 import { useQuota } from "./hooks/useQuota";
 import { useEditorUrlSync } from "./hooks/useEditorUrlSync";
 import { useMediaQuery } from "./hooks/useMediaQuery";
-import { FullscreenControls } from "./ui/FullscreenControls";
 import { EditorChrome } from "./ui/EditorChrome";
 import { DevModeIndicator } from "./ui/DevModeIndicator";
 import { useWorkbox } from "./hooks/useWorkbox";
 import { useMediaSelector } from "./hooks/useMediaSelector";
 import { useGlobalEditorKeyDown } from "./hooks/useGlobalEditorKeyDown";
 import { useStartupChecks } from "../settings/status/index";
+import { EditorLoadingOverlay } from "../EditorLoadingOverlay";
 import { FeatureGate, LicenseFeatures, LicenseProvider, LicenseOverlay, } from "../../licensing";
 // Sentinel written to the `sidebar` URL param when the user has explicitly closed
 // every sidebar. Distinguishes "no preference yet" (param absent) from "user wants
 // nothing open" (param present with this value) so reload can honor the user's intent.
 const SIDEBAR_NONE_SENTINEL = "none";
 const sidebarUrlValue = (ids) => ids.length ? ids.join(",") : SIDEBAR_NONE_SENTINEL;
+// moved to hooks/useQuota
+function getInitialOpenSidebars(configuration, workspaceId) {
+    const workspace = configuration.editor.workspaces?.find((candidate) => candidate.id === workspaceId);
+    if (workspace?.supportsSidebars && workspace.defaultSidebars?.length) {
+        return [...workspace.defaultSidebars];
+    }
+    return [...(configuration.editor.defaultOpenSidebars ?? [])];
+}
+function isUsableTextSelectionRange(range) {
+    return !!(range &&
+        range.text?.trim() &&
+        typeof range.startOffset === "number" &&
+        typeof range.endOffset === "number" &&
+        range.startOffset !== range.endOffset &&
+        range.fieldId &&
+        range.itemId);
+}
+function selectionRangeMatchesField(range, field) {
+    if (!range || !field)
+        return false;
+    return (cleanId(range.fieldId) === cleanId(field.fieldId) &&
+        cleanId(range.itemId) === cleanId(field.item.id) &&
+        (!range.language || range.language === field.item.language) &&
+        (typeof range.version !== "number" || range.version === field.item.version));
+}
 function reconcileSlotSettingsState(previous, slots, defaults) {
     const next = {};
     let changed = false;
@@ -105,7 +139,7 @@ function AgentsSlotContextBridge({ slot }) {
 function AgentsSlotContextBridgeHost({ slots }) {
     return (_jsx(_Fragment, { children: slots.map((slot) => (_jsx(AgentsSlotContextBridge, { slot: slot }, `agents-slot-bridge-${slot.slotId}`))) }));
 }
-export function EditorShell({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, initialLicenseStatus, initialLicenseStatusLoaded, parheliaSettings, setUserPreferences, children, }) {
+export function EditorShell({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, initialLicenseStatus, initialLicenseStatusLoaded, parheliaSettings, parheliaSettingsLoaded, setUserPreferences, children, }) {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -126,12 +160,16 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const contextMenuRef = useRef(null);
     const editContextRef = useRef(undefined);
     const [currentOverlay, setCurrentOverlay] = useState();
+    const [contextMenuSource, setContextMenuSource] = useState();
     const [item, setItem] = useState();
     const [focusedField, setFocusedField] = useState();
     const focusedFieldRef = useRef(undefined);
     const [selectedRange, setSelectedRange] = useState();
+    const lastTextSelectionRangeRef = useRef(undefined);
     const [validating, setValidating] = useState(false);
     const [inserting, setInserting] = useState();
+    const [removingComponentIds, setRemovingComponentIds] = useState([]);
+    const insertingSequenceRef = useRef(0);
     const [showFullscreenHint, setShowFullscreenHint] = useState(false);
     // Fullscreen is a shell-level UI mode. Keep it in EditorShell state so the shell can rerender
     // immediately when toggled, while still syncing the active slot's PageViewContext.fullscreen.
@@ -176,6 +214,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             return [];
         }
     });
+    const [remoteCarets, setRemoteCarets] = useState({});
     // Block editing until the server acknowledges our client-info for the current item
     const [isClientInfoAcknowledged, setIsClientInfoAcknowledged] = useState(false);
     if (typeof window !== "undefined")
@@ -187,14 +226,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // (Next.js App Router uses startTransition internally for URL changes)
     const rawWorkspace = useMemo(() => searchParams.get("workspace"), [searchParams]);
     const isReviewsSidebarRequest = rawWorkspace === "reviews";
-    const [workspaceId, setWorkspaceId] = useState(
-    // If workspace=reviews, use "editor" workspace (reviews is a sidebar, not a workspace)
-    isReviewsSidebarRequest
+    const initialWorkspaceId = isReviewsSidebarRequest
         ? "editor"
         : (rawWorkspace ??
             configuration.editor.defaultWorkspace ??
             configuration.editor.workspaces?.[0]?.id ??
-            "home"));
+            "home");
+    const [workspaceId, setWorkspaceId] = useState(initialWorkspaceId);
     const workspaceIdRef = useRef(workspaceId);
     useEffect(() => {
         workspaceIdRef.current = workspaceId;
@@ -212,7 +250,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     : sidebarParam.split(",").filter(Boolean);
         }
         else {
-            sidebars = [...(configuration.editor.defaultOpenSidebars ?? [])];
+            sidebars = getInitialOpenSidebars(configuration, initialWorkspaceId);
         }
         // If workspace=reviews was requested, ensure reviews sidebar is open
         if (isReviewsSidebarRequest && !sidebars.includes("reviews")) {
@@ -350,6 +388,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [componentDesignerRendering, setComponentDesignerRendering] = useState();
     const [insertMode, setInsertMode] = useState(false);
     const [ignoreBlur, setIgnoreBlur] = useState(false);
+    // Timestamp of the most recent pointer-down on a User Manual "Show me" control.
+    // Used by the field-blur guard so clicking a field-gated Show me button keeps
+    // the focused field (and thus the `.focused-field` anchor + field actions).
+    const manualShowMePointerDownAtRef = useRef(0);
     const [currentItemDescriptor, setCurrentItemDescriptor] = useState();
     const currentItemDescriptorRef = useRef(undefined);
     const latestGlobalLoadKeyRef = useRef(null);
@@ -372,6 +414,25 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         activeSlotIdRef.current = activeSlotId;
     }, [activeSlotId]);
     const [slotContexts, setSlotContexts] = useState(() => new Map());
+    const fieldModificationStoresBySlotRef = useRef(new Map());
+    const [fieldModificationStoreRegistryRevision, setFieldModificationStoreRegistryRevision,] = useState(0);
+    const getFieldModificationStoreForSlot = useCallback((slotId) => {
+        let store = fieldModificationStoresBySlotRef.current.get(slotId);
+        if (!store) {
+            store = new FieldModificationStore();
+            fieldModificationStoresBySlotRef.current.set(slotId, store);
+        }
+        return store;
+    }, []);
+    const getFieldModificationStores = useCallback(() => {
+        return Array.from(fieldModificationStoresBySlotRef.current.values());
+    }, []);
+    const ensureFieldModificationStoreRegistered = useCallback((slotId) => {
+        if (fieldModificationStoresBySlotRef.current.has(slotId))
+            return;
+        fieldModificationStoresBySlotRef.current.set(slotId, new FieldModificationStore());
+        setFieldModificationStoreRegistryRevision((previous) => previous + 1);
+    }, []);
     const promptSessionReconnect = useCallback((reason) => {
         const description = reason && reason !== "session-revoked"
             ? `${reason}. Click reconnect to continue in this browser.`
@@ -393,7 +454,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         (typeof result.summary === "string" && result.summary.trim()) ||
                         "";
                     toast.error("Reconnect failed", {
-                        description: serverDetail || "Could not claim this browser session. Try again.",
+                        description: serverDetail ||
+                            "Could not claim this browser session. Try again.",
                     });
                 },
             },
@@ -440,13 +502,32 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // The very first URL sync after initial load should replaceState (not pushState)
     // so the initial bare URL isn't left as a dead-end history entry.
     const isFirstUrlSyncRef = useRef(true);
-    const [inlineEditingFieldElement, setInlineEditingFieldElement] = useState();
     const [lockedField, setLockedField] = useState();
     const [itemLanguages, setItemLanguages] = useState([]);
     const [itemVersions, setItemVersions] = useState([]);
     const [isLoadingVersions, setIsLoadingVersions] = useState(false);
-    const modifiedFields = useSyncExternalStore((onStoreChange) => fieldModificationStore.subscribeAll(onStoreChange), () => fieldModificationStore.getAllFields(), () => fieldModificationStore.getAllFields());
+    const [modifiedFields, setModifiedFields] = useState([]);
+    useEffect(() => {
+        const stores = getFieldModificationStores();
+        const recomputeModifiedFields = () => {
+            const next = aggregateModifiedFieldsFromStores(stores);
+            setModifiedFields((previous) => areModifiedFieldSnapshotsEqual(previous, next) ? previous : next);
+        };
+        const unsubscribes = stores.map((store) => store.subscribeAll(recomputeModifiedFields));
+        recomputeModifiedFields();
+        return () => {
+            unsubscribes.forEach((unsubscribe) => unsubscribe());
+        };
+    }, [
+        editorSlots,
+        fieldModificationStoreRegistryRevision,
+        getFieldModificationStores,
+    ]);
     const [comments, setComments] = useState([]);
+    // True once loadComments has succeeded for the current item. Destructive
+    // decisions that depend on a suggestion's comment thread (e.g. auto-deleting
+    // a reverted no-op suggestion) must not run on the initial empty array.
+    const [commentsLoaded, setCommentsLoaded] = useState(false);
     const [suggestedEdits, setSuggestedEdits] = useState([]);
     const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
     const [showSuggestedEditsDiff, setShowSuggestedEditsDiff] = useState(false);
@@ -465,6 +546,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         localStorageService.setItem("editor.showResolvedComments", showResolvedComments);
     }, [showResolvedComments]);
     const [selectedComment, setSelectedComment] = useState();
+    const [selectedSuggestedEdit, setSelectedSuggestedEdit] = useState();
     const [browseHistory, setBrowseHistory] = useState(() => {
         // Convert UserBrowseHistoryEntry[] to HistoryEntry[]
         if (!userInfo.browseHistory)
@@ -510,13 +592,79 @@ 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(() => searchParams.get("tour") === "active", [searchParams]);
+    const tourRestoredFromUrl = useMemo(() => Boolean(configuration.activeTour) &&
+        searchParams.get("tour") === "active", [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);
-    const [mode, setMode] = useState("edit");
+    const [mode, setModeState] = useState("edit");
+    const modeRef = useRef("edit");
+    modeRef.current = mode;
+    const modeChangeParticipantsRef = useRef(new Set());
+    const loadSuggestedEditsRef = useRef(async () => { });
+    const [modeTransitionRevision, setModeTransitionRevision] = useState(0);
     const [previewDate, setPreviewDate] = useState();
     const [layoutMode, setLayoutMode] = useState("final");
+    const registerModeChangeParticipant = useCallback((participant) => {
+        modeChangeParticipantsRef.current.add(participant);
+        return () => {
+            modeChangeParticipantsRef.current.delete(participant);
+        };
+    }, []);
+    const changeMode = useCallback(async (nextMode, options) => {
+        const previousMode = modeRef.current;
+        if (nextMode === previousMode)
+            return;
+        const participants = Array.from(modeChangeParticipantsRef.current);
+        for (const participant of participants) {
+            await participant.beforeModeChange?.(nextMode, previousMode, options);
+        }
+        for (const participant of participants) {
+            participant.clearInlineDedupe?.(nextMode, previousMode, options);
+        }
+        flushSync(() => {
+            modeRef.current = nextMode;
+            setModeState(nextMode);
+            setModeTransitionRevision((revision) => revision + 1);
+            if (nextMode !== "preview") {
+                setPreviewDate(undefined);
+            }
+            if (nextMode === "suggestions") {
+                setShowSuggestedEdits(true);
+                setWorkspaceId("editor");
+                setShowComments(true);
+            }
+        });
+        if (nextMode === "suggestions") {
+            void loadSuggestedEditsRef.current();
+        }
+    }, []);
+    const setMode = useCallback((nextMode) => {
+        const resolvedMode = typeof nextMode === "function" ? nextMode(modeRef.current) : nextMode;
+        void changeMode(resolvedMode);
+    }, [changeMode]);
+    const closeFeedbackSuggestionsMode = useCallback(() => {
+        setShowComments(false);
+        setShowSuggestedEdits(false);
+        setShowSuggestedEditsDiff(false);
+        if (modeRef.current === "suggestions") {
+            void changeMode("edit", { reason: "feedback-sidebar-close" });
+        }
+    }, [changeMode]);
+    const activateCommentsModeForWriting = useCallback(async (reason) => {
+        setShowComments(true);
+        setShowSuggestedEdits(false);
+        setShowSuggestedEditsDiff(false);
+        if (modeRef.current === "suggestions") {
+            await changeMode("edit", { reason });
+        }
+    }, [changeMode]);
+    const workspaceShowsModeControls = !!configuration.editor.workspaces?.find((workspace) => workspace.id === workspaceId)?.toolbarFactory;
+    useEffect(() => {
+        if (workspaceShowsModeControls || mode !== "suggestions")
+            return;
+        void changeMode("edit", { reason: "mode-controls-hidden" });
+    }, [changeMode, mode, workspaceId, workspaceShowsModeControls]);
     useEffect(() => {
         if (mode !== "preview") {
             setPreviewDate(undefined);
@@ -535,6 +683,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         return userPreferences.showAgentsPanel ?? false;
     });
     const [editorFormHiddenDefault, setEditorFormHiddenDefault] = useState(userPreferences.editorFormHidden ?? false);
+    // Stable registry that lets layout owners (Splitter panels) report when a
+    // reveal surface finished animating, and lets callers await that signal.
+    const settleRegistry = useMemo(() => createSettleRegistry(), []);
     useEffect(() => {
         setSlotSettingsById((prev) => reconcileSlotSettingsState(prev, editorSlots, {
             showComponentNavigator: showComponentNavigatorDefault,
@@ -552,6 +703,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const [selectedHelpSectionId, setSelectedHelpSectionId] = useState(null);
     const [showAgentsWorkspaceEditor, setShowAgentsWorkspaceEditor] = useState(false);
     const [selectedAgentsWorkspaceAgentId, setSelectedAgentsWorkspaceAgentId] = useState(null);
+    const selectedAgentsWorkspaceAgentIdRef = useRef(selectedAgentsWorkspaceAgentId);
+    useEffect(() => {
+        selectedAgentsWorkspaceAgentIdRef.current = selectedAgentsWorkspaceAgentId;
+    }, [selectedAgentsWorkspaceAgentId]);
     const [activeEditorTab, setActiveEditorTab] = useState(null);
     const showLayoutParam = useMemo(() => searchParams.get("showLayout") ??
         searchParams.get("showLayoutComponents"), [searchParams]);
@@ -622,19 +777,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setSelectedHelpSectionId(helpParam === "contents" || helpParam === "true" ? null : helpParam);
         }
     }, [searchParams, isInitialLoad]);
-    useEffect(() => {
-        if (mode === "suggestions") {
-            // Ensure we're in the editor workspace and open the feedback sidebar
-            setWorkspaceId("editor");
-            // Open the feedback sidebar if not already open
-            setOpenSidebars((prev) => {
-                if (!prev.includes("comments")) {
-                    return [...prev, "comments"];
-                }
-                return prev;
-            });
-        }
-    }, [mode]);
     useEffect(() => {
         if (focusedField &&
             selection.length > 0 &&
@@ -644,11 +786,23 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [selection]);
     useEffect(() => {
         focusedFieldRef.current = focusedField;
+        const lastTextSelection = lastTextSelectionRangeRef.current;
+        if (focusedField &&
+            lastTextSelection &&
+            (focusedField.fieldId !== lastTextSelection.fieldId ||
+                focusedField.item.id !== lastTextSelection.itemId)) {
+            lastTextSelectionRangeRef.current = undefined;
+        }
     }, [focusedField]);
+    useEffect(() => {
+        if (isUsableTextSelectionRange(selectedRange)) {
+            lastTextSelectionRangeRef.current = selectedRange;
+        }
+    }, [selectedRange]);
     // Track the current page item descriptor for itemsRepository
     const [currentPageItem, setCurrentPageItem] = useState();
     // Create itemsRepository with current page item (will be updated when page loads)
-    const itemsRepository = useItemsRepository(addRecentEdit, currentPageItem);
+    const itemsRepository = useItemsRepository(addRecentEdit, currentPageItem, getFieldModificationStores);
     const fallbackPageViewContext = usePageViewContext({
         pageItemDescriptor: currentItemDescriptor,
         itemsRepository,
@@ -682,9 +836,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, []);
     const slotContextsRef = useRef(slotContexts);
     const lastActiveSlotContextRef = useRef(null);
-    useEffect(() => {
-        slotContextsRef.current = slotContexts;
-    }, [slotContexts]);
+    slotContextsRef.current = slotContexts;
     const getActiveSlotContext = useCallback(() => {
         const activeId = activeSlotIdRef.current;
         if (!activeId)
@@ -717,7 +869,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const isEditorFormHiddenForSlot = useCallback((slotId) => {
         if (!slotId)
             return editorFormHiddenDefault;
-        return slotSettingsById[slotId]?.editorFormHidden ?? editorFormHiddenDefault;
+        return (slotSettingsById[slotId]?.editorFormHidden ?? editorFormHiddenDefault);
     }, [editorFormHiddenDefault, slotSettingsById]);
     // Sync global compareMode from the active slot's compareMode for URL syncing
     useEffect(() => {
@@ -773,6 +925,57 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         socketMessageListeners.current.add(callback);
         return () => socketMessageListeners.current.delete(callback);
     }, []);
+    useEffect(() => {
+        const removeListener = addSocketMessageListener((message) => {
+            if (message.type !== "caret-position")
+                return;
+            const payload = message.payload;
+            const sessionIdValue = payload?.sessionId?.trim();
+            if (!sessionIdValue || sessionIdValue === sessionId)
+                return;
+            setRemoteCarets((current) => {
+                if (payload?.offset == null) {
+                    if (!current[sessionIdValue])
+                        return current;
+                    const next = { ...current };
+                    delete next[sessionIdValue];
+                    return next;
+                }
+                return {
+                    ...current,
+                    [sessionIdValue]: {
+                        sessionId: sessionIdValue,
+                        fieldId: payload.fieldId,
+                        item: payload.item,
+                        offset: payload.offset,
+                        value: payload.value,
+                    },
+                };
+            });
+        });
+        return () => {
+            try {
+                removeListener();
+            }
+            catch { }
+        };
+    }, [addSocketMessageListener, sessionId]);
+    useEffect(() => {
+        const activeSessionIds = new Set(activeSessions.map((s) => s.sessionId));
+        setRemoteCarets((current) => {
+            let changed = false;
+            const next = {};
+            Object.entries(current).forEach(([caretSessionId, caret]) => {
+                if (activeSessionIds.has(caretSessionId)) {
+                    next[caretSessionId] = caret;
+                }
+                else {
+                    changed = true;
+                }
+            });
+            return changed ? next : current;
+        });
+    }, [activeSessions]);
     // Listen for batch completion notifications
     useEffect(() => {
         const removeListener = addSocketMessageListener((message) => {
@@ -954,6 +1157,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         });
     }, [isInitialLoad, searchParams]);
     const startTour = useCallback(() => {
+        if (!configuration.activeTour) {
+            return;
+        }
         setIsTourActive(true);
         // Persist tour state to URL so it survives navigation/remounts
         // Use history.replaceState instead of router.replace to avoid triggering React navigation
@@ -961,7 +1167,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         params.set("tour", "active");
         const newUrl = `${window.location.pathname}?${params.toString()}`;
         window.history.replaceState(getCurrentHistoryState(), "", newUrl);
-    }, [setIsTourActive]);
+    }, [configuration.activeTour, setIsTourActive]);
     const isMobile = useMediaQuery("(max-width: 767px)");
     // On mobile, clear all locked sidebars and keep only the last-opened panel.
     // Handles viewport resize: desktop -> mobile unlocks everything and trims to one panel.
@@ -1096,6 +1302,14 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         showComponentNavigatorDefault,
         setUserPreferences,
     ]);
+    useEffect(() => {
+        if (workspaceId !== "editor")
+            return;
+        if (mode !== "edit") {
+            setEditorFormHintVisible(false);
+            setMobileEditorPanelOpenRaw(false);
+        }
+    }, [mode, workspaceId]);
     const markEditorFormHintSeen = useCallback(() => {
         setEditorFormHintSeenState(true);
         setUserPreferences({ editorFormHintSeen: true });
@@ -1125,17 +1339,19 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [showHelpTerminal]);
     const toggleHelpTerminal = useCallback((options) => {
         const isCurrentlyOpen = showHelpTerminal;
-        if (isCurrentlyOpen && !options?.activeTab) {
-            // Close if already open and no specific tab requested
+        const requestedTab = options?.activeTab;
+        if (isCurrentlyOpen &&
+            (!requestedTab || requestedTab === helpTerminalActiveTab)) {
+            // Close when toggling the currently active help view.
             handleSetShowHelpTerminal(false);
         }
         else {
             setHelpTerminalInitialPrompt(options?.initialPrompt);
             setHelpTerminalProfileName(options?.profileName);
-            setHelpTerminalActiveTab(options?.activeTab);
+            setHelpTerminalActiveTab(requestedTab);
             handleSetShowHelpTerminal(true);
         }
-    }, [showHelpTerminal, handleSetShowHelpTerminal]);
+    }, [showHelpTerminal, helpTerminalActiveTab, handleSetShowHelpTerminal]);
     const handleSetShowAgentsWorkspaceEditor = useCallback((value) => {
         const newValue = typeof value === "function" ? value(showAgentsWorkspaceEditor) : value;
         setShowAgentsWorkspaceEditor(newValue);
@@ -1164,6 +1380,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setSidebarStacks((prev) => normalizeSidebarStacks(newOrder, prev));
     }, []);
     const ensureSidebarPinned = useCallback((sidebarId) => {
+        if (sidebarId === CONTENT_TREE_SIDEBAR_ID) {
+            return;
+        }
         const currentPinnedSidebars = pinnedSidebarsRef.current;
         if (currentPinnedSidebars.includes(sidebarId)) {
             return;
@@ -1209,7 +1428,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 // Force a reconnect to refresh presence after several failed nudges
                 console.warn("Session presence did not recover after retries. Forcing reconnect.");
                 try {
-                    globalThis.editorSocket?.close(4000, "recover-presence");
+                    getEditorRealtime().reconnect("recover-presence");
                 }
                 catch { }
             }
@@ -1258,7 +1477,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     }));
                 }
             })
-                .catch((error) => console.error("Keep Alive error:", error));
+                .catch((error) => {
+                if (error instanceof TypeError &&
+                    error.message === "Failed to fetch") {
+                    return;
+                }
+                console.error("Keep Alive error:", error);
+            });
         };
         const keepaliveIntervalMs = (() => {
             const param = new URLSearchParams(window.location.search).get("keepaliveIntervalMs");
@@ -1300,9 +1525,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 }
                 // Handle sidebar changes — clear when absent so state matches the URL
                 const sidebarParam = urlParams.get("sidebar");
-                const newSidebars = sidebarParam
-                    ? sidebarParam.split(",").filter(Boolean)
-                    : [];
+                const newSidebars = sidebarParam === SIDEBAR_NONE_SENTINEL
+                    ? []
+                    : sidebarParam
+                        ? sidebarParam.split(",").filter(Boolean)
+                        : [];
                 setOpenSidebars(newSidebars);
                 // Handle wizard ID changes
                 const wizardId = urlParams.get("wizardid");
@@ -1315,18 +1542,14 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 if (helpParam) {
                     setHelpTerminalActiveTab("manual");
                     setShowHelpTerminal(true);
-                    setSelectedHelpSectionId(helpParam === "contents" || helpParam === "true"
-                        ? null
-                        : helpParam);
+                    setSelectedHelpSectionId(helpParam === "contents" || helpParam === "true" ? null : helpParam);
                 }
                 else {
                     handleSetShowHelpTerminal(false);
                 }
                 // Handle mode changes — always set to avoid stale-closure mismatch
                 const urlMode = urlParams.get("mode");
-                if (urlMode) {
-                    setMode(urlMode);
-                }
+                setMode(urlMode ?? "edit");
                 // Handle fullscreen changes (shell-level state)
                 const isFullscreen = urlParams.get("fullscreen") === "true";
                 if (configuration.forceFullscreen) {
@@ -1404,6 +1627,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             return;
         }
         const tour = configuration.activeTour;
+        if (!tour) {
+            return;
+        }
         const key = tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
         const tourShown = localStorageService.getString(key);
         if (!tourShown) {
@@ -1481,6 +1707,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const historyModeRef = useRef(historyMode);
     const itemRef = useRef(item);
     const historySearchQueryRef = useRef(historySearchQuery);
+    const showOnlyMyChangesRef = useRef(showOnlyMyChanges);
+    const filterByCurrentLanguageRef = useRef(filterByCurrentLanguage);
     useEffect(() => {
         historyModeRef.current = historyMode;
     }, [historyMode]);
@@ -1490,6 +1718,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     useEffect(() => {
         historySearchQueryRef.current = historySearchQuery;
     }, [historySearchQuery]);
+    useEffect(() => {
+        showOnlyMyChangesRef.current = showOnlyMyChanges;
+    }, [showOnlyMyChanges]);
+    useEffect(() => {
+        filterByCurrentLanguageRef.current = filterByCurrentLanguage;
+    }, [filterByCurrentLanguage]);
     // Mirror the backend LIKE filter on MainItemPath/Title/Description so that
     // ops arriving via WebSocket while a search is active don't bypass the filter.
     const matchesHistorySearchQuery = useCallback((op) => {
@@ -1543,6 +1777,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     useEffect(() => {
         setRefreshCompletedFlag(!refreshCompletedFlag);
         setInserting(undefined);
+        setRemovingComponentIds([]);
     }, [currentItemDescriptor, activePageViewContext.page?.item.id]);
     useEffect(() => {
         // When the item changes, reset acknowledgment and re-send client info
@@ -1582,21 +1817,27 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             allComments.sort((a, b) => a.position - b.position);
             return allComments;
         });
+        setCommentsLoaded(true);
     }, [currentItemDescriptor, searchParams]);
     // Assuming currentItemDescriptor, ui, state, handleErrorResult, and setSuggestedEdits
     // are available in your component context.
     const loadSuggestedEdits = useCallback(async () => {
         if (!item)
             return;
-        const result = await getSuggestedEdits(item.descriptor.id, item.descriptor.language, item.descriptor.version);
+        const reviewId = searchParams.get("reviewId");
+        const result = await getSuggestedEdits(item.descriptor.id, item.descriptor.language, item.descriptor.version, reviewId ?? undefined);
         if (handleErrorResult(result, ui, state))
             return;
-        const edits = result.data || [];
+        // A refetch can race a locally reverted suggestion's server delete; don't
+        // resurrect suggestions the user already removed.
+        const edits = (result.data || []).filter((edit) => !isSuggestedEditRemoved(edit.id));
         setSuggestedEdits(edits);
-    }, [item]);
+    }, [item, searchParams]);
+    useEffect(() => {
+        loadSuggestedEditsRef.current = loadSuggestedEdits;
+    }, [loadSuggestedEdits]);
     const loadFavorites = useCallback(async () => {
         try {
-            const { getAllFavorites } = await import("../services/favouritesService");
             const result = await getAllFavorites();
             if (result.data) {
                 setFavorites(result.data);
@@ -1607,6 +1848,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setFavorites([]);
         }
     }, []);
+    const refreshFavorites = useCallback(async (opts) => {
+        await loadFavorites();
+    }, [loadFavorites]);
     const page = activePageViewContext.page;
     const currentHistoryScope = useMemo(() => {
         const currentItem = item?.descriptor;
@@ -1696,8 +1940,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             (!freshPage || (freshPage?.editRevision ?? "") != (revision ?? ""));
         const newIsRefreshing = isLoading && viewName === "editor";
         setIsRefreshing(newIsRefreshing);
-        if (!isLoading)
+        if (!isLoading) {
             setInserting(undefined);
+            setRemovingComponentIds([]);
+        }
     }, [page, viewName, revision, pageModelReadyToken]);
     // moved below to ensure requestRefresh is declared first
     const loadHistory = useDebouncedCallback(async () => {
@@ -1768,6 +2014,34 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             : filterByCurrentLanguage;
         const trimmedHistoryQuery = historySearchQuery.trim();
         const historyQuery = trimmedHistoryQuery.length > 0 ? trimmedHistoryQuery : undefined;
+        const requestMode = currentMode;
+        const requestSearchQuery = trimmedHistoryQuery;
+        const requestItem = item?.descriptor;
+        const requestLanguage = item?.descriptor?.language || currentItemDescriptor?.language;
+        const isStaleHistoryResponse = () => {
+            if (historyModeRef.current !== requestMode)
+                return true;
+            if ((historySearchQueryRef.current || "").trim() !== requestSearchQuery) {
+                return true;
+            }
+            if (showOnlyMyChangesRef.current !== shouldFilterBySession)
+                return true;
+            if (filterByCurrentLanguageRef.current !== shouldFilterByLanguage) {
+                return true;
+            }
+            const latestItem = itemRef.current?.descriptor;
+            if (requestMode !== "global") {
+                return (!latestItem ||
+                    !requestItem ||
+                    latestItem.id !== requestItem.id ||
+                    latestItem.language !== requestItem.language ||
+                    latestItem.version !== requestItem.version);
+            }
+            return (shouldFilterByLanguage &&
+                !!requestLanguage &&
+                !!latestItem?.language &&
+                latestItem.language !== requestLanguage);
+        };
         if (currentMode === "global") {
             // Global mode: optionally filter by session and/or language
             const currentLanguage = item?.descriptor?.language || currentItemDescriptor?.language;
@@ -1783,6 +2057,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 console.error("[EditorShell] Failed to load history:", result);
                 return;
             }
+            if (isStaleHistoryResponse()) {
+                return;
+            }
             setEditHistory((prev) => {
                 const next = normalizeEditHistoryPayload(result.data);
                 const scope = {
@@ -1870,6 +2147,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 console.error("[EditorShell] Failed to load item history:", result);
                 return;
             }
+            if (isStaleHistoryResponse()) {
+                return;
+            }
             let operations = normalizeEditHistoryPayload(result.data);
             // Client-side version filtering for current-version mode
             if (currentMode === "current-version") {
@@ -1969,6 +2249,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             globalThis.editorRefreshTimer = undefined;
         };
         if (mode === "immediate") {
+            if (refreshTimer) {
+                clearTimeout(refreshTimer);
+            }
             doRefresh();
             return;
         }
@@ -1984,6 +2267,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     useEffect(() => {
         if (!currentItemDescriptor)
             return;
+        // The previous item's comments don't speak for the new one.
+        setCommentsLoaded(false);
         loadComments();
         loadSuggestedEdits();
     }, [currentItemDescriptor]);
@@ -2162,7 +2447,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         else {
             current.set("compare", "true");
         }
-        current.set("mode", mode);
+        current.set("mode", workspaceShowsModeControls ? mode : "edit");
         // Handle fullscreen parameter
         if (fullscreen) {
             current.set("fullscreen", "true");
@@ -2186,6 +2471,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             current.delete("ccpanel");
             current.delete("providerId");
             current.delete("modelId");
+            current.delete("projectTemplateId");
+        }
+        if (viewName !== "taskboard") {
+            current.delete("tbView");
+            current.delete("tbProjectId");
+            current.delete("tbTaskId");
+            current.delete("tbWizard");
         }
         // Preserve reviewId parameter if it exists (for review links)
         // This ensures review links don't lose the reviewId when URL is synced
@@ -2263,15 +2555,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setItem(item);
             if (!item)
                 return;
-            if (itemRef.current?.descriptor.id === currentItemDescriptor.id &&
-                itemRef.current?.descriptor.language ===
-                    currentItemDescriptor.language &&
-                itemRef.current?.descriptor.version !== item.version) {
-                showInfoToast({
-                    summary: "New version!",
-                    details: "New version of item loaded",
-                });
-            }
         }
         load();
     }, [itemsRepository.revision]);
@@ -2359,6 +2642,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             (activeSlotIdRef.current == null ||
                 existingSlotForItem.slotId === activeSlotIdRef.current)) {
             const isExistingSlotActive = existingSlotForItem.slotId === activeSlotIdRef.current;
+            ensureFieldModificationStoreRegistered(existingSlotForItem.slotId);
             if (isExistingSlotActive) {
                 latestGlobalLoadKeyRef.current = requestedItemKey;
             }
@@ -2417,6 +2701,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 : (activeSlotId ?? editorSlots[0]?.slotId ?? null));
         if (!targetSlotId)
             return undefined;
+        ensureFieldModificationStoreRegistered(targetSlotId);
         setEditorSlots((prev) => {
             if (shouldOpenNewSlot && !options?.targetSlotId) {
                 const existingIdx = prev.findIndex((s) => s.slotId === targetSlotId);
@@ -2494,6 +2779,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         activeSlotId,
         item,
         workspaceId,
+        ensureFieldModificationStoreRegistered,
     ]);
     const setActiveSlot = useCallback(async (slotId) => {
         if (activeSlotId === slotId)
@@ -2536,6 +2822,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         // Remove the slot
         setEditorSlots((prev) => prev.filter((s) => s.slotId !== slotId));
         unregisterSlotContext(slotId);
+        if (fieldModificationStoresBySlotRef.current.delete(slotId)) {
+            setFieldModificationStoreRegistryRevision((previous) => previous + 1);
+        }
         // Activate the next slot if we closed the active one
         if (isClosingActiveSlot) {
             if (nextActiveSlotId) {
@@ -2580,6 +2869,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     }, [fullscreen, configuration.forceFullscreen, searchParams, isMobile]);
     const state = {
         page,
+        currentItemDescriptor,
         configuration,
         selection,
         setSelection,
@@ -2597,12 +2887,19 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         showOnlyMyChanges,
         historyMode,
         refreshHistory,
+        comments,
+        commentsLoaded,
         suggestedEdits,
         setSuggestedEdits,
         mode,
         layoutMode,
         setFocusFieldComponentId,
         setInsertMode,
+        setInserting,
+        setRemovingComponentIds,
+        getActiveSlotContext,
+        getFieldModificationStoreForSlot,
+        getActiveSlotId,
     };
     useEffect(() => {
         if (currentOverlay !== "fields")
@@ -2610,6 +2907,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         if (currentOverlay !== "context-menu")
             contextMenuRef.current?.close({});
     }, [currentOverlay]);
+    const handleContextMenuOpenChange = useCallback((open) => {
+        if (open)
+            return;
+        setContextMenuSource(undefined);
+        setCurrentOverlay((overlay) => overlay === "context-menu" ? undefined : overlay);
+    }, []);
     useEffect(() => {
         loadItemVersions();
     }, [currentItemDescriptor]);
@@ -2698,10 +3001,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         : op.canUndo;
                 const mergedCanRedo = isUndoUpdate
                     ? true
-                    : op.canRedo ?? existingOp.canRedo;
+                    : (op.canRedo ?? existingOp.canRedo);
                 const mergedUndone = isUndoUpdate
                     ? true
-                    : op.undone ?? existingOp.undone;
+                    : (op.undone ?? existingOp.undone);
                 const mergedOp = {
                     ...existingOp,
                     ...op,
@@ -2761,13 +3064,15 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         onOperationExecuted,
     };
     // moved to useMediaSelector
-    const { workboxItems } = useWorkbox({
+    const { workboxItems, isWorkboxLoading, refreshWorkbox } = useWorkbox({
         page,
         currentItemDescriptor,
         validate,
     });
-    // Ref for markOperationComplete callback (needed because operationsContext is created later)
+    // Refs for operations-context callbacks (needed because operationsContext is created later)
     const markOperationCompleteRef = useRef(null);
+    const addExecutingOperationRef = useRef(null);
+    const updateExecutingOperationProgressRef = useRef(null);
     // WebSocket message handler and connection
     const messageHandler = useSocketMessageHandler({
         sessionId,
@@ -2792,22 +3097,24 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         markOperationComplete: (operationId) => {
             markOperationCompleteRef.current?.(operationId);
         },
+        addExecutingOperation: (operation) => {
+            addExecutingOperationRef.current?.(operation);
+        },
+        updateExecutingOperationProgress: (operationId, progress, statusMessage) => {
+            updateExecutingOperationProgressRef.current?.(operationId, progress, statusMessage);
+        },
+        refreshWorkbox,
     });
     // Concurrent user limit error state
     const [concurrentUserLimitError, setConcurrentUserLimitError] = useState(null);
     concurrentUserLimitErrorRef.current = concurrentUserLimitError;
     const handleRetryConnection = useCallback(() => {
         setConcurrentUserLimitError(null);
-        // Force reconnection by triggering a new connection attempt
-        // The useEditorWebSocket hook will check availability again
-        const socket = globalThis.editorSocket;
-        if (socket) {
-            socket.close();
-            delete globalThis.editorSocket;
-        }
-        // The hook will automatically attempt to reconnect
+        // Force reconnection by triggering a new connection attempt. Works for either transport:
+        // WebSocket close lets the hook's reconnect loop pick up; SSE re-opens via the reconnect handler.
+        getEditorRealtime().reconnect("retry-connection");
     }, []);
-    const { socketRef: socketInstanceRef } = useEditorWebSocket({
+    useEditorWebSocket({
         sessionId,
         onMessage: messageHandler,
         onOpen: async () => {
@@ -2843,14 +3150,16 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         requestQuota: requestQuotaAndUpdate,
         sendClientInfo,
         setSocketDiagnostics,
+        enableWebSocketTransport: parheliaSettings?.enableWebSocketTransport ?? true,
+        enableSseFallback: parheliaSettings?.enableSseFallback ?? true,
+        transportSettingsReady: parheliaSettingsLoaded === true,
     });
     useEffect(() => {
         const hasMySession = activeSessions.some((s) => s.sessionId === sessionId);
-        if (hasMySession &&
-            socketInstanceRef.current?.readyState === WebSocket.OPEN) {
+        if (hasMySession && getEditorRealtime().isOpen()) {
             toast.dismiss("session-revoked");
         }
-    }, [activeSessions, sessionId, socketConnectionVersion, socketInstanceRef]);
+    }, [activeSessions, sessionId, socketConnectionVersion]);
     useEffect(() => {
         const handleRevoked = (event) => {
             const customEvent = event;
@@ -2861,37 +3170,36 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             window.removeEventListener("parhelia:session-revoked", handleRevoked);
         };
     }, [promptSessionReconnect]);
-    // Show a single "session expired" toast with a Login action when any
-    // service call (or the keepalive check) detects that the user is no
-    // longer authenticated. Using a stable toast id coalesces the toast so a
-    // burst of failing calls does not spam the UI with duplicate toasts.
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        const handleExpired = () => {
-            toast.error("Your session has expired", {
-                id: "session-expired",
-                description: "Please login again to continue editing.",
-                action: {
-                    label: "Login",
-                    onClick: () => {
-                        window.location.href = "/sitecore/login";
+    const sendSocketMessage = useCallback((message) => {
+        if (message.type === "caret-position" &&
+            message.payload?.source === "form-field") {
+            const payload = message.payload;
+            setRemoteCarets((current) => {
+                if (payload.offset == null) {
+                    if (!current[sessionId])
+                        return current;
+                    const next = { ...current };
+                    delete next[sessionId];
+                    return next;
+                }
+                if (!payload.fieldId || !payload.item) {
+                    return current;
+                }
+                return {
+                    ...current,
+                    [sessionId]: {
+                        sessionId,
+                        fieldId: payload.fieldId,
+                        item: payload.item,
+                        offset: payload.offset,
+                        value: payload.value,
                     },
-                },
-                duration: Infinity,
+                };
             });
-        };
-        window.addEventListener("parhelia:session-expired", handleExpired);
-        return () => {
-            window.removeEventListener("parhelia:session-expired", handleExpired);
-        };
-    }, []);
-    const sendSocketMessage = useCallback((message) => {
-        if (socketInstanceRef.current &&
-            socketInstanceRef.current.readyState === WebSocket.OPEN) {
-            socketInstanceRef.current.send(JSON.stringify(message));
         }
-    }, [socketInstanceRef]);
+        // Routes over whichever transport is active (WebSocket preferred, SSE fallback).
+        getEditorRealtime().send(message);
+    }, [sessionId]);
     // URL update helper - defined early so it can be used by workspace/sidebar functions
     const updateUrl = useCallback((params) => {
         // Use the actual browser pathname (including any basePath like /parhelia)
@@ -2925,8 +3233,15 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 if (!result)
                     return;
             }
-            // Close agents panel when entering page wizard so it doesn't stay open
-            if (targetWorkspaceId === "page-wizard") {
+            const targetWorkspace = configuration.editor.workspaces?.find((workspace) => workspace.id === targetWorkspaceId);
+            const agentToCarryIntoEditor = workspaceIdRef.current === "agents" && targetWorkspaceId === "editor"
+                ? selectedAgentsWorkspaceAgentIdRef.current
+                : null;
+            if (agentToCarryIntoEditor) {
+                setActiveAgentConversation(agentToCarryIntoEditor);
+                handleSetShowAgentsPanel(true);
+            }
+            if (targetWorkspace?.closeAgentsPanelOnEnter) {
                 handleSetShowAgentsPanel(false);
             }
             // Track previous workspace before switching (use state directly)
@@ -2946,9 +3261,18 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     version: currentDescriptor.version.toString(),
                 }
                 : {};
+            const taskboardUrlParams = targetWorkspaceId === "taskboard"
+                ? {}
+                : {
+                    tbView: undefined,
+                    tbProjectId: undefined,
+                    tbTaskId: undefined,
+                    tbWizard: undefined,
+                };
             updateUrl({
                 workspace: targetWorkspaceId,
                 ...currentItemUrlParams,
+                ...taskboardUrlParams,
                 ...options?.urlParams,
             });
             if (typeof document.startViewTransition === "function") {
@@ -2969,6 +3293,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         addNavigationEntry,
         updateUrl,
         handleSetShowAgentsPanel,
+        configuration.editor.workspaces,
     ]);
     // Helper: get all sidebar IDs that should be preserved (locked sidebars + their stack mates)
     const getPreservedSidebarIds = useCallback(() => {
@@ -2996,7 +3321,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             // Check if this sidebar is part of a multi-member stack
             const currentStacks = sidebarStacksRef.current;
             const stackContainingSidebar = currentStacks.find((stack) => stack.includes(sidebarId));
-            const isInMultiMemberStack = stackContainingSidebar && stackContainingSidebar.length > 1;
+            const isInMultiMemberStack = stackContainingSidebar &&
+                stackContainingSidebar.filter((id) => id !== CONTENT_TREE_SIDEBAR_ID)
+                    .length > 1;
             // Don't close via icon click if in multi-member stack (unless forceClose is true)
             if (isInMultiMemberStack && !options?.forceClose) {
                 return;
@@ -3010,6 +3337,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             if (sidebarId === "agents-panel") {
                 setUserPreferences({ showAgentsPanel: false });
             }
+            if (sidebarId === "feedback") {
+                closeFeedbackSuggestionsMode();
+            }
             startTransition(() => {
                 updateUrl({ sidebar: sidebarUrlValue(newSidebars) });
             });
@@ -3018,10 +3348,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         // Opening a new sidebar
         // Keep sidebars that are locked OR in a stack with a locked sidebar
         const preservedSet = getPreservedSidebarIds();
-        const newSidebars = [
-            ...currentOpenSidebars.filter((id) => preservedSet.has(id)), // Keep locked stacks
-            sidebarId, // Add the new one
-        ];
+        const newSidebars = sidebarId === CONTENT_TREE_SIDEBAR_ID
+            ? [...currentOpenSidebars, sidebarId]
+            : [
+                ...currentOpenSidebars.filter((id) => preservedSet.has(id) || id === CONTENT_TREE_SIDEBAR_ID), // Keep locked stacks and the dedicated tree panel
+                sidebarId, // Add the new one
+            ];
         openSidebarsRef.current = newSidebars;
         setOpenSidebars(newSidebars);
         ensureSidebarPinned(sidebarId);
@@ -3043,6 +3375,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         ensureSidebarPinned,
         setUserPreferences,
         isMobile,
+        closeFeedbackSuggestionsMode,
     ]);
     // Ensure a sidebar is open (without toggling it closed if already open)
     const openSidebar = useCallback((sidebarId, options) => {
@@ -3054,10 +3387,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         const preservedSet = options?.preserveOpenSidebars
             ? undefined
             : getPreservedSidebarIds();
-        const newSidebars = options?.preserveOpenSidebars
+        const newSidebars = options?.preserveOpenSidebars || sidebarId === CONTENT_TREE_SIDEBAR_ID
             ? [...currentOpenSidebars, sidebarId]
             : [
-                ...currentOpenSidebars.filter((id) => preservedSet?.has(id)),
+                ...currentOpenSidebars.filter((id) => preservedSet?.has(id) || id === CONTENT_TREE_SIDEBAR_ID),
                 sidebarId,
             ];
         openSidebarsRef.current = newSidebars;
@@ -3227,9 +3560,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 return false;
             if (!isTaskboardWorkspace && isTaskboardSidebar)
                 return false;
-            // Always show agents-panel regardless of workspace settings.
+            // Keep agents-panel broadly available, except in dedicated workspaces
+            // that own their full surface.
             if (s.id === "agents-panel") {
-                return true;
+                return targetWorkspaceId !== "translation-management";
             }
             // If no workspace settings or no sidebars defined for current workspace, show all.
             if (workspaceAllowedSidebarIds.length === 0) {
@@ -3256,8 +3590,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         };
     }, [getSidebarsForWorkspace, workspaceId]);
     // Track the last workspaceId this effect saw so we only auto-apply
-    // `currentWorkspace.defaultSidebars` on an actual workspace change. On initial mount
-    // the user's explicit empty state (sidebar=none in URL) must not be overwritten.
+    // `currentWorkspace.defaultSidebars` on actual workspace changes. Initial
+    // workspace defaults are applied by the openSidebars state initializer, while
+    // explicit sidebar URL state such as sidebar=none is still respected.
     const prevWorkspaceIdForDefaultsRef = useRef(null);
     useEffect(() => {
         if (!currentWorkspace.supportsSidebars) {
@@ -3350,42 +3685,67 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         const result = await command.execute(context);
         return result;
     }, [editContextRef, pathname, router, searchParams, openDialog]);
-    const operationsContext = getOperationsContext(state, ui);
+    const operationsContext = getOperationsContext({ ...state, refreshWorkbox }, ui);
     const operations = operationsContext.ops;
-    // Update the ref for markOperationComplete so the socket handler can access it
+    // Update the refs so the socket handler can access the operations-context callbacks
     useEffect(() => {
         markOperationCompleteRef.current =
             operationsContext.context.markOperationComplete;
-    }, [operationsContext.context.markOperationComplete]);
+        addExecutingOperationRef.current =
+            operationsContext.context.addExecutingOperation;
+        updateExecutingOperationProgressRef.current =
+            operationsContext.context.updateExecutingOperationProgress;
+    }, [
+        operationsContext.context.markOperationComplete,
+        operationsContext.context.addExecutingOperation,
+        operationsContext.context.updateExecutingOperationProgress,
+    ]);
     // Replace selected text with new content (for inline AI editing)
-    const replaceSelectedText = useCallback(async (newText) => {
-        if (!focusedField)
-            return;
+    const replaceSelectedText = useCallback(async (newText, selectionOverride) => {
+        const rangeToReplace = selectionOverride ?? selectedRange ?? lastTextSelectionRangeRef.current;
         try {
             // If we have selected text and a replaceText callback, use it
-            if (selectedRange?.text && selectedRange.replaceText) {
-                selectedRange.replaceText(newText);
+            if (rangeToReplace?.text && rangeToReplace.replaceText) {
+                rangeToReplace.replaceText(newText);
                 setSelectedRange(undefined);
+                lastTextSelectionRangeRef.current = undefined;
                 return;
             }
             // If no selection but we have a replaceText callback, try to use it for insertion
             // (some editors might support insertion via the same callback)
-            if (!selectedRange?.text && selectedRange?.replaceText) {
-                selectedRange.replaceText(newText);
+            if (!rangeToReplace?.text && rangeToReplace?.replaceText) {
+                rangeToReplace.replaceText(newText);
                 setSelectedRange(undefined);
+                lastTextSelectionRangeRef.current = undefined;
                 return;
             }
+            const fieldToReplace = focusedField ??
+                (rangeToReplace?.fieldId &&
+                    rangeToReplace.itemId &&
+                    rangeToReplace.language &&
+                    typeof rangeToReplace.version === "number"
+                    ? {
+                        fieldId: rangeToReplace.fieldId,
+                        item: {
+                            id: rangeToReplace.itemId,
+                            language: rangeToReplace.language,
+                            version: rangeToReplace.version,
+                        },
+                    }
+                    : undefined);
+            if (!fieldToReplace)
+                return;
             // Fallback: indexOf-based replacement/insertion for plain text fields
-            const { fieldId, item } = focusedField;
-            const modifiedField = fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
+            const { fieldId, item } = fieldToReplace;
+            const modifiedField = getActiveSlotContext()?.fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
             const currentValue = modifiedField
                 ? modifiedField.value || ""
-                : (await itemsRepository.getField(focusedField))?.value ||
-                    "";
+                : (await itemsRepository.getField(fieldToReplace))
+                    ?.value || "";
             let newValue;
-            if (selectedRange?.text) {
+            if (rangeToReplace?.text) {
                 // Replace selected text
-                const { text: originalSelectedText } = selectedRange;
+                const { text: originalSelectedText } = rangeToReplace;
                 const actualPosition = currentValue.indexOf(originalSelectedText);
                 if (actualPosition === -1) {
                     console.error("Failed to find selected text in field value");
@@ -3398,7 +3758,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             else {
                 // Insert at cursor position (use startOffset if available, otherwise append)
-                const insertPosition = selectedRange?.startOffset ?? currentValue.length;
+                const insertPosition = rangeToReplace?.startOffset ?? currentValue.length;
                 newValue =
                     currentValue.slice(0, insertPosition) +
                         newText +
@@ -3406,17 +3766,24 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             // Update the field
             await operations.editField({
-                field: focusedField,
+                field: fieldToReplace,
                 value: newValue,
                 refresh: "immediate",
             });
             // Clear the selection after replacement/insertion
             setSelectedRange(undefined);
+            lastTextSelectionRangeRef.current = undefined;
         }
         catch (error) {
             console.error("Failed to replace/insert text:", error);
         }
-    }, [selectedRange, focusedField, itemsRepository, operations]);
+    }, [
+        selectedRange,
+        focusedField,
+        itemsRepository,
+        operations,
+        getActiveSlotContext,
+    ]);
     // Insert text at cursor position (for when there's no selection)
     const insertTextAtCursor = useCallback(async (newText) => {
         if (!focusedField)
@@ -3457,7 +3824,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             // Fallback: use field value length (append)
             const { fieldId, item } = focusedField;
-            const modifiedField = fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
+            const modifiedField = getActiveSlotContext()?.fieldModificationStore.getField(fieldId, item.id, item.language, item.version);
             const currentValue = modifiedField
                 ? modifiedField.value || ""
                 : (await itemsRepository.getField(focusedField))?.value ||
@@ -3476,7 +3843,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         catch (error) {
             console.error("Failed to insert text at cursor:", error);
         }
-    }, [focusedField, selectedRange, itemsRepository, operations]);
+    }, [
+        focusedField,
+        selectedRange,
+        itemsRepository,
+        operations,
+        getActiveSlotContext,
+    ]);
     // Cleanup pending debounced operations on unmount to prevent stuck "saving" states
     useEffect(() => {
         return () => {
@@ -3490,14 +3863,31 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setTimeout(() => {
                 setIgnoreBlur(false);
             }, 20);
-            setFocusedField({ ...field });
             if (requestLock) {
                 const lockResult = (await operations.ensureLock(field)) || false;
-                return lockResult;
+                if (!lockResult) {
+                    return false;
+                }
+                setFocusedField({ ...field });
+                return true;
             }
+            setFocusedField({ ...field });
         }
         else {
-            if (!ignoreBlur) {
+            // Keep the field selected when the blur was caused by clicking a User
+            // Manual "Show me" control. Those reveals (e.g. the Reset field action)
+            // gate availability on the `.focused-field` anchor, so dropping the
+            // focused field here would disable the button and hide the very element
+            // being highlighted. A mouse blur fires before the button becomes the
+            // active element, so the guard also accepts a recent pointer-down on the
+            // control (keyboard activation still leaves it as the active element).
+            const focusMovedToShowMe = typeof document !== "undefined" &&
+                isManualShowMeFocusTransfer({
+                    activeElement: document.activeElement,
+                    lastPointerDownAt: manualShowMePointerDownAtRef.current,
+                    now: Date.now(),
+                });
+            if (!ignoreBlur && !focusMovedToShowMe) {
                 setFocusedField(undefined);
                 setLockedField(undefined); // Clear client-side lock state
                 releaseFieldLocks(sessionId);
@@ -3662,8 +4052,12 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setNavigationHistory,
     ]);
     useEffect(() => {
-        if (typeof window === "undefined" ||
-            process.env.PARHELIA_DEV_MODE !== "true") {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const exposeViewportTestApi = process.env.PARHELIA_DEV_MODE === "true" ||
+            window.localStorage?.getItem("__parheliaViewportTestApi") === "true";
+        if (!exposeViewportTestApi) {
             return;
         }
         window.__parheliaQuickSwitcherTestApi = {
@@ -3872,18 +4266,24 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             };
         }
     }, [operations.onFieldBlur]);
+    // Record pointer-downs on User Manual "Show me" controls before the field
+    // blur fires, so the blur guard above can keep the focused field for
+    // field-gated reveals regardless of focus/activeElement timing.
     useEffect(() => {
-        if (mode === "suggestions") {
-            setShowSuggestedEdits(true);
-            // Refresh from the server to recover from any missed
-            // `suggested-edit-updated` WebSocket events (e.g. created by an
-            // agent tool while another tab was focused).
-            loadSuggestedEdits();
-        }
-        else {
-            setShowSuggestedEdits(false);
-        }
-    }, [mode, loadSuggestedEdits]);
+        if (typeof document === "undefined")
+            return;
+        const handlePointerDown = (event) => {
+            if (isManualShowMeTarget(event.target)) {
+                manualShowMePointerDownAtRef.current = Date.now();
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        document.addEventListener("mousedown", handlePointerDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown, true);
+            document.removeEventListener("mousedown", handlePointerDown, true);
+        };
+    }, []);
     const isReadOnly = !item ||
         !item.canWriteItem ||
         !item.canWriteLanguage ||
@@ -3902,15 +4302,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         // Otherwise, only show workspaces that are in the settings
         return workspaceIdsFromSettings.includes(w.id) && !w.visible;
     });
-    // Handle initial mode setup from URL (only on initial load)
-    useEffect(() => {
-        if (!isInitialLoad)
-            return;
-        const queryMode = searchParams.get("mode");
-        if (queryMode) {
-            setMode(queryMode);
-        }
-    }, [searchParams, isInitialLoad]);
     // Add this new effect for initial fullscreen setup
     useEffect(() => {
         if (!isInitialLoad)
@@ -3920,6 +4311,19 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             activePageViewContext.setFullscreen(isFullscreen);
         }
     }, [searchParams, isInitialLoad, activePageViewContext]);
+    useEffect(() => {
+        if (typeof window === "undefined" ||
+            process.env.PARHELIA_DEV_MODE !== "true") {
+            return;
+        }
+        window.__parheliaViewportTestApi = {
+            setZoom: (zoom) => activePageViewContext.setZoom(zoom),
+            getZoom: () => activePageViewContext.zoom,
+        };
+        return () => {
+            delete window.__parheliaViewportTestApi;
+        };
+    }, [activePageViewContext]);
     // Simple registry for per-view context factories (e.g., GraphQL context)
     // Stored outside the EditContext object via ref to avoid re-renders
     if (!globalThis.__editorContextFactoriesRef) {
@@ -3988,6 +4392,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         clipboard,
         setClipboard,
         workboxItems,
+        isWorkboxLoading,
+        refreshWorkbox,
         requestRefresh,
         refreshCompletedFlag,
         openCreatePageDialog: () => {
@@ -4015,8 +4421,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setScrollIntoView,
         focusedField,
         setFocusedField: setFocusedFieldWithLock,
-        getComponentCommands: async (components) => {
-            return await getComponentCommands(components, editContext);
+        getComponentCommands: async (components, providerContext) => {
+            return await getComponentCommands(components, editContext, providerContext);
         },
         dragStart: (dragObject) => {
             setDragObject(dragObject);
@@ -4024,16 +4430,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         dragEnd: () => {
             setDragObject(undefined);
         },
-        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption) => {
-            if ((!dragObject && !insertOption) || !page)
+        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption, spotPosition, color) => {
+            const droppedDragObject = dragObject;
+            if ((!droppedDragObject && !insertOption) || !page)
                 return;
             setDragObject(undefined);
-            if (spotPositionElement && spotPositionAnchor) {
-                setInserting({
-                    positionElement: spotPositionElement,
-                    positionAnchor: spotPositionAnchor,
-                });
-            }
             const placeholderKeyComponents = placeholderKey.split("_");
             const parentId = placeholderKeyComponents.length === 1
                 ? undefined
@@ -4043,39 +4444,32 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             let op;
             if (!currentItemDescriptorRef.current)
                 return;
+            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("");
-                operations
-                    .addComponent(insertOption.typeId, placeholderKey, index, currentItemDescriptorRef.current)
-                    .then((result) => {
-                    setInserting(undefined);
-                })
-                    .catch((err) => {
-                    setInserting(undefined);
-                });
-                return;
+                operationPromise = operations.addComponent(insertOption.typeId, placeholderKey, index, currentItemDescriptorRef.current, { showIndicator: false });
             }
-            if (!dragObject)
-                return;
-            if (dragObject && dragObject.type == "template") {
-                operations
-                    .addComponent(dragObject.typeId, placeholderKey, index, currentItemDescriptorRef.current)
-                    .then((result) => {
-                    setInserting(undefined);
-                })
-                    .catch((err) => {
-                    setInserting(undefined);
-                });
-                return;
+            else if (droppedDragObject?.type == "template") {
+                operationPromise = operations.addComponent(droppedDragObject.typeId, placeholderKey, index, currentItemDescriptorRef.current, { showIndicator: false });
             }
-            if (dragObject.type == "component" ||
-                (dragObject.type == "items" && dragObject.items)) {
+            else if (droppedDragObject?.type == "component" ||
+                (droppedDragObject?.type == "items" && droppedDragObject.items)) {
                 const parentComponent = parentId && page ? getComponentById(parentId, page) : null;
-                if (dragObject.type == "items" && dragObject.items) {
+                if (droppedDragObject.type == "items" && droppedDragObject.items) {
                     op = {
                         type: "link-component",
                         mainItem: page.item.descriptor,
@@ -4089,33 +4483,52 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         placeholderIndex: index,
                         date: new Date().toISOString(),
                         id: uuid(),
-                        linkedComponentItem: dragObject.items[0],
+                        linkedComponentItem: droppedDragObject.items[0],
                         title: "Link component",
                     };
                 }
                 else {
-                    const componentIds = dragObject.components?.map((c) => c.id) ?? [];
-                    if (componentIds.length === 0)
-                        return;
-                    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",
-                    };
+                    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)
-                operations.executeEditOperation(op);
+                operationPromise = operations.executeEditOperation(op);
+            if (!operationPromise) {
+                if (insertionSequence !== undefined &&
+                    insertingSequenceRef.current === insertionSequence) {
+                    setInserting(undefined);
+                }
+                return;
+            }
+            try {
+                await operationPromise;
+            }
+            catch (err) {
+                console.error("Failed to drop component in placeholder", err);
+            }
+            finally {
+                if (insertionSequence !== undefined &&
+                    insertingSequenceRef.current === insertionSequence) {
+                    setInserting(undefined);
+                }
+            }
         },
         page,
         triggerFieldAction: async (fieldDescriptor, actionButton, parameters, event) => {
@@ -4251,8 +4664,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 : x));
         },
         activeFieldActions,
-        showContextMenu: (event, items) => {
+        showContextMenu: (event, items, options) => {
             contextMenuRef.current?.show(event, items);
+            setContextMenuSource(options?.source);
             setCurrentOverlay("context-menu");
         },
         updateContextMenu: (items) => {
@@ -4263,6 +4677,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             fieldEditorPopupRef.current?.show(fields, sections, ev);
         },
         inserting,
+        removingComponentIds,
         validating,
         validationResult,
         loadItem,
@@ -4278,6 +4693,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         refreshHistory,
         isRefreshing,
         activeSessions,
+        remoteCarets,
         unlockField: async () => {
             setLockedField(undefined); // Clear client-side lock state
             await releaseFieldLocks(sessionId);
@@ -4340,6 +4756,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         insertMode,
         setInsertMode,
         currentOverlay,
+        contextMenuSource,
         setCurrentOverlay,
         lockedField,
         timings,
@@ -4377,6 +4794,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         unregisterSlotContext,
         getActiveSlotContext,
         getActiveSlotId,
+        getFieldModificationStoreForSlot,
         closeEditorSlot,
         setActiveSlot,
         revision,
@@ -4384,7 +4802,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         pageModelReadyToken,
         selectedComment,
         setSelectedComment,
+        selectedSuggestedEdit,
+        setSelectedSuggestedEdit,
         comments,
+        commentsLoaded,
         availableCommentTags,
         loadComments,
         setComments,
@@ -4392,27 +4813,60 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setShowComments,
         showResolvedComments,
         setShowResolvedComments,
-        addComment: async () => {
+        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;
+            }
             // Snapshot selection context up-front so switching views doesn't change what we comment on.
+            const hintedFieldSnapshot = options?.field;
             const focusedFieldSnapshot = focusedFieldRef.current;
-            const selectionSnapshot = [...selection];
-            const selectedRangeSnapshot = selectedRange;
-            const itemId = focusedFieldSnapshot?.item.id ||
-                (selectionSnapshot.length > 0 ? selectionSnapshot[0] : undefined) ||
+            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 feedback sidebar is open when adding a comment (e.g. command palette / toolbar button).
-            openSidebar("feedback");
-            const language = descriptor.language;
-            const version = descriptor.version;
+            // 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 (!focusedFieldSnapshot)
+                if (!commentFieldSnapshot)
                     return "";
-                const field = await itemsRepository.getField(focusedFieldSnapshot);
+                const field = await itemsRepository.getField(commentFieldSnapshot);
                 return field?.name;
             };
             const getItemName = async () => {
@@ -4428,24 +4882,40 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 isNew: true,
                 itemId,
                 itemName: await getItemName(),
-                fieldId: focusedFieldSnapshot?.fieldId,
+                fieldId: commentFieldSnapshot?.fieldId,
                 fieldName: await getFieldName(),
                 mainItemId: descriptor.id,
                 language,
                 version,
                 position: 0,
-                rangeStart: selectedRangeSnapshot?.startOffset || 0,
-                rangeEnd: selectedRangeSnapshot?.endOffset || 0,
+                rangeStart: isUsableTextSelectionRange(selectedRangeSnapshot)
+                    ? selectedRangeSnapshot.startOffset
+                    : 0,
+                rangeEnd: isUsableTextSelectionRange(selectedRangeSnapshot)
+                    ? selectedRangeSnapshot.endOffset
+                    : 0,
                 author: user?.name,
                 authorDisplayName: user?.fullName,
-                date: new Date().toISOString(),
+                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);
-            setShowComments(true);
+            setSelectedSuggestedEdit(undefined);
+            lastTextSelectionRangeRef.current = undefined;
         },
         mode,
+        changeMode,
         setMode,
+        registerModeChangeParticipant,
+        modeTransitionRevision,
         previewDate,
         setPreviewDate,
         layoutMode,
@@ -4470,6 +4940,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setComponentNavigatorOpenForSlot,
         showAgentsPanel,
         setShowAgentsPanel: handleSetShowAgentsPanel,
+        waitForSurfaceSettled: settleRegistry.waitForSurfaceSettled,
+        notifySurfaceSettled: settleRegistry.notifySettled,
         isEditorFormHiddenForSlot,
         setEditorFormHiddenForSlot,
         editorFormHintSeen,
@@ -4513,6 +4985,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         setCurrentWizardId,
         favorites,
         loadFavorites,
+        refreshFavorites,
         isQuickSwitcherVisible: quickSwitcherVisible,
         // Context factory registry methods
         registerContextFactory: (name, factory) => {
@@ -4557,6 +5030,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         dragObject,
         clipboard,
         workboxItems,
+        isWorkboxLoading,
+        refreshWorkbox,
         requestRefresh,
         refreshCompletedFlag,
         searchParams,
@@ -4591,6 +5066,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         componentDesignerRendering,
         insertMode,
         currentOverlay,
+        contextMenuSource,
         lockedField,
         timings,
         selectedRange,
@@ -4603,12 +5079,15 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         addSocketMessageListener,
         sendSocketMessage,
         socketConnectionVersion,
+        removingComponentIds,
         currentItemDescriptor,
         revision,
         notifyPageModelReady,
         pageModelReadyToken,
         selectedComment,
+        selectedSuggestedEdit,
         comments,
+        commentsLoaded,
         availableCommentTags,
         loadComments,
         showComments,
@@ -4620,15 +5099,22 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         isRefreshing,
         favorites,
         loadFavorites,
+        refreshFavorites,
         currentWizardId,
         quickSwitcherVisible,
         quickSwitcherSelectedIndex,
         handleQuickSwitcherSelect,
         webSocketMessages,
         socketDiagnostics,
+        remoteCarets,
         factoriesRef,
         user,
         statusMessage,
+        activateCommentsModeForWriting,
+        changeMode,
+        setMode,
+        registerModeChangeParticipant,
+        modeTransitionRevision,
         previewDate,
         layoutMode,
         enableCompletions,
@@ -4644,7 +5130,11 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         handleSetShowComponentNavigator,
         showAgentsPanel,
         handleSetShowAgentsPanel,
+        settleRegistry,
         activeSlotId,
+        editorSlots,
+        slotContexts,
+        getFieldModificationStoreForSlot,
         isEditorFormHiddenForSlot,
         setEditorFormHiddenForSlot,
         editorFormHintSeen,
@@ -4681,9 +5171,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const fieldsEditContext = {
         modifiedFields,
         recentEdits,
-        clearModifiedFields: () => {
-            fieldModificationStore.clear();
-        },
         clearRecentEdits: () => {
             setRecentEdits([]);
         },
@@ -4694,8 +5181,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             setLockedField(undefined); // Clear client-side lock state
             await releaseFieldLocks(sessionId);
         },
-        inlineEditingFieldElement,
-        setInlineEditingFieldElement,
     };
     // Debug: Track editContext changes
     // const prevDependencies = useRef<any[]>([]);
@@ -4734,7 +5219,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     //     componentDesignerRendering,
     //     insertMode,
     //     currentOverlay,
-    //     inlineEditingFieldElement,
     //     lockedField,
     //     selectedRange,
     //     pageViewContext,
@@ -4822,7 +5306,6 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     //     'componentDesignerRendering',
     //     'insertMode',
     //     'currentOverlay',
-    //     'inlineEditingFieldElement',
     //     'lockedField',
     //     'selectedRange',
     //     'pageViewContext',
@@ -4911,7 +5394,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     // Auto-open the mobile editor panel for new selection/intent changes, but
     // keep a manual close sticky for the exact same context.
     useEffect(() => {
-        if (!isMobile || workspaceId !== "editor")
+        if (!isMobile || workspaceId !== "editor" || mode !== "edit")
             return;
         if (activeEditorTab) {
             handleSetMobileEditorPanelOpen(true);
@@ -4929,19 +5412,17 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         insertMode,
         isMobile,
         mobilePanelDismissToken,
+        mode,
         selection,
         workspaceId,
     ]);
-    useEffect(() => {
-        fieldsEditContext.clearModifiedFields();
-    }, [currentItemDescriptor]);
     if (!currentWorkspace)
         return null;
-    const editorUi = fullscreen ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fixed inset-0 flex", children: [_jsx(PageViewerFrame, { compareView: compareMode, pageViewContext: activePageViewContext }), _jsx(FullscreenControls, { device: activePageViewContext.device, setDevice: (d) => activePageViewContext.setDevice(d), canExit: !configuration.forceFullscreen, onExit: () => setFullscreen(false), firstMobileDeviceName: configuration.devices[0]?.name })] }), showFullscreenHint && !configuration.forceFullscreen && !isMobile && (_jsx("div", { className: "fixed inset-0 z-10000", onMouseMoveCapture: () => {
+    const editorUi = fullscreen ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 flex", children: _jsx(PageViewerFrame, { compareView: compareMode, pageViewContext: activePageViewContext }) }), showFullscreenHint && !configuration.forceFullscreen && !isMobile && (_jsx("div", { className: "fixed inset-0 z-10000", onMouseMoveCapture: () => {
                     setTimeout(() => {
                         setShowFullscreenHint(false);
                     }, 600);
-                }, "data-testid": "fullscreen-hint-overlay", children: _jsxs("div", { className: "fixed top-6 left-1/2 -translate-x-1/2 transform rounded-full bg-black/60 px-6 py-2.5 text-sm font-medium text-white shadow-2xl backdrop-blur-md transition-all duration-500", children: ["Press", " ", _jsx("kbd", { className: "mx-1 rounded bg-white/20 px-1.5 py-0.5 text-xs font-semibold", children: "Ctrl + F11" }), " ", "to exit fullscreen"] }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EditorChrome, { className: className, currentWorkspace: currentWorkspace, centerPanelView: centerPanelView, editContext: editContext, showAgentsPanel: showAgentsPanel, handleSetShowAgentsPanel: handleSetShowAgentsPanel, workspaceId: workspaceId }), isTourActive && (_jsx(Tour, { tourStopCallback: () => {
+                }, "data-testid": "fullscreen-hint-overlay", children: _jsxs("div", { className: "bg-neutral-grey-100/60 fixed top-6 left-1/2 -translate-x-1/2 transform rounded-full px-6 py-2.5 text-sm font-medium text-white shadow-2xl backdrop-blur-md transition-all duration-500", children: ["Press", " ", _jsx("kbd", { className: "badge-pad-sm mx-1 rounded bg-white/20 text-xs font-medium", children: "Ctrl + F11" }), " ", "to exit fullscreen"] }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EditorChrome, { className: className, currentWorkspace: currentWorkspace, centerPanelView: centerPanelView, editContext: editContext, showAgentsPanel: showAgentsPanel, handleSetShowAgentsPanel: handleSetShowAgentsPanel, workspaceId: workspaceId }), isTourActive && configuration.activeTour && (_jsx(Tour, { tourStopCallback: () => {
                     setIsTourActive(false);
                     // Remove tour state from URL
                     // Use history.replaceState instead of router.replace to avoid triggering React navigation
@@ -4953,12 +5434,14 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                         : window.location.pathname;
                     window.history.replaceState(getCurrentHistoryState(), "", newUrl);
                 }, configuration: configuration, restoredFromUrl: tourRestoredRef.current })), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(GuidanceOverlay, {}) }), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(AgentDialogHandler, {}) })] }));
-    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(SplashScreenAgentProvider, { children: [_jsx(DevModeIndicator, {}), startupChecks.state === "loading" && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-white/70 backdrop-blur-[1px]", children: _jsx("div", { className: "flex items-center gap-3 rounded-md border border-gray-200 bg-white px-4 py-3 text-gray-700 shadow-sm", children: _jsx(Spinner, { size: "xl" }) }) })), editContext.isRefreshing && (_jsx("div", { className: "pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center text-gray-600 opacity-50 select-none", children: _jsx(Spinner, {}) })), (currentWorkspace.id === "agents" ||
-                                    currentWorkspace.id === "taskboard") &&
+    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(SplashScreenAgentProvider, { 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" ||
+                                    currentWorkspace.id === "translation-management") &&
                                     showAgentsWorkspaceEditor && (_jsx(AgentsSlotContextBridgeHost, { slots: editorSlots })), startupChecks.state !== "loading" && (children || editorUi), startupChecks.state !== "loading" && dialog, _jsx(Toaster, { position: "top-center" }), " ", _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(ConcurrentUserLimitDialog, { open: concurrentUserLimitError !== null, onOpenChange: (open) => {
                                         if (!open) {
                                             setConcurrentUserLimitError(null);
                                         }
-                                    }, sessionId: sessionId, currentUsers: concurrentUserLimitError?.currentUsers ?? 0, maxUsers: concurrentUserLimitError?.maxUsers ?? 0, message: concurrentUserLimitError?.message ?? "", onRetry: handleRetryConnection, isAdministrator: userInfo.user.isAdministrator === true }), _jsx(QuickItemSwitcher, { visible: quickSwitcherVisible, entries: quickSwitcherEntries.slice(0, 5), selectedIndex: quickSwitcherSelectedIndex, onSelect: handleQuickSwitcherSelect, onClose: () => setQuickSwitcherVisible(false) }), _jsx(EditContextMenu, { ref: contextMenuRef }), _jsx(EditorFormHintPopover, {}), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(InlineAiTrigger, {}) }), media.mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: media.mediaSelectorVisible, onHide: media.handleHide, onMediaSelected: media.onMediaSelect, selectedIdPath: media.selectedMediaIdPath, mode: media.mediaSelectorMode, initialSearchTerm: media.initialSearchTerm })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(LicenseOverlay, {})] }) }) }) }) }) }));
+                                    }, sessionId: sessionId, currentUsers: concurrentUserLimitError?.currentUsers ?? 0, maxUsers: concurrentUserLimitError?.maxUsers ?? 0, message: concurrentUserLimitError?.message ?? "", onRetry: handleRetryConnection, isAdministrator: userInfo.user.isAdministrator === true }), _jsx(QuickItemSwitcher, { visible: quickSwitcherVisible, entries: quickSwitcherEntries.slice(0, 5), selectedIndex: quickSwitcherSelectedIndex, onSelect: handleQuickSwitcherSelect, onClose: () => setQuickSwitcherVisible(false) }), _jsx(EditContextMenu, { ref: contextMenuRef, onOpenChange: handleContextMenuOpenChange }), _jsx(EditorFormHintPopover, {}), _jsx(FeatureGate, { feature: LicenseFeatures.AI, children: _jsx(InlineAiTrigger, {}) }), media.mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: media.mediaSelectorVisible, onHide: media.handleHide, onMediaSelected: media.onMediaSelect, selectedIdPath: media.selectedMediaIdPath, mode: media.mediaSelectorMode, initialSearchTerm: media.initialSearchTerm })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(LicenseOverlay, {}), _jsx(SessionExpiredOverlay, {})] }) }) }) }) }) }));
 }
 //# sourceMappingURL=EditorShell.js.map