antigravity-proxy 0.1.1

package/src/config/types.ts

@@ -0,0 +1,73 @@
+export interface ProxyConfig {
+  rotation: RotationConfig;
+  scoring: ScoringConfig;
+  models: ModelsConfig;
+  retry: RetryConfig;
+  tokens: TokensConfig;
+  quota: QuotaConfig;
+  endpoints: EndpointsConfig;
+  logging: LoggingConfig;
+}
+
+export interface RotationConfig {
+  strategy: 'hybrid' | 'sticky' | 'round-robin' | 'random' | 'least-used';
+  cooldown: {
+    defaultDurationMs: number;
+    maxDurationMs: number;
+  };
+}
+
+export interface ScoringConfig {
+  healthRange: {
+    min: number;
+    max: number;
+    initial: number;
+  };
+  penalties: {
+    apiError: number;
+    refreshError: number;
+    fatalError: number;
+    systemicError: number;
+  };
+  rewards: {
+    success: number;
+  };
+  weights: {
+    health: number;
+    lru: number;
+  };
+}
+
+export interface ModelsConfig {
+  blacklist: string[];
+  routing: {
+    sandboxKeywords: string[];
+    cliKeywords: string[];
+    forceToSandbox: string[];
+  };
+  timeouts: Record<string, number>;
+}
+
+export interface RetryConfig {
+  maxAttempts: number;
+  transientRetryThresholdSeconds: number;
+}
+
+export interface TokensConfig {
+  expiryBufferMs: number;
+}
+
+export interface QuotaConfig {
+  refreshIntervalMs: number;
+  initialDelayMs: number;
+}
+
+export interface EndpointsConfig {
+  sandbox: string[];
+  cli: string | string[];
+}
+
+export interface LoggingConfig {
+  maxBufferSize: number;
+  enableConsoleCapture: boolean;
+}

package/src/frontend/components/config-modal.html

@@ -0,0 +1,109 @@
+<div id="config-modal" class="hidden fixed inset-0 bg-black/50 dark:bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 transition-colors">
+    <div class="bg-white dark:bg-[#050505] rounded shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-zinc-200 dark:border-zinc-800 transition-colors">
+        <div class="sticky top-0 bg-white dark:bg-[#050505] border-b border-zinc-200 dark:border-zinc-800 px-6 py-4 flex items-center justify-between z-10 transition-colors">
+            <h2 class="text-lg font-bold text-zinc-900 dark:text-white uppercase tracking-wider transition-colors">Configuration</h2>
+            <button onclick="closeConfigModal()" class="text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+            </button>
+        </div>
+        
+        <div class="p-6 space-y-8 font-mono">
+            <div>
+                <h3 class="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mb-4 flex items-center gap-2 transition-colors">
+                    <svg class="w-4 h-4 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                    Rotation Strategy
+                </h3>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Cooldown Default (ms)</label>
+                        <input type="number" id="cfg-cooldown-default" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Cooldown Max (ms)</label>
+                        <input type="number" id="cfg-cooldown-max" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h3 class="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mb-4 flex items-center gap-2 transition-colors">
+                    <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+                    Health Scoring
+                </h3>
+                <div class="grid grid-cols-3 gap-4 mb-4">
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Min Health</label>
+                        <input type="number" id="cfg-health-min" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Max Health</label>
+                        <input type="number" id="cfg-health-max" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Initial Health</label>
+                        <input type="number" id="cfg-health-initial" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">API Error Penalty</label>
+                        <input type="number" id="cfg-penalty-api" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Refresh Error Penalty</label>
+                        <input type="number" id="cfg-penalty-refresh" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                </div>
+                <div class="grid grid-cols-3 gap-4">
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Success Reward</label>
+                        <input type="number" id="cfg-reward-success" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Health Weight</label>
+                        <input type="number" step="0.1" id="cfg-weight-health" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">LRU Weight</label>
+                        <input type="number" step="0.01" id="cfg-weight-lru" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h3 class="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mb-4 flex items-center gap-2 transition-colors">
+                    <svg class="w-4 h-4 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
+                    Model Blacklist
+                </h3>
+                <textarea id="cfg-blacklist" rows="3" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors font-mono" placeholder="One model per line"></textarea>
+                <p class="text-[10px] text-zinc-600 dark:text-zinc-600 mt-1 uppercase tracking-wide">Enter model names to block, one per line</p>
+            </div>
+
+            <div>
+                <h3 class="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mb-4 flex items-center gap-2 transition-colors">
+                    <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                    Retry Configuration
+                </h3>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Max Attempts</label>
+                        <input type="number" id="cfg-retry-max" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                    <div>
+                        <label class="block text-[10px] text-zinc-500 mb-1.5 uppercase tracking-wide">Transient Retry Threshold (s)</label>
+                        <input type="number" id="cfg-retry-threshold" class="w-full px-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/50 text-zinc-900 dark:text-white focus:border-zinc-400 dark:focus:border-zinc-600 focus:outline-none transition-colors" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="sticky bottom-0 bg-white dark:bg-[#050505] border-t border-zinc-200 dark:border-zinc-800 px-6 py-4 flex justify-end gap-3 z-10 transition-colors">
+            <button onclick="closeConfigModal()" class="px-4 py-2 text-xs font-bold text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white uppercase tracking-wider transition-colors">
+                Cancel
+            </button>
+            <button onclick="saveConfig()" class="px-4 py-2 text-xs font-bold text-white dark:text-black bg-zinc-900 dark:bg-white hover:bg-zinc-700 dark:hover:bg-zinc-200 rounded transition-colors uppercase tracking-wider">
+                Save Changes
+            </button>
+        </div>
+    </div>
+</div>

