@parhelia/core 0.1.12895 → 0.1.12901

package/dist/editor/client/EditorShell.js

@@ -9,6 +9,7 @@ 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";
@@ -31,6 +32,7 @@ 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";
@@ -42,6 +44,7 @@ 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";
@@ -56,7 +59,6 @@ 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";
@@ -158,6 +160,7 @@ 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);
@@ -384,6 +387,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);
@@ -538,6 +545,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)
@@ -623,16 +631,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             if (nextMode === "suggestions") {
                 setShowSuggestedEdits(true);
                 setWorkspaceId("editor");
-                setOpenSidebars((prev) => {
-                    if (prev.includes("feedback"))
-                        return prev;
-                    const next = [...prev, "feedback"];
-                    openSidebarsRef.current = next;
-                    return next;
-                });
-            }
-            else {
-                setShowSuggestedEdits(false);
+                setShowComments(true);
             }
         });
         if (nextMode === "suggestions") {
@@ -643,6 +642,22 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         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")
@@ -687,6 +702,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]);
@@ -1282,6 +1301,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 });
@@ -1352,6 +1379,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;
@@ -1494,9 +1524,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");
@@ -2872,6 +2904,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
     const handleContextMenuOpenChange = useCallback((open) => {
         if (open)
             return;
+        setContextMenuSource(undefined);
         setCurrentOverlay((overlay) => overlay === "context-menu" ? undefined : overlay);
     }, []);
     useEffect(() => {
@@ -3195,6 +3228,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     return;
             }
             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);
             }
@@ -3275,7 +3315,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;
@@ -3289,6 +3331,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             if (sidebarId === "agents-panel") {
                 setUserPreferences({ showAgentsPanel: false });
             }
+            if (sidebarId === "feedback") {
+                closeFeedbackSuggestionsMode();
+            }
             startTransition(() => {
                 updateUrl({ sidebar: sidebarUrlValue(newSidebars) });
             });
@@ -3297,10 +3342,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);
@@ -3322,6 +3369,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) => {
@@ -3333,10 +3381,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;
@@ -3816,7 +3864,20 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
         }
         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);
@@ -4195,6 +4256,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 (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 ||
@@ -4341,7 +4420,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         dragEnd: () => {
             setDragObject(undefined);
         },
-        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption, spotPosition) => {
+        droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption, spotPosition, color) => {
             const droppedDragObject = dragObject;
             if ((!droppedDragObject && !insertOption) || !page)
                 return;
@@ -4362,6 +4441,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                     position: spotPosition,
                     positionElement: spotPositionElement,
                     positionAnchor: spotPositionAnchor,
+                    color,
                 });
             }
             let operationPromise;
@@ -4574,8 +4654,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) => {
@@ -4664,6 +4745,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         insertMode,
         setInsertMode,
         currentOverlay,
+        contextMenuSource,
         setCurrentOverlay,
         lockedField,
         timings,
@@ -4709,7 +4791,10 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         pageModelReadyToken,
         selectedComment,
         setSelectedComment,
+        selectedSuggestedEdit,
+        setSelectedSuggestedEdit,
         comments,
+        commentsLoaded,
         availableCommentTags,
         loadComments,
         setComments,
@@ -4721,6 +4806,16 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             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;
@@ -4751,8 +4846,8 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
                 descriptor.id;
             if (!itemId)
                 return;
-            // Ensure the feedback sidebar is open when adding a comment (e.g. command palette / toolbar button).
-            openSidebar("feedback");
+            // 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
@@ -4802,7 +4897,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
             }
             setComments([newComment, ...comments]);
             setSelectedComment(newComment);
-            setShowComments(true);
+            setSelectedSuggestedEdit(undefined);
             lastTextSelectionRangeRef.current = undefined;
         },
         mode,
@@ -4960,6 +5055,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         componentDesignerRendering,
         insertMode,
         currentOverlay,
+        contextMenuSource,
         lockedField,
         timings,
         selectedRange,
@@ -4977,7 +5073,9 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         notifyPageModelReady,
         pageModelReadyToken,
         selectedComment,
+        selectedSuggestedEdit,
         comments,
+        commentsLoaded,
         availableCommentTags,
         loadComments,
         showComments,
@@ -5000,6 +5098,7 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         factoriesRef,
         user,
         statusMessage,
+        activateCommentsModeForWriting,
         changeMode,
         setMode,
         registerModeChangeParticipant,
@@ -5283,7 +5382,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);
@@ -5301,12 +5400,13 @@ export function EditorShell({ configuration, className, item: loadItemDescriptor
         insertMode,
         isMobile,
         mobilePanelDismissToken,
+        mode,
         selection,
         workspaceId,
     ]);
     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);