@ifc-lite/viewer 1.17.3 → 1.17.4

package/src/components/viewer/Viewport.tsx

@@ -46,9 +46,23 @@ interface ViewportProps {
   coordinateInfo?: CoordinateInfo;
   computedIsolatedIds?: Set<number> | null;
   modelIdToIndex?: Map<string, number>;
+  /** When true, the WebGPU canvas uses a transparent clear color so the
+   *  CesiumJS globe behind it is visible. */
+  cesiumActive?: boolean;
+  releaseGeometryAfterStream?: boolean;
+  onGeometryReleased?: () => void;
 }
 
-export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIsolatedIds, modelIdToIndex }: ViewportProps) {
+export function Viewport({
+  geometry,
+  geometryVersion,
+  coordinateInfo,
+  computedIsolatedIds,
+  modelIdToIndex,
+  cesiumActive,
+  releaseGeometryAfterStream = false,
+  onGeometryReleased,
+}: ViewportProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -94,7 +108,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   }, [modelIdToIndex]);
 
   // Compute selectedModelIndex for renderer (multi-model selection highlighting)
-  const selectedModelIndex = selectedEntity && modelIdToIndex
+  const selectedModelIndex = models.size > 1 && selectedEntity && modelIdToIndex
     ? modelIdToIndex.get(selectedEntity.modelId) ?? undefined
     : undefined;
 
@@ -114,12 +128,13 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     }
 
     const globalId = pickResult.expressId;
+    const resolvedRef = resolveEntityRef(globalId);
 
     // Set globalId for renderer (highlighting uses globalIds directly)
     setSelectedEntityId(globalId);
 
     // Resolve globalId → EntityRef for property panel (single source of truth, never null)
-    setSelectedEntity(resolveEntityRef(globalId));
+    setSelectedEntity(resolvedRef);
   }, [setSelectedEntityId, setSelectedEntity]);
 
   // Ref to always access latest handlePickForSelection from event handlers
@@ -291,6 +306,17 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     separationLinesIntensity,
     separationLinesRadius,
   ]);
+
+  // Override clear color when Cesium overlay is active (transparent background)
+  useEffect(() => {
+    if (cesiumActive) {
+      clearColorRef.current = [0, 0, 0, 0]; // fully transparent
+    } else {
+      clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark');
+    }
+    rendererRef.current?.requestRender();
+  }, [cesiumActive, theme]);
+
   // Animation frame ref
   const animationFrameRef = useRef<number | null>(null);
   const lastFrameTimeRef = useRef<number>(0);
@@ -356,6 +382,11 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const sectionPlaneRef = useLatestRef(sectionPlane);
   const sectionRangeRef = useLatestRef(sectionRange);
   const visualEnhancementRef = useLatestRef(visualEnhancement);
+
+  // Terrain clip Y from Cesium store (read as ref for animation loop)
+  const cesiumTerrainClipY = useViewerStore((s) => s.cesiumTerrainClipY);
+  const fastZoomRef = useLatestRef(!!cesiumActive);
+  const terrainClipYRef = useLatestRef(cesiumActive ? cesiumTerrainClipY : null);
   const geometryRef = useLatestRef(geometry);
 
   // Hover throttling
