@ifc-lite/viewer 1.17.4 → 1.17.6

package/src/components/viewer/SettingsPage.tsx

@@ -2,23 +2,28 @@
  * 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/. */
 
-import { SignInButton, SignedIn, SignedOut, UserButton, useAuth, useUser } from '@clerk/clerk-react';
 import {
   ArrowLeft,
   Bot,
   Check,
+  ChevronDown,
+  ChevronUp,
   Clock3,
   Cloud,
   CreditCard,
+  ExternalLink,
+  Eye,
+  EyeOff,
   FolderOpen,
+  Key,
   LayoutPanelTop,
   Lock,
-  RefreshCw,
   Settings2,
   ShieldCheck,
+  Trash2,
   WifiOff,
 } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
@@ -33,21 +38,25 @@ import {
   isDesktopBillingEnforced,
   type DesktopEntitlement,
 } from '@/lib/desktop-product';
-import { isClerkConfigured } from '@/lib/llm/clerk-auth';
 import { navigateToPath } from '@/services/app-navigation';
-import { requestDesktopEntitlementRefresh } from '@/lib/desktop/desktopEntitlementEvents';
 import {
   getDesktopPreferences,
   subscribeDesktopPreferences,
   updateDesktopPreferences,
 } from '@/services/desktop-preferences';
