@ifc-lite/viewer 1.21.0 → 1.22.0

package/src/components/viewer/ChatPanel.tsx

@@ -49,11 +49,14 @@ import type { ScriptDiagnostic } from '@/lib/llm/script-diagnostics';
 import { buildRepairSessionKey, getEscalatedRepairScope, pruneMessagesForRepair } from '@/lib/llm/repair-loop';
 import type { ChatMessage, ChatRepairRequest, FileAttachment } from '@/lib/llm/types';
 import { canUsePlainCodeBlockFallback, type ScriptMutationIntent } from '@/lib/llm/script-preservation';
-import { Check, Image as ImageIcon, Key, Eye, EyeOff, ExternalLink } from 'lucide-react';
+import { Check, Image as ImageIcon, KeyRound } from 'lucide-react';
 import { hasDesktopFeatureAccess } from '@/lib/desktop-product';
 import { getModelById } from '@/lib/llm/models';
 import { resolveStreamRoute } from '@/lib/llm/byok-guard';
-import { getApiKeys, updateApiKeys, hasAnthropicKey, hasOpenaiKey, subscribeApiKeys } from '@/services/api-keys';
+import { getApiKeys, hasAnthropicKey, hasOpenaiKey, subscribeApiKeys } from '@/services/api-keys';
+import { ByokKeyModal } from './chat/ByokKeyModal';
+import { ByokStreamingPill } from './chat/ByokStreamingPill';
+import type { BYOKProvider } from '@/lib/llm/clipboard-detect';
 import { useSandbox } from '@/hooks/useSandbox';
 
 // Environment variable for the proxy URL
@@ -246,7 +249,26 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
     return subscribeApiKeys(refresh);
   }, [setChatHasByokKey]);
 
-  const displayUsage: UsageInfo | null = usage;
+  // BYOK key modal — controlled state for both auto-open (on locked-model pick)
+  // and manual open via the header 🔑 button. `provider` selects the initial tab.
+  const [byokModal, setByokModal] = useState<{ open: boolean; provider: BYOKProvider }>({
+    open: false,
+    provider: 'anthropic',
+  });
+  const openByokModal = useCallback((provider: BYOKProvider) => {
+    setByokModal({ open: true, provider });
+  }, []);
+  const closeByokModal = useCallback(() => {
+    setByokModal((s) => ({ ...s, open: false }));
+  }, []);
+
+  // The usage indicator tracks the free-tier proxy quota we enforce server-side.
+  // BYOK routes go directly from the browser to the provider, so the user's
+  // own provider account is what gates them — our quota doesn't apply, and
+  // showing it here is misleading. Hide it whenever the active model is
+  // direct-to-provider.
+  const activeModelSource = getModelById(activeModel)?.source ?? 'proxy';
+  const displayUsage: UsageInfo | null = activeModelSource === 'proxy' ? usage : null;
   const usageResetLabel = displayUsage?.resetAt && displayUsage.resetAt > 0
     ? new Date(displayUsage.resetAt * 1000).toLocaleDateString()
     : '—';
@@ -424,10 +446,9 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
     // doesn't stack orphaned user messages on repeated sends.
     const route = resolveStreamRoute(activeModel, getApiKeys());
     if (route.kind === 'missing-key') {
+      openByokModal(route.provider);
       setChatError(
-        route.provider === 'anthropic'
-          ? 'Enter your Anthropic API key above to use this model.'
-          : 'Enter your OpenAI API key above to use this model.',
+        `${route.provider === 'anthropic' ? 'Anthropic' : 'OpenAI'} key required for this model — set it up to continue.`,
       );
       return;
     }
@@ -1188,6 +1209,17 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   const needsAnthropicKey = modelSource === 'anthropic' && !keyStateAnthropic;
   const needsOpenaiKey = modelSource === 'openai' && !keyStateOpenai;
   const needsByokKey = needsAnthropicKey || needsOpenaiKey;
