// ApiKeySetup — Paid: encrypted key on server. Preview: optional key in localStorage + claude-proxy-preview.
const API_KEY_STORAGE = 'bwc_anthropic_key';
const PREVIEW_KEY_STORAGE = 'bwc_preview_anthropic_key';
function getApiKey() {
try { return localStorage.getItem(API_KEY_STORAGE) || ''; }
catch { return ''; }
}
function getPreviewApiKey() {
try { return localStorage.getItem(PREVIEW_KEY_STORAGE) || ''; }
catch { return ''; }
}
function savePreviewApiKey(key) {
try { localStorage.setItem(PREVIEW_KEY_STORAGE, (key || '').trim()); }
catch {}
}
function saveApiKey(key) {
try { localStorage.setItem(API_KEY_STORAGE, key); }
catch {}
}
function clearApiKey() {
try { localStorage.removeItem(API_KEY_STORAGE); }
catch {}
}
async function callClaude(prompt, moduleId) {
if (typeof window !== 'undefined' && window.__BWC_PREVIEW_MODE) {
const mid = moduleId != null ? Number(moduleId) : 1;
if (mid !== 1) throw new Error('PREVIEW_MODULE_ONLY');
const anthropic_key = getPreviewApiKey();
if (!anthropic_key) throw new Error('NO_ANTHROPIC_KEY');
const response = await fetch('/api/claude-proxy-preview', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prompt,
model: 'claude-haiku-4-5-20251001',
max_tokens: 1024,
anthropic_key,
module_id: 1,
}),
});
if (!response.ok) {
const err = await response.json().catch(() => ({}));
if (response.status === 401) throw new Error('INVALID_KEY');
if (response.status === 429) throw new Error('RATE_LIMITED');
if (response.status === 403) throw new Error('PREVIEW_MODULE_ONLY');
throw new Error(err.error || `Server error ${response.status}`);
}
const data = await response.json();
return data.text;
}
const token = localStorage.getItem('bwc_session');
if (!token) throw new Error('NO_SESSION');
const response = await fetch('/api/claude-proxy', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ prompt, model: 'claude-haiku-4-5-20251001', max_tokens: 1024 })
});
if (!response.ok) {
const err = await response.json().catch(() => ({}));
if (response.status === 401) throw new Error('NO_SESSION');
if (response.status === 402) throw new Error(err.code || 'NO_ANTHROPIC_KEY');
if (response.status === 429) throw new Error('RATE_LIMITED');
throw new Error(err.error || `Server error ${response.status}`);
}
const data = await response.json();
return data.text;
}
function ApiKeyPanel({ onClose, isOverlay = false, previewMode = false }) {
const [previewInput, setPreviewInput] = React.useState(() => getPreviewApiKey());
const hasKey = previewMode ? !!getPreviewApiKey() : localStorage.getItem('bwc_has_api_key') === '1';
if (previewMode) {
const content = (
Your Anthropic API key
Free Module 1 preview
{onClose && }
Paste your key from console.anthropic.com. It stays in your browser only and is sent through our proxy for AI review — we don’t store it. You pay Anthropic directly for usage.