@@ -457,8 +488,10 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
 
   // Helper: get pick options with visibility filtering
   const getPickOptions = () => {
-    const currentProgress = useViewerStore.getState().progress;
-    const currentIsStreaming = currentProgress !== null && currentProgress.percent < 100;
+    const currentState = useViewerStore.getState();
+    const currentProgress = currentState.progress;
+    const currentIsStreaming = currentState.geometryStreamingActive
+      || (currentProgress !== null && currentProgress.percent < 100);
     return {
       isStreaming: currentIsStreaming,
       hiddenIds: hiddenEntitiesRef.current,
@@ -656,8 +689,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
   const showHiddenLines = useViewerStore((s) => s.drawing2DDisplayOptions.showHiddenLines);
 
   // ===== Streaming progress =====
-  const progress = useViewerStore((state) => state.progress);
-  const isStreaming = progress !== null && progress.percent < 100;
+  const isStreaming = useViewerStore((state) => state.geometryStreamingActive);
 
   // Mouse isDragging proxy ref for animation loop
   // The animation loop reads this to decide whether to update rotation
@@ -728,6 +760,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     RENDER_THROTTLE_MS_SMALL,
     RENDER_THROTTLE_MS_LARGE,
     RENDER_THROTTLE_MS_HUGE,
+    fastZoomRef,
   });
 
   useTouchControls({
@@ -777,6 +810,7 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     lastFrameTimeRef,
     mouseIsDraggingRef,
     activeToolRef,
+    terrainClipYRef,
     hiddenEntitiesRef,
     isolatedEntitiesRef,
     selectedEntityIdRef,
@@ -808,6 +842,8 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     clearPendingColorUpdates,
     clearPendingMeshColorUpdates,
     clearColorRef,
+    releaseGeometryAfterFinalize: releaseGeometryAfterStream,
+    onGeometryReleased,
   });
 
   useRenderUpdates({
@@ -838,12 +874,17 @@ export function Viewport({ geometry, geometryVersion, coordinateInfo, computedIs
     showHiddenLines,
   });
 
+  // Hide WebGPU canvas immediately when Cesium is active.
+  // The model will be rendered by Cesium (as GLB) for correct positioning.
+  // Canvas stays in the DOM for picking/interaction.
+
   return (
     <canvas
       ref={canvasRef}
       data-viewport="main"
       tabIndex={-1}
-      className="w-full h-full block"
+      className={`w-full h-full block ${cesiumActive ? 'relative z-[1]' : ''}`}
+      style={cesiumActive ? { opacity: 0 } : undefined}
       onPointerDown={focusViewportForKeyboardShortcuts}
     />
   );

package/src/components/viewer/ViewportContainer.tsx

@@ -2,20 +2,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import { useMemo, useRef, useState, useCallback } from 'react';
+import { useMemo, useRef, useState, useCallback, useEffect, useSyncExternalStore } from 'react';
 import { Viewport } from './Viewport';
 import { ViewportOverlays } from './ViewportOverlays';
 import { ToolOverlays } from './ToolOverlays';
 import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
 import { BCFOverlay } from './bcf/BCFOverlay';
-import { useViewerStore } from '@/store';
+import { CesiumOverlay } from './CesiumOverlay';
+import { getViewerStoreApi, useViewerStore } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
 import { useIfc } from '@/hooks/useIfc';
 import { useWebGPU } from '@/hooks/useWebGPU';
-import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus } from 'lucide-react';
+import { openIfcFileDialog } from '@/services/file-dialog';
+import { logToDesktopTerminal } from '@/services/desktop-logger';
+import { cacheFileBlobs, formatFileSize, getCachedFile, getRecentFiles, recordRecentFiles, type RecentFileEntry } from '@/lib/recent-files';
+import { isTauri } from '@/utils/ifcConfig';
+import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus, Clock3 } from 'lucide-react';
 import type { MeshData, CoordinateInfo, GeometryResult } from '@ifc-lite/geometry';
