@ifc-lite/viewer 1.17.4 → 1.18.0

package/src/components/viewer/ChatPanel.tsx

@@ -29,7 +29,6 @@ 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';
@@ -38,6 +37,7 @@ 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';
@@ -49,11 +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 { buildDesktopUpgradeUrl, hasDesktopFeatureAccess } from '@/lib/desktop-product';
-import { navigateToPath } from '@/services/app-navigation';
+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
@@ -67,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;
@@ -80,11 +79,24 @@ const MAX_INLINE_IMAGE_DATA_URL_CHARS = 1_200_000;
 const MAX_ATTACHMENTS_PER_MESSAGE = 6;
 const MAX_TEXT_ATTACHMENT_BYTES = 512_000;
 const MAX_IMAGE_ATTACHMENT_BYTES = 8_000_000;
+/** Anthropic's PDF content-block limit is ~32 MB; keep our upload cap lower. */
+const MAX_PDF_ATTACHMENT_BYTES = 16_000_000;
 
 function createAttachmentId(): string {
   return crypto.randomUUID();
 }
 
+/** Convert an ArrayBuffer (binary file) to raw base64 — no data-URL prefix. */
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + chunk)));
+  }
+  return btoa(binary);
+}
+
 interface ChatSendOptions {
   continuationBase?: string;
   intent?: ScriptMutationIntent;
@@ -211,23 +223,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 canUseAiAssistant = hasDesktopFeatureAccess(desktopEntitlement, 'ai_assistant');
-  const displayUsage: UsageInfo | null = usage ?? (hasPro
-    ? {
-      type: 'credits',
-      used: 0,
-      limit: DEFAULT_PRO_MONTHLY_CREDIT_LIMIT,
-      pct: 0,
-      resetAt: 0,
-      billable: false,
-    }
-    : null);
+
+  // 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()
     : '—';
@@ -238,14 +257,10 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   const [showScrollBtn, setShowScrollBtn] = useState(false);
   const [userScrolledUp, setUserScrolledUp] = useState(false);
   const [lastFinishReason, setLastFinishReason] = useState<string | null>(null);
-  const openUpgradePage = useCallback(() => {
-    navigateToPath(buildDesktopUpgradeUrl());
-  }, []);
   const promptAiUpgrade = useCallback(() => {
     setChatError('AI assistant is available with Desktop Pro.');
     toast.info('AI assistant is available with Desktop Pro');
-    openUpgradePage();
-  }, [openUpgradePage, setChatError]);
+  }, [setChatError]);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -307,7 +322,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);
       }
@@ -322,7 +337,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       cancelled = true;
       window.clearInterval(timer);
     };
-  }, [authToken, setChatUsage]);
+  }, [setChatUsage]);
 
   // ── Keyboard shortcuts ──
   useEffect(() => {
@@ -403,6 +418,20 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       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';
     if (responseIntent !== 'repair') {
@@ -588,14 +617,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') {
@@ -629,8 +652,8 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
         }
         setChatStatus('streaming');
         updateStreaming(accumulated);
-      },
-      onComplete: (fullText) => {
+    };
+    const handleComplete = (fullText: string) => {
         clearPendingAttachmentsOnce();
         const normalizedText = continuationBase
           ? stripContinuationOverlap(continuationBase, fullText)
@@ -772,22 +795,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();
@@ -797,7 +860,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       }
     }
   }, [
-    canUseAiAssistant, status, activeModel, attachments, authToken,
+    canUseAiAssistant, status, activeModel, attachments,
     addMessage, setChatStatus, updateStreaming, finalizeAssistant,
     setChatError, setChatAbortController, clearAttachments, setChatUsage, resizeInput,
     buildRepairPromptFromLiveState, triggerAutoRepair, execute,
@@ -969,7 +1032,54 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
           remainingSlots -= 1;
           continue;
         }