+
+  // Auto-open the BYOK modal when the user picks a locked model. We only fire on
+  // the *transition* into needsByokKey so the modal doesn't keep popping back up
+  // after the user dismisses it without entering a key.
+  const prevNeedsByokRef = useRef(false);
+  useEffect(() => {
+    if (needsByokKey && !prevNeedsByokRef.current) {
+      openByokModal(needsAnthropicKey ? 'anthropic' : 'openai');
+    }
+    prevNeedsByokRef.current = needsByokKey;
+  }, [needsByokKey, needsAnthropicKey, openByokModal]);
   const showSupportEmail = Boolean(error && error.includes('louis@ltplus.com'));
   const canContinue = Boolean(
     !isActive && (streamingContent.trim().length > 0 || lastFinishReason === 'length'),
@@ -1227,8 +1259,26 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
         </Tooltip>
 
         <ModelSelector />
+        <ByokStreamingPill modelId={activeModel} className="ml-1" />
         <div className="flex-1" />
 
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              onClick={() => openByokModal(modelSource === 'openai' ? 'openai' : 'anthropic')}
+              className={keyStateAnthropic || keyStateOpenai ? 'text-emerald-500' : ''}
+              aria-label={keyStateAnthropic || keyStateOpenai ? 'Manage API keys' : 'Add API key for frontier models'}
+            >
+              <KeyRound className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {keyStateAnthropic || keyStateOpenai ? 'Manage API keys' : 'Add API key for frontier models'}
+          </TooltipContent>
+        </Tooltip>
+
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
@@ -1256,9 +1306,20 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
         </div>
       )}
 
-      {/* Inline BYOK key prompt — shown when user picks a model without the matching key */}
-      {needsByokKey && canUseAiAssistant && (
-        <InlineKeyPrompt provider={needsAnthropicKey ? 'anthropic' : 'openai'} />
+      {/* Slim CTA banner — appears when the modal has been dismissed but the
+          selected model still needs a key. Re-opens the modal on click. */}
+      {needsByokKey && canUseAiAssistant && !byokModal.open && (
+        <button
+          type="button"
+          onClick={() => openByokModal(needsAnthropicKey ? 'anthropic' : 'openai')}
+          className="w-full border-b bg-amber-500/10 px-3 py-2 text-left text-xs hover:bg-amber-500/15 transition-colors flex items-center gap-2"
+        >
+          <KeyRound className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
+          <span>
+            <strong>{needsAnthropicKey ? 'Anthropic' : 'OpenAI'} key needed</strong>{' '}
+            for this model — click to set it up
+          </span>
+        </button>
       )}
 
       {/* Clear confirmation */}
@@ -1449,7 +1510,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
             }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
-            placeholder={!canUseAiAssistant ? 'AI assistant not available' : needsByokKey ? `Enter your ${needsAnthropicKey ? 'Anthropic' : 'OpenAI'} API key above` : 'Ask anything...'}
+            placeholder={!canUseAiAssistant ? 'AI assistant not available' : needsByokKey ? `Add your ${needsAnthropicKey ? 'Anthropic' : 'OpenAI'} key to chat with this model` : 'Ask anything...'}
             rows={1}
             className="flex-1 resize-none rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground px-3 py-1.5 text-sm min-h-[32px] max-h-[120px] focus:outline-none focus:ring-1 focus:ring-ring"
             style={{ height: 'auto', overflow: 'hidden' }}
@@ -1517,90 +1578,12 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
           <span className="text-[10px] text-muted-foreground/30">⌘L</span>
         </div>
       </div>
-    </div>
-  );
-}
-
-// ── Inline BYOK key prompt (shown inside chat panel when key is missing) ──
-
-const PROVIDER_INFO = {
-  anthropic: {
-    label: 'Anthropic',
-    placeholder: 'sk-ant-api03-...',
-    url: 'https://console.anthropic.com/settings/keys',
-    urlLabel: 'console.anthropic.com',
-  },
-  openai: {
-    label: 'OpenAI',
-    placeholder: 'sk-...',
-    url: 'https://platform.openai.com/api-keys',
-    urlLabel: 'platform.openai.com',
-  },
-} as const;
-
-function InlineKeyPrompt({ provider }: { provider: 'anthropic' | 'openai' }) {
-  const [value, setValue] = useState('');
-  const [show, setShow] = useState(false);
-  const [saved, setSaved] = useState(false);
-  const info = PROVIDER_INFO[provider];
-
-  const handleSave = useCallback(() => {
-    const trimmed = value.trim();
-    if (!trimmed) return;
-    if (provider === 'anthropic') {
-      updateApiKeys({ anthropicKey: trimmed });
-    } else {
-      updateApiKeys({ openaiKey: trimmed });
-    }
-    setSaved(true);
-  }, [value, provider]);
-
-  // Brief success state before the parent unmounts this component
-  if (saved) {
-    return (
-      <div className="border-b bg-emerald-500/10 px-3 py-2 flex items-center gap-2 text-xs text-emerald-700 dark:text-emerald-400">
-        <Check className="h-3.5 w-3.5" />
-        <span>{info.label} key saved — ready to chat</span>
-      </div>
-    );
-  }
 
-  return (
-    <div className="border-b bg-muted/30 px-3 py-2.5 space-y-1.5">
-      <div className="flex items-center gap-1.5 text-xs font-medium">
-        <Key className="h-3.5 w-3.5" />
-        {info.label} API key required
-      </div>
-      <p className="text-[11px] text-muted-foreground">
-        Paste your key below — stored in your browser only, sent directly to {info.label}.{' '}
-        <a href={info.url} target="_blank" rel="noopener noreferrer" className="underline inline-flex items-center gap-0.5">
-          Get a key <ExternalLink className="h-2.5 w-2.5" />
-        </a>
-      </p>
-      <div className="flex gap-1.5">
-        <div className="relative flex-1">
-          <input
-            type={show ? 'text' : 'password'}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); }}
-            placeholder={info.placeholder}
-            autoComplete="off"
-            spellCheck={false}
-            className="w-full rounded border border-input bg-background px-2 py-1 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-ring pr-7"
-          />
-          <button
-            type="button"
-            onClick={() => setShow(!show)}
-            className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-          >
-            {show ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
-          </button>
-        </div>
-        <Button size="sm" className="h-7 px-3 text-xs" onClick={handleSave} disabled={!value.trim()}>
-          Save
-        </Button>
-      </div>
+      <ByokKeyModal
+        open={byokModal.open}
+        onOpenChange={(open) => (open ? openByokModal(byokModal.provider) : closeByokModal())}
+        initialProvider={byokModal.provider}
+      />
     </div>
   );
 }

