Initial set up

frontend/src/components/layout/Workbench.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box } from '@mantine/core';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
@@ -6,6 +6,7 @@ import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFileState } from '../../contexts/FileContext';
 import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext';
 import { useViewer } from '../../contexts/ViewerContext';
+import { PageEditorProvider } from '../../contexts/PageEditorContext';
 import './Workbench.css';
 
 import TopControls from '../shared/TopControls';
@@ -49,6 +50,9 @@ export default function Workbench() {
   // Get active file index from ViewerContext
   const { activeFileIndex, setActiveFileIndex } = useViewer();
 
+  // Get all file IDs for PageEditor initialization
+  const allFileIds = useMemo(() => activeFiles.map(f => f.fileId), [activeFiles]);
+
   const handlePreviewClose = () => {
     setPreviewFile(null);
     const previousMode = sessionStorage.getItem('previousMode');
@@ -144,43 +148,45 @@ export default function Workbench() {
   };
 
   return (
-    <Box
-      className="flex-1 h-full min-w-80 relative flex flex-col"
-      style={
-        isRainbowMode
-          ? {} // No background color in rainbow mode
-          : { backgroundColor: 'var(--bg-background)' }
-      }
-    >
-      {/* Top Controls */}
-      {activeFiles.length > 0 && (
-        <TopControls
-          currentView={currentView}
-          setCurrentView={setCurrentView}
-          activeFiles={activeFiles.map(f => {
-            const stub = selectors.getStirlingFileStub(f.fileId);
-            return { fileId: f.fileId, name: f.name, versionNumber: stub?.versionNumber };
-          })}
-          currentFileIndex={activeFileIndex}
-          onFileSelect={setActiveFileIndex}
-        />
-      )}
-
-      {/* Dismiss All Errors Button */}
-      <DismissAllErrorsButton />
-
-      {/* Main content area */}
+    <PageEditorProvider initialFileIds={allFileIds}>
       <Box
-        className="flex-1 min-h-0 relative z-10 workbench-scrollable "
-        style={{
-          transition: 'opacity 0.15s ease-in-out',
-          paddingTop: currentView === 'viewer' ? '0' : (activeFiles.length > 0 ? '3.5rem' : '0'),
-        }}
+        className="flex-1 h-full min-w-80 relative flex flex-col"
+        style={
+          isRainbowMode
+            ? {} // No background color in rainbow mode
+            : { backgroundColor: 'var(--bg-background)' }
+        }
       >
-        {renderMainContent()}
-      </Box>
+        {/* Top Controls */}
+        {activeFiles.length > 0 && (
+          <TopControls
+            currentView={currentView}
+            setCurrentView={setCurrentView}
+            activeFiles={activeFiles.map(f => {
+              const stub = selectors.getStirlingFileStub(f.fileId);
+              return { fileId: f.fileId, name: f.name, versionNumber: stub?.versionNumber };
+            })}
+            currentFileIndex={activeFileIndex}
+            onFileSelect={setActiveFileIndex}
+          />
+        )}
 
-      <Footer analyticsEnabled />
-    </Box>
+        {/* Dismiss All Errors Button */}
+        <DismissAllErrorsButton />
+
+        {/* Main content area */}
+        <Box
+          className="flex-1 min-h-0 relative z-10 workbench-scrollable "
+          style={{
+            transition: 'opacity 0.15s ease-in-out',
+            paddingTop: currentView === 'viewer' ? '0' : (activeFiles.length > 0 ? '3.5rem' : '0'),
+          }}
+        >
+          {renderMainContent()}
+        </Box>
+
+        <Footer analyticsEnabled />
+      </Box>
+    </PageEditorProvider>
   );
 }

frontend/src/components/pageEditor/PageEditor.tsx

@@ -1,7 +1,8 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Text, Center, Box, LoadingOverlay, Stack } from "@mantine/core";
 import { useFileState, useFileActions } from "../../contexts/FileContext";
 import { useNavigationGuard } from "../../contexts/NavigationContext";
+import { usePageEditor } from "../../contexts/PageEditorContext";
 import { PDFDocument, PageEditorFunctions } from "../../types/pageEditor";
 import { pdfExportService } from "../../services/pdfExportService";
 import { documentManipulationService } from "../../services/documentManipulationService";