package/src/frontend/components/header.html

@@ -0,0 +1,55 @@
+<header class="sticky top-0 z-50 bg-white dark:bg-black h-14 shrink-0 border-b border-zinc-200 dark:border-zinc-800 transition-colors">
+    <div class="h-full px-4 sm:px-6 flex items-center justify-between">
+        <div class="flex items-center gap-4">
+            <div class="flex items-center justify-center w-8 h-8 rounded border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 text-zinc-900 dark:text-white font-bold text-lg transition-colors">
+                A
+            </div>
+            <div class="hidden sm:block">
+                <h1 class="font-bold text-sm tracking-tight text-zinc-900 dark:text-white transition-colors">Antigravity Proxy</h1>
+            </div>
+            <div class="hidden sm:flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-zinc-50 dark:bg-zinc-900 text-zinc-500 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-800 transition-colors">
+                v0.1.0
+            </div>
+        </div>
+
+        <div class="flex items-center gap-2 sm:gap-6">
+            <div class="hidden md:flex items-center gap-3 px-3 py-1.5">
+                <span class="relative flex h-2 w-2">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                  <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                </span>
+                <span class="text-xs font-medium text-zinc-500 dark:text-zinc-400 transition-colors"><span id="stat-total-accounts" class="text-zinc-900 dark:text-white transition-colors">0</span> <span class="text-zinc-400 dark:text-zinc-500 transition-colors">active</span></span>
+            </div>
+
+            <div class="h-4 w-px bg-zinc-200 dark:bg-zinc-800 hidden sm:block transition-colors"></div>
+
+            <div class="relative group">
+                <select id="strategy-selector" onchange="updateStrategy()" class="appearance-none bg-transparent hover:text-zinc-900 dark:hover:text-white text-xs font-medium pr-6 outline-none transition-colors cursor-pointer text-zinc-500 dark:text-zinc-400 focus:text-zinc-900 dark:focus:text-white">
+                    <option value="hybrid" class="bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300">STRATEGY: HYBRID</option>
+                    <option value="sticky" class="bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300">STRATEGY: STICKY</option>
+                    <option value="round-robin" class="bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300">STRATEGY: ROUND ROBIN</option>
+                    <option value="random" class="bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300">STRATEGY: RANDOM</option>
+                    <option value="least-used" class="bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300">STRATEGY: LEAST USED</option>
+                </select>
+                <svg class="w-3 h-3 absolute right-0 top-1/2 -translate-y-1/2 text-zinc-400 dark:text-zinc-600 pointer-events-none group-hover:text-zinc-600 dark:group-hover:text-zinc-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+            </div>
+
+            <div class="flex items-center gap-2">
+                <button onclick="cycleTheme()" class="p-1.5 rounded text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors relative w-7 h-7 flex items-center justify-center" title="Toggle Theme">
+                    <svg id="icon-sun" class="w-4 h-4 hidden absolute" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
+                    <svg id="icon-moon" class="w-4 h-4 hidden absolute" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
+                    <svg id="icon-system" class="w-4 h-4 hidden absolute" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
+                </button>
+
+                <button onclick="openConfigModal()" class="p-1.5 rounded text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors" title="Settings">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                </button>
+
+                <a href="/oauth/start" class="ml-2 hidden sm:inline-flex items-center px-3 py-1.5 border border-zinc-200 dark:border-zinc-800 text-xs font-medium rounded text-zinc-600 dark:text-zinc-300 bg-zinc-50 dark:bg-zinc-900 hover:bg-white dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition-all">
+                    <svg class="w-3.5 h-3.5 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+                    ADD ACCOUNT
+                </a>
+            </div>
+        </div>
+    </div>
+</header>