+import { extractGeoreferencingOnDemand, type IfcDataStore, type MapConversion, type ProjectedCRS } from '@ifc-lite/parser';
 
 const ZERO_VEC3 = { x: 0, y: 0, z: 0 };
 const DEFAULT_COORDINATE_INFO: CoordinateInfo = {
@@ -26,20 +32,41 @@ const DEFAULT_COORDINATE_INFO: CoordinateInfo = {
 };
 
 export function ViewportContainer() {
-  const { geometryResult, ifcDataStore, loadFile, loading, models, clearAllModels, loadFilesSequentially } = useIfc();
+  const { loadFile, loading, clearAllModels, loadFilesSequentially } = useIfc();
+  const releaseGeometryMemory = useViewerStore((s) => s.releaseGeometryMemory);
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const typeVisibility = useViewerStore((s) => s.typeVisibility);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
   const classFilter = useViewerStore((s) => s.classFilter);
-  // Multi-model support: get all loaded models from store (for merged geometry)
-  const storeModels = useViewerStore((s) => s.models);
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
   const bcfOverlayVisible = useViewerStore((s) => s.bcfOverlayVisible);
+  const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
+  const georefMutations = useViewerStore((s) => s.georefMutations);
+  const setCesiumSourceModelId = useViewerStore((s) => s.setCesiumSourceModelId);
+  // Subscribe to mutationVersion so Cesium reacts to georef edits
+  const mutationVersion = useViewerStore((s) => s.mutationVersion);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [showTroubleshooting, setShowTroubleshooting] = useState(false);
+  const [recentFiles, setRecentFiles] = useState<RecentFileEntry[]>([]);
   const webgpu = useWebGPU();
 
+  const viewerStoreApi = getViewerStoreApi();
+  const viewportStoreState = useSyncExternalStore(
+    viewerStoreApi.subscribe,
+    viewerStoreApi.getState,
+    viewerStoreApi.getState,
+  );
+
+  const {
+    geometryResult,
+    ifcDataStore,
+    models,
+    boundedGeometryMode,
+    geometryUpdateTick,
+  } = viewportStoreState;
+  const storeModels = models;
+
   // Check if we have models loaded (for determining add vs replace behavior)
   const hasModelsLoaded = models.size > 0 || (geometryResult?.meshes && geometryResult.meshes.length > 0);
 
@@ -53,39 +80,87 @@ export function ViewportContainer() {
     return map;
   }, [storeModels]);
 
+  const mergedCacheRef = useRef<MeshData[]>([]);
+  const mergedLengthsRef = useRef<Map<string, number>>(new Map());
+  const mergedVisibilityRef = useRef<Map<string, boolean>>(new Map());
+
   // Multi-model: merge geometries from all visible models
   const mergedGeometryResult = useMemo(() => {
-    // If we have federated models, merge their visible geometries
-    if (storeModels.size > 0) {
-      const allMeshes: MeshData[] = [];
+    if (storeModels.size === 1) {
+      const firstModel = storeModels.values().next().value;
+      if (!firstModel?.visible) {
+        return {
+          meshes: [],
+          totalVertices: 0,
+          totalTriangles: 0,
+          coordinateInfo: DEFAULT_COORDINATE_INFO,
+        } satisfies GeometryResult;
+      }
+      return firstModel.geometryResult ?? geometryResult;
+    }
+
+    if (storeModels.size > 1) {
       let totalVertices = 0;
       let totalTriangles = 0;
       let mergedCoordinateInfo: CoordinateInfo | undefined;
+      let shouldRebuild = false;
 
-      for (const [modelId, model] of storeModels) {
-        // Skip hidden models - this is how model visibility works
-        if (!model.visible) continue;
+      if (mergedLengthsRef.current.size !== storeModels.size) {
+        shouldRebuild = true;
+      }
 
+      for (const [modelId, model] of storeModels) {
         const modelGeometry = model.geometryResult;
-        const modelIndex = modelIdToIndex.get(modelId) ?? 0;
-        if (modelGeometry?.meshes) {
-          // Tag each mesh with its modelIndex for selection/highlighting
+        const meshCount = model.visible ? (modelGeometry?.meshes.length ?? 0) : 0;
+        totalVertices += model.visible ? (modelGeometry?.totalVertices ?? 0) : 0;
+        totalTriangles += model.visible ? (modelGeometry?.totalTriangles ?? 0) : 0;
+        if (!mergedCoordinateInfo && model.visible && modelGeometry?.coordinateInfo) {
+          mergedCoordinateInfo = modelGeometry.coordinateInfo;
+        }
+
+        if (
+          mergedVisibilityRef.current.get(modelId) !== model.visible ||
+          (mergedLengthsRef.current.get(modelId) ?? 0) > meshCount
+        ) {
+          shouldRebuild = true;
+        }
+      }
+
+      if (shouldRebuild) {
+        const rebuilt: MeshData[] = [];
+        mergedLengthsRef.current = new Map();
+        mergedVisibilityRef.current = new Map();
+        for (const [modelId, model] of storeModels) {
+          const modelGeometry = model.geometryResult;
+          mergedVisibilityRef.current.set(modelId, model.visible);
+          const modelIndex = modelIdToIndex.get(modelId) ?? 0;
+          if (!model.visible || !modelGeometry?.meshes) {
+            mergedLengthsRef.current.set(modelId, 0);
+            continue;
+          }
           for (const mesh of modelGeometry.meshes) {
-            allMeshes.push({ ...mesh, modelIndex });
+            rebuilt.push({ ...mesh, modelIndex });
           }
-          totalVertices += modelGeometry.totalVertices || 0;
-          totalTriangles += modelGeometry.totalTriangles || 0;
-
-          // Use first model's coordinate info as base (could be improved to compute union)
-          if (!mergedCoordinateInfo && modelGeometry.coordinateInfo) {
-            mergedCoordinateInfo = modelGeometry.coordinateInfo;
+          mergedLengthsRef.current.set(modelId, modelGeometry.meshes.length);
+        }
+        mergedCacheRef.current = rebuilt;
+      } else {
+        for (const [modelId, model] of storeModels) {
+          const modelGeometry = model.geometryResult;
+          const modelIndex = modelIdToIndex.get(modelId) ?? 0;
+          const previousLength = mergedLengthsRef.current.get(modelId) ?? 0;
+          const nextMeshes = model.visible ? (modelGeometry?.meshes ?? []) : [];
+          for (let i = previousLength; i < nextMeshes.length; i++) {
+            const mesh = nextMeshes[i];
+            mergedCacheRef.current.push({ ...mesh, modelIndex });
           }
+          mergedLengthsRef.current.set(modelId, nextMeshes.length);
+          mergedVisibilityRef.current.set(modelId, model.visible);
         }
       }
 
-      // Return merged result (may be empty if all models hidden)
       return {
-        meshes: allMeshes,
+        meshes: mergedCacheRef.current,
         totalVertices,
         totalTriangles,
         coordinateInfo: mergedCoordinateInfo ?? DEFAULT_COORDINATE_INFO,
@@ -96,6 +171,106 @@ export function ViewportContainer() {
     return geometryResult;
   }, [storeModels, geometryResult, modelIdToIndex]);
 
+  // Extract georeferencing info merged with any live mutations (for Cesium overlay).
+  // Reacts to: model load, Cesium toggle, and every georef field edit.
+  const georef = useMemo(() => {
+    if (!cesiumEnabled) return null;
+
+    // Helper: merge original georef with mutations for a model
+    function mergeGeoref(
+      originalCRS: ProjectedCRS | undefined,
+      originalConv: MapConversion | undefined,
+      modelId: string,
+    ): { mapConversion: MapConversion; projectedCRS: ProjectedCRS } | null {
+      const muts = georefMutations.get(modelId);
+      const mutCRS = muts?.projectedCRS;
+      const mutConv = muts?.mapConversion;
+
+      // Build merged ProjectedCRS — mutation fields override originals
+      const hasCRS = originalCRS || mutCRS;
+      if (!hasCRS) return null;
+      const projectedCRS: ProjectedCRS = {
+        id: originalCRS?.id ?? 0,
+        name: (mutCRS?.name ?? originalCRS?.name ?? '') as string,
+        description: mutCRS?.description ?? originalCRS?.description,
+        geodeticDatum: mutCRS?.geodeticDatum ?? originalCRS?.geodeticDatum,
+        verticalDatum: mutCRS?.verticalDatum ?? originalCRS?.verticalDatum,
+        mapProjection: mutCRS?.mapProjection ?? originalCRS?.mapProjection,
+        mapZone: mutCRS?.mapZone ?? originalCRS?.mapZone,
+        mapUnit: mutCRS?.mapUnit ?? originalCRS?.mapUnit,
+      };
+
+      // Need at least an EPSG name to resolve projection
+      if (!projectedCRS.name) return null;
+
+      // Build merged MapConversion
+      const mapConversion: MapConversion = {
+        id: originalConv?.id ?? 0,
+        sourceCRS: originalConv?.sourceCRS ?? 0,
+        targetCRS: originalConv?.targetCRS ?? 0,
+        eastings: (mutConv?.eastings ?? originalConv?.eastings ?? 0) as number,
+        northings: (mutConv?.northings ?? originalConv?.northings ?? 0) as number,
+        orthogonalHeight: (mutConv?.orthogonalHeight ?? originalConv?.orthogonalHeight ?? 0) as number,
+        xAxisAbscissa: mutConv?.xAxisAbscissa ?? originalConv?.xAxisAbscissa,
+        xAxisOrdinate: mutConv?.xAxisOrdinate ?? originalConv?.xAxisOrdinate,
+        scale: mutConv?.scale ?? originalConv?.scale,
+      };
+
+      return { mapConversion, projectedCRS };
+    }
+
+    // Check federated models first
+    for (const [modelId, model] of storeModels) {
+      const ds = model.ifcDataStore;
+      if (!ds) continue;
+      const original = extractGeoreferencingOnDemand(ds as IfcDataStore);
+      const merged = mergeGeoref(
+        original?.projectedCRS,
+        original?.mapConversion,
+        modelId,
+      );
+      if (merged) {
+        // Return coordinateInfo from the SAME model to avoid mismatched transforms
+        const coordInfo = model.geometryResult?.coordinateInfo;
+        return { hasGeoreference: true, ...merged, sourceModelId: modelId, coordinateInfo: coordInfo };
+      }
+    }
+
+    // Fallback to legacy single-model
+    if (ifcDataStore) {
+      const original = extractGeoreferencingOnDemand(ifcDataStore as IfcDataStore);
+      const merged = mergeGeoref(
+        original?.projectedCRS,
+        original?.mapConversion,
+        '__legacy__',
+      );
+      if (merged) {
+        return { hasGeoreference: true, ...merged, sourceModelId: '__legacy__', coordinateInfo: mergedGeometryResult?.coordinateInfo };
+      }
+    }
+
+    return null;
+  }, [cesiumEnabled, storeModels, ifcDataStore, georefMutations, mutationVersion, mergedGeometryResult]);
+
+  // Sync the active Cesium source model ID so terrain actions are scoped correctly
+  useEffect(() => {
+    setCesiumSourceModelId(georef?.sourceModelId ?? null);
+  }, [georef?.sourceModelId, setCesiumSourceModelId]);
+
+  useEffect(() => {
+    // Recent files are a desktop-only feature — the web viewer should not
+    // show previously opened files in the landing page empty state.
+    if (!isTauri()) return;
+
+    const refreshRecentFiles = () => {
+      setRecentFiles(getRecentFiles().slice(0, 3));
+    };
+
+    refreshRecentFiles();
+    window.addEventListener('focus', refreshRecentFiles);
+    return () => window.removeEventListener('focus', refreshRecentFiles);
+  }, []);
+
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -128,6 +303,10 @@ export function ViewportContainer() {
 
     if (supportedFiles.length === 0) return;
 
+    recordRecentFiles(supportedFiles.map((file) => ({ name: file.name, size: file.size })));
+    void cacheFileBlobs(supportedFiles);
+    setRecentFiles(getRecentFiles().slice(0, 3));
+
     if (hasModelsLoaded) {
       // Models already loaded - add new files sequentially
       loadFilesSequentially(supportedFiles);
@@ -158,6 +337,10 @@ export function ViewportContainer() {
 
     if (supportedFiles.length === 0) return;
 
+    recordRecentFiles(supportedFiles.map((file) => ({ name: file.name, size: file.size })));
+    void cacheFileBlobs(supportedFiles);
+    setRecentFiles(getRecentFiles().slice(0, 3));
+
     if (supportedFiles.length === 1) {
       // Single file - use loadFile (simpler single-model path)
       loadFile(supportedFiles[0]);
@@ -184,6 +367,7 @@ export function ViewportContainer() {
   // A version counter triggers downstream re-renders via the Viewport prop.
   const filteredCacheRef = useRef<MeshData[]>([]);
   const filteredSourceLenRef = useRef(0);
+  const filteredSourceRef = useRef<MeshData[] | null>(null);
   const filteredTypeVisRef = useRef(typeVisibility);
   const filteredVersionRef = useRef(0);
 
@@ -191,6 +375,7 @@ export function ViewportContainer() {
     if (!mergedGeometryResult?.meshes) {
       filteredCacheRef.current = [];
       filteredSourceLenRef.current = 0;
+      filteredSourceRef.current = null;
       filteredVersionRef.current = 0;
       return null;
     }
@@ -204,9 +389,11 @@ export function ViewportContainer() {
       prevVis.spaces !== typeVisibility.spaces ||
       prevVis.openings !== typeVisibility.openings ||
       prevVis.site !== typeVisibility.site;
-    if (typeVisChanged || allMeshes.length < filteredSourceLenRef.current) {
+    const sourceChanged = filteredSourceRef.current !== allMeshes;
+    if (typeVisChanged || sourceChanged || allMeshes.length < filteredSourceLenRef.current) {
       cache.length = 0;
       filteredSourceLenRef.current = 0;
+      filteredSourceRef.current = allMeshes;
       filteredTypeVisRef.current = typeVisibility;
     }
 
@@ -238,7 +425,7 @@ export function ViewportContainer() {
 
     // Only bump version when cache content actually changed — avoids
     // unnecessary downstream re-renders when memo runs with same data.
-    if (cache.length !== prevCacheLen || typeVisChanged) {
+    if (cache.length !== prevCacheLen || typeVisChanged || sourceChanged) {
       filteredVersionRef.current++;
     }
 
@@ -531,7 +718,29 @@ export function ViewportContainer() {
 
             {/* Action */}
             <button
-              onClick={() => webgpu.supported && fileInputRef.current?.click()}
+              onClick={async () => {
+                if (!webgpu.supported) {
+                  return;
+                }
+
+                void logToDesktopTerminal('info', '[ViewportContainer] Empty-state open button clicked');
+                const file = await openIfcFileDialog();
+                if (file) {
+                  void logToDesktopTerminal('info', `[ViewportContainer] Native dialog selected ${file.path}`);
+                  recordRecentFiles([{
+                    name: file.name,
+                    size: file.size,
+                    path: file.path,
+                    modifiedMs: file.modifiedMs ?? null,
+                  }]);
+                  setRecentFiles(getRecentFiles().slice(0, 3));
+                  loadFile(file);
+                  return;
+                }
+
+                void logToDesktopTerminal('info', '[ViewportContainer] Falling back to browser file input');
+                fileInputRef.current?.click();
+              }}
               disabled={!webgpu.supported || webgpu.checking}
               className={`group w-full flex items-center justify-center gap-3 px-6 py-3 font-mono text-sm border transition-all ${
                 !webgpu.supported || webgpu.checking
@@ -546,6 +755,37 @@ export function ViewportContainer() {
             <p className="mt-3 text-xs font-mono text-zinc-400 dark:text-[#565f89]">
               {webgpu.supported ? 'or drag & drop anywhere' : 'file upload disabled'}
             </p>
+
+            {recentFiles.length > 0 && (
+              <div className="mt-6 w-full border-t border-zinc-200 dark:border-[#3b4261] pt-4">
+                <div className="mb-3 flex items-center gap-2 text-xs font-mono uppercase tracking-[0.2em] text-zinc-400 dark:text-[#565f89]">
+                  <Clock3 className="h-3.5 w-3.5" />
+                  <span>Recent Files</span>
+                </div>
+                <div className="flex flex-col gap-2">
+                  {recentFiles.map((file) => (
+                    <button
+                      key={`${file.name}-${file.timestamp}`}
+                      type="button"
+                      onClick={async () => {
+                        const cached = await getCachedFile(file);
+                        if (cached) {
+                          await loadFile(cached);
+                          return;
+                        }
+                        fileInputRef.current?.click();
+                      }}
+                      className="flex items-center justify-between gap-3 border border-zinc-200 bg-zinc-50 px-3 py-2 text-left transition-colors hover:border-primary hover:text-primary dark:border-[#3b4261] dark:bg-[#1f2335] dark:hover:border-primary"
+                    >
+                      <span className="min-w-0 truncate font-mono text-xs">{file.name}</span>
+                      <span className="shrink-0 font-mono text-[10px] uppercase tracking-wide text-zinc-400 dark:text-[#565f89]">
+                        {formatFileSize(file.size)}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
 
           {/* Feature Grid */}
@@ -607,18 +847,30 @@ export function ViewportContainer() {
         </div>
       )}
 
+      {/* Cesium 3D world context overlay — rendered behind the WebGPU canvas */}
+      {cesiumEnabled && georef && (
+        <CesiumOverlay
+          mapConversion={georef.mapConversion}
+          projectedCRS={georef.projectedCRS}
+          coordinateInfo={georef.coordinateInfo}
+          geometryResult={mergedGeometryResult}
+        />
+      )}
       <Viewport
         geometry={filteredGeometry}
         geometryVersion={geometryVersion}
         coordinateInfo={mergedGeometryResult?.coordinateInfo}
         computedIsolatedIds={computedIsolatedIds}
         modelIdToIndex={modelIdToIndex}
+        cesiumActive={cesiumEnabled && georef !== null}
+        releaseGeometryAfterStream={false}
+        onGeometryReleased={releaseGeometryMemory}
       />
       {bcfOverlayVisible && <BCFOverlay />}
       <ViewportOverlays />
       <ToolOverlays />
       <BasketPresentationDock />
-      <Section2DPanel 
+      <Section2DPanel
         mergedGeometry={mergedGeometryResult}
         computedIsolatedIds={computedIsolatedIds}
         modelIdToIndex={modelIdToIndex}