cleaned up the codebase

api/supabase_client.py

@@ -259,13 +259,13 @@ def test_client():
 
         # Health check
         if client.health_check():
-            print("✓ Connection healthy")
+            print("[OK] Connection healthy")
         else:
-            print("✗ Connection failed")
+            print("[FAIL] Connection failed")
 
         # Try to get runs
         runs = client.get_all_runs()
-        print(f"✓ Retrieved {len(runs)} runs")
+        print(f"[OK] Retrieved {len(runs)} runs")
 
     except ValueError as e:
         print(f"Configuration error: {e}")

frontend/src/App.jsx

@@ -14,14 +14,6 @@ function App() {
   const [activeTab, setActiveTab] = useState('dashboard')
   const [terminalLogs, setTerminalLogs] = useState([])
   const [isTerminalConnected, setIsTerminalConnected] = useState(false)
-  const [darkMode, setDarkMode] = useState(() => {
-    const saved = localStorage.getItem('darkMode')
-    return saved ? JSON.parse(saved) : false
-  })
-
-  useEffect(() => {
-    localStorage.setItem('darkMode', JSON.stringify(darkMode))
-  }, [darkMode])
 
   useEffect(() => {
     fetchRuns()
@@ -86,11 +78,11 @@ function App() {
     const actions = runDetail.actions || []
     actions.forEach((action, i) => {
       const actionEmoji = {
-        'swap': '↔️',
-        'provide_liquidity': '💧',
-        'propose_alliance': '🤝',
-        'do_nothing': '💤'
-      }[action.action_type] || '📍'
+        'swap': '<->',
+        'provide_liquidity': '~',
+        'propose_alliance': '=',
+        'do_nothing': 'z'
+      }[action.action_type] || '.'
 
       logs.push(`%c[AGENT]%c ${action.agent_name} > Turn ${action.turn}: ${actionEmoji} ${action.action_type}`)
       if (action.reasoning) {
@@ -122,48 +114,36 @@ function App() {
   }
 
   return (
-    <div className={`min-h-screen ${darkMode ? 'bg-slate-900' : 'bg-slate-50'}`}>
+    <div className="min-h-screen bg-slate-900">
       {/* Header */}
-      <header className={`${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'} border-b px-6 py-4`}>
+      <header className="bg-slate-800 border-slate-700 border-b px-6 py-4">
         <div className="max-w-6xl mx-auto flex justify-between items-center">
           <div className="flex items-center gap-3">
-            <svg width="36" height="36" viewBox="0 0 100 100" className={darkMode ? 'opacity-90' : ''}>
-              <circle cx="50" cy="50" r="45" fill="currentColor" className={darkMode ? 'text-slate-700' : 'text-slate-800'}/>
+            <svg width="36" height="36" viewBox="0 0 100 100" className="opacity-90">
+              <circle cx="50" cy="50" r="45" fill="currentColor" className="text-slate-700"/>
               <circle cx="35" cy="45" r="12" className="text-green-500"/>
               <circle cx="65" cy="45" r="12" className="text-green-500"/>
               <circle cx="50" cy="70" r="12" className="text-green-500"/>
-              <line x1="35" y1="45" x2="65" y2="45" stroke="currentColor" strokeWidth="4" className={darkMode ? 'text-slate-800' : 'text-slate-800'}/>
-              <line x1="35" y1="45" x2="50" y2="70" stroke="currentColor" strokeWidth="4" className={darkMode ? 'text-slate-800' : 'text-slate-800'}/>
-              <line x1="65" y1="45" x2="50" y2="70" stroke="currentColor" strokeWidth="4" className={darkMode ? 'text-slate-800' : 'text-slate-800'}/>
+              <line x1="35" y1="45" x2="65" y2="45" stroke="currentColor" strokeWidth="4" className="text-slate-800"/>
+              <line x1="35" y1="45" x2="50" y2="70" stroke="currentColor" strokeWidth="4" className="text-slate-800"/>
+              <line x1="65" y1="45" x2="50" y2="70" stroke="currentColor" strokeWidth="4" className="text-slate-800"/>
             </svg>
-            <h1 className={`text-xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'}`}>DeFi Agent Arena</h1>
-          </div>
-          <div className="flex gap-4 items-center">
-            <span className={`text-sm ${trends ? 'text-green-500' : 'text-red-500'}`}>
-              {trends ? 'Connected' : 'Disconnected'}
-            </span>
-            <button
-              onClick={() => setDarkMode(!darkMode)}
-              className={`px-3 py-1.5 rounded text-sm ${
-                darkMode
-                  ? 'bg-slate-700 text-white hover:bg-slate-600'
-                  : 'bg-slate-200 text-slate-800 hover:bg-slate-300'
-              }`}
-            >
-              {darkMode ? 'Light' : 'Dark'}
-            </button>
+            <h1 className="text-xl font-semibold text-white">DeFi Agent Arena</h1>
           </div>
+          <span className={`text-sm ${trends ? 'text-green-500' : 'text-red-500'}`}>
+            {trends ? 'Connected' : 'Disconnected'}
+          </span>
         </div>
       </header>
 
       {/* Tabs */}
-      <div className={`max-w-6xl mx-auto px-6 pt-6 flex gap-4 border-b ${darkMode ? 'border-slate-700' : 'border-slate-200'}`}>
+      <div className="max-w-6xl mx-auto px-6 pt-6 flex gap-4 border-b border-slate-700">
         <button
           onClick={() => setActiveTab('dashboard')}
           className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors ${
             activeTab === 'dashboard'
-              ? `border-green-500 ${darkMode ? 'text-white' : 'text-slate-800'}`
-              : `border-transparent ${darkMode ? 'text-slate-400 hover:text-white' : 'text-slate-500 hover:text-slate-700'}`
+              ? 'border-green-500 text-white'
+              : 'border-transparent text-slate-400 hover:text-white'
           }`}
         >
           Dashboard
@@ -172,8 +152,8 @@ function App() {
           onClick={() => setActiveTab('terminal')}
           className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors ${
             activeTab === 'terminal'
-              ? `border-green-500 ${darkMode ? 'text-white' : 'text-slate-800'}`
-              : `border-transparent ${darkMode ? 'text-slate-400 hover:text-white' : 'text-slate-500 hover:text-slate-700'}`
+              ? 'border-green-500 text-white'
+              : 'border-transparent text-slate-400 hover:text-white'
           }`}
         >
           Terminal
@@ -184,19 +164,15 @@ function App() {
         {activeTab === 'dashboard' ? (
           <>
             {/* Refresh Section */}
-            <section className={`${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'} rounded-lg border p-6 mb-8`}>
+            <section className="bg-slate-800 border-slate-700 rounded-lg border p-6 mb-8">
               <div className="flex justify-between items-center">
-                <h2 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>Simulation Data</h2>
+                <h2 className="text-lg font-medium text-white">Simulation Data</h2>
                 <button
                   onClick={() => {
                     fetchRuns()
                     fetchTrends()
                   }}
-                  className={`px-6 py-2 rounded ${
-                    darkMode
-                      ? 'bg-slate-700 text-white hover:bg-slate-600'
-                      : 'bg-slate-800 text-white hover:bg-slate-700'
-                  }`}
+                  className="px-6 py-2 rounded bg-slate-700 text-white hover:bg-slate-600"
                 >
                   Refresh
                 </button>
@@ -205,65 +181,65 @@ function App() {
 
             {/* Trends Section */}
             {trends && (
-              <section className={`${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'} rounded-lg border p-6 mb-8`}>
-                <h2 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-slate-800'} mb-4`}>Trends</h2>
+              <section className="bg-slate-800 border-slate-700 rounded-lg border p-6 mb-8">
+                <h2 className="text-lg font-medium text-white mb-4">Trends</h2>
                 <div className="grid grid-cols-4 gap-4">
-                  <div className={`${darkMode ? 'bg-slate-700' : 'bg-slate-50'} rounded p-4`}>
-                    <div className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Total Runs</div>
-                    <div className={`text-2xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'}`}>{trends.run_count}</div>
+                  <div className="bg-slate-700 rounded p-4">
+                    <div className="text-sm text-slate-400">Total Runs</div>
+                    <div className="text-2xl font-semibold text-white">{trends.run_count}</div>
                   </div>
-                  <div className={`${darkMode ? 'bg-slate-700' : 'bg-slate-50'} rounded p-4`}>
-                    <div className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Avg Profit</div>
-                    <div className={`text-2xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'}`}>{trends.avg_profit?.toFixed(2) || 0}</div>
+                  <div className="bg-slate-700 rounded p-4">
+                    <div className="text-sm text-slate-400">Avg Profit</div>
+                    <div className="text-2xl font-semibold text-white">{trends.avg_profit?.toFixed(2) || 0}</div>
                   </div>
-                  <div className={`${darkMode ? 'bg-slate-700' : 'bg-slate-50'} rounded p-4`}>
-                    <div className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Avg Inequality</div>
-                    <div className={`text-2xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'}`}>{(trends.avg_gini * 100).toFixed(1)}%</div>
+                  <div className="bg-slate-700 rounded p-4">
+                    <div className="text-sm text-slate-400">Avg Inequality</div>
+                    <div className="text-2xl font-semibold text-white">{(trends.avg_gini * 100).toFixed(1)}%</div>
                   </div>
-                  <div className={`${darkMode ? 'bg-slate-700' : 'bg-slate-50'} rounded p-4`}>
-                    <div className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Profit Trend</div>
-                    <div className={`text-2xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'} capitalize`}>{trends.profit_trend}</div>
+                  <div className="bg-slate-700 rounded p-4">
+                    <div className="text-sm text-slate-400">Profit Trend</div>
+                    <div className="text-2xl font-semibold text-white capitalize">{trends.profit_trend}</div>
                   </div>
                 </div>
               </section>
             )}
 
             {/* Runs List */}
-            <section className={`${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'} rounded-lg border p-6 mb-8`}>
-              <h2 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-slate-800'} mb-4`}>Runs</h2>
+            <section className="bg-slate-800 border-slate-700 rounded-lg border p-6 mb-8">
+              <h2 className="text-lg font-medium text-white mb-4">Runs</h2>
               {runs.length === 0 ? (
-                <p className={darkMode ? 'text-slate-400' : 'text-slate-500'}>No runs yet.</p>
+                <p className="text-slate-400">No runs yet.</p>
               ) : (
                 <div className="overflow-x-auto">
                   <table className="w-full">
                     <thead>
-                      <tr className={`border-b ${darkMode ? 'border-slate-700' : 'border-slate-200'} text-left`}>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Run</th>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Status</th>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Started</th>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Action</th>
+                      <tr className="border-b border-slate-700 text-left">
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Run</th>
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Status</th>
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Started</th>
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Action</th>
                       </tr>
                     </thead>
                     <tbody>
                       {runs.map((run) => (
-                        <tr key={run.id} className={`border-b ${darkMode ? 'border-slate-700' : 'border-slate-100'}`}>
-                          <td className={`py-2 px-3 ${darkMode ? 'text-white' : 'text-slate-800'}`}>#{run.run_number}</td>
+                        <tr key={run.id} className="border-b border-slate-700">
+                          <td className="py-2 px-3 text-white">#{run.run_number}</td>
                           <td className="py-2 px-3">
                             <span className={`px-2 py-1 rounded text-xs ${
                               run.status === 'completed'
-                                ? darkMode ? 'bg-green-900 text-green-300' : 'bg-green-100 text-green-800'
-                                : darkMode ? 'bg-yellow-900 text-yellow-300' : 'bg-yellow-100 text-yellow-800'
+                                ? 'bg-green-900 text-green-300'
+                                : 'bg-yellow-900 text-yellow-300'
                             }`}>
                               {run.status}
                             </span>
                           </td>
-                          <td className={`py-2 px-3 text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>
+                          <td className="py-2 px-3 text-sm text-slate-400">
                             {new Date(run.start_time).toLocaleString()}
                           </td>
                           <td className="py-2 px-3">
                             <button
                               onClick={() => selectRun(run.id)}
-                              className={`text-sm ${darkMode ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-800'}`}
+                              className="text-sm text-blue-400 hover:text-blue-300"
                             >
                               View
                             </button>
@@ -278,53 +254,53 @@ function App() {
 
             {/* Run Detail */}
             {selectedRun && (
-              <section className={`${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'} rounded-lg border p-6`}>
+              <section className="bg-slate-800 border-slate-700 rounded-lg border p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <h2 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>Run Details</h2>
-                  <button onClick={() => setSelectedRun(null)} className={`${darkMode ? 'text-slate-400 hover:text-white' : 'text-slate-500 hover:text-slate-700'}`}>
+                  <h2 className="text-lg font-medium text-white">Run Details</h2>
+                  <button onClick={() => setSelectedRun(null)} className="text-slate-400 hover:text-white">
                     Close
                   </button>
                 </div>
 
                 {selectedRun.metrics && (
                   <div className="grid grid-cols-3 gap-4 mb-6">
-                    <div className={`${darkMode ? 'bg-slate-700' : 'bg-slate-50'} rounded p-4`}>
-                      <div className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Gini Coefficient</div>
-                      <div className={`text-xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'}`}>{selectedRun.metrics.gini_coefficient?.toFixed(4)}</div>
+                    <div className="bg-slate-700 rounded p-4">
+                      <div className="text-sm text-slate-400">Gini Coefficient</div>
+                      <div className="text-xl font-semibold text-white">{selectedRun.metrics.gini_coefficient?.toFixed(4)}</div>
                     </div>
-                    <div className={`${darkMode ? 'bg-slate-700' : 'bg-slate-50'} rounded p-4`}>
-                      <div className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Avg Profit</div>
-                      <div className={`text-xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'}`}>{selectedRun.metrics.avg_agent_profit?.toFixed(2)}</div>
+                    <div className="bg-slate-700 rounded p-4">
+                      <div className="text-sm text-slate-400">Avg Profit</div>
+                      <div className="text-xl font-semibold text-white">{selectedRun.metrics.avg_agent_profit?.toFixed(2)}</div>
                     </div>
-                    <div className={`${darkMode ? 'bg-slate-700' : 'bg-slate-50'} rounded p-4`}>
-                      <div className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Cooperation Rate</div>
-                      <div className={`text-xl font-semibold ${darkMode ? 'text-white' : 'text-slate-800'}`}>{selectedRun.metrics.cooperation_rate?.toFixed(2)}</div>
+                    <div className="bg-slate-700 rounded p-4">
+                      <div className="text-sm text-slate-400">Cooperation Rate</div>
+                      <div className="text-xl font-semibold text-white">{selectedRun.metrics.cooperation_rate?.toFixed(2)}</div>
                     </div>
                   </div>
                 )}
 
-                <h3 className={`font-medium ${darkMode ? 'text-white' : 'text-slate-800'} mb-3`}>Agents</h3>
+                <h3 className="font-medium text-white mb-3">Agents</h3>
                 <div className="overflow-x-auto">
                   <table className="w-full">
                     <thead>
-                      <tr className={`border-b ${darkMode ? 'border-slate-700' : 'border-slate-200'} text-left`}>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Agent</th>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Token A</th>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Token B</th>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Profit</th>
-                        <th className={`py-2 px-3 text-sm font-medium ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>Strategy</th>
+                      <tr className="border-b border-slate-700 text-left">
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Agent</th>
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Token A</th>
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Token B</th>
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Profit</th>
+                        <th className="py-2 px-3 text-sm font-medium text-slate-400">Strategy</th>
                       </tr>
                     </thead>
                     <tbody>
                       {(selectedRun.agents || []).map((agent, i) => (
-                        <tr key={i} className={`border-b ${darkMode ? 'border-slate-700' : 'border-slate-100'}`}>
-                          <td className={`py-2 px-3 ${darkMode ? 'text-white' : 'text-slate-800'}`}>{agent.name}</td>
-                          <td className={`py-2 px-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>{agent.token_a?.toFixed(2)}</td>
-                          <td className={`py-2 px-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>{agent.token_b?.toFixed(2)}</td>
+                        <tr key={i} className="border-b border-slate-700">
+                          <td className="py-2 px-3 text-white">{agent.name}</td>
+                          <td className="py-2 px-3 text-slate-300">{agent.token_a?.toFixed(2)}</td>
+                          <td className="py-2 px-3 text-slate-300">{agent.token_b?.toFixed(2)}</td>
                           <td className={`py-2 px-3 ${agent.profit >= 0 ? 'text-green-500' : 'text-red-500'}`}>
                             {agent.profit?.toFixed(2)}
                           </td>
-                          <td className={`py-2 px-3 ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>{agent.strategy}</td>
+                          <td className="py-2 px-3 text-slate-300">{agent.strategy}</td>
                         </tr>
                       ))}
                     </tbody>
@@ -335,9 +311,9 @@ function App() {
           </>
         ) : (
           /* Terminal Tab - Retro Style */
-          <div className={`${darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'} rounded-lg border p-6`}>
+          <div className="bg-slate-800 border-slate-700 rounded-lg border p-6">
             <div className="flex justify-between items-center mb-4">
-              <h2 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-slate-800'}`}>Agent Terminal</h2>
+              <h2 className="text-lg font-medium text-white">Agent Terminal</h2>
               <div className="flex gap-4 items-center">
                 <span className={`flex items-center gap-2 text-sm ${isTerminalConnected ? 'text-green-500' : 'text-red-500'}`}>
                   <span className={`w-2 h-2 rounded-full ${isTerminalConnected ? 'bg-green-500' : 'bg-red-500'}`}></span>
@@ -345,11 +321,7 @@ function App() {
                 </span>
                 <button
                   onClick={() => fetchLatestRunForTerminal()}
-                  className={`px-4 py-1.5 rounded text-sm ${
-                    darkMode
-                      ? 'bg-slate-700 text-white hover:bg-slate-600'
-                      : 'bg-slate-200 text-slate-800 hover:bg-slate-300'
-                  }`}
+                  className="px-4 py-1.5 rounded text-sm bg-slate-700 text-white hover:bg-slate-600"
                 >
                   Load Latest
                 </button>
@@ -357,10 +329,8 @@ function App() {
             </div>
 
             {/* Retro Terminal */}
-            <div className={`font-mono text-sm p-4 rounded-lg overflow-y-auto max-h-[600px] ${
-              darkMode ? 'bg-slate-950' : 'bg-slate-900'
-            }`}>
-              <pre className={`${darkMode ? 'text-green-400' : 'text-green-400'}`}>
+            <div className="font-mono text-sm p-4 rounded-lg overflow-y-auto max-h-[600px] bg-slate-950">
+              <pre className="text-green-400">
                 {terminalLogs.length === 0 ? (
                   <span className="opacity-50">No simulation data loaded. Click "Load Latest" to view agent activity.</span>
                 ) : (
@@ -382,7 +352,7 @@ function App() {
               </pre>
             </div>
 
-            <div className={`mt-4 text-xs ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>
+            <div className="mt-4 text-xs text-slate-500">
               Tip: Select a run from the Dashboard to view its terminal logs
             </div>
           </div>

scripts/reset_db.sql

@@ -0,0 +1,24 @@
+-- Wipe all test data and reset for public launch
+-- Run this in Supabase SQL Editor
+
+-- 1. Delete all data (order matters due to foreign keys)
+DELETE FROM run_metrics;
+DELETE FROM actions;
+DELETE FROM pool_states;
+DELETE FROM agent_states;
+DELETE FROM agent_learning;
+DELETE FROM runs;
+
+-- 2. Reset sequence (PostgreSQL)
+ALTER SEQUENCE runs_id_seq RESTART WITH 1;
+
+-- 3. Verify
+SELECT COUNT(*) as remaining_runs FROM runs;
+
+-- 4. Insert a placeholder run to start fresh
+INSERT INTO runs (run_number, status, config)
+VALUES (0, 'completed', '{"initialized": true}'::jsonb)
+ON CONFLICT DO NOTHING;
+
+-- 5. Get next run number (should be 1)
+SELECT get_next_run_number() as next_run;