@ifc-lite/viewer 1.21.0 → 1.22.0

package/src/components/viewer/ViewportOverlays.tsx

@@ -8,16 +8,10 @@ import {
   ZoomIn,
   ZoomOut,
   Layers,
-  Globe2,
-  Mountain,
-  Building2,
-  Satellite,
-  X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
-import type { CesiumDataSource } from '@/store/slices/cesiumSlice';
 import { goHomeFromStore } from '@/store/homeView';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
@@ -41,11 +35,6 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
 
   // Cesium state
   const cesiumEnabled = useViewerStore((s) => s.cesiumEnabled);
-  const cesiumDataSource = useViewerStore((s) => s.cesiumDataSource);
-  const setCesiumDataSource = useViewerStore((s) => s.setCesiumDataSource);
-  const cesiumTerrainEnabled = useViewerStore((s) => s.cesiumTerrainEnabled);
-  const setCesiumTerrainEnabled = useViewerStore((s) => s.setCesiumTerrainEnabled);
-  const toggleCesium = useViewerStore((s) => s.toggleCesium);
 
   // Use refs for rotation to avoid re-renders - ViewCube updates itself directly
   const cameraRotationRef = useRef({ azimuth: 45, elevation: 25 });
@@ -152,16 +141,8 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
   return (
     <>
       <PointCloudPanelMount />
-      {/* Bottom-right: Cesium settings overlay OR Navigation controls (Cesium is web-only) */}
-      {cesiumEnabled && !isDesktop ? (
-        <CesiumSettingsOverlay
-          dataSource={cesiumDataSource}
-          onDataSourceChange={setCesiumDataSource}
-          terrainEnabled={cesiumTerrainEnabled}
-          onTerrainChange={setCesiumTerrainEnabled}
-          onClose={toggleCesium}
-        />
-      ) : (
+      {/* Bottom-right: Navigation controls (hidden when Cesium active — Cesium is web-only) */}
+      {!(cesiumEnabled && !isDesktop) && (
         <div
           className={cn(
             'absolute flex flex-col gap-1 bg-background/90 backdrop-blur-sm border p-1',
@@ -250,83 +231,6 @@ export function ViewportOverlays({ hideViewCube = false }: { hideViewCube?: bool
   );
 }
 
-/* ------------------------------------------------------------------ */
-/*  Cesium Settings Overlay — replaces nav controls when Cesium is on  */
-/* ------------------------------------------------------------------ */
-
-const DATA_SOURCES: { value: CesiumDataSource; label: string; icon: typeof Globe2 }[] = [
-  { value: 'google-photorealistic', label: 'Google 3D', icon: Globe2 },
-  { value: 'osm-buildings', label: 'OSM', icon: Building2 },
-  { value: 'bing-aerial', label: 'Aerial', icon: Satellite },
-];
-
-function CesiumSettingsOverlay({
-  dataSource,
-  onDataSourceChange,
-  terrainEnabled,
-  onTerrainChange,
-  onClose,
-}: {
-  dataSource: CesiumDataSource;
-  onDataSourceChange: (ds: CesiumDataSource) => void;
-  terrainEnabled: boolean;
-  onTerrainChange: (enabled: boolean) => void;
-  onClose: () => void;
-}) {
-  return (
-    <div className="absolute bottom-4 right-4 z-10 pointer-events-auto bg-background/90 backdrop-blur-sm rounded-lg border shadow-lg p-2 flex flex-col gap-2 min-w-[160px]">
-      {/* Header */}
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-          3D World
-        </span>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="ghost" size="icon-sm" className="h-5 w-5" onClick={onClose}>
-              <X className="h-3 w-3" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="left">Disable Cesium overlay</TooltipContent>
-        </Tooltip>
-      </div>
-
-      {/* Data Source Buttons */}
-      <div className="flex flex-col gap-0.5">
-        {DATA_SOURCES.map((ds) => {
-          const Icon = ds.icon;
-          const active = dataSource === ds.value;
-          return (
-            <button
-              key={ds.value}
-              onClick={() => onDataSourceChange(ds.value)}
-              className={cn(
-                'flex items-center gap-2 px-2 py-1.5 rounded text-xs transition-colors text-left',
-                active
-                  ? 'bg-teal-600 text-white'
-                  : 'hover:bg-muted text-foreground/80',
-              )}
-            >
-              <Icon className="h-3.5 w-3.5 shrink-0" />
-              {ds.label}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Terrain Toggle */}
-      <label className="flex items-center gap-2 px-2 py-1 cursor-pointer border-t border-border pt-2">
-        <Mountain className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-        <span className="text-xs text-foreground/80">Terrain</span>
-        <input
-          type="checkbox"
-          checked={terrainEnabled}
-          onChange={(e) => onTerrainChange(e.target.checked)}
-          className="ml-auto accent-teal-500"
-        />
-      </label>
-    </div>
-  );
-}
 
 /**
  * Tiny indirection so the panel can subscribe to its own slice without

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

@@ -0,0 +1,338 @@
+/* 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/. */
+
+/**
+ * Trust-focused BYOK API key entry modal.
+ *
+ * Replaces the inline password-style strip in ChatPanel. Renders one tab per
+ * supported provider; each tab pairs the request-flow SVG with concrete,
+ * DevTools-verifiable trust claims and an "Open Console → Create Key →
+ * paste here" walkthrough.
+ *
+ * Clipboard handling: we deliberately do NOT do background `clipboard.readText()`
+ * polling. Modern browsers gate that behind either transient user activation
+ * or an explicit clipboard-read permission we can't request a prompt for —
+ * and on macOS Chromium, every silent read triggers the native Paste affordance
+ * even though we silently swallow the result. Instead, the input is autofocused
+ * on open so the user's Cmd+V lands directly in the field, and a green inline
+ * confirmation appears the moment the pasted value matches the provider shape.
+ *
+ * The web build ships this. Desktop also uses it (the /settings page is
+ * desktop-only and not deployed on Vercel).
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Check, ChevronDown, ChevronUp, ExternalLink, Eye, EyeOff, Key, Trash2 } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { toast } from '@/components/ui/toast';
+import { ByokTrustDiagram } from './ByokTrustDiagram';
+import { getByokModelsForSource } from '@/lib/llm/models';
+import {
+  getApiKeys,
+  updateApiKeys,
+  subscribeApiKeys,
+  type ApiKeyConfig,
+} from '@/services/api-keys';
+import {
+  looksLikeProviderKey,
+  maskKey,
+  type BYOKProvider,
+} from '@/lib/llm/clipboard-detect';
+
+const REPO_BLOB = 'https://github.com/louistrue/ifc-lite/blob/main';
+
+const PROVIDER_META: Record<BYOKProvider, {
+  label: string;
+  apiHost: string;
+  keyPrefix: string;
+  placeholder: string;
+  consoleUrl: string;
+  consoleLabel: string;
+  pricingHint: string;
+}> = {
+  anthropic: {
+    label: 'Anthropic',
+    apiHost: 'api.anthropic.com',
+    keyPrefix: 'sk-ant-api03-',
+    placeholder: 'sk-ant-api03-...',
+    consoleUrl: 'https://console.anthropic.com/settings/keys',
+    consoleLabel: 'console.anthropic.com',
+    pricingHint: 'Pay-as-you-go on Anthropic billing. New accounts get $5 free credit.',
+  },
+  openai: {
+    label: 'OpenAI',
+    apiHost: 'api.openai.com',
+    keyPrefix: 'sk-',
+    placeholder: 'sk-...',
+    consoleUrl: 'https://platform.openai.com/api-keys',
+    consoleLabel: 'platform.openai.com',
+    pricingHint: 'OpenAI requires prepaid credits or a payment method on your OpenAI account.',
+  },
+};
+
+interface ByokKeyModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialProvider?: BYOKProvider;
+}
+
+export function ByokKeyModal({ open, onOpenChange, initialProvider = 'anthropic' }: ByokKeyModalProps) {
+  const [provider, setProvider] = useState<BYOKProvider>(initialProvider);
+  const [apiKeys, setApiKeys] = useState<ApiKeyConfig>(() => getApiKeys());
+
+  // Re-sync the controlled tab whenever the modal re-opens with a (possibly new) initial provider.
+  useEffect(() => {
+    if (open) setProvider(initialProvider);
+  }, [open, initialProvider]);
+
+  // Keep saved-state badges in sync across open/save/clear.
+  useEffect(() => {
+    setApiKeys(getApiKeys());
+    return subscribeApiKeys(() => setApiKeys(getApiKeys()));
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Key className="h-4 w-4" />
+            Use your own API key
+          </DialogTitle>
+          <DialogDescription>
+            Unlocks frontier models. Your key stays in this browser and goes
+            straight to the provider — never through our servers.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Tabs value={provider} onValueChange={(v) => setProvider(v as BYOKProvider)}>
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger
+              value="anthropic"
+              className="flex items-center gap-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=active]:font-semibold"
+            >
+              Anthropic
+              {apiKeys.anthropicKey && <Check className="h-3 w-3 text-emerald-500" />}
+            </TabsTrigger>
+            <TabsTrigger
+              value="openai"
+              className="flex items-center gap-1.5 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=active]:font-semibold"
+            >
+              OpenAI
+              {apiKeys.openaiKey && <Check className="h-3 w-3 text-emerald-500" />}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="anthropic" className="mt-4">
+            <ProviderTab provider="anthropic" savedKey={apiKeys.anthropicKey} />
+          </TabsContent>
+          <TabsContent value="openai" className="mt-4">
+            <ProviderTab provider="openai" savedKey={apiKeys.openaiKey} />
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ── Per-provider tab body ──────────────────────────────────────────────────
+
+function ProviderTab({ provider, savedKey }: { provider: BYOKProvider; savedKey: string }) {
+  const meta = PROVIDER_META[provider];
+
+  const [value, setValue] = useState('');
+  const [show, setShow] = useState(false);
+  const [walkthroughOpen, setWalkthroughOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const unlockedModels = useMemo(() => getByokModelsForSource(provider), [provider]);
+
+  // Autofocus the input so the user's Cmd+V lands directly in the field
+  // without an extra click. Re-runs on tab switch.
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [provider]);
+
+  const handleSave = useCallback((next: string) => {
+    const trimmed = next.trim();
+    if (!trimmed) return;
+    const field = provider === 'anthropic' ? 'anthropicKey' : 'openaiKey';
+    updateApiKeys({ [field]: trimmed });
+    setValue('');
+    toast.success(`${PROVIDER_META[provider].label} key saved`);
+  }, [provider]);
+
+  const handleClear = useCallback(() => {
+    const field = provider === 'anthropic' ? 'anthropicKey' : 'openaiKey';
+    updateApiKeys({ [field]: '' });
+    toast.success(`${PROVIDER_META[provider].label} key removed`);
+  }, [provider]);
+
+  const handleOpenConsole = useCallback(() => {
+    window.open(meta.consoleUrl, '_blank', 'noopener,noreferrer');
+  }, [meta.consoleUrl]);
+
+  const trimmedValue = value.trim();
+  const inputIsValid = trimmedValue.length === 0 || looksLikeProviderKey(provider, value);
+  const inputLooksGood = trimmedValue.length > 0 && looksLikeProviderKey(provider, value) && trimmedValue !== savedKey;
+
+  return (
+    <div className="space-y-4">
+      {/* Models unlocked */}
+      <div className="flex flex-wrap items-center gap-1.5">
+        <span className="text-xs text-muted-foreground">Unlocks:</span>
+        {unlockedModels.map((m) => (
+          <Badge key={m.id} variant="outline" className="text-[10px] font-mono">
+            {m.name}
+          </Badge>
+        ))}
+      </div>
+
+      {/* The diagram — single most important trust element */}
+      <div className="rounded-lg border bg-card/40 p-4">
+        <ByokTrustDiagram apiHost={meta.apiHost} />
+      </div>
+
+      {/* DevTools-verifiable trust claims */}
+      <ul className="space-y-2 text-xs">
+        <TrustBullet>
+          Key stored only in this browser&apos;s <code className="bg-muted px-1 rounded">localStorage</code>.{' '}
+          Inspect any time in DevTools.
+        </TrustBullet>
+        <TrustBullet>
+          Every request goes to <code className="bg-muted px-1 rounded">{meta.apiHost}</code>. Verify in DevTools →
+          Network → filter <code className="bg-muted px-1 rounded">{meta.apiHost.split('.').slice(-2).join('.')}</code>.
+        </TrustBullet>
+        <TrustBullet>
+          The whole BYOK code path is ~60 lines.{' '}
+          <a
+            href={`${REPO_BLOB}/apps/viewer/src/lib/llm/stream-direct.ts`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline inline-flex items-center gap-0.5 hover:text-foreground"
+          >
+            Read it on GitHub <ExternalLink className="h-2.5 w-2.5" />
+          </a>
+        </TrustBullet>
+      </ul>
+
+      {/* Paste-driven key entry. The input is autofocused on mount so Cmd+V
+          lands here immediately after the user returns from the provider
+          console — no extra click required. */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium" htmlFor={`byok-${provider}-input`}>
+          {savedKey ? 'Replace existing key' : 'Paste your key'}
+        </label>
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <input
+              ref={inputRef}
+              id={`byok-${provider}-input`}
+              type={show ? 'text' : 'password'}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter' && inputIsValid) handleSave(value); }}
+              placeholder={meta.placeholder}
+              autoComplete="off"
+              spellCheck={false}
+              className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-ring pr-8"
+            />
+            <button
+              type="button"
+              onClick={() => setShow(!show)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label={show ? 'Hide key' : 'Show key'}
+            >
+              {show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+            </button>
+          </div>
+          <Button size="sm" onClick={() => handleSave(value)} disabled={!inputIsValid || trimmedValue.length === 0}>
+            Save
+          </Button>
+        </div>
+        {inputLooksGood && (
+          <p className="text-[11px] text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
+            <Check className="h-3 w-3" />
+            Looks like a {meta.label} key (<code className="font-mono">{maskKey(trimmedValue)}</code>) — press Enter or Save.
+          </p>
+        )}
+        {!inputIsValid && (
+          <p className="text-[11px] text-destructive">
+            That doesn&apos;t look like a {meta.label} key (expected prefix{' '}
+            <code className="font-mono">{meta.keyPrefix}</code>).
+          </p>
+        )}
+      </div>
+
+      {/* Currently configured key + remove */}
+      {savedKey && (
+        <div className="flex items-center justify-between gap-3 rounded-md border p-3 text-xs">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Check className="h-3.5 w-3.5 text-emerald-500" />
+            Configured: <code className="font-mono text-foreground">{maskKey(savedKey)}</code>
+          </div>
+          <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={handleClear}>
+            <Trash2 className="mr-1 h-3 w-3" />
+            Remove
+          </Button>
+        </div>
+      )}
+
+      {/* Walkthrough */}
+      <div className="rounded-md border bg-muted/20">
+        <button
+          type="button"
+          onClick={() => setWalkthroughOpen((v) => !v)}
+          aria-expanded={walkthroughOpen}
+          aria-controls={`byok-walkthrough-${provider}`}
+          className="w-full flex items-center justify-between gap-2 p-3 text-xs hover:bg-muted/30 transition-colors"
+        >
+          <span className="font-medium">Don&apos;t have a key? 60-second walkthrough</span>
+          {walkthroughOpen ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+        </button>
+        {walkthroughOpen && (
+          <div id={`byok-walkthrough-${provider}`} className="border-t p-3 space-y-2.5 text-xs">
+            <ol className="space-y-2 list-decimal list-inside text-muted-foreground">
+              <li>
+                Open the {meta.label} console — opens in a new tab.
+              </li>
+              <li>
+                Click <strong>Create Key</strong>, name it <code className="bg-muted px-1 rounded">ifc-lite</code>.
+              </li>
+              <li>
+                Set a spending limit (e.g.&nbsp;$10/month) so a leaked key can&apos;t burn you. The provider enforces it.
+              </li>
+              <li>
+                Copy the key, come back here, paste it into the input above (the field is already focused — just press <code className="bg-muted px-1 rounded">⌘V</code>).
+              </li>
+            </ol>
+            <p className="text-[11px] text-muted-foreground/80">{meta.pricingHint}</p>
+            <Button size="sm" variant="outline" className="text-xs" onClick={handleOpenConsole}>
+              <ExternalLink className="mr-1.5 h-3 w-3" />
+              Open {meta.consoleLabel}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TrustBullet({ children }: { children: React.ReactNode }) {
+  return (
+    <li className="flex items-start gap-2 text-muted-foreground">
+      <Check className="h-3.5 w-3.5 mt-0.5 flex-shrink-0 text-emerald-500" />
+      <span>{children}</span>
+    </li>
+  );
+}

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

@@ -0,0 +1,62 @@
+/* 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/. */
+
+/**
+ * Trust pill — small badge sitting near the model name in the chat header
+ * that names the actual API host requests are going to when a BYOK route is
+ * active. Always-on for BYOK models (not just during streaming) so users can
+ * see at a glance where their data is going, without having to open DevTools.
+ *
+ * Returns null for proxy/free routes — the pill is a BYOK-specific trust
+ * signal; we don't need a "→ our proxy" pill cluttering the UI for the
+ * default tier.
+ */
+
+import { useEffect, useState } from 'react';
+import { Lock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { resolveStreamRoute } from '@/lib/llm/byok-guard';
+import { getApiKeys, subscribeApiKeys, type ApiKeyConfig } from '@/services/api-keys';
+
+interface ByokStreamingPillProps {
+  modelId: string;
+  className?: string;
+}
+
+export function ByokStreamingPill({ modelId, className }: ByokStreamingPillProps) {
+  const [apiKeys, setApiKeys] = useState<ApiKeyConfig>(() => getApiKeys());
+  useEffect(() => subscribeApiKeys(() => setApiKeys(getApiKeys())), []);
+
+  const route = resolveStreamRoute(modelId, apiKeys);
+  if (route.kind !== 'anthropic' && route.kind !== 'openai') return null;
+
+  const host = route.kind === 'anthropic' ? 'api.anthropic.com' : 'api.openai.com';
+  const shortHost = route.kind === 'anthropic' ? 'anthropic.com' : 'openai.com';
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={cn(
+            'inline-flex shrink-0 items-center gap-1 rounded-full border border-emerald-500/40 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-mono text-emerald-700 dark:text-emerald-400',
+            className,
+          )}
+        >
+          <Lock className="h-2.5 w-2.5" />
+          {shortHost}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs text-xs leading-relaxed">
+        Messages from this model go directly from your browser to{' '}
+        <code className="font-mono">{host}</code>. To verify, open DevTools →
+        Network and filter <code className="font-mono">{shortHost}</code>.
+      </TooltipContent>
+    </Tooltip>
+  );
+}