@alpaca-editor/core 1.0.4073 → 1.0.4075

package/src/editor/client/{EditorClient.tsx → EditorShell.tsx}

@@ -40,6 +40,8 @@ import {
   releaseFieldLocks,
   validateItems,
 } from "../services/editService";
+import { useEditorWebSocket } from "./hooks/useEditorWebSocket";
+import { useSocketMessageHandler } from "./hooks/useSocketMessageHandler";
 
 import "primeicons/primeicons.css";
 import "primereact/resources/themes/md-light-indigo/theme.css";
@@ -127,9 +129,15 @@ import { flushSync } from "react-dom";
 import { getSuggestedEdits } from "../services/suggestedEditsService";
 import { usePageWizard } from "../../page-wizard/usePageWizard";
 import { requestQuota } from "../services/aiService";
+import { useQuota } from "./hooks/useQuota";
+import { useEditorUrlSync } from "./hooks/useEditorUrlSync";
 
-import { Shrink, Monitor, Smartphone } from "lucide-react";
-import { Agents } from "../ai/Agents";
+import { useMediaQuery } from "./hooks/useMediaQuery";
+import { useGlobalEditorEvents } from "./hooks/useGlobalEditorEvents";
+import { FullscreenControls } from "./ui/FullscreenControls";
+import { EditorChrome } from "./ui/EditorChrome";
+import { useWorkbox } from "./hooks/useWorkbox";
+import { useMediaSelector } from "./hooks/useMediaSelector";
 
 export type FieldAction = {
   field: FieldDescriptor;
@@ -143,21 +151,7 @@ export type InsertingState = {
   positionElement: Element;
   positionAnchor: "left" | "right" | "top" | "bottom";
 };
-export type QuotaUsage = {
-  totalTokens: number;
-  totalImages: number;
-  dailyTokens: number;
-  dailyImages: number;
-};
-export type QuotaLimits = {
-  totalTokens: number;
-  dailyTokens: number;
-  monthlyTokens: number;
-  totalImages: number;
-  dailyImages: number;
-  monthlyImages: number;
-};
-export type QuotaInfo = { usage: QuotaUsage; limits: QuotaLimits };
+// moved to hooks/useQuota
 
 export type WebSocketMessage = {
   id: string;
@@ -167,7 +161,7 @@ export type WebSocketMessage = {
   rawMessage: string;
 };
 
-export function EditorClient({
+export function EditorShell({
   configuration,
   className,
   item: loadItemDescriptor,
@@ -199,12 +193,7 @@ export function EditorClient({
 
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [dragObject, setDragObject] = useState<DragObject>();
-  const [mediaResolver, setMediaResolver] = useState<(value: string) => void>();
-  const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
-  const [mediaSelectorMode, setMediaSelectorMode] = useState<
-    "images" | "video"
-  >("images");
-  const [selectedMediaIdPath, setSelectedMediaIdPath] = useState<string>("");
+  // media selection handled by useMediaSelector hook
   const [scrollIntoView, setScrollIntoView] = useState<string>();
 
   const confirmationDialogRef = useRef<ConfirmationDialogHandle>(null);
@@ -215,6 +204,7 @@ export function EditorClient({
   const [contentEditorItem, setContentEditorItem] = useState<FullItem>();
 
   const [focusedField, setFocusedField] = useState<FieldDescriptor>();
+  const focusedFieldRef = useRef<FieldDescriptor | undefined>(undefined);
   const [selectedRange, setSelectedRange] = useState<SelectionRange>();
 
   const [validating, setValidating] = useState(false);
@@ -374,7 +364,7 @@ export function EditorClient({
 
   const [revision, setRevision] = useState<string>();
 
-  const [workboxItems, setWorkboxItems] = useState<WorkboxItem[]>([]);
+  // moved into useWorkbox
   const [isTourActive, setIsTourActive] = useState(false);
 
   const [mode, setMode] = useState<EditorMode>("edit");
@@ -393,7 +383,10 @@ export function EditorClient({
   const [showLayoutComponents, setShowLayoutComponents] = useState(
     userPreferences.showLayoutComponents ?? false,
   );
-  const [quotaInfo, setQuotaInfo] = useState<QuotaInfo | null>(null);
+  const { quotaInfo, setQuotaInfo, isQuotaExceeded, getQuotaWarningMessage } =
+    useQuota({
+      showError: ({ summary, details }) => showErrorToast({ summary, details }),
+    });
   const pageWizard = usePageWizard();
 
   const [webSocketMessages, setWebSocketMessages] = useState<
@@ -434,6 +427,10 @@ export function EditorClient({
     }
   }, [selection]);
 
+  useEffect(() => {
+    focusedFieldRef.current = focusedField;
+  }, [focusedField]);
+
   const itemsRepository = useItemsRepository(setModifiedFields, addRecentEdit);
 
   const pageViewContext = usePageViewContext({
@@ -443,7 +440,6 @@ export function EditorClient({
   });
 
   const socketMessageListeners = useRef<Set<(data: any) => void>>(new Set());
-  const socketInstanceRef = useRef<WebSocket | null>(null);
 
   const addSocketMessageListener = useCallback(
     (callback: (message: { type: string; payload: any }) => void) => {
@@ -469,6 +465,13 @@ export function EditorClient({
     setSelectedForInsertion("");
   }, [selection]);
 
+  // Clear any selected insertion template when insert mode is disabled
+  useEffect(() => {
+    if (!insertMode) {
+      setSelectedForInsertion("");
+    }
+  }, [insertMode]);
+
   useEffect(() => {
     if (focusedField?.fieldId !== selectedRange?.fieldId) {
       setSelectedRange(undefined);
@@ -543,298 +546,7 @@ export function EditorClient({
     [showLayoutComponents, setShowLayoutComponents, setUserPreferences],
   );
 
-  const messageHandler = useCallback(
-    async (event: any) => {
-      if (!event.data.startsWith("{")) return;
-      const message = JSON.parse(event.data);
-
-      // Track all WebSocket messages for debugging/monitoring
-      try {
-        const webSocketMessage: WebSocketMessage = {
-          id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
-          timestamp: new Date().toISOString(),
-          type: message.type || "unknown",
-          payload: message.payload,
-          rawMessage: JSON.stringify(message, null, 2),
-        };
-
-        setWebSocketMessages((prev) => {
-          const updated = [webSocketMessage, ...prev];
-          // Keep only the latest 1000 messages
-          return updated.slice(0, 1000);
-        });
-      } catch (error) {
-        console.error("Error tracking WebSocket message:", error);
-      }
-
-      if (message.type === "active-sessions") {
-        setActiveSessions((prev) => {
-          // Ensure payload is an array and contains valid session objects
-          if (!Array.isArray(message.payload)) {
-            console.warn(
-              "❌ Active sessions payload is not an array:",
-              message.payload,
-            );
-            (globalThis as any).__alpacaActiveSessions = prev;
-            return prev; // keep previous instead of clearing to avoid losing user during HMR blips
-          }
-
-          // Filter out any invalid session objects
-          const validSessions = message.payload.filter(
-            (session: any) =>
-              session &&
-              typeof session === "object" &&
-              session.sessionId &&
-              session.user,
-          );
-
-          if (validSessions.length !== message.payload.length) {
-            console.warn(
-              "❌ Some sessions were filtered out due to invalid data:",
-              {
-                original: message.payload.length,
-                valid: validSessions.length,
-              },
-            );
-          }
-
-          // If server reports empty list, keep previous to avoid transient blanking during HMR
-          if (validSessions.length === 0 && prev.length > 0) {
-            console.warn(
-              "⚠️ Received empty active sessions; preserving previous list to avoid losing state",
-            );
-            (globalThis as any).__alpacaActiveSessions = prev;
-            return prev;
-          }
-
-          (globalThis as any).__alpacaActiveSessions = validSessions;
-          return validSessions;
-        });
-
-        // Detect if the current session is missing from the list and self-heal
-        try {
-          const payload = Array.isArray(message.payload)
-            ? (message.payload as any[])
-            : [];
-          const hasMySession = payload.some(
-            (s) => s && s.sessionId === sessionId,
-          );
-          if (!hasMySession) {
-            console.warn(
-              "⚠️ Current session missing from active sessions. Re-sending client-info to recover...",
-            );
-            setTimeout(() => {
-              sendClientInfo();
-            }, 300);
-          }
-        } catch (e) {
-          console.warn(
-            "Failed to verify active sessions for current session!",
-            e,
-          );
-        }
-      }
-
-      if (message.type === "item-deleted") {
-        itemsRepository.onItemsDeleted([
-          { item: message.payload.item, parentId: message.payload.parentId },
-        ]);
-        if (message.payload.item.id === currentItemDescriptor?.id) {
-          console.log("Load", message.payload.parentId);
-          loadItem({
-            id: message.payload.parentId,
-            language: currentItemDescriptor?.language ?? "en",
-            version: 0,
-          });
-        }
-      }
-
-      if (message.type === "item-changed") {
-        await itemsRepository.refreshItems([message.payload.item]);
-        if (message.payload.item.id === currentItemDescriptor?.id)
-          loadItemVersions();
-      }
-
-      if (message.type === "item-version-added") {
-        if (currentItemDescriptorRef.current) {
-          if (currentItemDescriptorRef.current.id === message.payload.item.id)
-            await loadItemVersions();
-        }
-      }
-
-      if (message.type === "comment-updated") {
-        setComments((x) => {
-          const newComments = [...x];
-          const index = newComments.findIndex(
-            (c) => c.id === message.payload.comment.id,
-          );
-          if (index !== -1) newComments[index] = message.payload.comment;
-          else newComments.push(message.payload.comment);
-          return newComments;
-        });
-      }
-
-      if (message.type === "comment-deleted") {
-        setComments((x) => {
-          return x.filter((c) => c.id !== message.payload.commentId);
-        });
-      }
-
-      if (message.type === "suggested-edit-updated") {
-        setSuggestedEdits((x) => {
-          const index = x.findIndex(
-            (s) => s.id === message.payload.suggestedEdit.id,
-          );
-          if (index !== -1) x[index] = message.payload.suggestedEdit;
-          else x.push(message.payload.suggestedEdit);
-          return x;
-        });
-      }
-
-      if (message.type === "suggested-edit-deleted") {
-        setSuggestedEdits((x) => {
-          return x.filter((s) => s.id !== message.payload.id);
-        });
-      }
-
-      if (message.type === "executing-field-action") {
-        setActiveFieldActions((x) => {
-          const payload = message.payload;
-          const fieldId = payload.fieldId;
-          const item = payload.item;
-          const status = payload.status;
-          const msg = payload.message;
-          const label = payload.label;
-
-          // Map backend status to FieldAction state
-          let state: "running" | "success" | "error";
-          switch (status?.toLowerCase()) {
-            case "completed":
-            case "success":
-              state = "success";
-              break;
-            case "failed":
-            case "error":
-              state = "error";
-              break;
-            default:
-              state = "running";
-              break;
-          }
-
-          // Check if action already exists
-          const existingActionIndex = x.findIndex(
-            (action) =>
-              action.field.fieldId === fieldId &&
-              action.field.item.id === item.id &&
-              action.field.item.language === item.language &&
-              action.field.item.version === item.version,
-          );
-
-          if (existingActionIndex !== -1) {
-            // Update existing action
-            const newActions = [...x];
-            newActions[existingActionIndex]!.state = state;
-            newActions[existingActionIndex]!.message = msg;
-            return newActions;
-          } else {
-            // Insert new action
-            const fieldDescriptor: FieldDescriptor = {
-              fieldId: fieldId,
-              item: item,
-            };
-
-            const newAction: FieldAction = {
-              field: fieldDescriptor,
-              state,
-              message: msg,
-              label: label,
-            };
-            // console.log(newAction);
-            return [...x, newAction];
-          }
-        });
-      }
-
-      if (message.type === "update-quota") {
-        setQuotaInfo(message.payload);
-      }
-
-      if (message.type === "agent-started") {
-        // Agent started message will be handled by individual components that subscribe
-        // The payload should contain { agentId: string, agentName: string }
-      }
-
-      if (message.type === "load-item") {
-        const itemDescriptor = message.payload as ItemDescriptor;
-        if (itemDescriptor) {
-          loadItem(itemDescriptor, { skipViewChange: true });
-        }
-      }
-
-      if (message.type === "edit-operation") {
-        const op = message.payload as EditOperation;
-
-        if (op.type === "edit-field") {
-          const editFieldOperation = op as EditFieldOperation;
-
-          const field = await itemsRepository.getField({
-            item: {
-              ...editFieldOperation.mainItem,
-              id: editFieldOperation.itemId,
-            },
-            fieldId: editFieldOperation.fieldId,
-          });
-
-          if (
-            !field ||
-            (field.type !== "single-line text" &&
-              field.type !== "multi-line text" &&
-              field.type !== "rich text")
-          ) {
-            itemsRepository.refreshItems([
-              {
-                ...editFieldOperation.mainItem,
-                id: editFieldOperation.itemId,
-              },
-            ]);
-            requestRefresh("immediate");
-          }
-          //TODO: field value changes that require rerender
-          else
-            itemsRepository.updateFieldValue(
-              {
-                fieldId: editFieldOperation.fieldId,
-                item: {
-                  ...editFieldOperation.mainItem,
-                  id: editFieldOperation.itemId,
-                },
-              },
-              editFieldOperation.user ?? { name: "unknown", ai: false },
-              false,
-              editFieldOperation.undone
-                ? editFieldOperation.oldValue
-                : editFieldOperation.value,
-            );
-        } else {
-          requestRefresh("immediate");
-        }
-
-        if (
-          op.mainItem &&
-          op.mainItem.id === currentItemRef.current?.descriptor.id &&
-          op.mainItem.language ===
-            currentItemRef.current?.descriptor.language &&
-          op.mainItem.version === currentItemRef.current?.descriptor.version
-        ) {
-          loadHistory(op.mainItem);
-        }
-      }
-
-      socketMessageListeners.current.forEach((listener) => listener(message));
-    },
-    [currentItemDescriptorRef, addRecentEdit],
-  );
+  // messageHandler is defined after loadItem/loadHistory declarations to avoid temporal dead zones
 
   const user = useMemo(
     () =>
@@ -877,10 +589,10 @@ export function EditorClient({
       } else {
         // Force a reconnect to refresh presence after several failed nudges
         try {
-          socketInstanceRef.current?.close(4000, "recover-presence");
-        } catch {
-          // Ignore errors while attempting to recover presence
-        }
+          (
+            (globalThis as any).editorSocket as WebSocket | null | undefined
+          )?.close(4000, "recover-presence");
+        } catch {}
       }
     }, delay);
 
@@ -1003,31 +715,8 @@ export function EditorClient({
     };
   }, []);
 
-  // Custom hook for responsive design
-  const useMediaQuery = (query: string) => {
-    const [matches, setMatches] = useState(false);
-
-    useEffect(() => {
-      const media = window.matchMedia(query);
-      const updateMatch = () => setMatches(media.matches);
-
-      // Set initial value
-      updateMatch();
-
-      // Listen for changes
-      media.addEventListener("change", updateMatch);
-
-      // Cleanup
-      return () => {
-        media.removeEventListener("change", updateMatch);
-      };
-    }, [query]);
-
-    return matches;
-  };
-
-  // Detect mobile screens (max-width: 768px)
   const isMobile = useMediaQuery("(max-width: 768px)");
+  const media = useMediaSelector();
 
   useEffect(() => {
     // Suppress auto-start tour when `noTour` query parameter is present
@@ -1045,147 +734,9 @@ export function EditorClient({
     }
   }, [user]);
 
-  useEffect(() => {
-    let reconnectTimeout: NodeJS.Timeout | null = null;
-    let reconnectAttempts = 0;
-
-    const connectWebSocket = () => {
-      let socket: WebSocket | undefined = (globalThis as any).editorSocket;
-
-      const needsNewSocket =
-        !socket ||
-        socket.readyState === WebSocket.CLOSING ||
-        socket.readyState === WebSocket.CLOSED;
-
-      if (needsNewSocket) {
-        socket = connectSocket(sessionId);
-
-        // Connection opened
-        socket.addEventListener("open", () => {
-          console.log("Connected!");
-          reconnectAttempts = 0; // Reset attempts on successful connection
-          sendClientInfo();
-          requestQuota();
-          //TODO: Load clients
-        });
-
-        // Handle connection close
-        socket.addEventListener("close", (event) => {
-          // WebSocket connection closed
-
-          // Only attempt to reconnect if it wasn't a clean close
-          if (event.code !== 1000) {
-            // Start with 1 second, increase exponentially up to 30 seconds
-            const delay = Math.min(
-              1000 * Math.pow(2, Math.min(reconnectAttempts, 5)),
-              30000,
-            );
-            // Attempting to reconnect with backoff
-
-            reconnectTimeout = setTimeout(() => {
-              reconnectAttempts++;
-              connectWebSocket();
-            }, delay);
-          }
-        });
+  // WebSocket initialization is performed after messageHandler is defined
 
-        // Handle connection errors
-        socket.addEventListener("error", (error) => {
-          console.error("WebSocket error:", error);
-        });
-
-        (globalThis as any).editorSocket = socket;
-      }
-
-      // Always ensure this instance is listening to messages
-      if (socket) {
-        socket.addEventListener("message", messageHandler);
-        socketInstanceRef.current = socket;
-
-        // If we attached to an already-open socket, resend client info to refresh presence
-        if (socket.readyState === WebSocket.OPEN) {
-          sendClientInfo();
-          requestQuota();
-        }
-      }
-    };
-
-    connectWebSocket();
-
-    // Cleanup function
-    return () => {
-      if (reconnectTimeout) {
-        clearTimeout(reconnectTimeout);
-      }
-      if (socketInstanceRef.current) {
-        socketInstanceRef.current.removeEventListener(
-          "message",
-          messageHandler,
-        );
-        socketInstanceRef.current = null;
-      }
-    };
-  }, []);
-
-  // Handle initial state setup from URL (only on initial load)
-  useEffect(() => {
-    if (!isInitialLoad) return;
-
-    const itemid = searchParams.get("itemid");
-    const wizardId = searchParams.get("wizardid");
-    const urlView = searchParams.get("view");
-
-    // Handle wizard ID from URL first (before view)
-    if (wizardId) {
-      setCurrentWizardId(wizardId);
-    }
-
-    if (urlView) {
-      setViewName(urlView);
-    } else if (!itemid) {
-      setViewName("splash-screen");
-    }
-  }, [searchParams, isInitialLoad]);
-
-  // Handle initial compare mode from URL (only on initial load)
-  useEffect(() => {
-    if (!isInitialLoad) return;
-
-    if (searchParams.has("compare")) {
-      const compareValue = searchParams.get("compare") === "true";
-      setCompareMode(compareValue);
-    }
-  }, [searchParams, pathname, isInitialLoad]);
-
-  // Handle initial item loading from URL and loadItemDescriptor
-  useEffect(() => {
-    // Use URL params only on initial load, otherwise respect loadItemDescriptor prop
-    const itemid = isInitialLoad ? searchParams.get("itemid") : null;
-    const itemId = cleanId(loadItemDescriptor?.id ?? itemid ?? undefined);
-    const language =
-      loadItemDescriptor?.language ??
-      (isInitialLoad
-        ? (searchParams.get("lang") ?? searchParams.get("language"))
-        : null);
-    const version =
-      loadItemDescriptor?.version ??
-      (isInitialLoad && searchParams.has("version")
-        ? parseInt(searchParams.get("version")!)
-        : 0);
-
-    if (!itemId || !language) return;
-
-    // Skip loading if the item is already loaded with the same parameters
-    if (
-      currentItemDescriptor?.id === itemId &&
-      currentItemDescriptor?.language === language &&
-      (!version || currentItemDescriptor?.version === version)
-    ) {
-      return;
-    }
-
-    loadItem({ id: itemId, language, version });
-  }, [loadItemDescriptor, searchParams, currentItemDescriptor, isInitialLoad]);
+  // Defer URL sync until loadItem is defined below
 
   // Mark end of initial load phase
   useEffect(() => {
@@ -1312,32 +863,7 @@ export function EditorClient({
     if (!isLoading) setInserting(undefined);
   }, [page, viewName, revision]);
 
-  useEffect(() => {
-    // Handle fullscreen on initial load only
-    if (
-      isInitialLoad &&
-      (searchParams.get("fullscreen") || configuration.forceFullscreen)
-    ) {
-      pageViewContext.setFullscreen(true);
-    }
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data.action === "refresh") {
-        requestRefresh("immediate");
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, [
-    isInitialLoad,
-    searchParams,
-    pathname,
-    pageViewContext,
-    configuration.forceFullscreen,
-  ]);
+  // moved below to ensure requestRefresh is declared first
 
   const loadHistory = useDebouncedCallback(async (item: ItemDescriptor) => {
     const result = await getEditHistory(item);
@@ -1351,6 +877,8 @@ export function EditorClient({
     setEditHistory(result.data || []);
   }, []);
 
+  // defined below after loadItem/loadItemVersions/requestRefresh
+
   const requestRefresh = useCallback(
     (mode?: "immediate" | "delayed" | "waitForQuietPeriod") => {
       const refreshTimer = (globalThis as any).editorRefreshTimer;
@@ -1593,6 +1121,22 @@ export function EditorClient({
     ],
   );
 
+  useEditorUrlSync({
+    isInitialLoad,
+    setIsInitialLoad,
+    searchParams,
+    pathname,
+    setCurrentWizardId,
+    setViewName,
+    setCompareMode,
+    loadItem,
+    currentItemDescriptor,
+    loadItemDescriptor,
+    routerPush: (url: string) => router.push(url, { scroll: false }),
+  });
+
+  // initialized below after messageHandler
+
   useEffect(() => {
     if (
       pageViewContext.fullscreen &&
@@ -1729,107 +1273,44 @@ export function EditorClient({
     [showErrorToast, confirmationDialogRef, onOperationExecuted],
   );
 
-  const selectMedia = useCallback(
-    ({
-      selectedIdPath,
-      mode,
-    }: {
-      selectedIdPath: string;
-      mode?: MediaSelectorMode;
-    }) => {
-      setSelectedMediaIdPath(selectedIdPath);
-      setMediaSelectorVisible(true);
-      if (mode) setMediaSelectorMode(mode);
-      return new Promise<string>((resolve) => {
-        setMediaResolver(() => resolve);
-      });
-    },
-    [],
-  );
-
-  const onMediaSelect = useCallback(
-    (mediaUrl: string) => {
-      mediaResolver?.(mediaUrl);
-      setMediaSelectorVisible(false);
-      setMediaResolver(undefined);
-    },
-    [mediaResolver],
-  );
-
-  useEffect(() => {
-    if (!workboxItems || workboxItems.length === 0) return;
-    const itemsToValidate = workboxItems.map((x) => x.item);
-    validate(itemsToValidate);
-  }, [workboxItems]);
-
-  async function loadWorkbox(items: ItemDescriptor[]) {
-    if (!items.length) {
-      setWorkboxItems([]);
-      return;
-    }
-
-    const workbox = await getWorkbox(items.map((x) => getItemDescriptor(x)));
-    const workboxItems: WorkboxItem[] = workbox.data || [];
-
-    const sortedWorkboxItems = workboxItems.sort((a, b) => {
-      if (a.isPublished === b.isPublished)
-        return (
-          (b.workflowCommands?.length || 0) - (a.workflowCommands?.length || 0)
-        );
-      return !a.isPublished || !a.isPublishable ? -1 : 1;
-    });
-
-    setWorkboxItems(sortedWorkboxItems);
-  }
-
-  const loadWorkboxDebounced = useDebouncedCallback(
-    (items: ItemDescriptor[]) => loadWorkbox(items),
-    5000,
-  );
-
-  useEffect(() => {
-    const items: ItemDescriptor[] = [];
-
-    if (editContext.contentEditorItem) {
-      items.push(editContext.contentEditorItem.descriptor);
-    }
+  // moved to useMediaSelector
 
-    if (editContext.page) {
-      collectAllItems(editContext.page.rootComponent, items);
-    }
-
-    loadWorkboxDebounced(items.filter((x) => x));
-  }, [page, contentEditorItem]);
+  const { workboxItems } = useWorkbox({
+    page,
+    contentEditorItem,
+    validate,
+  });
 
-  function collectAllItems(component: Component, items: ItemDescriptor[]) {
-    component.placeholders.forEach((x) => {
-      x.components.forEach((y) => {
-        if (y.isShared && y.datasourceItem) {
-          items.push(y.datasourceItem);
-        }
+  // WebSocket message handler and connection
+  const messageHandler = useSocketMessageHandler({
+    sessionId,
+    setWebSocketMessages,
+    setActiveSessions,
+    sendClientInfo,
+    itemsRepository,
+    currentItemDescriptor,
+    loadItem,
+    loadItemVersions,
+    setComments,
+    setSuggestedEdits,
+    setActiveFieldActions,
+    setQuotaInfo,
+    requestRefresh,
+    currentItemRef,
+    loadHistory,
+    addRecentEdit,
+    socketMessageListeners,
+  });
 
-        //TODO: Add picture fields
-        // y.datasourceItem?.fields.forEach((z) => {
-        //   if (z.type === "picture") {
-        //     const picture = z.value as PictureValue;
-        //     if (picture.variants) {
-        //       picture.variants.forEach((v) => {
-        //         if (v.mediaId) {
-        //           items.push({
-        //             id: v.mediaId,
-        //             language: y.datasourceItem!.descriptor.language,
-        //             version: 0,
-        //           });
-        //         }
-        //       });
-        //     }
-        //   }
-        // });
-
-        collectAllItems(y, items);
-      });
-    });
-  }
+  const { socketRef: socketInstanceRef } = useEditorWebSocket({
+    sessionId,
+    onMessage: messageHandler,
+    onOpen: () => console.log("Connected!"),
+    onError: (error) => console.error("WebSocket error:", error),
+    connectSocket,
+    requestQuota,
+    sendClientInfo,
+  });
 
   const switchView = (
     viewName: string,
@@ -1945,18 +1426,10 @@ export function EditorClient({
     executeCommand,
   });
 
-  if (typeof window !== "undefined")
-    useEventListenerExt("keydown", handleKeyDown, window, true);
-
-  if (typeof window !== "undefined")
-    useEventListenerExt(
-      "click",
-      () => {
-        contextMenuRef.current?.close({});
-      },
-      window,
-      true,
-    );
+  useGlobalEditorEvents({
+    onKeyDown: handleKeyDown,
+    onWindowClick: () => contextMenuRef.current?.close({}),
+  });
 
   useEffect(() => {
     if (mode === "suggestions") {
@@ -1987,71 +1460,7 @@ export function EditorClient({
   );
 
   // Quota checking functions
-  const isQuotaExceeded = useCallback(() => {
-    if (!quotaInfo) return false;
-
-    const { usage, limits } = quotaInfo;
-
-    // Check absolute limits
-    if (limits.totalTokens > 0 && usage.totalTokens >= limits.totalTokens)
-      return true;
-    if (limits.totalImages > 0 && usage.totalImages >= limits.totalImages)
-      return true;
-
-    // For now, we're only checking absolute limits as daily/monthly would require server-side logic
-    // You can extend this to check daily/monthly limits if the server provides that information
-
-    return false;
-  }, [quotaInfo]);
-
-  const getQuotaWarningMessage = useCallback(() => {
-    if (!quotaInfo) return null;
-
-    const { usage, limits } = quotaInfo;
-    const warnings: string[] = [];
-
-    // Check tokens
-    if (limits.totalTokens > 0) {
-      const tokenPercentage = (usage.totalTokens / limits.totalTokens) * 100;
-      if (tokenPercentage >= 100) {
-        warnings.push(
-          `Token limit exceeded (${usage.totalTokens}/${limits.totalTokens})`,
-        );
-      } else if (tokenPercentage >= 90) {
-        warnings.push(
-          `Token usage high: ${Math.round(tokenPercentage)}% (${usage.totalTokens}/${limits.totalTokens})`,
-        );
-      }
-    }
-
-    // Check images
-    if (limits.totalImages > 0) {
-      const imagePercentage = (usage.totalImages / limits.totalImages) * 100;
-      if (imagePercentage >= 100) {
-        warnings.push(
-          `Image limit exceeded (${usage.totalImages}/${limits.totalImages})`,
-        );
-      } else if (imagePercentage >= 90) {
-        warnings.push(
-          `Image usage high: ${Math.round(imagePercentage)}% (${usage.totalImages}/${limits.totalImages})`,
-        );
-      }
-    }
-
-    return warnings.length > 0 ? warnings.join(", ") : null;
-  }, [quotaInfo]);
-
-  // Show warning when quota is exceeded
-  useEffect(() => {
-    const warningMessage = getQuotaWarningMessage();
-    if (warningMessage) {
-      const isExceeded = isQuotaExceeded();
-      showErrorToast({
-        summary: isExceeded ? "AI Quota Exceeded" : "AI Quota Warning",
-        details: warningMessage,
-      });
-    }
-  }, [quotaInfo, getQuotaWarningMessage, isQuotaExceeded, showErrorToast]);
+  // moved into hook
 
   // Calculate visible views separately to avoid circular dependency
   const visibleViews = useMemo(() => {
@@ -2126,7 +1535,7 @@ export function EditorClient({
 
         router.push(newUrl, { scroll: false });
       },
-      selectMedia,
+      selectMedia: media.selectMedia,
       showToast: (message: string) => {
         toast(message);
       },
@@ -2412,7 +1821,7 @@ export function EditorClient({
         if (!descriptor) return;
 
         const itemId =
-          focusedField?.item.id ||
+          focusedFieldRef.current?.item.id ||
           (selection.length > 0 ? selection[0] : undefined) ||
           descriptor.id;
 
@@ -2422,8 +1831,8 @@ export function EditorClient({
         const version = descriptor.version;
 
         const getFieldName = async () => {
-          if (!focusedField) return "";
-          const field = await itemsRepository.getField(focusedField);
+          if (!focusedFieldRef.current) return "";
+          const field = await itemsRepository.getField(focusedFieldRef.current);
           return field?.name;
         };
 
@@ -2441,7 +1850,7 @@ export function EditorClient({
           isNew: true,
           itemId,
           itemName: await getItemName(),
-          fieldId: focusedField?.fieldId,
+          fieldId: focusedFieldRef.current?.fieldId,
           fieldName: await getFieldName(),
           mainItemId: descriptor.id,
           language,
@@ -2450,7 +1859,7 @@ export function EditorClient({
           rangeStart: selectedRange?.startOffset || 0,
           rangeEnd: selectedRange?.endOffset || 0,
           author: user?.name,
-          authorDisplayName: user?.displayName,
+          authorDisplayName: user?.fullName,
           date: new Date().toISOString(),
         };
 
@@ -2517,7 +1926,6 @@ export function EditorClient({
     searchParams,
     pathname,
     router,
-    selectMedia,
     scrollIntoView,
     focusedField,
     renderedFields,
@@ -2864,56 +2272,13 @@ export function EditorClient({
           compareView={compareMode}
           pageViewContext={pageViewContext}
         />
-        {/* Control buttons in top right corner */}
-        <div className="fixed top-4 right-4 z-[9999] flex gap-2">
-          {/* Device toggle button */}
-          <button
-            onClick={() => {
-              const currentDevice = pageViewContext.device;
-              if (currentDevice === "desktop") {
-                // Switch to mobile (first mobile device from configuration)
-                const firstMobileDevice = configuration.devices[0];
-                if (firstMobileDevice) {
-                  pageViewContext.setDevice(firstMobileDevice.name);
-                }
-              } else {
-                // Switch to desktop
-                pageViewContext.setDevice("desktop");
-              }
-            }}
-            className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40"
-            aria-label={
-              pageViewContext.device === "desktop"
-                ? "Switch to mobile view"
-                : "Switch to desktop view"
-            }
-            title={
-              pageViewContext.device === "desktop"
-                ? "Switch to mobile view"
-                : "Switch to desktop view"
-            }
-            data-testid="fullscreen-device-toggle"
-          >
-            {pageViewContext.device === "desktop" ? (
-              <Smartphone className="h-5 w-5" />
-            ) : (
-              <Monitor className="h-5 w-5" />
-            )}
-          </button>
-
-          {/* Exit fullscreen button */}
-          {!configuration.forceFullscreen && (
-            <button
-              onClick={() => pageViewContext.setFullscreen(false)}
-              className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40"
-              aria-label="Exit fullscreen"
-              title="Return to normal view"
-              data-testid="fullscreen-exit-button"
-            >
-              <Shrink className="h-5 w-5" />
-            </button>
-          )}
-        </div>
+        <FullscreenControls
+          device={pageViewContext.device}
+          setDevice={(d) => pageViewContext.setDevice(d)}
+          canExit={!configuration.forceFullscreen}
+          onExit={() => pageViewContext.setFullscreen(false)}
+          firstMobileDeviceName={configuration.devices[0]?.name}
+        />
       </div>
       <EditorFormPopup
         ref={editorFormPopupRef}
@@ -2937,49 +2302,16 @@ export function EditorClient({
     </>
   ) : (
     <>
-      <MainLayout
+      <EditorChrome
         className={className}
-        view={currentView}
+        currentView={currentView}
         centerPanelView={centerPanelView}
-        rightSidebar={
-          currentView.rightSidebar &&
-          editContext.page &&
-          showComponentNavigator && (
-            <SidebarView
-              sidebar={currentView.rightSidebar}
-              editContext={editContext}
-              active={true}
-              detached={true}
-              onClose={() => handleSetShowComponentNavigator(false)}
-            />
-          )
-        }
-        rightSidebarTitle={currentView.rightSidebar?.title}
-        farRightSidebar={
-          showAgentsPanel &&
-          !["splash-screen", "open-page", "new-page"].includes(viewName) && (
-            <SidebarView
-              sidebar={{
-                title: "Agents",
-                panels: [
-                  {
-                    name: "agents",
-                    title: "Agents",
-                    content: <Agents />,
-                    initialSize: 70,
-                    noOverflow: true,
-                  },
-                ],
-              }}
-              editContext={editContext}
-              active={true}
-              detached={true}
-              paddingRight={true}
-              onClose={() => handleSetShowAgentsPanel(false)}
-            />
-          )
-        }
-        farRightSidebarTitle={"AGENTS"}
+        editContext={editContext}
+        showComponentNavigator={showComponentNavigator}
+        handleSetShowComponentNavigator={handleSetShowComponentNavigator}
+        showAgentsPanel={showAgentsPanel}
+        handleSetShowAgentsPanel={handleSetShowAgentsPanel}
+        viewName={viewName}
       />
 
       {isTourActive && <Tour tourStopCallback={() => setIsTourActive(false)} />}
@@ -3001,14 +2333,14 @@ export function EditorClient({
             <Toaster position="top-center" />{" "}
             <ConfirmationDialog ref={confirmationDialogRef} />
             <EditContextMenu ref={contextMenuRef} />
-            {mediaSelectorVisible && (
+            {media.mediaSelectorVisible && (
               <MediaSelector
                 language={editContext.currentItemDescriptor!.language}
-                visible={mediaSelectorVisible}
-                onHide={() => setMediaSelectorVisible(false)}
-                onMediaSelected={onMediaSelect}
-                selectedIdPath={selectedMediaIdPath}
-                mode={mediaSelectorMode}
+                visible={media.mediaSelectorVisible}
+                onHide={() => media.setMediaSelectorVisible(false)}
+                onMediaSelected={media.onMediaSelect}
+                selectedIdPath={media.selectedMediaIdPath}
+                mode={media.mediaSelectorMode}
               />
             )}
             <FieldEditorPopup ref={fieldEditorPopupRef} />