feat: implement 2 free build limits and BYOK modal

web/src/components/BillingModal.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { api } from '../api';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export const BillingModal = ({ isOpen, onClose, onKeySaved }: { isOpen: boolean, onClose: () => void, onKeySaved: () => void }) => {
+  const [apiKey, setApiKey] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSaveKey = async () => {
+    if (!apiKey.trim()) return;
+    setSaving(true);
+    setError('');
+    try {
+      await api.post('/profile/api-key', { api_key: apiKey.trim() });
+      onKeySaved();
+      onClose();
+    } catch (err: any) {
+      setError(err.response?.data?.detail || 'Failed to securely store API key.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <div className="billing-modal-overlay">
+        <motion.div 
+          className="sci-fi-card billing-modal-content"
+          initial={{ opacity: 0, scale: 0.95, y: 10 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 10 }}
+          transition={{ duration: 0.2 }}
+        >
+          <button className="billing-modal-close" onClick={onClose}>✕</button>
+          
+          <div className="billing-header">
+            <div className="billing-icon">⚠️</div>
+            <h2 className="billing-title">Build Limit Reached</h2>
+          </div>
+          
+          <p className="billing-sub">
+            You've used your 2 free autonomous chip builds! To continue generating RTL and running Silicon validations, you must provide your own LLM API key or upgrade your plan.
+          </p>
+
+          <div className="byok-section">
+            <h3 className="byok-title">Bring Your Own Key (BYOK)</h3>
+            <p className="byok-desc">
+              Enter an OpenAI, Anthropic, or Groq API key. Your key is <strong>AES-256 encrypted at rest</strong> using a secure server-side key and is never logged or exposed.
+            </p>
+            
+            <input
+              className="byok-input"
+              type="password"
+              placeholder="sk-..."
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              autoFocus
+            />
+            
+            {error && <div className="byok-error">{error}</div>}
+            
+            <button
+              className="action-btn byok-submit"
+              onClick={handleSaveKey}
+              disabled={saving || !apiKey.trim()}
+            >
+              {saving ? (
+                <span>Encrypting & Saving...</span>
+              ) : (
+                <span>Save Encrypted Key →</span>
+              )}
+            </button>
+          </div>
+
+          <div className="billing-footer">
+            or <a href="mailto:sales@agentic.ai" className="billing-link">contact sales</a> for an Enterprise/Pro Plan.
+          </div>
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+};

web/src/index.css

@@ -3482,3 +3482,184 @@ body {
   color: var(--fail);
   border-color: var(--fail-bdr);
 }
+
+/* ==========================================================================
+   BILLING MODAL (BYOK)
+   ========================================================================== */
+
+.billing-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(12, 11, 10, 0.85);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.billing-modal-content {
+  width: 100%;
+  max-width: 480px;
+  position: relative;
+  padding: 2rem !important;
+  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%) !important;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
+  overflow: visible !important;
+}
+
+.billing-modal-close {
+  position: absolute;
+  top: 1.25rem;
+  right: 1.25rem;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: color var(--fast);
+  padding: 0.2rem;
+}
+
+.billing-modal-close:hover {
+  color: var(--text);
+}
+
+.billing-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.billing-icon {
+  font-size: 1.5rem;
+}
+
+.billing-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+.billing-sub {
+  color: var(--text-mid);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+}
+
+.byok-section {
+  background: var(--bg);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.byok-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0 0 0.5rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.byok-title::before {
+  content: "🔑";
+  font-size: 1rem;
+}
+
+.byok-desc {
+  font-size: 0.82rem;
+  color: var(--text-dim);
+  margin: 0 0 1.25rem 0;
+  line-height: 1.5;
+}
+
+.byok-desc strong {
+  color: var(--text-mid);
+  font-weight: 600;
+}
+
+.byok-input {
+  width: 100%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.85rem 1rem;
+  color: var(--text);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.9rem;
+  outline: none;
+  transition: all var(--fast);
+  margin-bottom: 1rem;
+}
+
+.byok-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(201, 100, 62, 0.15);
+}
+
+.byok-error {
+  color: var(--fail);
+  font-size: 0.85rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.byok-error::before {
+  content: "✕";
+  font-weight: 700;
+}
+
+.byok-submit {
+  width: 100%;
+  background: var(--text);
+  color: var(--bg);
+  border: none;
+  padding: 0.85rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.byok-submit:not(:disabled):hover {
+  background: #FFF;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
+}
+
+.byok-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.billing-footer {
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--text-dim);
+}
+
+.billing-link {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color var(--fast);
+}
+
+.billing-link:hover {
+  text-decoration: underline;
+}

web/src/pages/DesignStudio.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { BuildMonitor } from '../components/BuildMonitor';
 import { ChipSummary } from '../components/ChipSummary';
+import { BillingModal } from '../components/BillingModal';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { api, API_BASE } from '../api';
 
@@ -44,6 +45,10 @@ export const DesignStudio = () => {
     const [result, setResult] = useState<any>(null);
     const [error, setError] = useState('');
 
+    // Billing / Profile State
+    const [profile, setProfile] = useState<{ auth_enabled: boolean, plan: string, successful_builds: number, has_byok_key: boolean } | null>(null);
+    const [showBillingModal, setShowBillingModal] = useState(false);
+
     // Build Options
     const [skipOpenlane, setSkipOpenlane] = useState(false);
     const [skipCoverage, setSkipCoverage] = useState(false);
@@ -74,9 +79,26 @@ export const DesignStudio = () => {
         }
     }, [prompt]);
 
+    // Fetch Profile Limits
+    useEffect(() => {
+        api.get('/profile')
+            .then(res => setProfile(res.data))
+            .catch(() => setProfile(null)); // Ignored explicitly if no auth
+    }, []);
+
     const handleLaunch = async () => {
         if (!prompt.trim()) return;
         setError('');
+
+        // Billing Guard: enforce 2 free successful builds
+        if (profile?.auth_enabled) {
+            const { plan, successful_builds, has_byok_key } = profile;
+            if (plan === 'free' && successful_builds >= 2 && !has_byok_key) {
+                setShowBillingModal(true);
+                return;
+            }
+        }
+
         try {
             const res = await api.post(`/build`, {
                 design_name: designName || slugify(prompt),
@@ -438,6 +460,15 @@ export const DesignStudio = () => {
                 )}
 
             </AnimatePresence>
+
+            <BillingModal 
+                isOpen={showBillingModal}
+                onClose={() => setShowBillingModal(false)}
+                onKeySaved={() => {
+                    // Update profile locally to unblock
+                    setProfile(prev => prev ? { ...prev, has_byok_key: true } : null);
+                }}
+            />
         </div>
     );
 };