fix: replace crypto.randomUUID() with HTTP-compatible implementation

crypto.randomUUID() is only available in secure contexts (HTTPS or localhost),
causing errors when running Docker containers over plain HTTP.

Use crypto.getRandomValues() with RFC 4122 UUID v4 generation which works
in all contexts. Falls back to Math.random() for very old browsers.

Updated:
- clipboard.ts: Added generateUUID() helper
- Keys.tsx: Use generateUUID() instead of crypto.randomUUID()

Fixes #221

Author: mcowger

packages/frontend/src/lib/clipboard.ts

@@ -1,10 +1,9 @@
 /**
- * Clipboard utility that handles secure and non-secure contexts.
+ * Clipboard and crypto utility that handles secure and non-secure contexts.
  *
- * The Clipboard API (navigator.clipboard) is only available in secure contexts
- * (HTTPS or localhost). In non-secure HTTP contexts, we fall back to
- * document.execCommand('copy') which also won't work, so we properly
- * detect availability and provide feedback.
+ * The Clipboard API (navigator.clipboard) and crypto.randomUUID() are only available
+ * in secure contexts (HTTPS or localhost). In non-secure HTTP contexts, we provide
+ * fallbacks that work everywhere.
  */
 
 /**
@@ -49,3 +48,32 @@ export const copyToClipboard = async (text: string): Promise<boolean> => {
     return false;
   }
 };
+
+/**
+ * Generate a UUID v4 using crypto.getRandomValues().
+ * Works in both secure (HTTPS) and non-secure (HTTP) contexts.
+ * Falls back to Math.random() if crypto is unavailable.
+ */
+export const generateUUID = (): string => {
+  // Use crypto.getRandomValues if available (works in all contexts including HTTP)
+  if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+
+    // Set version (4) and variant (2) bits per RFC 4122
+    bytes[6] = (bytes[6] & 0x0f) | 0x40; // Version 4
+    bytes[8] = (bytes[8] & 0x3f) | 0x80; // Variant 10
+
+    // Convert to hex string with dashes
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+  }
+
+  // Fallback to Math.random() - not cryptographically secure but sufficient for API keys
+  // when running in very old browsers without crypto support
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};

packages/frontend/src/pages/Keys.tsx

@@ -22,7 +22,7 @@ import {
   BarChart3,
 } from 'lucide-react';
 import { formatNumber, formatCost } from '../lib/format';
-import { isClipboardAvailable, copyToClipboard } from '../lib/clipboard';
+import { isClipboardAvailable, copyToClipboard, generateUUID } from '../lib/clipboard';
 
 const EMPTY_KEY: KeyConfig = {
   key: '',
@@ -252,7 +252,7 @@ export const Keys = () => {
   };
 
   const generateKey = () => {
-    const uuid = crypto.randomUUID();
+    const uuid = generateUUID();
     setEditingKey({ ...editingKey, secret: `sk-${uuid}` });
   };