package/src/components/viewer/EntityContextMenu.tsx

@@ -6,7 +6,7 @@
  * Context menu for entity interactions
  */
 
-import { useCallback, useEffect, useRef, useMemo } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useMemo, useState } from 'react';
 import {
   Equal,
   Plus,
@@ -73,18 +73,30 @@ export function EntityContextMenu() {
     };
   }, [contextMenu.entityId, models, ifcDataStore]);
 
-  // Close menu when clicking outside
+  // Close menu when clicking/tapping outside.
+  //
+  // Listen on `pointerdown` (with capture) rather than `mousedown`:
+  // the canvas calls `e.preventDefault()` on its own pointerdown
+  // handler, which in some browsers suppresses the compatibility
+  // `mousedown` event — so a plain `mousedown` listener never fires
+  // when the user clicks the 3D viewport to dismiss the menu.
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
+    if (!contextMenu.isOpen) return;
+    const handlePointerOutside = (e: PointerEvent) => {
       if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
         closeContextMenu();
       }
     };
-
-    if (contextMenu.isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
+    // Also close on scroll/resize — the anchor coords go stale.
+    const handleDismiss = () => closeContextMenu();
+    document.addEventListener('pointerdown', handlePointerOutside, true);
+    window.addEventListener('resize', handleDismiss);
+    window.addEventListener('wheel', handleDismiss, { passive: true });
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerOutside, true);
+      window.removeEventListener('resize', handleDismiss);
+      window.removeEventListener('wheel', handleDismiss);
+    };
   }, [contextMenu.isOpen, closeContextMenu]);
 
   // Close on escape
@@ -271,6 +283,48 @@ export function EntityContextMenu() {
     closeContextMenu();
   }, [contextEntityRef, canEdit, contextEntityType, contextMenu.entityId, removeEntity, hideEntity, setSelectedEntityId, closeContextMenu]);
 
