@ifc-lite/viewer 1.17.3 → 1.17.6

package/src/components/viewer/CesiumSettingsDialog.tsx

@@ -0,0 +1,100 @@
+/* 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/. */
+
+/**
+ * Settings dialog for configuring Cesium 3D overlay options:
+ * - Data source selection (OSM Buildings, Bing Aerial, Google Photorealistic)
+ * - Terrain toggle
+ * - Advanced: custom Cesium ion token override (optional — default is bundled)
+ */
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { useViewerStore } from '@/store';
+import type { CesiumDataSource } from '@/store/slices/cesiumSlice';
+import { Settings2 } from 'lucide-react';
+
+const DATA_SOURCE_OPTIONS: { value: CesiumDataSource; label: string; description: string }[] = [
+  { value: 'osm-buildings', label: 'OSM Buildings', description: 'OpenStreetMap 3D buildings worldwide' },
+  { value: 'bing-aerial', label: 'Bing Aerial', description: 'Satellite imagery draped on terrain' },
+  { value: 'google-photorealistic', label: 'Google Photorealistic', description: 'High-fidelity 3D photogrammetry (where available)' },
+];
+
+export function CesiumSettingsDialog() {
+  const dataSource = useViewerStore((s) => s.cesiumDataSource);
+  const setCesiumDataSource = useViewerStore((s) => s.setCesiumDataSource);
+  const terrainEnabled = useViewerStore((s) => s.cesiumTerrainEnabled);
+  const setCesiumTerrainEnabled = useViewerStore((s) => s.setCesiumTerrainEnabled);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="icon-sm" className="h-6 w-6" aria-label="Cesium settings">
+          <Settings2 className="h-3 w-3" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm font-bold">3D World Context</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-2">
+          {/* Data Source */}
+          <div className="space-y-1.5">
+            <Label className="text-xs font-medium">3D Data Source</Label>
+            <div className="space-y-1">
+              {DATA_SOURCE_OPTIONS.map((opt) => (
+                <label
+                  key={opt.value}
+                  className={`flex items-start gap-2 p-2 rounded border cursor-pointer transition-colors ${
+                    dataSource === opt.value
+                      ? 'border-teal-500 bg-teal-50 dark:bg-teal-950/30'
+                      : 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="cesium-data-source"
+                    checked={dataSource === opt.value}
+                    onChange={() => setCesiumDataSource(opt.value)}
+                    className="mt-0.5 accent-teal-500"
+                  />
+                  <div>
+                    <div className="text-xs font-medium">{opt.label}</div>
+                    <div className="text-[10px] text-zinc-400">{opt.description}</div>
+                  </div>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          {/* Terrain Toggle */}
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={terrainEnabled}
+              onChange={(e) => setCesiumTerrainEnabled(e.target.checked)}
+              className="accent-teal-500"
+            />
+            <span className="text-xs">Enable 3D terrain (Cesium World Terrain)</span>
+          </label>
+
+          <p className="text-[10px] text-zinc-400 border-t border-zinc-100 dark:border-zinc-800 pt-3">
+            Powered by Cesium ion. Real-world 3D tiles are overlaid on your georeferenced
+            IFC model. Only available when the model contains IfcMapConversion data.
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/viewer/ChatPanel.tsx

@@ -29,14 +29,15 @@ import {
   ArrowDown,
   Zap,
 } from 'lucide-react';
-import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/clerk-react';
 import { Button } from '@/components/ui/button';
+import { toast } from '@/components/ui/toast';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
 import { buildErrorFeedbackContent } from '@/store/slices/chatSlice';
 import { ChatMessageComponent } from './chat/ChatMessage';
 import { ModelSelector } from './chat/ModelSelector';
 import { fetchUsageSnapshot, streamChat, type StreamMessage, type TextContentPart, type ImageContentPart, type UsageInfo } from '@/lib/llm/stream-client';
+import { streamAnthropicChat, streamOpenAiChat } from '@/lib/llm/stream-direct';
 import { buildStreamMessagesForModel, filterAttachmentsForModel } from '@/lib/llm/message-capabilities';
 import { buildSystemPrompt } from '@/lib/llm/system-prompt';
 import { getModelContext, parseCSV } from '@/lib/llm/context-builder';
@@ -48,9 +49,11 @@ 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 { Image as ImageIcon } from 'lucide-react';
-import { isClerkConfigured } from '@/lib/llm/clerk-auth';
+import { Check, Image as ImageIcon, Key, Eye, EyeOff, ExternalLink } 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 { useSandbox } from '@/hooks/useSandbox';
 
 // Environment variable for the proxy URL
@@ -64,7 +67,6 @@ const EXAMPLE_PROMPTS = [
 ];
 
 const CONTINUE_PROMPT = 'Continue from exactly where your last response stopped. Do not repeat previously generated text.';
-const DEFAULT_PRO_MONTHLY_CREDIT_LIMIT = 1000;
 const USAGE_REFRESH_INTERVAL_MS = 15_000;
 const EST_CHARS_PER_TOKEN = 4;
 const IMAGE_TOKEN_COST_EST = 850;
@@ -208,21 +210,30 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   const consumePendingPrompt = useViewerStore((s) => s.consumeChatPendingPrompt);
   const pendingRepairRequest = useViewerStore((s) => s.chatPendingRepairRequest);
   const consumePendingRepairRequest = useViewerStore((s) => s.consumeChatPendingRepairRequest);
-  const authToken = useViewerStore((s) => s.chatAuthToken);
-  const hasPro = useViewerStore((s) => s.chatHasPro);
+  const hasByokKey = useViewerStore((s) => s.chatHasByokKey);
+  const setChatHasByokKey = useViewerStore((s) => s.setChatHasByokKey);
   const usage = useViewerStore((s) => s.chatUsage);
   const setChatUsage = useViewerStore((s) => s.setChatUsage);
+  const desktopEntitlement = useViewerStore((s) => s.desktopEntitlement);
   const { execute } = useSandbox();
-  const displayUsage: UsageInfo | null = usage ?? (hasPro
-    ? {
-      type: 'credits',
-      used: 0,
-      limit: DEFAULT_PRO_MONTHLY_CREDIT_LIMIT,
-      pct: 0,
-      resetAt: 0,
-      billable: false,
-    }
-    : null);
+  const canUseAiAssistant = hasDesktopFeatureAccess(desktopEntitlement, 'ai_assistant');
+
+  // Sync BYOK key availability into the store and track per-provider state
+  const [keyStateAnthropic, setKeyStateAnthropic] = useState(hasAnthropicKey);
+  const [keyStateOpenai, setKeyStateOpenai] = useState(hasOpenaiKey);
+  useEffect(() => {
+    const refresh = () => {
+      const a = hasAnthropicKey();
+      const o = hasOpenaiKey();
+      setKeyStateAnthropic(a);
+      setKeyStateOpenai(o);
+      setChatHasByokKey(a || o);
+    };
+    refresh();
+    return subscribeApiKeys(refresh);
+  }, [setChatHasByokKey]);
+
+  const displayUsage: UsageInfo | null = usage;
   const usageResetLabel = displayUsage?.resetAt && displayUsage.resetAt > 0
     ? new Date(displayUsage.resetAt * 1000).toLocaleDateString()
     : '—';
@@ -233,6 +244,10 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   const [showScrollBtn, setShowScrollBtn] = useState(false);
   const [userScrolledUp, setUserScrolledUp] = useState(false);
   const [lastFinishReason, setLastFinishReason] = useState<string | null>(null);
+  const promptAiUpgrade = useCallback(() => {
+    setChatError('AI assistant is available with Desktop Pro.');
+    toast.info('AI assistant is available with Desktop Pro');
+  }, [setChatError]);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -294,7 +309,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   useEffect(() => {
     let cancelled = false;
     const refreshUsage = async () => {
-      const snapshot = await fetchUsageSnapshot(PROXY_URL, authToken);
+      const snapshot = await fetchUsageSnapshot(PROXY_URL);
       if (!cancelled && snapshot) {
         setChatUsage(snapshot);
       }
@@ -309,7 +324,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       cancelled = true;
       window.clearInterval(timer);
     };
-  }, [authToken, setChatUsage]);
+  }, [setChatUsage]);
 
   // ── Keyboard shortcuts ──
   useEffect(() => {
@@ -385,6 +400,24 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   // ── Core send logic ──
   const doSend = useCallback(async (text: string, options?: ChatSendOptions) => {
     if (!text.trim() || status === 'streaming' || status === 'sending') return;
+    if (!canUseAiAssistant) {
+      setChatError('AI assistant is available with Desktop Pro.');
+      return;
+    }
+
+    // Resolve the stream route BEFORE any user-visible side effects (adding
+    // the user message, clearing attachments, setting sending state). If the
+    // selected BYOK model has no key, bail out now so the chat transcript
+    // doesn't stack orphaned user messages on repeated sends.
+    const route = resolveStreamRoute(activeModel, getApiKeys());
+    if (route.kind === 'missing-key') {
+      setChatError(
+        route.provider === 'anthropic'
+          ? 'Enter your Anthropic API key above to use this model.'
+          : 'Enter your OpenAI API key above to use this model.',
+      );
+      return;
+    }
 
     const continuationBase = options?.continuationBase;
     const responseIntent = options?.intent ?? 'create';
@@ -571,14 +604,8 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       }
     };
 
-    await streamChat({
-      proxyUrl: PROXY_URL,
-      model: activeModel,
-      messages: streamMessages,
-      system: systemPrompt,
-      authToken,
-      signal: abortController.signal,
-      onChunk: (chunk) => {
+    // ── Shared stream callbacks ──
+    const handleChunk = (chunk: string) => {
         clearPendingAttachmentsOnce();
         accumulated += chunk;
         if (!responseEditState.applyFailed && responseEditState.intent !== 'repair') {
@@ -612,8 +639,8 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
         }
         setChatStatus('streaming');
         updateStreaming(accumulated);
-      },
-      onComplete: (fullText) => {
+    };
+    const handleComplete = (fullText: string) => {
         clearPendingAttachmentsOnce();
         const normalizedText = continuationBase
           ? stripContinuationOverlap(continuationBase, fullText)
@@ -755,22 +782,62 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
         }
 
         commitAssistantTurn();
-      },
-      onUsageInfo: (info: UsageInfo) => {
+    };
+    const handleUsageInfo = (info: UsageInfo) => {
         setChatUsage(info);
-      },
-      onFinishReason: (reason) => {
+    };
+    const handleFinishReason = (reason: string | null) => {
         setLastFinishReason(reason);
         if (reason === 'length') {
           setChatError('Response reached output limit. Click Continue to resume.');
         }
-      },
-      onError: (err) => {
+    };
+    const handleError = (err: Error) => {
         setChatError(err.message);
         setChatAbortController(null);
         commitAssistantTurn();
-      },
-    });
+    };
+
+    // Route to direct provider streaming for BYOK models, or through the proxy
+    // for free models. The route was already resolved (and the missing-key
+    // case handled) at the top of doSend, so this dispatch is total.
+    if (route.kind === 'anthropic') {
+      await streamAnthropicChat(route.apiKey, {
+        model: activeModel,
+        messages: streamMessages,
+        system: systemPrompt,
+        signal: abortController.signal,
+        onChunk: handleChunk,
+        onComplete: handleComplete,
+        onFinishReason: handleFinishReason,
+        onError: handleError,
+      });
+    } else if (route.kind === 'openai') {
+      await streamOpenAiChat(route.apiKey, {
+        model: activeModel,
+        messages: streamMessages,
+        system: systemPrompt,
+        signal: abortController.signal,
+        onChunk: handleChunk,
+        onComplete: handleComplete,
+        onFinishReason: handleFinishReason,
+        onError: handleError,
+      });
+    } else {
+      await streamChat({
+        proxyUrl: PROXY_URL,
+        model: activeModel,
+        messages: streamMessages,
+        system: systemPrompt,
+        signal: abortController.signal,
+        onChunk: handleChunk,
+        onComplete: handleComplete,
+        onFinishReason: handleFinishReason,
+        onError: handleError,
+        onUsageInfo: handleUsageInfo,
+      });
+    }
+
     if (abortController.signal.aborted) {
       commitAssistantTurn();
       const currentState = useViewerStore.getState();
@@ -780,15 +847,19 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       }
     }
   }, [
-    status, activeModel, attachments, authToken,
+    canUseAiAssistant, status, activeModel, attachments,
     addMessage, setChatStatus, updateStreaming, finalizeAssistant,
     setChatError, setChatAbortController, clearAttachments, setChatUsage, resizeInput,
     buildRepairPromptFromLiveState, triggerAutoRepair, execute,
   ]);
 
   const handleSend = useCallback(() => {
+    if (!canUseAiAssistant) {
+      promptAiUpgrade();
+      return;
+    }
     doSend(inputText);
-  }, [inputText, doSend]);
+  }, [canUseAiAssistant, doSend, inputText, promptAiUpgrade]);
 
   // Allow other panels (e.g. ScriptPanel errors) to trigger a chat repair turn.
   useEffect(() => {
@@ -817,6 +888,10 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   }, [pendingRepairRequest, status, consumePendingRepairRequest, buildRepairPromptFromLiveState, doSend]);
 
   const handleContinue = useCallback(() => {
+    if (!canUseAiAssistant) {
+      promptAiUpgrade();
+      return;
+    }
     const state = useViewerStore.getState();
     const partial = state.chatStreamingContent.trim();
     const lastAssistant = [...state.chatMessages].reverse().find((m) => m.role === 'assistant');
@@ -829,7 +904,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
     }
     setChatError(null);
     doSend(CONTINUE_PROMPT, { continuationBase });
-  }, [doSend, finalizeAssistant, setChatError]);
+  }, [canUseAiAssistant, doSend, finalizeAssistant, promptAiUpgrade, setChatError]);
 
   const handleStop = useCallback(() => {
     const controller = useViewerStore.getState().chatAbortController;
@@ -854,6 +929,10 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
 
   // ── Error feedback (Fix this) ──
   const handleFixError = useCallback((code: string, errorMsg: string) => {
+    if (!canUseAiAssistant) {
+      promptAiUpgrade();
+      return;
+    }
     const diagnostics = useViewerStore.getState().scriptLastDiagnostics;
     const liveCode = useViewerStore.getState().scriptEditorContent;
     const staleCode = code.trim() !== liveCode.trim() ? code : undefined;
@@ -868,7 +947,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       requestedRepairScope: getPrimaryRootCause(diagnostics)?.repairScope,
       rootCauseKey: getPrimaryRootCause(diagnostics)?.rootCauseKey,
     });
-  }, [buildRepairPromptFromLiveState, doSend]);
+  }, [buildRepairPromptFromLiveState, canUseAiAssistant, doSend, promptAiUpgrade]);
 
   // ── Clickable example prompts ──
   const handleExampleClick = useCallback((prompt: string) => {
@@ -898,6 +977,10 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
 
   // ── File upload (button + drag-drop + paste) ──
   const processFiles = useCallback(async (files: FileList | File[]) => {
+    if (!canUseAiAssistant) {
+      promptAiUpgrade();
+      return;
+    }
     const model = getModelById(activeModel);
     const supportsImages = model?.supportsImages ?? false;
     const supportsFileAttachments = model?.supportsFileAttachments ?? true;
@@ -965,7 +1048,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
         setChatError(`Could not read ${file.name}: ${error instanceof Error ? error.message : String(error)}`);
       }
     }
-  }, [activeModel, addAttachment, attachments.length, setChatError]);
+  }, [activeModel, addAttachment, attachments.length, canUseAiAssistant, promptAiUpgrade, setChatError]);
 
   const handleFileUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
@@ -1038,19 +1121,15 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
     modelSupportsImages ? 'image/*' : '',
   ].filter(Boolean).join(',');
   const canAttachInput = modelSupportsFiles || modelSupportsImages;
-  const clerkEnabled = isClerkConfigured();
-  const showUpgradeNudge = Boolean(error && (error.includes('Upgrade to Pro') || error.includes('daily limit')));
+  // Detect when selected model needs a missing BYOK key (reactive state, not raw reads)
+  const modelSource = modelForUi?.source ?? 'proxy';
+  const needsAnthropicKey = modelSource === 'anthropic' && !keyStateAnthropic;
+  const needsOpenaiKey = modelSource === 'openai' && !keyStateOpenai;
+  const needsByokKey = needsAnthropicKey || needsOpenaiKey;
   const showSupportEmail = Boolean(error && error.includes('louis@ltplus.com'));
   const canContinue = Boolean(
     !isActive && (streamingContent.trim().length > 0 || lastFinishReason === 'length'),
   );
-  const openUpgradePage = useCallback(() => {
-    const currentPath = `${window.location.pathname}${window.location.search}`;
-    const target = `/upgrade?returnTo=${encodeURIComponent(currentPath)}`;
-    window.history.pushState({}, '', target);
-    window.dispatchEvent(new PopStateEvent('popstate'));
-  }, []);
-
   return (
     <div
       className="h-full flex flex-col bg-background relative"
@@ -1085,7 +1164,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
           <TooltipContent>Clear</TooltipContent>
         </Tooltip>
 
-        <ModelSelector hasPro={hasPro} />
+        <ModelSelector />
         <div className="flex-1" />
 
         <Tooltip>
@@ -1102,31 +1181,6 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
           <TooltipContent>Auto-run: {autoExecute ? 'ON' : 'OFF'}</TooltipContent>
         </Tooltip>
 
-        {clerkEnabled && (
-          <>
-            <SignedOut>
-              <SignInButton mode="modal">
-                <Button variant="ghost" size="sm" className="h-6 px-2 text-xs text-muted-foreground">
-                  Sign in
-                </Button>
-              </SignInButton>
-            </SignedOut>
-            {!hasPro && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 px-2 text-xs text-muted-foreground"
-                onClick={openUpgradePage}
-              >
-                Pro
-              </Button>
-            )}
-            <SignedIn>
-              <UserButton afterSignOutUrl="/" />
-            </SignedIn>
-          </>
-        )}
-
         {onClose && (
           <Button variant="ghost" size="icon-xs" onClick={onClose}>
             <X className="h-3.5 w-3.5" />
@@ -1134,6 +1188,17 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
         )}
       </div>
 
+      {!canUseAiAssistant && (
+        <div className="border-b bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
+          AI assistant requires Desktop Pro. Core viewing and scripting stay available without it.
+        </div>
+      )}
+
+      {/* Inline BYOK key prompt — shown when user picks a model without the matching key */}
+      {needsByokKey && canUseAiAssistant && (
+        <InlineKeyPrompt provider={needsAnthropicKey ? 'anthropic' : 'openai'} />
+      )}
+
       {/* Clear confirmation */}
       {showClearConfirm && (
         <div className="px-3 py-2 bg-destructive/5 border-b flex items-center gap-2 text-xs">
@@ -1238,16 +1303,6 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
                 Continue
               </Button>
             )}
-            {showUpgradeNudge && clerkEnabled && (
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-5 px-2 text-[10px]"
-                onClick={openUpgradePage}
-              >
-                Upgrade
-              </Button>
-            )}
             {showSupportEmail && (
               <a className="underline text-[10px]" href="mailto:louis@ltplus.com">
                 Contact support
@@ -1308,14 +1363,16 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
                 variant="ghost"
                 size="icon-xs"
                 onClick={() => fileInputRef.current?.click()}
-                disabled={!canAttachInput}
+                disabled={!canAttachInput || !canUseAiAssistant}
                 className="shrink-0 mb-0.5"
               >
                 <Paperclip className="h-3.5 w-3.5" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              {canAttachInput
+              {!canUseAiAssistant
+                ? 'AI assistant not available'
+                : canAttachInput
                 ? 'Attach file or image (paste, drag & drop)'
                 : 'Selected model does not support attachments'}
             </TooltipContent>
@@ -1330,10 +1387,11 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
             }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
-            placeholder="Ask anything..."
+            placeholder={!canUseAiAssistant ? 'AI assistant not available' : needsByokKey ? `Enter your ${needsAnthropicKey ? 'Anthropic' : 'OpenAI'} API key above` : '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' }}
+            disabled={!canUseAiAssistant || needsByokKey}
           />
 
           {isActive ? (
@@ -1357,7 +1415,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
                   variant="default"
                   size="icon-xs"
                   onClick={handleSend}
-                  disabled={!inputText.trim()}
+                  disabled={!inputText.trim() || !canUseAiAssistant || needsByokKey}
                   className="shrink-0 mb-0.5"
                 >
                   <Send className="h-3.5 w-3.5" />
@@ -1400,3 +1458,87 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
     </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>
+    </div>
+  );
+}

package/src/components/viewer/CommandPalette.tsx

@@ -70,6 +70,7 @@ import { SCRIPT_TEMPLATES } from '@/lib/scripts/templates';
 import { GLTFExporter, CSVExporter } from '@ifc-lite/export';
 import { getRecentFiles, formatFileSize, getCachedFile } from '@/lib/recent-files';
 import type { RecentFileEntry } from '@/lib/recent-files';
+import { closeActiveAnalysisExtension } from '@/services/analysis-extensions';
 
 // ── Types ──────────────────────────────────────────────────────────────
 
@@ -189,6 +190,8 @@ function activateRightPanel(panel: 'bcf' | 'ids' | 'lens') {
     panel === 'ids' ? s.idsPanelVisible :
     s.lensPanelVisible;
 
+  closeActiveAnalysisExtension();
+
   // Close all content panels
   s.setBcfPanelVisible(false);
   s.setIdsPanelVisible(false);
@@ -211,6 +214,8 @@ function activateBottomPanel(panel: 'script' | 'list') {
   const s = useViewerStore.getState();
   const isActive = panel === 'script' ? s.scriptPanelVisible : s.listPanelVisible;
 
+  closeActiveAnalysisExtension();
+
   // Close all bottom panels
   s.setScriptPanelVisible(false);
   s.setListPanelVisible(false);
@@ -270,7 +275,7 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         detail: formatFileSize(rf.size),
         action: () => {
           // Try loading from IndexedDB blob cache → dispatches to MainToolbar's loadFile
-          getCachedFile(fileName).then(file => {
+          getCachedFile(rf).then(file => {
             if (file) {
               window.dispatchEvent(new CustomEvent('ifc-lite:load-file', { detail: file }));
             } else {