@ifc-lite/viewer 1.21.0 → 1.22.1

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/LTplus-AG/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>
+  );
+}

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

@@ -0,0 +1,192 @@
+/* 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/. */
+
+/**
+ * Visual proof of where the API key (and chat content) goes when a BYOK model
+ * is in use. Two stacked paths:
+ *   row 1 (active)    browser ────► api.provider.com
+ *   row 2 (blocked)   browser ─► our server ─► api.provider.com    (struck out)
+ *
+ * The shape of the diagram is the same for every provider — only the API host
+ * label rotates. Renders crisply in light and dark mode via Tailwind utility
+ * classes.
+ */
+
+interface ByokTrustDiagramProps {
+  apiHost: string;
+}
+
+export function ByokTrustDiagram({ apiHost }: ByokTrustDiagramProps) {
+  return (
+    <svg
+      viewBox="0 0 520 200"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={`Diagram: requests go directly from your browser to ${apiHost}, not via our server.`}
+      className="w-full h-auto"
+    >
+      <defs>
+        <marker
+          id="byok-arrow-active"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerUnits="strokeWidth"
+          markerWidth="8"
+          markerHeight="8"
+          orient="auto"
+        >
+          <path d="M 0 0 L 10 5 L 0 10 z" className="fill-emerald-500" />
+        </marker>
+        <marker
+          id="byok-arrow-blocked"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerUnits="strokeWidth"
+          markerWidth="8"
+          markerHeight="8"
+          orient="auto"
+        >
+          <path d="M 0 0 L 10 5 L 0 10 z" className="fill-muted-foreground" />
+        </marker>
+      </defs>
+
+      {/* Row 1 — the path that's actually used */}
+      <g transform="translate(0, 18)">
+        <text x="0" y="-4" className="text-[10px] uppercase tracking-wider fill-emerald-600 dark:fill-emerald-400 font-semibold">
+          ✓ How your requests actually flow
+        </text>
+
+        {/* Browser box */}
+        <rect
+          x="2"
+          y="6"
+          width="120"
+          height="48"
+          rx="8"
+          className="fill-background stroke-emerald-500"
+          strokeWidth="1.75"
+        />
+        <text x="62" y="35" textAnchor="middle" className="text-[12px] fill-foreground font-medium">
+          Your browser
+        </text>
+
+        {/* Arrow */}
+        <line
+          x1="124"
+          y1="30"
+          x2="346"
+          y2="30"
+          className="stroke-emerald-500"
+          strokeWidth="2"
+          markerEnd="url(#byok-arrow-active)"
+        />
+        <text x="235" y="22" textAnchor="middle" className="text-[10px] fill-emerald-600 dark:fill-emerald-400 font-mono">
+          HTTPS · direct
+        </text>
+
+        {/* Provider API box (highlighted) */}
+        <rect
+          x="350"
+          y="6"
+          width="168"
+          height="48"
+          rx="8"
+          className="fill-emerald-500/10 stroke-emerald-500"
+          strokeWidth="1.75"
+        />
+        <text x="434" y="35" textAnchor="middle" className="text-[12px] fill-foreground font-mono">
+          {apiHost}
+        </text>
+      </g>
+
+      {/* Row 2 — what we are NOT doing */}
+      <g transform="translate(0, 116)" opacity="0.55">
+        <text x="0" y="-4" className="text-[10px] uppercase tracking-wider fill-destructive font-semibold" opacity="1">
+          ✗ What we never do
+        </text>
+
+        {/* Browser box (muted) */}
+        <rect
+          x="2"
+          y="6"
+          width="100"
+          height="44"
+          rx="6"
+          className="fill-background stroke-muted-foreground"
+          strokeWidth="1"
+          strokeDasharray="3 3"
+        />
+        <text x="52" y="33" textAnchor="middle" className="text-[11px] fill-muted-foreground">
+          Your browser
+        </text>
+
+        {/* Arrow 1 (muted, dashed) */}
+        <line
+          x1="104"
+          y1="28"
+          x2="186"
+          y2="28"
+          className="stroke-muted-foreground"
+          strokeWidth="1.25"
+          strokeDasharray="3 3"
+          markerEnd="url(#byok-arrow-blocked)"
+        />
+
+        {/* "Our server" box — struck through */}
+        <rect
+          x="190"
+          y="6"
+          width="120"
+          height="44"
+          rx="6"
+          className="fill-background stroke-muted-foreground"
+          strokeWidth="1"
+          strokeDasharray="3 3"
+        />
+        <text x="250" y="33" textAnchor="middle" className="text-[11px] fill-muted-foreground">
+          our server
+        </text>
+        {/* Strike-through across the "our server" box */}
+        <line
+          x1="184"
+          y1="44"
+          x2="316"
+          y2="12"
+          className="stroke-destructive"
+          strokeWidth="2.5"
+          opacity="0.85"
+        />
+
+        {/* Arrow 2 (muted, dashed) */}
+        <line
+          x1="312"
+          y1="28"
+          x2="394"
+          y2="28"
+          className="stroke-muted-foreground"
+          strokeWidth="1.25"
+          strokeDasharray="3 3"
+          markerEnd="url(#byok-arrow-blocked)"
+        />
+
+        {/* Provider API box (muted) */}
+        <rect
+          x="398"
+          y="6"
+          width="120"
+          height="44"
+          rx="6"
+          className="fill-background stroke-muted-foreground"
+          strokeWidth="1"
+          strokeDasharray="3 3"
+        />
+        <text x="458" y="33" textAnchor="middle" className="text-[11px] fill-muted-foreground font-mono">
+          {apiHost}
+        </text>
+      </g>
+    </svg>
+  );
+}