+  // Viewport-constrained placement (mirrors OS context-menu behaviour):
+  // flip up/left when the menu would overflow the bottom/right edges,
+  // then clamp against the opposite edge so it never crosses any side
+  // of the viewport. Two-pass render: invisible first, then measure and
+  // reposition before the browser paints (useLayoutEffect is sync).
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!contextMenu.isOpen) {
+      setPosition(null);
+      return;
+    }
+    const node = menuRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    const margin = 4;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const anchorX = contextMenu.screenX;
+    const anchorY = contextMenu.screenY;
+
+    // Horizontal: prefer right of cursor, flip to left if it would
+    // overflow the right edge, then clamp.
+    let left = anchorX;
+    if (left + rect.width + margin > vw) {
+      const flipped = anchorX - rect.width;
+      left = flipped >= margin ? flipped : Math.max(margin, vw - rect.width - margin);
+    }
+    if (left < margin) left = margin;
+
+    // Vertical: prefer below cursor, flip above if it would overflow
+    // the bottom edge, then clamp.
+    let top = anchorY;
+    if (top + rect.height + margin > vh) {
+      const flipped = anchorY - rect.height;
+      top = flipped >= margin ? flipped : Math.max(margin, vh - rect.height - margin);
+    }
+    if (top < margin) top = margin;
+
+    setPosition({ left, top });
+  }, [contextMenu.isOpen, contextMenu.screenX, contextMenu.screenY, contextMenu.entityId]);
+
   if (!contextMenu.isOpen) {
     return null;
   }