package/src/frontend/components/main.html

@@ -0,0 +1,64 @@
+<div class="shrink-0 p-4 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black z-10 transition-colors">
+    <div class="max-w-7xl mx-auto mb-3 flex items-center justify-end">
+        <button onclick="toggleAllFamilies()" class="group flex items-center gap-2 px-2 py-1 bg-transparent hover:text-zinc-900 dark:hover:text-white rounded text-[10px] font-medium text-zinc-500 transition-all uppercase tracking-wide" id="btn-toggle-all">
+            <svg class="w-3 h-3 text-emerald-500 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>
+            <span>Expand Metrics</span>
+        </button>
+    </div>
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 max-w-7xl mx-auto" id="family-grid">
+        <div class="col-span-full h-24 flex items-center justify-center text-xs text-zinc-500 dark:text-zinc-600 border border-dashed border-zinc-300 dark:border-zinc-800 rounded bg-zinc-50 dark:bg-zinc-900/20 transition-colors">
+            // Scanning for model families...
+        </div>
+    </div>
+</div>
+
+<div class="flex-grow overflow-y-auto bg-zinc-50 dark:bg-black scrollbar-hide transition-colors">
+    <div class="max-w-7xl mx-auto p-4 sm:p-6">
+        <div class="flex items-center justify-between mb-6 border-b border-zinc-200 dark:border-zinc-800 pb-2 transition-colors">
+            <div class="flex items-center gap-4">
+                <h2 class="text-sm font-bold text-zinc-900 dark:text-white uppercase tracking-wider transition-colors">Active Accounts <span class="text-zinc-500 dark:text-zinc-600 text-xs normal-case ml-2 font-normal transition-colors">// Details</span></h2>
+            </div>
+            <div class="flex items-center gap-4">
+                <button onclick="resetAllAccounts()" class="opacity-0 hover:opacity-100 group-hover:opacity-100 transition-opacity inline-flex items-center text-[10px] font-bold text-rose-500 hover:text-rose-600 dark:hover:text-rose-400 uppercase tracking-widest" title="System Reset">
+                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                    Flush
+                </button>
+                <div class="flex items-center gap-2">
+                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
+                    <span class="text-[10px] text-zinc-500 font-medium" id="last-updated">--:--:--</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="border border-zinc-200 dark:border-zinc-800 rounded bg-white dark:bg-[#0a0a0a] transition-colors shadow-sm dark:shadow-none">
+            <table class="w-full text-left border-collapse">
+                <thead class="bg-zinc-50 dark:bg-zinc-900/50 border-b border-zinc-200 dark:border-zinc-800 transition-colors">
+                    <tr>
+                        <th class="px-4 py-3 text-[10px] font-medium text-zinc-500 uppercase tracking-wider w-1/2">Identity</th>
+                        <th class="px-4 py-3 text-[10px] font-medium text-zinc-500 uppercase tracking-wider w-1/4">Health</th>
+                        <th class="px-4 py-3 text-[10px] font-medium text-zinc-500 uppercase tracking-wider w-1/4">Last Active</th>
+                        <th class="px-4 py-3 text-[10px] font-medium text-zinc-500 uppercase tracking-wider text-right">Action</th>
+                    </tr>
+                </thead>
+                <tbody id="accounts-table-body" class="divide-y divide-zinc-200 dark:divide-zinc-800 text-sm transition-colors">
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<div class="shrink-0 bg-white dark:bg-[#050505] border-t border-zinc-200 dark:border-zinc-800 h-48 sm:h-64 flex flex-col transition-[height,colors] duration-200 relative group" id="logs-panel">
+    <div id="logs-resizer" class="absolute top-[-3px] left-0 right-0 h-[6px] cursor-ns-resize hover:bg-emerald-500/50 transition-colors z-50"></div>
+    <div class="flex items-center justify-between px-4 py-2 bg-zinc-50 dark:bg-zinc-900/30 border-b border-zinc-200 dark:border-zinc-800 shrink-0 select-none transition-colors">
+        <div class="flex items-center gap-2">
+            <svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+            <h3 class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Console Output</h3>
+        </div>
+        <button onclick="toggleLogs()" class="text-zinc-500 dark:text-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-300 p-1 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">
+            <svg id="logs-chevron" class="w-3.5 h-3.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+        </button>
+    </div>
+    <div id="logs-content" class="flex-grow overflow-y-auto p-4 font-mono text-[11px] leading-relaxed text-zinc-600 dark:text-zinc-400 space-y-1 selection:bg-emerald-500/30 selection:text-emerald-900 dark:selection:text-white transition-colors">
+        <div class="text-zinc-400 dark:text-zinc-600 italic">// Initializing console connection...</div>
+    </div>
+</div>

