Fix Agent Command Center - dark theme, fixed navigation

app/mission-control/agent/[id]/page.tsx

@@ -8,8 +8,8 @@ const AGENT_CONFIG: Record<string, { name: string; avatar: string; color: string
   thoth: { name: "Thoth", avatar: "🧠", color: "#8b5cf6", role: "Strategy & Research", description: "SiteMente planning, research, analysis" },
   "thoth-trading": { name: "Thoth Trading", avatar: "📈", color: "#f59e0b", role: "Market Research", description: "Crypto market analysis and research" },
   ptah: { name: "Ptah", avatar: "🏗️", color: "#10b981", role: "Dev & Ops", description: "Development, deployment, technical implementation" },
-  seshat: { name: "Seshat", avatar: "📜", color: "#ec4899", role: "Content & SEO", description: "Content strategy, SEO, marketing copy" },
-  anubis: { name: "Anubis", avatar: "🐺", color: "#6366f1", role: "Outreach & Growth", description: "Lead generation, client acquisition" },
+  seshat: { name: "Seshat", avatar: "📜", color: "#ec4899", role: "Content & SEO", description: "Content marketing copy" },
+ strategy, SEO,  anubis: { name: "Anubis", avatar: "🐺", color: "#6366f1", role: "Outreach: "Lead generation & Growth", description, client acquisition" },
   sekhmet: { name: "Sekhmet", avatar: "⚔️", color: "#ef4444", role: "Risk Management", description: "Trade execution and risk" },
 };
 
@@ -43,7 +43,6 @@ export default function AgentCenterPage({ params }: { params: { id: string } })
   const fetchAllData = async () => {
     setLoading(true);
     
-    // Tasks
     try {
       const tRes = await fetch("/api/tasks");
       if (tRes.ok) {
@@ -55,7 +54,6 @@ export default function AgentCenterPage({ params }: { params: { id: string } })
       }
     } catch {}
     
-    // Templates
     try {
       const rRes = await fetch("/api/recurring");
       if (rRes.ok) {
@@ -70,7 +68,6 @@ export default function AgentCenterPage({ params }: { params: { id: string } })
       }
     } catch {}
     
-    // Logs
     try {
       const lRes = await fetch(`/api/execution-logs?agent=${agentId}&limit=20`);
       if (lRes.ok) {
@@ -84,15 +81,11 @@ export default function AgentCenterPage({ params }: { params: { id: string } })
       }
     } catch {}
     
-    // Changelog
     try {
       const cRes = await fetch(`/api/changelog?agent=${agentId}&limit=20`);
-      if (cRes.ok) {
-        setChangelog(await cRes.json());
-      }
+      if (cRes.ok) setChangelog(await cRes.json());
     } catch {}
     
-    // Brainown
     try {
       const bRes = await fetch(`/api/agent-outputs?agent=${agentId}`);
       if (bRes.ok) {
@@ -109,9 +102,7 @@ export default function AgentCenterPage({ params }: { params: { id: string } })
       }
     } catch {}
     
-    // Simulate tokens
     setTokens((Math.random() * 2).toFixed(1));
-    
     setLoading(false);
   };
 
@@ -164,279 +155,185 @@ export default function AgentCenterPage({ params }: { params: { id: string } })
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#1a1a2e] to-[#16213e] p-4 md:p-6">
-      {/* Back Button */}
-      <button
-        onClick={() => router.push("/mission-control")}
-        className="mb-4 flex items-center gap-2 text-white/70 hover:text-white transition"
-      >
-        ← Back to Agent Teams
-      </button>
-
-      {/* Header Card */}
-      <div className="bg-white rounded-2xl shadow-lg p-6 mb-6">
-        <div className="flex items-center gap-6">
-          <div 
-            className="w-16 h-16 rounded-full flex items-center justify-center text-3xl"
-            style={{ backgroundColor: agent.color + "20", border: `3px solid ${agent.color}` }}
-          >
-            {agent.avatar}
-          </div>
-          <div className="flex-1">
-            <h1 className="text-2xl font-bold" style={{ color: agent.color }}>
-              {agent.name}
-            </h1>
-            <p className="text-gray-600">{agent.role}</p>
-          </div>
-          <div className="text-right">
-            {getStatusBadge(agentStatus)}
-            <p className="text-sm text-gray-500 mt-1">Tokens: {tokens}k</p>
-            {lastRun && (
-              <p className="text-xs text-gray-400">Last: {new Date(lastRun).toLocaleTimeString()}</p>
-            )}
-          </div>
+    <div className="p-4 md:p-6">
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-6">
+        <button
+          onClick={() => router.push("/mission-control?category=council")}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition"
+        >
+          ←
+        </button>
+        <div 
+          className="w-12 h-12 rounded-full flex items-center justify-center text-2xl"
+          style={{ backgroundColor: agent.color + "20", border: `2px solid ${agent.color}` }}
+        >
+          {agent.avatar}
+        </div>
+        <div className="flex-1">
+          <h1 className="text-xl font-bold" style={{ color: agent.color }}>
+            {agent.name}
+          </h1>
+          <p className="text-white/70 text-sm">{agent.role}</p>
+        </div>
+        <div className="text-right">
+          {getStatusBadge(agentStatus)}
+          <p className="text-xs text-white/50 mt-1">Tokens: {tokens}k</p>
+          {lastRun && <p className="text-xs text-white/40">Last: {new Date(lastRun).toLocaleTimeString()}</p>}
         </div>
       </div>
 
