Spaces:

nice-bill
/

agent-arena

Sleeping

App Files Files Community

nice-bill commited on Jan 7

Commit

03cd558

1 Parent(s): 27baee9

Add React dashboard frontend

Browse files

Files changed (11) hide show

.gitignore +4 -0
core/__init__.py +2 -1
frontend/index.html +12 -0
frontend/package-lock.json +0 -0
frontend/package.json +25 -0
frontend/postcss.config.js +6 -0
frontend/src/App.jsx +274 -0
frontend/src/index.css +8 -0
frontend/src/main.jsx +10 -0
frontend/tailwind.config.js +26 -0
frontend/vite.config.js +12 -0

.gitignore CHANGED Viewed

@@ -7,3 +7,7 @@ dist/
 build/
 .vscode/
 .idea/

 build/
 .vscode/
 .idea/
+# Frontend
+frontend/node_modules/
+frontend/dist/

core/__init__.py CHANGED Viewed

@@ -3,5 +3,6 @@
 from .agent import Agent
 from .defi_mechanics import Pool
 from .simulation import Simulation
-__all__ = ["Agent", "Pool", "Simulation"]

 from .agent import Agent
 from .defi_mechanics import Pool
 from .simulation import Simulation
+from .analyzer import Analyzer
+__all__ = ["Agent", "Pool", "Simulation", "Analyzer"]

frontend/index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DeFi Agent Arena</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+  "name": "defi-agents-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.10.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.8"
+  }
+}

frontend/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx ADDED Viewed

	@@ -0,0 +1,274 @@

