@ifc-lite/viewer 1.17.4 → 1.17.6

package/src/components/viewer/ViewportContainer.tsx

@@ -18,10 +18,11 @@ import { useWebGPU } from '@/hooks/useWebGPU';
 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 { isTauri } from '@/lib/platform';
 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';
+import { type IfcDataStore } from '@ifc-lite/parser';
+import { getEffectiveGeoreference } from '@/lib/geo/effective-georef';
 
 const ZERO_VEC3 = { x: 0, y: 0, z: 0 };
 const DEFAULT_COORDINATE_INFO: CoordinateInfo = {
@@ -43,6 +44,7 @@ export function ViewportContainer() {
   const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
   const georefMutations = useViewerStore((s) => s.georefMutations);
   const setCesiumSourceModelId = useViewerStore((s) => s.setCesiumSourceModelId);
+  const setCesiumAvailable = useViewerStore((s) => s.setCesiumAvailable);
   // Subscribe to mutationVersion so Cesium reacts to georef edits
   const mutationVersion = useViewerStore((s) => s.mutationVersion);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -176,82 +178,64 @@ export function ViewportContainer() {
   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,
+      const effective = getEffectiveGeoreference(
+        ds as IfcDataStore,
+        model.geometryResult?.coordinateInfo,
+        georefMutations.get(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 };
+      if (effective?.projectedCRS?.name && effective.mapConversion) {
+        return { ...effective, sourceModelId: modelId };
       }
     }
 
     // Fallback to legacy single-model
     if (ifcDataStore) {
-      const original = extractGeoreferencingOnDemand(ifcDataStore as IfcDataStore);
-      const merged = mergeGeoref(
-        original?.projectedCRS,
-        original?.mapConversion,
-        '__legacy__',
+      const effective = getEffectiveGeoreference(
+        ifcDataStore as IfcDataStore,
+        mergedGeometryResult?.coordinateInfo,
+        georefMutations.get('__legacy__'),
       );
-      if (merged) {
-        return { hasGeoreference: true, ...merged, sourceModelId: '__legacy__', coordinateInfo: mergedGeometryResult?.coordinateInfo };
+      if (effective?.projectedCRS?.name && effective.mapConversion) {
+        return { ...effective, sourceModelId: '__legacy__' };
       }
     }
 
     return null;
   }, [cesiumEnabled, storeModels, ifcDataStore, georefMutations, mutationVersion, mergedGeometryResult]);
 
+  // Determine whether Cesium button should be visible (model has georef or user added it via mutations).
+  // Runs independently of cesiumEnabled so the button appears/disappears reactively.
+  useEffect(() => {
+    function hasGeoref(): boolean {
+      // Check federated models
+      for (const [modelId, model] of storeModels) {
+        const ds = model.ifcDataStore;
+        if (!ds) continue;
+        const effective = getEffectiveGeoreference(
+          ds as IfcDataStore,
+          model.geometryResult?.coordinateInfo,
+          georefMutations.get(modelId),
+        );
+        if (effective?.projectedCRS?.name) return true;
+      }
+      // Fallback to legacy single-model
+      if (ifcDataStore) {
+        const effective = getEffectiveGeoreference(
+          ifcDataStore as IfcDataStore,
+          mergedGeometryResult?.coordinateInfo,
+          georefMutations.get('__legacy__'),
+        );
+        if (effective?.projectedCRS?.name) return true;
+      }
+      return false;
+    }
+    setCesiumAvailable(hasGeoref());
+  }, [storeModels, ifcDataStore, georefMutations, mutationVersion, setCesiumAvailable, mergedGeometryResult]);
+
   // Sync the active Cesium source model ID so terrain actions are scoped correctly
   useEffect(() => {
     setCesiumSourceModelId(georef?.sourceModelId ?? null);
@@ -847,13 +831,14 @@ export function ViewportContainer() {
         </div>
       )}
 
-      {/* Cesium 3D world context overlay — rendered behind the WebGPU canvas */}
-      {cesiumEnabled && georef && (
+      {/* Cesium 3D world context overlay — rendered behind the WebGPU canvas (web only) */}
+      {cesiumEnabled && georef && !isTauri() && (
         <CesiumOverlay
           mapConversion={georef.mapConversion}
           projectedCRS={georef.projectedCRS}
           coordinateInfo={georef.coordinateInfo}
           geometryResult={mergedGeometryResult}
+          lengthUnitScale={georef.lengthUnitScale}
         />
       )}
       <Viewport
@@ -862,7 +847,7 @@ export function ViewportContainer() {
         coordinateInfo={mergedGeometryResult?.coordinateInfo}
         computedIsolatedIds={computedIsolatedIds}
         modelIdToIndex={modelIdToIndex}
-        cesiumActive={cesiumEnabled && georef !== null}
+        cesiumActive={cesiumEnabled && georef !== null && !isTauri()}
         releaseGeometryAfterStream={false}
         onGeometryReleased={releaseGeometryMemory}
       />

package/src/components/viewer/ViewportOverlays.tsx

@@ -21,6 +21,9 @@ import type { CesiumDataSource } from '@/store/slices/cesiumSlice';
 import { goHomeFromStore } from '@/store/homeView';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
+import { isTauri } from '@/lib/platform';
+
+const isDesktop = isTauri();
 import { ViewCube, type ViewCubeRef } from './ViewCube';
 import { AxisHelper, type AxisHelperRef } from './AxisHelper';
 
@@ -146,8 +149,8 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
 
   return (
     <>
-      {/* Bottom-right: Cesium settings overlay OR Navigation controls */}
-      {cesiumEnabled ? (
+      {/* Bottom-right: Cesium settings overlay OR Navigation controls (Cesium is web-only) */}
+      {cesiumEnabled && !isDesktop ? (
         <CesiumSettingsOverlay
           dataSource={cesiumDataSource}
           onDataSourceChange={setCesiumDataSource}

package/src/components/viewer/bcf/BCFTopicDetail.tsx

@@ -215,12 +215,12 @@ export function BCFTopicDetail({
                           <img
                             src={vp.snapshot}
                             alt="Viewpoint"
-                            className="w-full aspect-video object-cover cursor-pointer hover:opacity-90 transition-opacity"
+                            className="w-full max-h-48 object-contain bg-muted cursor-pointer hover:opacity-90 transition-opacity"
                             onClick={() => onActivateViewpoint(vp)}
                           />
                         ) : (
                           <div
-                            className="w-full aspect-video bg-muted flex items-center justify-center cursor-pointer hover:bg-muted/80 transition-colors"
+                            className="w-full aspect-video bg-muted flex items-center justify-center cursor-pointer hover:bg-muted/80 transition-colors min-h-[120px]"
                             onClick={() => onActivateViewpoint(vp)}
                           >
                             <Camera className="h-6 w-6 text-muted-foreground" />
@@ -294,7 +294,7 @@ export function BCFTopicDetail({
                         <img
                           src={associatedViewpoint.snapshot}
                           alt="Associated viewpoint"
-                          className="w-full h-16 object-cover"
+                          className="w-full max-h-24 object-contain bg-muted"
                         />
                       </div>
                     )}
@@ -327,7 +327,7 @@ export function BCFTopicDetail({
               <img
                 src={selectedViewpoint.snapshot}
                 alt="Selected viewpoint"
-                className="w-10 h-10 object-cover rounded"
+                className="w-12 h-10 object-contain rounded bg-muted"
               />
             )}
             <div className="flex-1 min-w-0">

package/src/components/viewer/chat/ModelSelector.tsx

@@ -4,11 +4,14 @@
 
 /**
  * ModelSelector — dropdown to pick the LLM model.
- * Free models available to everyone. Pro models show cost indicator and lock icon.
+ * Free models available to everyone via server proxy.
+ * BYOK models selectable always — greyed out with lock icon when key is missing,
+ * fully styled when key is configured. Selecting a locked model triggers the
+ * inline key prompt in ChatPanel.
  */
 
-import { useCallback } from 'react';
-import { Lock } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Check, Key } from 'lucide-react';
 import {
   Select,
   SelectContent,
@@ -17,27 +20,43 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useViewerStore } from '@/store';
-import { FREE_MODELS, PRO_MODELS, getModelById } from '@/lib/llm/models';
-
-interface ModelSelectorProps {
-  /** Whether the user has a pro subscription */
-  hasPro?: boolean;
-}
+import { FREE_MODELS, getModelById, getByokModelsForSource } from '@/lib/llm/models';
+import type { LLMModel } from '@/lib/llm/types';
+import { hasAnthropicKey, hasOpenaiKey, subscribeApiKeys } from '@/services/api-keys';
 
 function formatContextWindow(tokens: number): string {
   if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(0)}M`;
   return `${(tokens / 1_000).toFixed(0)}K`;
 }
 
-export function ModelSelector({ hasPro = false }: ModelSelectorProps) {
+function CostBadge({ cost }: { cost?: LLMModel['cost'] }) {
+  if (!cost) return null;
+  const color = cost === '$$$' ? 'text-amber-500' : cost === '$$' ? 'text-blue-500' : 'text-emerald-500';
+  return <span className={`text-[10px] font-mono ${color}`}>{cost}</span>;
+}
+
+export function ModelSelector() {
   const activeModel = useViewerStore((s) => s.chatActiveModel);
   const setActiveModel = useViewerStore((s) => s.setChatActiveModel);
 
+  const [hasAnthropic, setHasAnthropic] = useState(hasAnthropicKey);
+  const [hasOpenai, setHasOpenai] = useState(hasOpenaiKey);
+
+  useEffect(() => {
+    const refresh = () => {
+      setHasAnthropic(hasAnthropicKey());
+      setHasOpenai(hasOpenaiKey());
+    };
+    return subscribeApiKeys(refresh);
+  }, []);
+
   const handleChange = useCallback((value: string) => {
     setActiveModel(value);
   }, [setActiveModel]);
 
   const current = getModelById(activeModel);
+  const anthropicModels = getByokModelsForSource('anthropic');
+  const openaiModels = getByokModelsForSource('openai');
 
   return (
     <Select value={activeModel} onValueChange={handleChange}>
@@ -45,57 +64,74 @@ export function ModelSelector({ hasPro = false }: ModelSelectorProps) {
         <SelectValue>
           <span className="truncate flex items-center gap-1">
             {current?.name ?? activeModel}
-            {current?.cost && (
-              <span className={`text-[10px] font-mono ${
-                current.cost === '$$$' ? 'text-amber-500' : current.cost === '$$' ? 'text-blue-500' : 'text-emerald-500'
-              }`}>
-                {current.cost}
-              </span>
-            )}
+            <CostBadge cost={current?.cost} />
           </span>
         </SelectValue>
       </SelectTrigger>
       <SelectContent>
         {/* Free tier */}
-        <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-          Free
-        </div>
-        {FREE_MODELS.map((m) => (
-          <SelectItem key={m.id} value={m.id} className="text-xs">
-            <span className="flex items-center gap-1.5">
-              <span>{m.name}</span>
-              <span className="text-muted-foreground text-[10px]">{m.provider}</span>
-              <span className="text-muted-foreground/50 text-[10px]">{formatContextWindow(m.contextWindow)}</span>
-            </span>
-          </SelectItem>
-        ))}
+        {FREE_MODELS.length > 0 && (
+          <>
+            <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+              Free
+            </div>
+            {FREE_MODELS.map((m) => (
+              <SelectItem key={m.id} value={m.id} className="text-xs">
+                <span className="flex items-center gap-1.5">
+                  <span>{m.name}</span>
+                  <span className="text-muted-foreground text-[10px]">{m.provider}</span>
+                  <span className="text-muted-foreground/50 text-[10px]">{formatContextWindow(m.contextWindow)}</span>
+                </span>
+              </SelectItem>
+            ))}
+          </>
+        )}
+
+        {/* Anthropic BYOK */}
+        {anthropicModels.length > 0 && (
+          <>
+            <div className="px-2 py-1 mt-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
+              Anthropic
+              {hasAnthropic
+                ? <Check className="h-2.5 w-2.5 text-emerald-500" />
+                : <Key className="h-2.5 w-2.5" />
+              }
+            </div>
+            {anthropicModels.map((m) => (
+              <SelectItem key={m.id} value={m.id} className={`text-xs ${!hasAnthropic ? 'opacity-50' : ''}`}>
+                <span className="flex items-center gap-1.5">
+                  <span>{m.name}</span>
+                  <CostBadge cost={m.cost} />
+                  <span className="text-muted-foreground/50 text-[10px]">{formatContextWindow(m.contextWindow)}</span>
+                  {!hasAnthropic && <Key className="h-3 w-3 text-muted-foreground/50" />}
+                </span>
+              </SelectItem>
+            ))}
+          </>
+        )}
 
-        {/* Pro tier */}
-        <div className="px-2 py-1 mt-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
-          Pro
-        </div>
-        {PRO_MODELS.map((m) => (
-          <SelectItem
-            key={m.id}
-            value={m.id}
-            disabled={!hasPro}
-            className="text-xs"
-          >
-            <span className="flex items-center gap-1.5">
-              <span>{m.name}</span>
-              <span className="text-muted-foreground text-[10px]">{m.provider}</span>
-              {m.cost && (
-                <span className={`text-[10px] font-mono ${
-                  m.cost === '$$$' ? 'text-amber-500' : m.cost === '$$' ? 'text-blue-500' : 'text-emerald-500'
-                }`}>
-                  {m.cost}
+        {/* OpenAI BYOK */}
+        {openaiModels.length > 0 && (
+          <>
+            <div className="px-2 py-1 mt-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
+              OpenAI
+              {hasOpenai
+                ? <Check className="h-2.5 w-2.5 text-emerald-500" />
+                : <Key className="h-2.5 w-2.5" />
+              }
+            </div>
+            {openaiModels.map((m) => (
+              <SelectItem key={m.id} value={m.id} className={`text-xs ${!hasOpenai ? 'opacity-50' : ''}`}>
+                <span className="flex items-center gap-1.5">
+                  <span>{m.name}</span>
+                  <CostBadge cost={m.cost} />
+                  <span className="text-muted-foreground/50 text-[10px]">{formatContextWindow(m.contextWindow)}</span>
+                  {!hasOpenai && <Key className="h-3 w-3 text-muted-foreground/50" />}
                 </span>
-              )}
-              <span className="text-muted-foreground/50 text-[10px]">{formatContextWindow(m.contextWindow)}</span>
-              {!hasPro && <Lock className="h-3 w-3 text-muted-foreground/50" />}
-            </span>
-          </SelectItem>
-        ))}
+              </SelectItem>
+            ))}
+          </>
+        )}
       </SelectContent>
     </Select>
   );