-      {/* 📋 TASKS - 3 Column Kanban */}
-      <div className="bg-white rounded-2xl shadow-lg mb-6 overflow-hidden">
-        <button
-          onClick={() => toggleSection("tasks")}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-50"
-        >
-          <span className="font-semibold text-gray-800">📋 TASKS</span>
-          <span className="text-gray-400">{expanded.tasks ? "▲" : "▼"}</span>
+      {/* 📋 TASKS */}
+      <div className="bg-white/5 rounded-xl border border-white/10 mb-4 overflow-hidden">
+        <button onClick={() => toggleSection("tasks")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
+          <span className="font-semibold">📋 TASKS</span>
+          <span className="text-white/50">{expanded.tasks ? "▲" : "▼"}</span>
         </button>
-        
         {expanded.tasks && (
-          <div className="p-4 pt-0">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {/* To Do */}
-              <div className="bg-gray-50 rounded-xl p-4">
-                <h4 className="font-medium text-gray-600 mb-3 text-center">To Do</h4>
-                <div className="space-y-2 min-h-[100px]">
-                  {todoTasks.length === 0 ? (
-                    <p className="text-xs text-gray-400 text-center py-4">No tasks</p>
-                  ) : (
-                    todoTasks.map((task: any) => (
-                      <div key={task.id} className="p-3 bg-white rounded-lg shadow-sm border border-gray-100">
-                        <span className={`text-xs ${
-                          task.priority === "critical" ? "text-red-500" :
-                          task.priority === "high" ? "text-orange-500" : "text-gray-500"
-                        }`}>[{task.priority}]</span>
-                        <p className="text-sm text-gray-700 mt-1">{task.title}</p>
-                      </div>
-                    ))
-                  )}
-                </div>
+          <div className="p-3 pt-0 grid grid-cols-1 md:grid-cols-3 gap-3">
+            <div className="bg-white/5 rounded-lg p-3">
+              <h4 className="text-xs text-white/50 mb-2 text-center">To Do</h4>
+              <div className="space-y-2">
+                {todoTasks.length === 0 ? <p className="text-xs text-white/30 text-center">—</p> : 
+                  todoTasks.map((t: any) => (
+                    <div key={t.id} className="p-2 bg-white/5 rounded text-xs">
+                      <span className={t.priority === "critical" ? "text-red-400" : t.priority === "high" ? "text-orange-400" : "text-white/50"}>[{t.priority}]</span>
+                      <span className="ml-1">{t.title}</span>
+                    </div>
+                  ))
+                }
               </div>
-              
-              {/* In Progress */}
-              <div className="bg-blue-50 rounded-xl p-4">
-                <h4 className="font-medium text-blue-600 mb-3 text-center">In Progress</h4>
-                <div className="space-y-2 min-h-[100px]">
-                  {inProgressTasks.length === 0 ? (
-                    <p className="text-xs text-blue-300 text-center py-4">No tasks</p>
-                  ) : (
-                    inProgressTasks.map((task: any) => (
-                      <div key={task.id} className="p-3 bg-white rounded-lg shadow-sm border border-blue-100">
-                        <span className={`text-xs ${
-                          task.priority === "critical" ? "text-red-500" :
-                          task.priority === "high" ? "text-orange-500" : "text-gray-500"
-                        }`}>[{task.priority}]</span>
-                        <p className="text-sm text-gray-700 mt-1">{task.title}</p>
-                      </div>
-                    ))
-                  )}
-                </div>
+            </div>
+            <div className="bg-blue-500/10 rounded-lg p-3">
+              <h4 className="text-xs text-blue-400 mb-2 text-center">In Progress</h4>
+              <div className="space-y-2">
+                {inProgressTasks.length === 0 ? <p className="text-xs text-white/30 text-center">—</p> : 
+                  inProgressTasks.map((t: any) => (
+                    <div key={t.id} className="p-2 bg-white/5 rounded text-xs">{t.title}</div>
+                  ))
+                }
               </div>
-              
-              {/* Done */}
-              <div className="bg-green-50 rounded-xl p-4">
-                <h4 className="font-medium text-green-600 mb-3 text-center">Done</h4>
-                <div className="space-y-2 min-h-[100px]">
-                  {doneTasks.length === 0 ? (
-                    <p className="text-xs text-green-300 text-center py-4">No tasks</p>
-                  ) : (
-                    doneTasks.slice(0, 5).map((task: any) => (
-                      <div key={task.id} className="p-3 bg-white rounded-lg shadow-sm border border-green-100">
-                        <p className="text-sm text-gray-700">{task.title}</p>
-                      </div>
-                    ))
-                  )}
-                </div>
+            </div>
+            <div className="bg-green-500/10 rounded-lg p-3">
+              <h4 className="text-xs text-green-400 mb-2 text-center">Done</h4>
+              <div className="space-y-2">
+                {doneTasks.length === 0 ? <p className="text-xs text-white/30 text-center">—</p> : 
+                  doneTasks.slice(0, 3).map((t: any) => (
+                    <div key={t.id} className="p-2 bg-white/5 rounded text-xs line-through opacity-50">{t.title}</div>
+                  ))
+                }
               </div>
             </div>
           </div>
         )}
       </div>
 
-      {/* 🔄 RECURRING SCHEDULES */}
-      <div className="bg-white rounded-2xl shadow-lg mb-6 overflow-hidden">
-        <button
-          onClick={() => toggleSection("recurring")}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-50"
-        >
-          <span className="font-semibold text-gray-800">🔄 RECURRING SCHEDULES</span>
-          <span className="text-gray-400">{expanded.recurring ? "▲" : "▼"}</span>
+      {/* 🔄 RECURRING */}
+      <div className="bg-white/5 rounded-xl border border-white/10 mb-4 overflow-hidden">
+        <button onClick={() => toggleSection("recurring")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
+          <span className="font-semibold">🔄 RECURRING</span>
+          <span className="text-white/50">{expanded.recurring ? "▲" : "▼"}</span>
         </button>
-        
         {expanded.recurring && (
-          <div className="p-4 pt-0 space-y-3">
-            {templates.length === 0 ? (
-              <p className="text-sm text-gray-400 text-center py-4">No recurring tasks</p>
-            ) : (
-              templates.map((template: any) => (
-                <div key={template.id} className="p-4 bg-gray-50 rounded-xl flex items-center justify-between">
+          <div className="p-3 pt-0 space-y-2">
+            {templates.length === 0 ? <p className="text-sm text-white/50">No recurring tasks</p> : 
+              templates.map((t: any) => (
+                <div key={t.id} className="p-3 bg-white/5 rounded-lg flex justify-between items-center">
                   <div>
-                    <p className="font-medium text-gray-800">{template.taskTemplate.title}</p>
-                    <p className="text-sm text-gray-500">
-                      {template.schedule.type === "hourly" ? "Hourly" : 
-                       template.schedule.time ? `${template.schedule.time} CET` : template.schedule.type}
+                    <p className="font-medium text-sm">{t.taskTemplate.title}</p>
+                    <p className="text-xs text-white/50">
+                      {t.schedule.type === "hourly" ? "Hourly" : t.schedule.time ? `${t.schedule.time} CET` : t.schedule.type}
                     </p>
                   </div>
                   <div className="flex gap-2">
-                    <button
-                      onClick={() => runNow(template.id)}
-                      className="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm"
-                    >
-                      ▶ Run
-                    </button>
-                    <button
-                      onClick={() => toggleTemplate(template.id, !template.enabled)}
-                      className={`px-3 py-1 rounded-lg text-sm ${
-                        template.enabled 
-                          ? "bg-green-500 text-white" 
-                          : "bg-gray-200 text-gray-600"
-                      }`}
-                    >
-                      {template.enabled ? "● AUTO-ON" : "○ OFF"}
+                    <button onClick={() => runNow(t.id)} className="px-2 py-1 bg-brand-pink rounded text-xs">▶</button>
+                    <button onClick={() => toggleTemplate(t.id, !t.enabled)} 
+                      className={`px-2 py-1 rounded text-xs ${t.enabled ? "bg-green-500" : "bg-white/10"}`}>
+                      {t.enabled ? "ON" : "OFF"}
                     </button>
                   </div>
                 </div>
               ))
-            )}
+            }
           </div>
         )}
       </div>
 
-      {/* 📊 EXECUTION LOGS */}
-      <div className="bg-white rounded-2xl shadow-lg mb-6 overflow-hidden">
-        <button
-          onClick={() => toggleSection("logs")}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-50"
-        >
-          <span className="font-semibold text-gray-800">📊 EXECUTION LOGS</span>
-          <span className="text-gray-400">{expanded.logs ? "▲" : "▼"}</span>
+      {/* 📊 LOGS */}
+      <div className="bg-white/5 rounded-xl border border-white/10 mb-4 overflow-hidden">
+        <button onClick={() => toggleSection("logs")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
+          <span className="font-semibold">📊 EXECUTION LOGS</span>
+          <span className="text-white/50">{expanded.logs ? "▲" : "▼"}</span>
         </button>
-        
         {expanded.logs && (
-          <div className="p-4 pt-0 space-y-2">
-            {logs.length === 0 ? (
-              <p className="text-sm text-gray-400 text-center py-4">No execution logs</p>
-            ) : (
-              logs.map((log: any) => (
-                <div key={log.id} className="p-3 bg-gray-50 rounded-lg flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <span className={`w-2 h-2 rounded-full ${
-                      log.status === "completed" ? "bg-green-500" :
-                      log.status === "running" ? "bg-yellow-500" :
-                      log.status === "failed" ? "bg-red-500" : "bg-gray-400"
-                    }`} />
-                    <div>
-                      <p className="text-sm font-medium text-gray-700">{log.taskTitle}</p>
-                      <p className="text-xs text-gray-400">
-                        {new Date(log.startedAt).toLocaleString()}
-                        {log.completedAt && ` • ${Math.round((new Date(log.completedAt).getTime() - new Date(log.startedAt).getTime()) / 1000)}s`}
-                      </p>
-                    </div>
+          <div className="p-3 pt-0 space-y-2">
+            {logs.length === 0 ? <p className="text-sm text-white/50">No logs</p> : 
+              logs.slice(0, 5).map((l: any) => (
+                <div key={l.id} className="p-2 bg-white/5 rounded flex justify-between items-center text-sm">
+                  <div className="flex items-center gap-2">
+                    <span className={`w-2 h-2 rounded-full ${l.status === "completed" ? "bg-green-500" : l.status === "failed" ? "bg-red-500" : "bg-yellow-500"}`} />
+                    <span>{l.taskTitle}</span>
                   </div>
-                  <span className={`text-xs px-2 py-1 rounded ${
-                    log.status === "completed" ? "bg-green-100 text-green-700" :
-                    log.status === "running" ? "bg-yellow-100 text-yellow-700" :
-                    log.status === "failed" ? "bg-red-100 text-red-700" : "bg-gray-100 text-gray-700"
-                  }`}>
-                    {log.status === "completed" ? "✓ Success" : log.status === "failed" ? "✕ Error" : log.status}
+                  <span className={`text-xs px-2 py-0.5 rounded ${l.status === "completed" ? "bg-green-500/20 text-green-400" : l.status === "failed" ? "bg-red-500/20 text-red-400" : "bg-yellow-500/20 text-yellow-400"}`}>
+                    {l.status}
                   </span>
                 </div>
               ))
-            )}
+            }
           </div>
         )}
       </div>
 
       {/* 📝 CHANGE LOG */}
-      <div className="bg-white rounded-2xl shadow-lg mb-6 overflow-hidden">
-        <button
-          onClick={() => toggleSection("changelog")}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-50"
-        >
-          <span className="font-semibold text-gray-800">📝 CHANGE LOG</span>
-          <span className="text-gray-400">{expanded.changelog ? "▲" : "▼"}</span>
+      <div className="bg-white/5 rounded-xl border border-white/10 mb-4 overflow-hidden">
+        <button onClick={() => toggleSection("changelog")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
+          <span className="font-semibold">📝 CHANGE LOG</span>
+          <span className="text-white/50">{expanded.changelog ? "▲" : "▼"}</span>
         </button>
-        
         {expanded.changelog && (
-          <div className="p-4 pt-0 space-y-2">
-            {changelog.length === 0 ? (
-              <p className="text-sm text-gray-400 text-center py-4">No changes recorded</p>
-            ) : (
-              changelog.map((entry: any) => (
-                <div key={entry.id} className="p-3 bg-gray-50 rounded-lg">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-xs px-2 py-0.5 rounded bg-purple-100 text-purple-700">
-                      v{entry.version || "1.0"}
-                    </span>
-                    <span className="text-xs text-gray-400">
-                      {new Date(entry.date).toLocaleDateString()}
-                    </span>
+          <div className="p-3 pt-0 space-y-2">
+            {changelog.length === 0 ? <p className="text-sm text-white/50">No changes</p> : 
+              changelog.slice(0, 5).map((c: any) => (
+                <div key={c.id} className="p-2 bg-white/5 rounded">
+                  <div className="flex justify-between">
+                    <span className="text-xs px-2 py-0.5 rounded bg-purple-500/20 text-purple-400">v{c.version || "1.0"}</span>
+                    <span className="text-xs text-white/40">{new Date(c.date).toLocaleDateString()}</span>
                   </div>
-                  <p className="text-sm text-gray-700">{entry.description}</p>
+                  <p className="text-sm mt-1">{c.description}</p>
                 </div>
               ))
-            )}
+            }
           </div>
         )}
       </div>
 
-      {/* 🧠 BRAINOWN OUTPUTS */}
-      <div className="bg-white rounded-2xl shadow-lg mb-6 overflow-hidden">
-        <button
-          onClick={() => toggleSection("brainown")}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-50"
-        >
-          <span className="font-semibold text-gray-800">🧠 BRAINOWN OUTPUTS</span>
-          <span className="text-gray-400">{expanded.brainown ? "▲" : "▼"}</span>
+      {/* 🧠 BRAINOWN */}
+      <div className="bg-white/5 rounded-xl border border-white/10 mb-4 overflow-hidden">
+        <button onClick={() => toggleSection("brainown")} className="w-full p-3 flex justify-between items-center hover:bg-white/5">
+          <span className="font-semibold">🧠 BRAINOWN</span>
+          <span className="text-white/50">{expanded.brainown ? "▲" : "▼"}</span>
         </button>
-        
         {expanded.brainown && (
-          <div className="p-4 pt-0 space-y-2">
-            {brainownNotes.length === 0 ? (
-              <p className="text-sm text-gray-400 text-center py-4">No outputs yet</p>
-            ) : (
-              brainownNotes.map((note: any) => (
-                <div key={note.date} className="p-3 bg-gray-50 rounded-lg">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-medium text-gray-700">📄 {note.date}</span>
-                  </div>
-                  <pre className="text-xs text-gray-600 whitespace-pre-wrap max-h-32 overflow-y-auto">
-                    {note.content.substring(0, 300)}...
-                  </pre>
+          <div className="p-3 pt-0 space-y-2">
+            {brainownNotes.length === 0 ? <p className="text-sm text-white/50">No outputs</p> : 
+              brainownNotes.map((n: any) => (
+                <div key={n.date} className="p-2 bg-white/5 rounded">
+                  <span className="text-sm">📄 {n.date}</span>
+                  <pre className="text-xs text-white/60 mt-1 truncate">{n.content.substring(0, 100)}...</pre>
                 </div>
               ))
-            )}
+            }
           </div>
         )}
       </div>
 
-      {/* Back Button Bottom */}
-      <div className="text-center">
-        <button
-          onClick={() => router.push("/mission-control")}
-          className="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition"
-        >
-          ← Back to Agent Teams
-        </button>
-      </div>
+      {/* Back */}
+      <button
+        onClick={() => router.push("/mission-control?category=council")}
+        className="w-full py-3 bg-white/10 hover:bg-white/20 rounded-lg transition"
+      >
+        ← Back to Agent Teams
+      </button>
     </div>
   );
 }