@@ -289,8 +343,12 @@ export function EntityContextMenu() {
       ref={menuRef}
       className="fixed z-50 bg-popover border rounded-lg shadow-lg py-1 min-w-48"
       style={{
-        left: contextMenu.screenX,
-        top: contextMenu.screenY,
+        left: position?.left ?? contextMenu.screenX,
+        top: position?.top ?? contextMenu.screenY,
+        // Hide the first render: we need a measured rect to compute the
+        // constrained position. `useLayoutEffect` resolves this before
+        // paint, so the user never sees the unclamped flash.
+        visibility: position ? 'visible' : 'hidden',
       }}
     >
       {contextMenu.entityId && (

package/src/components/viewer/MainToolbar.tsx

@@ -42,6 +42,7 @@ import {
   FileCode2,
   CalendarClock,
   Globe2,
+  Move,
   Settings,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -72,7 +73,6 @@ import { BulkPropertyEditor } from './BulkPropertyEditor';
 import { DataConnector } from './DataConnector';
 import { ExportChangesButton } from './ExportChangesButton';
 import { SearchInline } from './SearchInline';
-// CesiumSettingsDialog removed — settings now shown as overlay on Cesium viewer
 import { useFloorplanView } from '@/hooks/useFloorplanView';
 import { buildDesktopUpgradeUrl, hasDesktopFeatureAccess, type DesktopFeature } from '@/lib/desktop-product';
 import { recordRecentFiles, cacheFileBlobs } from '@/lib/recent-files';
@@ -341,6 +341,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const cesiumAvailable = useViewerStore((state) => state.cesiumAvailable);
   const cesiumEnabled = useViewerStore((state) => state.cesiumEnabled);
   const toggleCesium = useViewerStore((state) => state.toggleCesium);
+  const cesiumPlacementEditMode = useViewerStore((state) => state.cesiumPlacementEditMode);
+  const setCesiumPlacementEditMode = useViewerStore((state) => state.setCesiumPlacementEditMode);
   const storeModels = useViewerStore((state) => state.models);
   const desktopEntitlement = useViewerStore((state) => state.desktopEntitlement);
   const analysisExtensionState = useSyncExternalStore(
@@ -1273,9 +1275,9 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </TooltipContent>
       </Tooltip>
 
-      {/* Cesium 3D Context toggle + settings — web only, only when model has georeferencing */}
+      {/* Cesium 3D Context toggle — web only, only when model has georeferencing */}
       {cesiumAvailable && !desktopShell && (
-        <div className="flex items-center">
+        <div className="flex items-center gap-1">
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -1286,6 +1288,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
                 onClick={(e) => {
                   (e.currentTarget as HTMLButtonElement).blur();
                   toggleCesium();
+                  if (cesiumEnabled) {
+                    setCesiumPlacementEditMode(false);
+                    if (activeTool === 'cesium-placement') setActiveTool('select');
+                  }
                 }}
                 className={cn(cesiumEnabled && 'bg-teal-600 text-white hover:bg-teal-700')}
               >
@@ -1296,6 +1302,30 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
               {cesiumEnabled ? 'Hide' : 'Show'} 3D World Context (Cesium)
             </TooltipContent>
           </Tooltip>
+          {cesiumEnabled && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={cesiumPlacementEditMode ? 'default' : 'ghost'}
+                  size="icon-sm"
+                  aria-label={cesiumPlacementEditMode ? 'Stop moving georeference' : 'Move georeference in Cesium'}
+                  aria-pressed={cesiumPlacementEditMode}
+                  onClick={(e) => {
+                    (e.currentTarget as HTMLButtonElement).blur();
+                    const next = !cesiumPlacementEditMode;
+                    setCesiumPlacementEditMode(next);
+                    setActiveTool(next ? 'cesium-placement' : 'select');
+                  }}
+                  className={cn(cesiumPlacementEditMode && 'bg-amber-500 text-zinc-950 hover:bg-amber-400')}
+                >
+                  <Move className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {cesiumPlacementEditMode ? 'Stop moving georeference' : 'Move georeference'}
+              </TooltipContent>
+            </Tooltip>
+          )}
         </div>
       )}
 

package/src/components/viewer/ViewportContainer.tsx

@@ -12,6 +12,7 @@ import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
 import { BCFOverlay } from './bcf/BCFOverlay';
 import { CesiumOverlay } from './CesiumOverlay';
+import { CesiumPlacementEditor } from './CesiumPlacementEditor';
 import { getViewerStoreApi, useViewerStore } from '@/store';
 import { toGlobalIdFromModels } from '@/store/globalId';
 import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
@@ -25,7 +26,7 @@ import { toast } from '@/components/ui/toast';
 import { describeUnsupportedFormat } from '@/hooks/ingest/pointCloudIngest';
 import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus, Clock3, Sparkles, ArrowUpRight } from 'lucide-react';
 import type { MeshData, CoordinateInfo, GeometryResult, PointCloudAsset } from '@ifc-lite/geometry';
-import { type IfcDataStore } from '@ifc-lite/parser';
+import { type IfcDataStore, type MapConversion } from '@ifc-lite/parser';
 import { getEffectiveGeoreference } from '@/lib/geo/effective-georef';
 
 const ZERO_VEC3 = { x: 0, y: 0, z: 0 };
@@ -46,6 +47,8 @@ export function ViewportContainer() {
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
   const bcfOverlayVisible = useViewerStore((s) => s.bcfOverlayVisible);
   const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
+  const cesiumPlacementDraft = useViewerStore((s) => s.cesiumPlacementDraft);
+  const cesiumPlacementDraftModelId = useViewerStore((s) => s.cesiumPlacementDraftModelId);
   const georefMutations = useViewerStore((s) => s.georefMutations);
   const setCesiumSourceModelId = useViewerStore((s) => s.setCesiumSourceModelId);
   const setCesiumAvailable = useViewerStore((s) => s.setCesiumAvailable);
@@ -206,6 +209,27 @@ export function ViewportContainer() {
   const georef = useMemo(() => {
     if (!cesiumEnabled) return null;
 
+    const applyPlacementDraft = <T extends { mapConversion?: MapConversion }>(
+      modelId: string,
+      effective: T,
+    ): T & { baseMapConversion?: T['mapConversion'] } => {
+      const preview = cesiumPlacementDraftModelId === modelId ? cesiumPlacementDraft : null;
+      if (!preview || !effective.mapConversion) {
+        return {
+          ...effective,
+          baseMapConversion: effective.mapConversion,
+        };
+      }
+      return {
+        ...effective,
+        baseMapConversion: effective.mapConversion,
+        mapConversion: {
+          ...effective.mapConversion,
+          ...preview,
+        },
+      };
+    };
+
     // Check federated models first
     for (const [modelId, model] of storeModels) {
       const ds = model.ifcDataStore;
@@ -215,9 +239,14 @@ export function ViewportContainer() {
         model.geometryResult?.coordinateInfo,
         georefMutations.get(modelId),
       );
-      if (effective?.projectedCRS?.name && effective.mapConversion) {
+      if (
+        effective?.projectedCRS?.name
+        && effective.mapConversion
+        && effective.source !== 'siteLocation'
+      ) {
+        const previewed = applyPlacementDraft(modelId, effective);
         return {
-          ...effective,
+          ...previewed,
           sourceModelId: modelId,
           storeyElevations: ds.spatialHierarchy?.storeyElevations,
         };
@@ -231,9 +260,14 @@ export function ViewportContainer() {
         mergedGeometryResult?.coordinateInfo,
         georefMutations.get('__legacy__'),
       );
-      if (effective?.projectedCRS?.name && effective.mapConversion) {
+      if (
+        effective?.projectedCRS?.name
+        && effective.mapConversion
+        && effective.source !== 'siteLocation'
+      ) {
+        const previewed = applyPlacementDraft('__legacy__', effective);
         return {
-          ...effective,
+          ...previewed,
           sourceModelId: '__legacy__',
           storeyElevations: ifcDataStore.spatialHierarchy?.storeyElevations,
         };
@@ -241,7 +275,16 @@ export function ViewportContainer() {
     }
 
     return null;
-  }, [cesiumEnabled, storeModels, ifcDataStore, georefMutations, mutationVersion, mergedGeometryResult]);
+  }, [
+    cesiumEnabled,
+    storeModels,
+    ifcDataStore,
+    georefMutations,
+    mutationVersion,
+    mergedGeometryResult,
+    cesiumPlacementDraft,
+    cesiumPlacementDraftModelId,
+  ]);
 
   // 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.
@@ -256,7 +299,7 @@ export function ViewportContainer() {
           model.geometryResult?.coordinateInfo,
           georefMutations.get(modelId),
         );
-        if (effective?.projectedCRS?.name) return true;
+        if (effective?.projectedCRS?.name && effective.source !== 'siteLocation') return true;
       }
       // Fallback to legacy single-model
       if (ifcDataStore) {
@@ -265,7 +308,7 @@ export function ViewportContainer() {
           mergedGeometryResult?.coordinateInfo,
           georefMutations.get('__legacy__'),
         );
-        if (effective?.projectedCRS?.name) return true;
+        if (effective?.projectedCRS?.name && effective.source !== 'siteLocation') return true;
       }
       return false;
     }
@@ -442,14 +485,13 @@ export function ViewportContainer() {
         if (ifcType === 'IfcSite' && !typeVisibility.site) continue;
       }
 
-      if (ifcType === 'IfcSpace' || ifcType === 'IfcOpeningElement') {
-        cache.push({
-          ...mesh,
-          color: [mesh.color[0], mesh.color[1], mesh.color[2], Math.min(mesh.color[3] * 0.3, 0.3)],
-        });
-      } else {
-        cache.push(mesh);
-      }
+      // Mesh alpha flows through unchanged. The previous code re-multiplied
+      // IfcSpace / IfcOpeningElement alpha down to <= 0.3 here, which stomped
+      // lens / Pset colour rules even when the user explicitly chose alpha 1.0.
+      // Defaults still come from styling.rs / default-materials.ts; the
+      // renderer promotes overridden entities to the opaque pipeline so the
+      // overlay paint pass finds matching depth. See issue #677.
+      cache.push(mesh);
     }
 
     filteredSourceLenRef.current = allMeshes.length;
@@ -913,6 +955,7 @@ export function ViewportContainer() {
       {cesiumEnabled && georef && !isTauri() && (
         <CesiumOverlay
           mapConversion={georef.mapConversion}
+          cameraMapConversion={georef.baseMapConversion}
           projectedCRS={georef.projectedCRS}
           coordinateInfo={georef.coordinateInfo}
           geometryResult={mergedGeometryResult}
@@ -920,6 +963,17 @@ export function ViewportContainer() {
           storeyElevations={georef.storeyElevations}
         />
       )}
+      {cesiumEnabled && georef?.mapConversion && !isTauri() && georef.baseMapConversion && (
+        <CesiumPlacementEditor
+          modelId={georef.sourceModelId}
+          mapConversion={georef.mapConversion}
+          baseMapConversion={georef.baseMapConversion}
+          projectedCRS={georef.projectedCRS}
+          coordinateInfo={georef.coordinateInfo}
+          lengthUnitScale={georef.lengthUnitScale}
+          storeyElevations={georef.storeyElevations}
+        />
+      )}
       <Viewport
         geometry={filteredGeometry}
         geometryVersion={geometryVersion}