feat: comprehensive API key management system

Added complete API key management with 4 major features:

1. **Payment Integration**
   - Created PaymentModal component with credit packages
   - Bonus credits for larger purchases (5-35% savings)
   - Estimated usage calculations
   - Simulated payment flow (ready for Stripe integration)

2. **Real API Key Validation**
   - Enhanced validation with actual Gemini API test calls
   - Validates API key format and connectivity
   - Handles quota/rate limit errors gracefully
   - Provides clear error messages

3. **Balance Alerts**
   - BalanceAlert component shows low/critical balance warnings
   - Thresholds: $5 (low) and $1 (critical)
   - Animated critical alerts
   - Dismissable with auto-reset on config change

4. **Dual Mode Support**
   - Own API Key: Users provide their own Gemini key (free)
   - Paid Service: Users pay for API usage through our service
   - Seamless mode switching
   - Real-time balance tracking

Components Added:
- src/components/ApiKeySettings.tsx (enhanced)
- src/components/PaymentModal.tsx
- src/components/BalanceAlert.tsx

Updated Files:
- src/App.tsx - integrated all modals and alerts
- src/services/geminiClient.ts - auto-loads from localStorage

Business Features:
- Transparent pricing display
- Cost tracking already integrated
- Ready for Stripe/PayPal integration
- Professional payment UI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: KevenWMarkham

.claude/settings.local.json

@@ -1,61 +1,25 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npm create:*)",
-      "Bash(npm init:*)",
-      "Bash(npm install:*)",
-      "Bash(npx husky init)",
-      "Bash(git init:*)",
+      "Bash(powershell:*)",
+      "Bash(npx asar:*)",
+      "Bash(taskkill:*)",
+      "Bash(npm run electron:dev:*)",
+      "Bash(node -p:*)",
+      "Bash(npx electron .)",
       "Bash(cat:*)",
-      "Bash(echo \"npx --no -- commitlint --edit $1\")",
-      "Bash(.husky/commit-msg)",
-      "Bash(gh:*)",
-      "Bash(git remote add:*)",
+      "Bash(./node_modules/electron/dist/electron.exe:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)",
-      "Bash(git push:*)",
-      "Bash(npx tailwindcss:*)",
-      "Bash(npm test:*)",
-      "Bash(test -f:*)",
+      "Bash(git push)",
+      "Bash(gh run list:*)",
+      "Bash(gh run watch:*)",
+      "Bash(gh run download:*)",
+      "Bash(explorer.exe \"Transcript Parser Installer\")",
+      "Bash(wait)",
+      "Bash(explorer.exe \"Transcript Parser v1.0.0 - Production Build\")",
       "Bash(npm run dev:*)",
-      "Bash(timeout /t 5)",
-      "Bash(npm test:coverage:*)",
-      "Bash(npm run test:coverage:*)",
-      "Bash(git reset:*)",
-      "Bash(npm run test:*)",
-      "Bash(npm run lint)",
-      "Bash(npx playwright install:*)",
-      "Bash(npx playwright test:*)",
-      "Bash(npx msw:*)",
-      "Bash(npx tsc:*)",
-      "Bash(npm run build:*)",
-      "Bash(npm run test:e2e:*)",
-      "Bash(test:*)",
-      "Bash(ffmpeg:*)",
-      "Bash(git mv:*)",
-      "Bash(npm uninstall:*)",
-      "Bash(docker:*)",
-      "Bash(docker-compose up:*)",
-      "Bash(findstr:*)",
-      "Bash(npm run db:generate:*)",
-      "Bash(curl:*)",
-      "Bash(netstat:*)",
-      "Bash(npm run format:*)",
-      "Bash(npx vite build)",
-      "Bash(npx playwright:*)",
-      "Bash(nul)",
-      "Bash(unzip:*)",
-      "Bash(copy:*)",
-      "Bash(mkdir:*)",
-      "Bash(echo:*)",
-      "Bash(c:codetranscript-parserdocker-compose.yml)",
-      "Bash(\"c:\\code\\transcript-parser\\docker-compose.yml\")",
-      "Bash(.gitkeep)",
-      "Bash(dir:*)",
-      "Bash(ls:*)",
-      "Bash(npm run preview:*)",
-      "Bash(npx vercel --version)",
-      "Bash(npx vercel:*)"
+      "Bash($null)"
     ],
     "deny": [],
     "ask": []

src/App.tsx

@@ -10,6 +10,12 @@ import { Register } from '@/components/Register'
 import { TranscriptLibrary } from '@/components/TranscriptLibrary'
 import { CostSummaryModal } from '@/components/CostSummaryModal'
 import { VideoPlayerModal } from '@/components/VideoPlayerModal'
+import {
+  ApiKeySettings,
+  loadApiConfig,
+  type ApiKeyConfig,
+} from '@/components/ApiKeySettings'
+import { BalanceAlert, shouldShowBalanceAlert } from '@/components/BalanceAlert'
 import { useTranscription } from '@/hooks/useTranscription'
 import { apiClient } from '@/services/apiClient'
 import { usageTracker } from '@/services/usageTracker'
