@ifc-lite/viewer 1.21.0 → 1.22.1

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/CommandPalette.tsx

@@ -58,6 +58,11 @@ import {
   Sparkles,
   Eraser,
   MapPin,
+  PenLine,
+  Slice,
+  Layers3,
+  SquareStack,
+  ChevronsUpDown,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useViewerStore } from '@/store';
@@ -306,6 +311,12 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         action: () => { useViewerStore.getState().cameraCallbacks.fitAll?.(); } },
       { id: 'view:frame', label: 'Frame Selection', keywords: 'zoom focus selected', category: 'View', icon: Crosshair, shortcut: 'F',
         action: () => { useViewerStore.getState().cameraCallbacks.frameSelection?.(); } },
+      { id: 'view:stacked', label: 'Level — Stacked', keywords: 'level display mode stacked default storey storeys', category: 'View', icon: Layers3,
+        action: () => { useViewerStore.getState().setLevelDisplayMode('stacked'); } },
+      { id: 'view:exploded', label: 'Level — Exploded', keywords: 'level display mode exploded explode lift storey storeys gap', category: 'View', icon: ChevronsUpDown,
+        action: () => { useViewerStore.getState().setLevelDisplayMode('exploded'); } },
+      { id: 'view:solo', label: 'Level — Solo', keywords: 'level display mode solo isolate storey single only', category: 'View', icon: SquareStack,
+        action: () => { useViewerStore.getState().setLevelDisplayMode('solo'); } },
       { id: 'view:projection', label: 'Projection', keywords: 'perspective orthographic ortho toggle switch', category: 'View', icon: Orbit,
         action: () => { useViewerStore.getState().toggleProjectionMode(); } },
       { id: 'view:top', label: 'Top View', keywords: 'camera plan', category: 'View', icon: ArrowUp, shortcut: '1',
@@ -336,6 +347,20 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         action: () => { useViewerStore.getState().setActiveTool('annotate'); } },
       { id: 'tool:add-element', label: 'Add Element', keywords: 'wall slab beam column place drop new add element generic', category: 'Tools', icon: Box,
         action: () => { useViewerStore.getState().setActiveTool('addElement'); } },
+      { id: 'tool:edit-mode', label: 'Toggle Edit Mode', keywords: 'edit mode pen unlock readonly properties geometry author modify', category: 'Tools', icon: PenLine, shortcut: 'E',
+        action: () => { useViewerStore.getState().toggleEditEnabled(); } },
+      { id: 'tool:split', label: 'Split selected entity', keywords: 'split cut knife slice divide segment break wall beam column slab selected', category: 'Tools', icon: Slice, shortcut: 'K',
+        action: () => {
+          const s = useViewerStore.getState();
+          const sel = s.selectedEntity;
+          if (!sel) return;
+          s.setSplitTarget(sel.modelId, sel.expressId);
+          s.setActiveTool('split');
+        } },
+      // Add-element gestures live entirely in the AddElementPanel
+      // (opened via `setActiveTool('addElement')` — see the
+      // dedicated "Add Element" command below). Per-type shortcuts
+      // duplicated that panel's UI and have been dropped.
     );
 
     // ── Visibility ──

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/GeometryAxisRow.tsx

@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+/**
+ * One axis row inside the Geometry edit card's position section.
+ * X / Y / Z labelled input bracketed by ±step nudge buttons.
+ * Purely presentational — caller wires the input value, change
+ * handler, and the two nudge callbacks.
+ */
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface AxisRowProps {
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+  onNudgeMinus: () => void;
+  onNudgePlus: () => void;
+}
+
+export function GeometryAxisRow({ label, value, onChange, onNudgeMinus, onNudgePlus }: AxisRowProps) {
+  return (
+    <div className="flex items-center gap-1">
+      <span className="w-4 text-[11px] font-mono text-purple-700 dark:text-purple-400">{label}</span>
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        className="h-6 w-6 text-purple-600"
+        onClick={onNudgeMinus}
+        aria-label={`Decrease ${label}`}
+      >
+        −
+      </Button>
+      <Input
+        type="number"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="h-6 text-xs font-mono px-1 flex-1 border-purple-200 dark:border-purple-800/60 bg-white dark:bg-zinc-950"
+        step="any"
+      />
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        className="h-6 w-6 text-purple-600"
+        onClick={onNudgePlus}
+        aria-label={`Increase ${label}`}
+      >
+        +
+      </Button>
+    </div>
+  );
+}