+import { useState, useEffect } from 'react'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'
+const API_BASE = '/api'
+function App() {
+  const [runs, setRuns] = useState([])
+  const [selectedRun, setSelectedRun] = useState(null)
+  const [trends, setTrends] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [newRunConfig, setNewRunConfig] = useState({ num_agents: 5, turns_per_run: 10 })
+  useEffect(() => {
+    fetchRuns()
+    fetchTrends()
+  }, [])
+  const fetchRuns = async () => {
+    try {
+      const res = await fetch(`${API_BASE}/runs`)
+      if (res.ok) {
+        const data = await res.json()
+        setRuns(data.runs || [])
+      }
+    } catch (e) {
+      console.error('Failed to fetch runs:', e)
+    }
+  }
+  const fetchTrends = async () => {
+    try {
+      const res = await fetch(`${API_BASE}/analysis/trends`)
+      if (res.ok) {
+        const data = await res.json()
+        setTrends(data)
+      }
+    } catch (e) {
+      console.error('Failed to fetch trends:', e)
+    }
+  }
+  const startRun = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch(`${API_BASE}/runs`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newRunConfig)
+      })
+      if (res.ok) {
+        await fetchRuns()
+        await fetchTrends()
+      }
+    } catch (e) {
+      console.error('Failed to start run:', e)
+    }
+    setLoading(false)
+  }
+  const selectRun = async (runId) => {
+    try {
+      const res = await fetch(`${API_BASE}/runs/${runId}`)
+      if (res.ok) {
+        const data = await res.json()
+        setSelectedRun(data)
+      }
+    } catch (e) {
+      console.error('Failed to fetch run details:', e)
+    }
+  }
+  return (
+    <div className="min-h-screen bg-slate-50">
+      {/* Header */}
+      <header className="bg-white border-b border-slate-200 px-6 py-4">
+        <div className="max-w-6xl mx-auto flex justify-between items-center">
+          <h1 className="text-xl font-semibold text-slate-800">DeFi Agent Arena</h1>
+          <div className="flex gap-4 text-sm text-slate-600">
+            <span>Backend: <span className={trends ? 'text-green-600' : 'text-red-600'}>{trends ? 'Connected' : 'Disconnected'}</span></span>
+          </div>
+        </div>
+      </header>
+      <main className="max-w-6xl mx-auto px-6 py-8">
+        {/* New Run Section */}
+        <section className="bg-white rounded-lg border border-slate-200 p-6 mb-8">
+          <h2 className="text-lg font-medium text-slate-800 mb-4">Start New Run</h2>
+          <div className="flex gap-4 items-end">
+            <div>
+              <label className="block text-sm text-slate-600 mb-1">Agents</label>
+              <input
+                type="number"
+                value={newRunConfig.num_agents}
+                onChange={(e) => setNewRunConfig({ ...newRunConfig, num_agents: parseInt(e.target.value) })}
+                className="border border-slate-300 rounded px-3 py-2 w-24 text-slate-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-slate-600 mb-1">Turns</label>
+              <input
+                type="number"
+                value={newRunConfig.turns_per_run}
+                onChange={(e) => setNewRunConfig({ ...newRunConfig, turns_per_run: parseInt(e.target.value) })}
+                className="border border-slate-300 rounded px-3 py-2 w-24 text-slate-800"
+              />
+            </div>
+            <button
+              onClick={startRun}
+              disabled={loading}
+              className="bg-slate-800 text-white px-6 py-2 rounded hover:bg-slate-700 disabled:opacity-50"
+            >
+              {loading ? 'Running...' : 'Start Run'}
+            </button>
+          </div>
+        </section>
+        {/* Trends Section */}
+        {trends && (
+          <section className="bg-white rounded-lg border border-slate-200 p-6 mb-8">
+            <h2 className="text-lg font-medium text-slate-800 mb-4">Trends</h2>
+            <div className="grid grid-cols-4 gap-4">
+              <div className="bg-slate-50 rounded p-4">
+                <div className="text-sm text-slate-600">Total Runs</div>
+                <div className="text-2xl font-semibold text-slate-800">{trends.run_count}</div>
+              </div>
+              <div className="bg-slate-50 rounded p-4">
+                <div className="text-sm text-slate-600">Avg Profit</div>
+                <div className="text-2xl font-semibold text-slate-800">{trends.avg_profit?.toFixed(2) || 0}</div>
+              </div>
+              <div className="bg-slate-50 rounded p-4">
+                <div className="text-sm text-slate-600">Avg Inequality</div>
+                <div className="text-2xl font-semibold text-slate-800">{(trends.avg_gini * 100).toFixed(1)}%</div>
+              </div>
+              <div className="bg-slate-50 rounded p-4">
+                <div className="text-sm text-slate-600">Profit Trend</div>
+                <div className="text-2xl font-semibold text-slate-800 capitalize">{trends.profit_trend}</div>
+              </div>
+            </div>
+          </section>
+        )}
+        {/* Runs List */}
+        <section className="bg-white rounded-lg border border-slate-200 p-6 mb-8">
+          <h2 className="text-lg font-medium text-slate-800 mb-4">Runs</h2>
+          {runs.length === 0 ? (
+            <p className="text-slate-500">No runs yet. Start one above!</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-slate-200 text-left">
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Run</th>
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Status</th>
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Started</th>
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {runs.map((run) => (
+                    <tr key={run.id} className="border-b border-slate-100">
+                      <td className="py-2 px-3 text-slate-800">#{run.run_number}</td>
+                      <td className="py-2 px-3">
+                        <span className={`px-2 py-1 rounded text-xs ${
+                          run.status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                        }`}>
+                          {run.status}
+                        </span>
+                      </td>
+                      <td className="py-2 px-3 text-slate-600 text-sm">
+                        {new Date(run.start_time).toLocaleString()}
+                      </td>
+                      <td className="py-2 px-3">
+                        <button
+                          onClick={() => selectRun(run.id)}
+                          className="text-blue-600 hover:text-blue-800 text-sm"
+                        >
+                          View
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+        {/* Run Detail */}
+        {selectedRun && (
+          <section className="bg-white rounded-lg border border-slate-200 p-6">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-medium text-slate-800">Run Details</h2>
+              <button onClick={() => setSelectedRun(null)} className="text-slate-500 hover:text-slate-700">
+                Close
+              </button>
+            </div>
+            {/* Metrics */}
+            {selectedRun.metrics && (
+              <div className="grid grid-cols-3 gap-4 mb-6">
+                <div className="bg-slate-50 rounded p-4">
+                  <div className="text-sm text-slate-600">Gini Coefficient</div>
+                  <div className="text-xl font-semibold text-slate-800">{selectedRun.metrics.gini_coefficient?.toFixed(4)}</div>
+                </div>
+                <div className="bg-slate-50 rounded p-4">
+                  <div className="text-sm text-slate-600">Avg Profit</div>
+                  <div className="text-xl font-semibold text-slate-800">{selectedRun.metrics.avg_agent_profit?.toFixed(2)}</div>
+                </div>
+                <div className="bg-slate-50 rounded p-4">
+                  <div className="text-sm text-slate-600">Cooperation Rate</div>
+                  <div className="text-xl font-semibold text-slate-800">{selectedRun.metrics.cooperation_rate?.toFixed(2)}</div>
+                </div>
+              </div>
+            )}
+            {/* Agents */}
+            <h3 className="font-medium text-slate-800 mb-3">Agents</h3>
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-slate-200 text-left">
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Agent</th>
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Token A</th>
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Token B</th>
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Profit</th>
+                    <th className="py-2 px-3 text-sm font-medium text-slate-600">Strategy</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {(selectedRun.agents || []).map((agent, i) => (
+                    <tr key={i} className="border-b border-slate-100">
+                      <td className="py-2 px-3 text-slate-800">{agent.name}</td>
+                      <td className="py-2 px-3 text-slate-600">{agent.token_a?.toFixed(2)}</td>
+                      <td className="py-2 px-3 text-slate-600">{agent.token_b?.toFixed(2)}</td>
+                      <td className={`py-2 px-3 ${agent.profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                        {agent.profit?.toFixed(2)}
+                      </td>
+                      <td className="py-2 px-3 text-slate-600">{agent.strategy}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {/* Actions */}
+            {(selectedRun.actions || []).length > 0 && (
+              <>
+                <h3 className="font-medium text-slate-800 mt-6 mb-3">Actions Log</h3>
+                <div className="space-y-2 max-h-64 overflow-y-auto">
+                  {selectedRun.actions.slice(0, 20).map((action, i) => (
+                    <div key={i} className="bg-slate-50 rounded p-3 text-sm">
+                      <div className="flex gap-2 mb-1">
+                        <span className="font-medium text-slate-800">{action.agent_name}</span>
+                        <span className="text-slate-500">Turn {action.turn}</span>
+                      </div>
+                      <div className="text-slate-600">
+                        <span className="font-medium">{action.action_type}</span>
+                        {action.reasoning && (
+                          <p className="text-slate-500 mt-1 text-xs">{action.reasoning.substring(0, 150)}...</p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </section>
+        )}
+      </main>
+    </div>
+  )
+}
+export default App

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,8 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+body {
+  background-color: #f8fafc;
+  color: #1e293b;
+}

frontend/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,26 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        slate: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        }
+      }
+    },
+  },
+  plugins: [],
+}

frontend/vite.config.js ADDED Viewed

	@@ -0,0 +1,12 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': 'http://localhost:8000'
+    }
+  }
+})