-        // Only accept text-based files
+        // PDFs are supported by Claude as native document content blocks.
+        // Route them separately from text attachments so the chat request
+        // can emit the correct multimodal block type.
+        if (file.name.match(/\.pdf$/i) || file.type === 'application/pdf') {
+          if (!supportsFileAttachments) {
+            setChatError('Selected model does not support file attachments. Switch model to attach PDFs.');
+            continue;
+          }
+          if (file.size > MAX_PDF_ATTACHMENT_BYTES) {
+            setChatError(`PDF attachments must be smaller than ${Math.round(MAX_PDF_ATTACHMENT_BYTES / 1_000_000)} MB.`);
+            continue;
+          }
+          const buffer = await file.arrayBuffer();
+          const base64 = arrayBufferToBase64(buffer);
+          const attachment: FileAttachment = {
+            id: createAttachmentId(),
+            name: file.name,
+            type: 'application/pdf',
+            size: file.size,
+            pdfBase64: base64,
+            isPdf: true,
+          };
+          addAttachment(attachment);
+          remainingSlots -= 1;
+          continue;
+        }
+        // Excel / ODS binaries — we can't parse them yet, but we don't want
+        // to silently drop them. Register a metadata-only attachment so the
+        // user (and the LLM via the system prompt) know it's there and can
+        // suggest exporting as CSV.
+        if (file.name.match(/\.(xlsx|xls|ods)$/i)) {
+          if (!supportsFileAttachments) {
+            setChatError('Selected model does not support file attachments. Switch model to attach spreadsheets.');
+            continue;
+          }
+          const attachment: FileAttachment = {
+            id: createAttachmentId(),
+            name: file.name,
+            type: file.type || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            size: file.size,
+            isSpreadsheetBinary: true,
+            textContent: `[Binary spreadsheet ${file.name} (${Math.round(file.size / 1024)} KB). Export to CSV for full content access.]`,
+          };
+          addAttachment(attachment);
+          remainingSlots -= 1;
+          continue;
+        }
+        // Text-based files — CSV, TSV, JSON, TXT
         if (!file.name.match(/\.(csv|json|txt|tsv)$/i)) continue;
         if (!supportsFileAttachments) {
           setChatError('Selected model does not support file attachments. Switch model to attach files.');
@@ -1067,12 +1177,17 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
   const modelSupportsImages = modelForUi?.supportsImages ?? false;
   const modelSupportsFiles = modelForUi?.supportsFileAttachments ?? true;
   const attachmentAccept = [
-    modelSupportsFiles ? '.csv,.json,.txt,.tsv' : '',
+    modelSupportsFiles
+      ? '.csv,.json,.txt,.tsv,.pdf,application/pdf,.xlsx,.xls,.ods,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.oasis.opendocument.spreadsheet'
+      : '',
     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'),
@@ -1111,7 +1226,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
           <TooltipContent>Clear</TooltipContent>
         </Tooltip>
 
-        <ModelSelector hasPro={hasPro} />
+        <ModelSelector />
         <div className="flex-1" />
 
         <Tooltip>
@@ -1128,31 +1243,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" />
@@ -1161,14 +1251,16 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
       </div>
 
       {!canUseAiAssistant && (
-        <div className="border-b bg-muted/40 px-3 py-2 text-xs text-muted-foreground flex items-center justify-between gap-3">
-          <span>AI assistant is available with Desktop Pro. Core viewing and scripting stay available without it.</span>
-          <Button variant="outline" size="sm" className="h-6 px-2 text-xs" onClick={openUpgradePage}>
-            Upgrade
-          </Button>
+        <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">
@@ -1273,16 +1365,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
@@ -1351,7 +1433,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
             </TooltipTrigger>
             <TooltipContent>
               {!canUseAiAssistant
-                ? 'Desktop Pro required for AI assistant'
+                ? 'AI assistant not available'
                 : canAttachInput
                 ? 'Attach file or image (paste, drag & drop)'
                 : 'Selected model does not support attachments'}
@@ -1367,11 +1449,11 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
             }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
-            placeholder={canUseAiAssistant ? 'Ask anything...' : 'Desktop Pro required for AI assistant'}
+            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}
+            disabled={!canUseAiAssistant || needsByokKey}
           />
 
           {isActive ? (
@@ -1395,7 +1477,7 @@ export function ChatPanel({ onClose }: ChatPanelProps) {
                   variant="default"
                   size="icon-xs"
                   onClick={handleSend}
-                  disabled={!inputText.trim() || !canUseAiAssistant}
+                  disabled={!inputText.trim() || !canUseAiAssistant || needsByokKey}
                   className="shrink-0 mb-0.5"
                 >
                   <Send className="h-3.5 w-3.5" />
@@ -1438,3 +1520,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

@@ -53,6 +53,11 @@ import {
   FolderOpen,
   Clock,
   Save,
+  CalendarClock,
+  CalendarPlus,
+  Sparkles,
+  Eraser,
+  MapPin,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useViewerStore } from '@/store';
@@ -207,23 +212,28 @@ function activateRightPanel(panel: 'bcf' | 'ids' | 'lens') {
   // If was active → all closed → falls back to Properties
 }
 
-/** Exclusively activate a bottom panel (Script / List).
+/** Exclusively activate a bottom panel (Script / List / Gantt).
  *  Closes the other first so the if-else chain in ViewerLayout renders it.
  *  If the target is already active, closes it. */
-function activateBottomPanel(panel: 'script' | 'list') {
+function activateBottomPanel(panel: 'script' | 'list' | 'gantt') {
   const s = useViewerStore.getState();
-  const isActive = panel === 'script' ? s.scriptPanelVisible : s.listPanelVisible;
+  const isActive =
+    panel === 'script' ? s.scriptPanelVisible
+    : panel === 'list' ? s.listPanelVisible
+    : s.ganttPanelVisible;
 
   closeActiveAnalysisExtension();
 
-  // Close all bottom panels
+  // Close all bottom panels — only one slots into the bottom strip at a time.
   s.setScriptPanelVisible(false);
   s.setListPanelVisible(false);
+  s.setGanttPanelVisible(false);
 
   if (!isActive) {
     s.setRightPanelCollapsed(false);
     if (panel === 'script') s.setScriptPanelVisible(true);
-    else s.setListPanelVisible(true);
+    else if (panel === 'list') s.setListPanelVisible(true);
+    else s.setGanttPanelVisible(true);
   }
 }
 
@@ -322,6 +332,10 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         action: () => { useViewerStore.getState().setActiveTool('measure'); } },
       { id: 'tool:section', label: 'Section', keywords: 'clip cut plane', category: 'Tools', icon: Scissors, shortcut: 'X',
         action: () => { useViewerStore.getState().setActiveTool('section'); } },
+      { id: 'tool:annotate', label: 'Annotate', keywords: 'pin note comment marker', category: 'Tools', icon: MapPin, shortcut: 'P',
+        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'); } },
     );
 
     // ── Visibility ──
@@ -362,7 +376,7 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
 
     // ── Panels ──
     c.push(
-      { id: 'panel:properties', label: 'Properties', keywords: 'attributes panel right', category: 'Panels', icon: Layout,
+      { id: 'panel:properties', label: 'Inspector', keywords: 'properties attributes material classification schedule task panel right', category: 'Panels', icon: Layout,
         action: () => { const s = useViewerStore.getState(); s.setRightPanelCollapsed(!s.rightPanelCollapsed); } },
       { id: 'panel:tree', label: 'Spatial Tree', keywords: 'hierarchy left panel', category: 'Panels', icon: TreeDeciduous,
         action: () => { const s = useViewerStore.getState(); s.setLeftPanelCollapsed(!s.leftPanelCollapsed); } },
@@ -372,12 +386,47 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         action: () => { activateRightPanel('bcf'); } },
       { id: 'panel:ids', label: 'IDS Validation', keywords: 'information delivery specification check', category: 'Panels', icon: ClipboardCheck,
         action: () => { activateRightPanel('ids'); } },
-      { id: 'panel:lists', label: 'Entity Lists', keywords: 'table spreadsheet schedule', category: 'Panels', icon: FileSpreadsheet,
+      { id: 'panel:lists', label: 'Entity Lists', keywords: 'table spreadsheet', category: 'Panels', icon: FileSpreadsheet,
         action: () => { activateBottomPanel('list'); } },
+      { id: 'panel:gantt', label: 'Construction Schedule (Gantt)', keywords: '4d timeline tasks ifctask sequence playback animation', category: 'Panels', icon: CalendarClock,
+        action: () => { activateBottomPanel('gantt'); } },
       { id: 'panel:lens', label: 'Lens Rules', keywords: 'color filter highlight', category: 'Panels', icon: Palette,
         action: () => { activateRightPanel('lens'); } },
     );
 
+    // ── Schedule / 4D (Tools) ─────────────────────────────
+    c.push(
+      { id: 'schedule:generate', label: 'Generate Schedule from Storeys…',
+        keywords: '4d ifctask construction sequence storey building create gantt',
+        category: 'Tools', icon: CalendarPlus,
+        action: () => {
+          // Make sure the Gantt panel is mounted so the dialog has a host
+          // before flipping the dialog flag. Order matters — closing other
+          // panels first prevents the bottom strip from rendering them.
+          const s = useViewerStore.getState();
+          if (!s.ganttPanelVisible) activateBottomPanel('gantt');
+          // Same tick is fine — the dialog is portalled via Radix and doesn't
+          // depend on GanttPanel finishing its first render.
+          useViewerStore.getState().setGenerateScheduleDialogOpen(true);
+        } },
+      { id: 'schedule:toggle-animation', label: 'Toggle 4D Construction Animation',
+        keywords: 'play pause schedule task gantt simulation',
+        category: 'Visibility', icon: Sparkles,
+        action: () => {
+          const s = useViewerStore.getState();
+          s.setAnimationEnabled(!s.animationEnabled);
+        } },
+      { id: 'schedule:reset', label: 'Reset Schedule (Clear 4D Data)',
+        keywords: 'remove gantt tasks ifctask delete clear',
+        category: 'Tools', icon: Eraser,
+        action: () => {
+          const s = useViewerStore.getState();
+          s.setScheduleData(null);
+          s.setAnimationEnabled(false);
+          s.pauseSchedule();
+        } },
+    );
+
     // ── Export ──
     c.push(
       { id: 'export:screenshot', label: 'Screenshot', keywords: 'capture png image viewport', category: 'Export', icon: Camera,