+import {
+  getApiKeys,
+  updateApiKeys,
+  clearApiKeys,
+  subscribeApiKeys,
+  type ApiKeyConfig,
+} from '@/services/api-keys';
 
 export function SettingsPage() {
-  const clerkEnabled = isClerkConfigured();
   const desktopEntitlement = useViewerStore((s) => s.desktopEntitlement);
   const chatUsage = useViewerStore((s) => s.chatUsage);
   const [preferences, setPreferences] = useState(() => getDesktopPreferences());
-  const [isRefreshingAccount, setIsRefreshingAccount] = useState(false);
+  const [apiKeys, setApiKeys] = useState(() => getApiKeys());
   const returnTo = (() => {
     const params = new URLSearchParams(window.location.search);
     const candidate = params.get('returnTo');
@@ -56,6 +65,9 @@ export function SettingsPage() {
   useEffect(() => subscribeDesktopPreferences(() => {
     setPreferences(getDesktopPreferences());
   }), []);
+  useEffect(() => subscribeApiKeys(() => {
+    setApiKeys(getApiKeys());
+  }), []);
 
   const updatePreference = (updates: Partial<typeof preferences>) => {
     setPreferences(updateDesktopPreferences(updates));
@@ -75,19 +87,6 @@ export function SettingsPage() {
     return `${chatUsage.used}/${chatUsage.limit} ${unit} used. Resets ${resetLabel}.`;
   }, [chatUsage]);
 
-  const handleRefreshAccount = async () => {
-    setIsRefreshingAccount(true);
-    try {
-      await requestDesktopEntitlementRefresh();
-      toast.success('Account status refreshed');
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Could not refresh account status';
-      toast.error(message);
-    } finally {
-      setIsRefreshingAccount(false);
-    }
-  };
-
   return (
     <div className="min-h-screen bg-background text-foreground">
       <div className="mx-auto w-full max-w-4xl px-6 py-8">
@@ -99,6 +98,9 @@ export function SettingsPage() {
         </div>
 
         <div className="space-y-6">
+          {/* API Keys Section */}
+          <ApiKeysSection apiKeys={apiKeys} />
+
           <section className="rounded-lg border bg-card p-6 shadow-sm">
             <div className="mb-5 flex items-center gap-3">
               <ShieldCheck className="h-5 w-5" />
@@ -127,8 +129,8 @@ export function SettingsPage() {
                 icon={<CreditCard className="h-4 w-4" />}
               />
               <InfoCard
-                title="AI Usage"
-                body={usageSummary ?? 'No AI usage data yet. Pro usage appears after the first synced usage snapshot.'}
+                title="AI Usage (Free Tier)"
+                body={usageSummary ?? 'No AI usage data yet. Usage appears after the first chat message through the proxy.'}
                 icon={<Bot className="h-4 w-4" />}
               />
               <InfoCard
@@ -142,24 +144,6 @@ export function SettingsPage() {
                 icon={<WifiOff className="h-4 w-4" />}
               />
             </div>
-
-            {clerkEnabled ? (
-              <div className="flex flex-wrap gap-3">
-                <Button
-                  variant="outline"
-                  onClick={() => void handleRefreshAccount()}
-                  disabled={isRefreshingAccount}
-                >
-                  <RefreshCw className={`mr-2 h-4 w-4 ${isRefreshingAccount ? 'animate-spin' : ''}`} />
-                  Refresh Account Status
-                </Button>
-                {!hasDesktopPro(desktopEntitlement) ? (
-                  <Button onClick={() => navigateToPath(buildDesktopUpgradeUrl('/settings'))}>
-                    Upgrade to Pro
-                  </Button>
-                ) : null}
-              </div>
-            ) : null}
           </section>
 
           <section className="rounded-lg border bg-card p-6 shadow-sm">
@@ -225,7 +209,7 @@ export function SettingsPage() {
               <div>
                 <h2 className="text-xl font-semibold">Billing & Features</h2>
                 <p className="text-sm text-muted-foreground">
-                  Desktop billing is app-wide. The viewer stays available on Free, while Pro unlocks advanced desktop features and full AI access.
+                  Desktop billing is app-wide. The viewer stays available on Free, while Pro unlocks advanced desktop features.
                 </p>
               </div>
             </div>
@@ -235,9 +219,6 @@ export function SettingsPage() {
                 <div>
                   <div className="font-medium capitalize">{planTier} plan</div>
                   <p className="text-sm text-muted-foreground">{planSummary}</p>
-                  <p className="text-sm text-muted-foreground">
-                    Desktop caches the latest validated plan locally and stores the auth bearer in native secure storage when available.
-                  </p>
                 </div>
                 {isDesktopBillingEnforced() && !hasDesktopPro(desktopEntitlement) && (
                   <Button onClick={() => navigateToPath(buildDesktopUpgradeUrl('/settings'))}>
@@ -270,14 +251,6 @@ export function SettingsPage() {
                 </div>
               ))}
             </div>
-
-            {!clerkEnabled ? (
-              <div className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
-                Auth and billing are not configured in this build. Set `VITE_CLERK_PUBLISHABLE_KEY` to enable sign-in and subscription flows.
-              </div>
-            ) : (
-              <SettingsAccountSection desktopEntitlement={desktopEntitlement} />
-            )}
           </section>
 
           <section className="rounded-lg border bg-card p-6 shadow-sm">
@@ -299,7 +272,7 @@ export function SettingsPage() {
               />
               <InfoCard
                 title="Needs Network"
-                body="Cloud AI assistant, billing sync, and live bSDD lookups require network access. Cached Pro can continue during offline grace."
+                body="AI assistant (free via proxy, or direct with your API key), live bSDD lookups, and billing sync require network access."
                 icon={<Cloud className="h-4 w-4" />}
               />
             </div>
@@ -310,6 +283,231 @@ export function SettingsPage() {
   );
 }
 
+// ── API Keys Section ──────────────────────────────────────────────────────
+
+function ApiKeyInput({
+  id,
+  value,
+  onChange,
+  onSave,
+  placeholder,
+  isSaved,
+}: {
+  id: string;
+  value: string;
+  onChange: (v: string) => void;
+  onSave: () => void;
+  placeholder: string;
+  isSaved: boolean;
+}) {
+  const [show, setShow] = useState(false);
+  return (
+    <div className="flex gap-2">
+      <div className="relative flex-1">
+        <input
+          id={id}
+          type={show ? 'text' : 'password'}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter' && !isSaved) onSave(); }}
+          placeholder={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={onSave} disabled={isSaved}>
+        Save
+      </Button>
+    </div>
+  );
+}
+
+function ApiKeysSection({ apiKeys }: { apiKeys: ApiKeyConfig }) {
+  const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropicKey);
+  const [openaiKey, setOpenaiKey] = useState(apiKeys.openaiKey);
+  const [showHowTo, setShowHowTo] = useState<'anthropic' | 'openai' | null>(null);
+
+  useEffect(() => {
+    setAnthropicKey(apiKeys.anthropicKey);
+    setOpenaiKey(apiKeys.openaiKey);
+  }, [apiKeys.anthropicKey, apiKeys.openaiKey]);
+
+  const saveAnthropicKey = useCallback(() => {
+    updateApiKeys({ anthropicKey: anthropicKey.trim() });
+    toast.success(anthropicKey.trim() ? 'Anthropic API key saved' : 'Anthropic API key removed');
+  }, [anthropicKey]);
+
+  const saveOpenaiKey = useCallback(() => {
+    updateApiKeys({ openaiKey: openaiKey.trim() });
+    toast.success(openaiKey.trim() ? 'OpenAI API key saved' : 'OpenAI API key removed');
+  }, [openaiKey]);
+
+  const handleClearAll = useCallback(() => {
+    clearApiKeys();
+    setAnthropicKey('');
+    setOpenaiKey('');
+    toast.success('All API keys removed');
+  }, []);
+
+  const hasAnyKey = apiKeys.anthropicKey.length > 0 || apiKeys.openaiKey.length > 0;
+
+  return (
+    <section className="rounded-lg border bg-card p-6 shadow-sm">
+      <div className="mb-5 flex items-center gap-3">
+        <Key className="h-5 w-5" />
+        <div>
+          <h1 className="text-2xl font-semibold">API Keys</h1>
+          <p className="text-sm text-muted-foreground">
+            Bring your own Anthropic or OpenAI API key to unlock additional models.
+            You can configure one or both providers independently.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {/* Anthropic */}
+        <div className="rounded-md border p-4">
+          <div className="mb-2 flex items-center justify-between">
+            <label className="text-sm font-medium" htmlFor="anthropic-key">Anthropic API Key</label>
+            {apiKeys.anthropicKey ? (
+              <Badge variant="default" className="text-[10px]">
+                <Check className="mr-1 h-3 w-3" />
+                Configured
+              </Badge>
+            ) : (
+              <Badge variant="outline" className="text-[10px]">Not set</Badge>
+            )}
+          </div>
+          <p className="mb-2 text-xs text-muted-foreground">
+            Unlocks <strong>Claude Opus 4.6</strong>, <strong>Claude Sonnet 4.6</strong>, and <strong>Claude Haiku 4.5</strong>.
+          </p>
+          <button
+            type="button"
+            onClick={() => setShowHowTo(showHowTo === 'anthropic' ? null : 'anthropic')}
+            className="mb-3 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {showHowTo === 'anthropic' ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+            How to get an Anthropic API key
+          </button>
+          {showHowTo === 'anthropic' && (
+            <div className="mb-3 rounded-md bg-muted/50 p-3 text-xs text-muted-foreground space-y-1.5">
+              <p>1. Go to{' '}
+                <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer" className="underline inline-flex items-center gap-0.5">
+                  console.anthropic.com/settings/keys <ExternalLink className="h-2.5 w-2.5" />
+                </a>
+              </p>
+              <p>2. Sign in or create an Anthropic account</p>
+              <p>3. Click <strong>Create Key</strong>, name it (e.g. &quot;ifc-lite&quot;)</p>
+              <p>4. Copy the key (starts with <code className="bg-muted px-1 rounded">sk-ant-api03-...</code>)</p>
+              <p>5. Paste it below and click Save</p>
+              <p className="pt-1 text-muted-foreground/70">Anthropic offers $5 free credit on new accounts. After that, usage is pay-as-you-go on your Anthropic billing.</p>
+            </div>
+          )}
+          <ApiKeyInput
+            id="anthropic-key"
+            value={anthropicKey}
+            onChange={setAnthropicKey}
+            onSave={saveAnthropicKey}
+            placeholder="sk-ant-api03-..."
+            isSaved={anthropicKey.trim() === apiKeys.anthropicKey}
+          />
+        </div>
+
+        {/* OpenAI */}
+        <div className="rounded-md border p-4">
+          <div className="mb-2 flex items-center justify-between">
+            <label className="text-sm font-medium" htmlFor="openai-key">OpenAI API Key</label>
+            {apiKeys.openaiKey ? (
+              <Badge variant="default" className="text-[10px]">
+                <Check className="mr-1 h-3 w-3" />
+                Configured
+              </Badge>
+            ) : (
+              <Badge variant="outline" className="text-[10px]">Not set</Badge>
+            )}
+          </div>
+          <p className="mb-2 text-xs text-muted-foreground">
+            Unlocks <strong>GPT-5.4</strong>, <strong>GPT-5.3 Codex</strong>, and <strong>GPT-5.4 Mini</strong>.
+          </p>
+          <button
+            type="button"
+            onClick={() => setShowHowTo(showHowTo === 'openai' ? null : 'openai')}
+            className="mb-3 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {showHowTo === 'openai' ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+            How to get an OpenAI API key
+          </button>
+          {showHowTo === 'openai' && (
+            <div className="mb-3 rounded-md bg-muted/50 p-3 text-xs text-muted-foreground space-y-1.5">
+              <p>1. Go to{' '}
+                <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="underline inline-flex items-center gap-0.5">
+                  platform.openai.com/api-keys <ExternalLink className="h-2.5 w-2.5" />
+                </a>
+              </p>
+              <p>2. Sign in or create an OpenAI account</p>
+              <p>3. Click <strong>Create new secret key</strong>, name it (e.g. &quot;ifc-lite&quot;)</p>
+              <p>4. Copy the key (starts with <code className="bg-muted px-1 rounded">sk-...</code>)</p>
+              <p>5. Paste it below and click Save</p>
+              <p className="pt-1 text-muted-foreground/70">OpenAI requires prepaid credits or a payment method. Usage is billed to your OpenAI account.</p>
+            </div>
+          )}
+          <ApiKeyInput
+            id="openai-key"
+            value={openaiKey}
+            onChange={setOpenaiKey}
+            onSave={saveOpenaiKey}
+            placeholder="sk-..."
+            isSaved={openaiKey.trim() === apiKeys.openaiKey}
+          />
+        </div>
+
+        {hasAnyKey && (
+          <div className="flex justify-end">
+            <Button variant="outline" size="sm" onClick={handleClearAll}>
+              <Trash2 className="mr-2 h-3.5 w-3.5" />
+              Remove all keys
+            </Button>
+          </div>
+        )}
+
+        {/* Security & Privacy notice */}
+        <div className="rounded-md border border-dashed p-4 text-xs space-y-2">
+          <p className="font-medium text-foreground">Your API keys never leave your machine.</p>
+          <ul className="list-disc pl-4 space-y-1 text-muted-foreground">
+            <li>Keys are stored in your browser&apos;s <code className="bg-muted px-1 rounded">localStorage</code> and persist across page reloads.</li>
+            <li>When you use a BYOK model, requests go <strong>directly from your browser to the provider</strong> (Anthropic or OpenAI). They never pass through our servers.</li>
+            <li>Free models use our server proxy and do not require any API key.</li>
+            <li>Clearing your browser data or clicking &quot;Remove all keys&quot; above permanently deletes them.</li>
+          </ul>
+          <p className="text-muted-foreground pt-1">
+            <strong>Verify in your browser console:</strong> open DevTools (F12), go to the Console tab, and run:
+          </p>
+          <pre className="bg-muted rounded px-2 py-1.5 font-mono text-[11px] overflow-x-auto text-foreground">
+            {`JSON.parse(localStorage.getItem('ifc-lite:api-keys:v1') ?? '{}')`}
+          </pre>
+          <p className="text-muted-foreground">
+            This shows exactly what is stored. Only you can see it. To delete everything:
+          </p>
+          <pre className="bg-muted rounded px-2 py-1.5 font-mono text-[11px] overflow-x-auto text-foreground">
+            {`localStorage.removeItem('ifc-lite:api-keys:v1')`}
+          </pre>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
 function formatTimestamp(value: number | null): string {
   if (!value) {
     return 'Not validated yet';
@@ -342,7 +540,7 @@ function describeDesktopStatus(entitlement: DesktopEntitlement): string {
     case 'signed_out':
       return 'Signed out';
     case 'anonymous':
-      return 'Auth unavailable in this build';
+      return 'No account configured';
     default:
       return entitlement.status;
   }
@@ -381,50 +579,3 @@ function InfoCard({ title, body, icon }: { title: string; body: string; icon: Re
     </div>
   );
 }
-
-function SettingsAccountSection({ desktopEntitlement }: { desktopEntitlement: DesktopEntitlement }) {
-  const { isSignedIn } = useAuth();
-  const { user } = useUser();
-  const hasPro = hasDesktopPro(desktopEntitlement);
-  const statusLabel = describeDesktopStatus(desktopEntitlement);
-
-  return (
-    <div className="space-y-4">
-      <SignedOut>
-        <div className="rounded-md border p-4">
-          <p className="mb-3 text-sm text-muted-foreground">
-            Sign in to sync your desktop plan, subscription status, and AI usage limits across web and desktop.
-          </p>
-          <SignInButton mode="modal" forceRedirectUrl="/settings" fallbackRedirectUrl="/settings">
-            <Button>Sign in</Button>
-          </SignInButton>
-        </div>
-      </SignedOut>
-
-      <SignedIn>
-        <div className="flex items-center justify-between gap-4 rounded-md border p-4">
-          <div>
-            <div className="font-medium">
-              {user?.primaryEmailAddress?.emailAddress ?? user?.username ?? 'Signed in'}
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Plan: {hasPro ? 'Pro' : 'Free'}
-            </p>
-            <p className="text-sm text-muted-foreground">
-              Status: {statusLabel}
-            </p>
-            <p className="text-sm text-muted-foreground">
-              Last validated: {formatTimestamp(desktopEntitlement.validatedAt)}
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            <UserButton afterSignOutUrl="/" />
-            <Button onClick={() => navigateToPath(buildDesktopUpgradeUrl('/settings'))}>
-              {isSignedIn && hasPro ? 'Manage Plan' : 'Upgrade to Pro'}
-            </Button>
-          </div>
-        </div>
-      </SignedIn>
-    </div>
-  );
-}

package/src/components/viewer/ThemeSwitch.tsx

@@ -2,7 +2,7 @@
  * 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/. */
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { ThemeToggle } from 'beautiful-theme-toggle';
 import { useViewerStore } from '@/store';
 
@@ -12,10 +12,22 @@ import { useViewerStore } from '@/store';
  * Bidirectional sync:
  *  - User clicks the widget  → onChange → store.setTheme
  *  - External change (keyboard shortcut / command palette) → store updates → widget.setTheme
+ *
+ * Secret colorful mode:
+ *  - Hold Shift while clicking → toggles the hidden "colorful" theme
+ *  - The sun/moon widget can't represent a third state, so it shows "sun" (day vibes)
+ *    while the colorful gradient takes over the world.
  */
 export function ThemeSwitch() {
   const containerRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<ThemeToggle | null>(null);
+  // Track whether Shift was held during the click so we can intercept in onChange
+  const shiftHeldRef = useRef(false);
+
+  // Capture shift key state on pointerdown (fires before the widget's internal click handler)
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    shiftHeldRef.current = e.shiftKey;
+  }, []);
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -25,9 +37,36 @@ export function ThemeSwitch() {
     const toggle = new ThemeToggle({
       element: containerRef.current,
       size: 80,
-      initialState: currentTheme,
-      onChange: (state) => {
-        useViewerStore.getState().setTheme(state);
+      // Colorful → show sun (it's a bright/day-ish theme)
+      initialState: currentTheme === 'dark' ? 'dark' : 'light',
+      onChange: (widgetState) => {
+        const store = useViewerStore.getState();
+
+        if (shiftHeldRef.current) {
+          // Secret shift-click: toggle colorful mode
+          shiftHeldRef.current = false;
+          store.toggleColorful();
+
+          // Sync widget visual: colorful → sun, otherwise follow the new theme
+          const newTheme = useViewerStore.getState().theme;
+          const widgetTarget = newTheme === 'dark' ? 'dark' : 'light';
+          if (toggleRef.current && toggleRef.current.getTheme() !== widgetTarget) {
+            toggleRef.current.setTheme(widgetTarget, false);
+          }
+          return;
+        }
+
+        // Normal click: dark ↔ light (if colorful, drops to dark)
+        shiftHeldRef.current = false;
+        store.toggleTheme();
+
+        // The widget already animated to widgetState, but toggleTheme may have
+        // produced a different result (e.g. colorful → dark). Reconcile:
+        const newTheme = useViewerStore.getState().theme;
+        const expectedWidget = newTheme === 'dark' ? 'dark' : 'light';
+        if (toggleRef.current && widgetState !== expectedWidget) {
+          toggleRef.current.setTheme(expectedWidget, false);
+        }
       },
     });
 
@@ -38,8 +77,9 @@ export function ThemeSwitch() {
     const unsub = useViewerStore.subscribe((state) => {
       if (state.theme !== prevTheme) {
         prevTheme = state.theme;
-        if (toggleRef.current && toggleRef.current.getTheme() !== state.theme) {
-          toggleRef.current.setTheme(state.theme, false);
+        const widgetTarget = state.theme === 'dark' ? 'dark' : 'light';
+        if (toggleRef.current && toggleRef.current.getTheme() !== widgetTarget) {
+          toggleRef.current.setTheme(widgetTarget, false);
         }
       }
     });
@@ -51,5 +91,21 @@ export function ThemeSwitch() {
     };
   }, []);
 
-  return <div ref={containerRef} className="flex items-center cursor-pointer opacity-80 hover:opacity-100 transition-opacity" />;
+  const theme = useViewerStore((s) => s.theme);
+  const isColorful = theme === 'colorful';
+
+  return (
+    <div
+      ref={containerRef}
+      onPointerDown={handlePointerDown}
+      className={`flex items-center cursor-pointer transition-all duration-300 ${
+        isColorful
+          ? 'opacity-100 scale-110'
+          : 'opacity-80 hover:opacity-100'
+      }`}
+      style={isColorful ? {
+        filter: 'drop-shadow(0 0 6px rgba(157,124,216,0.5)) drop-shadow(0 0 12px rgba(255,158,100,0.25))',
+      } : undefined}
+    />
+  );
 }

package/src/components/viewer/ViewerLayout.tsx

@@ -186,6 +186,7 @@ export function ViewerLayout() {
   // Keep DOM class in sync when theme changes (initial class is set by inline script in index.html)
   useEffect(() => {
     document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.classList.toggle('colorful', theme === 'colorful');
   }, [theme]);
 
 

package/src/components/viewer/Viewport.tsx

@@ -312,7 +312,7 @@ export function Viewport({
     if (cesiumActive) {
       clearColorRef.current = [0, 0, 0, 0]; // fully transparent
     } else {
-      clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark');
+      clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark' | 'colorful');
     }
     rendererRef.current?.requestRender();
   }, [cesiumActive, theme]);
@@ -878,13 +878,25 @@ export function Viewport({
   // The model will be rendered by Cesium (as GLB) for correct positioning.
   // Canvas stays in the DOM for picking/interaction.
 
+  // Colorful mode: transparent WebGPU clear colour + CSS gradient on the
+  // canvas element.  The gradient is the *CSS background* of the <canvas>;
+  // premultiplied-alpha compositing shows it through transparent clear-colour
+  // regions while opaque model fragments (alpha=1) stay fully visible.
+  const canvasStyle = cesiumActive
+    ? { opacity: 0 }
+    : theme === 'colorful'
+      ? {
+          background: 'linear-gradient(180deg, #4a5a8a 0%, #6272a8 10%, #7e8dba 20%, #9aa3c8 32%, #b5b8d1 44%, #cdc3d4 56%, #dcccc8 68%, #e8d5be 80%, #f0ddb8 92%, #f5e2b6 100%)',
+        }
+      : undefined;
+
   return (
     <canvas
       ref={canvasRef}
       data-viewport="main"
       tabIndex={-1}
       className={`w-full h-full block ${cesiumActive ? 'relative z-[1]' : ''}`}
-      style={cesiumActive ? { opacity: 0 } : undefined}
+      style={canvasStyle}
       onPointerDown={focusViewportForKeyboardShortcuts}
     />
   );