@@ -42,8 +43,25 @@ const PageEditor = ({
   // Navigation guard for unsaved changes
   const { setHasUnsavedChanges } = useNavigationGuard();
 
-  // Prefer IDs + selectors to avoid array identity churn
-  const activeFileIds = state.files.ids;
+  // Get selected files from PageEditorContext instead of all files
+  const { selectedFileIds, syncWithFileContext } = usePageEditor();
+
+  // Stable reference to file IDs to prevent infinite loops
+  const fileIdsString = state.files.ids.join(',');
+  const selectedIdsString = Array.from(selectedFileIds).sort().join(',');
+
+  // Sync with FileContext when files change
+  useEffect(() => {
+    syncWithFileContext(state.files.ids);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fileIdsString]); // Only re-run when the actual IDs change
+
+  // Get active file IDs from selected files (maintains order from FileContext)
+  const activeFileIds = useMemo(() => {
+    return state.files.ids.filter(id => selectedFileIds.has(id));
+    // Using string representations to prevent infinite loops
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fileIdsString, selectedIdsString]);
 
   // UI state
   const globalProcessing = state.ui.isProcessing;

frontend/src/components/pageEditor/hooks/usePageDocument.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useFileState } from '../../../contexts/FileContext';
+import { usePageEditor } from '../../../contexts/PageEditorContext';
 import { PDFDocument, PDFPage } from '../../../types/pageEditor';
 import { FileId } from '../../../types/file';
 
@@ -15,9 +16,21 @@ export interface PageDocumentHook {
  */
 export function usePageDocument(): PageDocumentHook {
   const { state, selectors } = useFileState();
+  const { selectedFileIds } = usePageEditor();
+
+  // Convert Set to array and filter to maintain file order from FileContext
+  const allFileIds = state.files.ids;
+
+  // Create stable string representations for useMemo dependencies
+  const allFileIdsString = allFileIds.join(',');
+  const selectedIdsString = Array.from(selectedFileIds).sort().join(',');
+
+  const activeFileIds = useMemo(() => {
+    return allFileIds.filter(id => selectedFileIds.has(id));
+    // Using string representations to prevent infinite loops from Set reference changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allFileIdsString, selectedIdsString]);
 
-  // Prefer IDs + selectors to avoid array identity churn
-  const activeFileIds = state.files.ids;
   const primaryFileId = activeFileIds[0] ?? null;
 
   // Stable signature for effects (prevents loops)

frontend/src/components/shared/PageEditorFileDropdown.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { Menu, Loader, Group, Text, Checkbox, ActionIcon } from '@mantine/core';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import FitText from './FitText';
+
+interface PageEditorFileDropdownProps {
+  displayName: string;
+  allFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
+  selectedFileIds: Set<string>;
+  onToggleSelection: (fileId: string) => void;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  switchingTo?: string | null;
+  viewOptionStyle: React.CSSProperties;
+}
+
+export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
+  displayName,
+  allFiles,
+  selectedFileIds,
+  onToggleSelection,
+  onReorder,
+  switchingTo,
+  viewOptionStyle,
+}) => {
+  const handleCheckboxClick = (e: React.MouseEvent, fileId: string) => {
+    e.stopPropagation();
+    onToggleSelection(fileId);
+  };
+
+  const handleMoveUp = (e: React.MouseEvent, index: number) => {
+    e.stopPropagation();
+    if (index > 0) {
+      onReorder(index, index - 1);
+    }
+  };
+
+  const handleMoveDown = (e: React.MouseEvent, index: number) => {
+    e.stopPropagation();
+    if (index < allFiles.length - 1) {
+      onReorder(index, index + 1);
+    }
+  };
+
+  return (
+    <Menu trigger="click" position="bottom" width="30rem">
+      <Menu.Target>
+        <div style={{...viewOptionStyle, cursor: 'pointer'}}>
+          {switchingTo === "pageEditor" ? (
+            <Loader size="xs" />
+          ) : (
+            <EditNoteIcon fontSize="small" />
+          )}
+          <FitText text={displayName} fontSize={14} minimumFontScale={0.6} />
+          <KeyboardArrowDownIcon fontSize="small" />
+        </div>
+      </Menu.Target>
+      <Menu.Dropdown style={{
+        backgroundColor: 'var(--right-rail-bg)',
+        border: '1px solid var(--border-subtle)',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+        maxHeight: '50vh',
+        overflowY: 'auto'
+      }}>
+        {allFiles.map((file, index) => {
+          const itemName = file?.name || 'Untitled';
+          const isSelected = selectedFileIds.has(file.fileId);
+          const isFirst = index === 0;
+          const isLast = index === allFiles.length - 1;
+
+          return (
+            <Menu.Item
+              key={file.fileId}
+              onClick={(e) => e.stopPropagation()}
+              style={{
+                justifyContent: 'flex-start',
+                cursor: 'default',
+                backgroundColor: isSelected ? 'var(--bg-hover)' : undefined,
+              }}
+            >
+              <Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flex: 1, minWidth: 0 }}>
+                  <Checkbox
+                    checked={isSelected}
+                    onChange={() => {}}
+                    onClick={(e) => handleCheckboxClick(e, file.fileId)}
+                    size="sm"
+                  />
+                  <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
+                    <FitText text={itemName} fontSize={14} minimumFontScale={0.7} />
+                  </div>
+                  {file.versionNumber && file.versionNumber > 1 && (
+                    <Text size="xs" c="dimmed">
+                      v{file.versionNumber}
+                    </Text>
+                  )}
+                </div>
+                <div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }}>
+                  <ActionIcon
+                    size="sm"
+                    variant="subtle"
+                    disabled={isFirst}
+                    onClick={(e) => handleMoveUp(e, index)}
+                    title="Move up"
+                  >
+                    <ArrowUpwardIcon fontSize="small" />
+                  </ActionIcon>
+                  <ActionIcon
+                    size="sm"
+                    variant="subtle"
+                    disabled={isLast}
+                    onClick={(e) => handleMoveDown(e, index)}
+                    title="Move down"
+                  >
+                    <ArrowDownwardIcon fontSize="small" />
+                  </ActionIcon>
+                </div>
+              </Group>
+            </Menu.Item>
+          );
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

frontend/src/components/shared/TopControls.tsx

@@ -7,6 +7,8 @@ import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
 import { WorkbenchType, isValidWorkbench } from '../../types/workbench';
 import { FileDropdownMenu } from './FileDropdownMenu';
+import { PageEditorFileDropdown } from './PageEditorFileDropdown';
+import { usePageEditor } from '../../contexts/PageEditorContext';
 
 
 const viewOptionStyle: React.CSSProperties = {
@@ -25,7 +27,15 @@ const createViewOptions = (
   switchingTo: WorkbenchType | null,
   activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>,
   currentFileIndex: number,
-  onFileSelect?: (index: number) => void
+  onFileSelect?: (index: number) => void,
+  pageEditorState?: {
+    allFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
+    selectedFileIds: Set<string>;
+    selectedCount: number;
+    totalCount: number;
+    onToggleSelection: (fileId: string) => void;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+  }
 ) => {
   const currentFile = activeFiles[currentFileIndex];
   const isInViewer = currentView === 'viewer';
@@ -57,20 +67,39 @@ const createViewOptions = (
     value: "viewer",
   };
 
+  // Page Editor dropdown logic
+  const isInPageEditor = currentView === 'pageEditor';
+  const hasPageEditorFiles = pageEditorState && pageEditorState.totalCount > 0;
+  const showPageEditorDropdown = isInPageEditor && hasPageEditorFiles;
+
+  let pageEditorDisplayName = 'Page Editor';
+  if (isInPageEditor && pageEditorState) {
+    if (pageEditorState.selectedCount === pageEditorState.totalCount) {
+      pageEditorDisplayName = `${pageEditorState.selectedCount} file${pageEditorState.selectedCount !== 1 ? 's' : ''}`;
+    } else {
+      pageEditorDisplayName = `${pageEditorState.selectedCount}/${pageEditorState.totalCount} selected`;
+    }
+  }
+
   const pageEditorOption = {
-    label: (
+    label: showPageEditorDropdown ? (
+      <PageEditorFileDropdown
+        displayName={pageEditorDisplayName}
+        allFiles={pageEditorState!.allFiles}
+        selectedFileIds={pageEditorState!.selectedFileIds}
+        onToggleSelection={pageEditorState!.onToggleSelection}
+        onReorder={pageEditorState!.onReorder}
+        switchingTo={switchingTo}
+        viewOptionStyle={viewOptionStyle}
+      />
+    ) : (
       <div style={viewOptionStyle}>
-        {currentView === "pageEditor" ? (
-          <>
-            {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
-            <span>Page Editor</span>
-          </>
+        {switchingTo === "pageEditor" ? (
+          <Loader size="xs" />
         ) : (
-          <>
-            {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
-            <span>Page Editor</span>
-          </>
+          <EditNoteIcon fontSize="small" />
         )}
+        <span>{pageEditorDisplayName}</span>
       </div>
     ),
     value: "pageEditor",
@@ -121,6 +150,17 @@ const TopControls = ({
   const { isRainbowMode } = useRainbowThemeContext();
   const [switchingTo, setSwitchingTo] = useState<WorkbenchType | null>(null);
 
+  // Get page editor state for dropdown
+  const {
+    selectedFileIds,
+    toggleFileSelection,
+    reorderFiles: pageEditorReorderFiles,
+  } = usePageEditor();
+
+  // Convert Set to array for counting
+  const selectedCount = selectedFileIds.size;
+  const totalCount = activeFiles.length;
+
   const handleViewChange = useCallback((view: string) => {
     if (!isValidWorkbench(view)) {
       return;
@@ -147,7 +187,21 @@ const TopControls = ({
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
       <div className="flex justify-center mt-[0.5rem]">
         <SegmentedControl
-          data={createViewOptions(currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect)}
+          data={createViewOptions(
+            currentView,
+            switchingTo,
+            activeFiles,
+            currentFileIndex,
+            onFileSelect,
+            {
+              allFiles: activeFiles,
+              selectedFileIds,
+              selectedCount,
+              totalCount,
+              onToggleSelection: toggleFileSelection,
+              onReorder: (fromIndex, toIndex) => pageEditorReorderFiles(fromIndex, toIndex, activeFiles.map(f => f.fileId)),
+            }
+          )}
           value={currentView}
           onChange={handleViewChange}
           color="blue"

frontend/src/contexts/PageEditorContext.tsx

@@ -0,0 +1,111 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { FileId } from '../types/file';
+import { useFileActions } from './FileContext';
+
+interface PageEditorContextValue {
+  // Set of selected file IDs (for quick lookup)
+  selectedFileIds: Set<FileId>;
+
+  // Toggle file selection
+  toggleFileSelection: (fileId: FileId) => void;
+
+  // Select/deselect all files
+  selectAll: (fileIds: FileId[]) => void;
+  deselectAll: () => void;
+
+  // Reorder ALL files in FileContext (maintains selection state)
+  reorderFiles: (fromIndex: number, toIndex: number, allFileIds: FileId[]) => void;
+
+  // Sync with FileContext when files change
+  syncWithFileContext: (allFileIds: FileId[]) => void;
+}
+
+const PageEditorContext = createContext<PageEditorContextValue | undefined>(undefined);
+
+interface PageEditorProviderProps {
+  children: ReactNode;
+  initialFileIds?: FileId[];
+}
+
+export function PageEditorProvider({ children, initialFileIds = [] }: PageEditorProviderProps) {
+  // Use Set for O(1) selection lookup
+  const [selectedFileIds, setSelectedFileIds] = useState<Set<FileId>>(new Set(initialFileIds));
+  const { actions: fileActions } = useFileActions();
+
+  const toggleFileSelection = useCallback((fileId: FileId) => {
+    setSelectedFileIds(prev => {
+      const next = new Set(prev);
+      if (next.has(fileId)) {
+        next.delete(fileId);
+      } else {
+        next.add(fileId);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectAll = useCallback((fileIds: FileId[]) => {
+    setSelectedFileIds(new Set(fileIds));
+  }, []);
+
+  const deselectAll = useCallback(() => {
+    setSelectedFileIds(new Set());
+  }, []);
+
+  const reorderFiles = useCallback((fromIndex: number, toIndex: number, allFileIds: FileId[]) => {
+    // Reorder the entire file list in FileContext
+    const newOrder = [...allFileIds];
+    const [movedFile] = newOrder.splice(fromIndex, 1);
+    newOrder.splice(toIndex, 0, movedFile);
+
+    // Update global FileContext order
+    fileActions.reorderFiles(newOrder);
+  }, [fileActions]);
+
+  const syncWithFileContext = useCallback((allFileIds: FileId[]) => {
+    setSelectedFileIds(prev => {
+      // Remove IDs that no longer exist in FileContext
+      const next = new Set<FileId>();
+      allFileIds.forEach(id => {
+        if (prev.has(id)) {
+          next.add(id);
+        }
+      });
+
+      // If no files selected, select all by default
+      if (next.size === 0 && allFileIds.length > 0) {
+        return new Set(allFileIds);
+      }
+
+      // Only update if there's an actual change
+      if (next.size === prev.size && Array.from(next).every(id => prev.has(id))) {
+        return prev; // No change, return same reference
+      }
+
+      return next;
+    });
+  }, []);
+
+  const value: PageEditorContextValue = {
+    selectedFileIds,
+    toggleFileSelection,
+    selectAll,
+    deselectAll,
+    reorderFiles,
+    syncWithFileContext,
+  };
+
+  return (
+    <PageEditorContext.Provider value={value}>
+      {children}
+    </PageEditorContext.Provider>
+  );
+}
+
+export function usePageEditor() {
+  const context = useContext(PageEditorContext);
+  if (!context) {
+    throw new Error('usePageEditor must be used within PageEditorProvider');
+  }
+  return context;
+}