diff --git a/frontend/src/components/shared/PageEditorFileDropdown.tsx b/frontend/src/components/shared/PageEditorFileDropdown.tsx
index 8ff36efee..8054fc5c0 100644
--- a/frontend/src/components/shared/PageEditorFileDropdown.tsx
+++ b/frontend/src/components/shared/PageEditorFileDropdown.tsx
@@ -6,11 +6,13 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import FitText from './FitText';
 
+import { FileId } from '../../types/file';
+
 interface PageEditorFileDropdownProps {
   displayName: string;
-  allFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
-  selectedFileIds: Set<string>;
-  onToggleSelection: (fileId: string) => void;
+  allFiles: Array<{ fileId: FileId; name: string; versionNumber?: number }>;
+  selectedFileIds: Set<FileId>;
+  onToggleSelection: (fileId: FileId) => void;
   onReorder: (fromIndex: number, toIndex: number) => void;
   switchingTo?: string | null;
   viewOptionStyle: React.CSSProperties;
diff --git a/frontend/src/components/shared/TopControls.tsx b/frontend/src/components/shared/TopControls.tsx
index fd0f51c06..c1d78e844 100644
--- a/frontend/src/components/shared/TopControls.tsx
+++ b/frontend/src/components/shared/TopControls.tsx
@@ -9,6 +9,7 @@ import { WorkbenchType, isValidWorkbench } from '../../types/workbench';
 import { FileDropdownMenu } from './FileDropdownMenu';
 import { PageEditorFileDropdown } from './PageEditorFileDropdown';
 import { usePageEditor } from '../../contexts/PageEditorContext';
+import { FileId } from '../../types/file';
 
 
 const viewOptionStyle: React.CSSProperties = {
@@ -25,15 +26,15 @@ const viewOptionStyle: React.CSSProperties = {
 const createViewOptions = (
   currentView: WorkbenchType,
   switchingTo: WorkbenchType | null,
-  activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>,
+  activeFiles: Array<{ fileId: string | FileId; name: string; versionNumber?: number }>,
   currentFileIndex: number,
   onFileSelect?: (index: number) => void,
   pageEditorState?: {
-    allFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
-    selectedFileIds: Set<string>;
+    allFiles: Array<{ fileId: FileId; name: string; versionNumber?: number }>;
+    selectedFileIds: Set<FileId>;
     selectedCount: number;
     totalCount: number;
-    onToggleSelection: (fileId: string) => void;
+    onToggleSelection: (fileId: FileId) => void;
     onReorder: (fromIndex: number, toIndex: number) => void;
   }
 ) => {
@@ -194,12 +195,12 @@ const TopControls = ({
             currentFileIndex,
             onFileSelect,
             {
-              allFiles: activeFiles,
+              allFiles: activeFiles as Array<{ fileId: FileId; name: string; versionNumber?: number }>,
               selectedFileIds,
               selectedCount,
               totalCount,
               onToggleSelection: toggleFileSelection,
-              onReorder: (fromIndex, toIndex) => pageEditorReorderFiles(fromIndex, toIndex, activeFiles.map(f => f.fileId)),
+              onReorder: (fromIndex, toIndex) => pageEditorReorderFiles(fromIndex, toIndex, activeFiles.map(f => f.fileId as FileId)),
             }
           )}
           value={currentView}