@@ -31,6 +37,11 @@ function App() {
   const [authMode, setAuthMode] = useState<'login' | 'register'>('login')
   const [showLibrary, setShowLibrary] = useState(false)
   const [showCostSummary, setShowCostSummary] = useState(false)
+  const [showApiSettings, setShowApiSettings] = useState(false)
+  const [apiConfig, setApiConfig] = useState<ApiKeyConfig | null>(
+    loadApiConfig()
+  )
+  const [balanceAlertDismissed, setBalanceAlertDismissed] = useState(false)
 
   // Video upload state
   const [videoFile, setVideoFile] = useState<File | null>(null)
@@ -79,7 +90,7 @@ function App() {
         inputTokens: 5234,
         outputTokens: 3421,
         totalTokens: 8655,
-        metadata: { duration: '3:45', fileSize: '15MB' }
+        metadata: { duration: '3:45', fileSize: '15MB' },
       })
 
       usageTracker.track({
@@ -89,7 +100,7 @@ function App() {
         inputTokens: 2735,
         outputTokens: 0,
         totalTokens: 2735,
-        metadata: { speakers: 3 }
+        metadata: { speakers: 3 },
       })
     }
   }
@@ -174,7 +185,10 @@ function App() {
     // Clear any existing video/transcription
     handleRemoveVideo()
     setShowLibrary(false)
-    console.log('✅ Loaded transcript from library:', loadedTranscript.metadata.fileName)
+    console.log(
+      '✅ Loaded transcript from library:',
+      loadedTranscript.metadata.fileName
+    )
   }
 
   // Show auth modal
@@ -183,7 +197,8 @@ function App() {
       <div
         className="min-h-screen flex items-center justify-center p-4"
         style={{
-          background: 'linear-gradient(135deg, #f8fafc 0%, rgba(239, 246, 255, 0.5) 50%, rgba(250, 245, 255, 0.5) 100%)'
+          background:
+            'linear-gradient(135deg, #f8fafc 0%, rgba(239, 246, 255, 0.5) 50%, rgba(250, 245, 255, 0.5) 100%)',
         }}
       >
         <div className="w-full max-w-md">
@@ -210,7 +225,8 @@ function App() {
       <div
         className="min-h-screen p-4 sm:p-6 lg:p-8"
         style={{
-          background: 'linear-gradient(135deg, #f8fafc 0%, rgba(239, 246, 255, 0.5) 50%, rgba(250, 245, 255, 0.5) 100%)'
+          background:
+            'linear-gradient(135deg, #f8fafc 0%, rgba(239, 246, 255, 0.5) 50%, rgba(250, 245, 255, 0.5) 100%)',
         }}
       >
         <div className="max-w-7xl mx-auto">
@@ -232,7 +248,8 @@ function App() {
     <div
       className="min-h-screen p-4 sm:p-6 lg:p-8"
       style={{
-        background: 'linear-gradient(135deg, #f8fafc 0%, rgba(239, 246, 255, 0.5) 50%, rgba(250, 245, 255, 0.5) 100%)'
+        background:
+          'linear-gradient(135deg, #f8fafc 0%, rgba(239, 246, 255, 0.5) 50%, rgba(250, 245, 255, 0.5) 100%)',
       }}
     >
       <div className="max-w-7xl mx-auto">
@@ -261,6 +278,17 @@ function App() {
             )}
           </div>
           <div className="flex gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setShowApiSettings(true)}
+              className={
+                apiConfig
+                  ? 'border-emerald-500 text-emerald-600 hover:bg-emerald-50'
+                  : 'border-red-500 text-red-600 hover:bg-red-50'
+              }
+            >
+              {apiConfig ? '🔑 API Configured' : '⚠️ Configure API'}
+            </Button>
             {!isAuthenticated ? (
               <Button onClick={() => setShowAuth(true)}>
                 Login / Register
@@ -270,7 +298,10 @@ function App() {
                 <Button variant="outline" onClick={() => setShowLibrary(true)}>
                   My Transcripts
                 </Button>
-                <Button variant="outline" onClick={() => setShowCostSummary(true)}>
+                <Button
+                  variant="outline"
+                  onClick={() => setShowCostSummary(true)}
+                >
                   Summary
                 </Button>
                 <Button variant="outline" onClick={handleLogout}>
@@ -320,7 +351,9 @@ function App() {
           <CostSummaryModal
             isOpen={showCostSummary}
             onClose={() => setShowCostSummary(false)}
-            stats={usageTracker.getUserUsage(apiClient.getCurrentUser()?.id || 1)}
+            stats={usageTracker.getUserUsage(
+              apiClient.getCurrentUser()?.id || 1
+            )}
           />
         )}
 
@@ -334,6 +367,31 @@ function App() {
             fileName={videoFile.name}
           />
         )}
+
+        {/* API Key Settings Modal */}
+        <ApiKeySettings
+          isOpen={showApiSettings}
+          onClose={() => setShowApiSettings(false)}
+          onSave={config => {
+            setApiConfig(config)
+            // Reset dismissed flag when config changes
+            setBalanceAlertDismissed(false)
+          }}
+          currentConfig={apiConfig || undefined}
+        />
+
+        {/* Balance Alert for Paid Mode */}
+        {apiConfig?.mode === 'paid' &&
+          shouldShowBalanceAlert(
+            apiConfig.paidBalance || 0,
+            balanceAlertDismissed
+          ) && (
+            <BalanceAlert
+              balance={apiConfig.paidBalance || 0}
+              onAddCredit={() => setShowApiSettings(true)}
+              onDismiss={() => setBalanceAlertDismissed(true)}
+            />
+          )}
       </div>
     </div>
   )