package/src/frontend/css/styles.css

@@ -0,0 +1,53 @@
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #27272a;
+    border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #3f3f46;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.font-mono-dense {
+    font-family: 'JetBrains Mono', monospace;
+    letter-spacing: -0.02em;
+}
+
+tr.flash-active td {
+    animation: flashRow 1s ease-out;
+}
+
+tr.flash-error td {
+    animation: flashRowError 1s ease-out;
+}
+
+@keyframes flashRow {
+    0% { background-color: rgba(16, 185, 129, 0.1); }
+    100% { background-color: transparent; }
+}
+
+@keyframes flashRowError {
+    0% { background-color: rgba(244, 63, 94, 0.1); }
+    100% { background-color: transparent; }
+}
+
+tr td {
+    position: relative;
+}

package/src/frontend/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full antialiased">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Antigravity Console</title>
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+    
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="js/tailwind-config.js"></script>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body class="bg-zinc-50 dark:bg-black text-zinc-900 dark:text-zinc-200 h-full flex flex-col transition-colors duration-300 overflow-hidden font-mono selection:bg-emerald-500/30 selection:text-emerald-700 dark:selection:text-emerald-200">
+
+    <div id="header-container"></div>
+    <main id="main-container" class="flex-grow flex flex-col h-[calc(100vh-4rem)] overflow-hidden"></main>
+    <div id="modal-container"></div>
+
+    <script src="js/app.js"></script>
+    <script>
+        async function loadComponent(id, url) {
+            try {
+                const res = await fetch(url);
+                if (!res.ok) throw new Error(`Failed to load ${url}`);
+                document.getElementById(id).innerHTML = await res.text();
+            } catch (e) {
+                console.error(e);
+                document.getElementById(id).innerHTML = `<div class="p-4 text-rose-500">Error loading component: ${e.message}</div>`;
+            }
+        }
+
+        (async () => {
+            await Promise.all([
+                loadComponent('header-container', 'components/header.html'),
+                loadComponent('main-container', 'components/main.html'),
+                loadComponent('modal-container', 'components/config-modal.html')
+            ]);
+            
+            if (window.initializeApp) {
+                window.initializeApp();
+            }
+        })();
+    </script>
+</body>
+</html>