init

thirdeye/dashboard/app/agents/page.tsx

@@ -0,0 +1,75 @@
+import "./agents.css";
+import Sidebar from "../components/Sidebar";
+import TopBar from "../components/TopBar";
+import AgentStats from "./AgentStats";
+import AgentCards from "./AgentCards";
+import SystemTicker from "./SystemTicker";
+
+export const metadata = {
+  title: "ThirdEye | Agent Operations",
+  description: "Agent Fleet Management — ThirdEye Sovereign Protocol",
+};
+
+export default function AgentsPage() {
+  return (
+    <div className="flex h-screen overflow-hidden bg-[#09090B] text-white" style={{ fontFamily: "'Poppins', sans-serif" }}>
+      <Sidebar />
+      <main className="flex-1 ml-[240px] flex flex-col h-screen overflow-hidden">
+        <TopBar />
+
+        {/* Scrollable content */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar px-10 pb-12 pt-10">
+          {/* Header & Stats */}
+          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end mb-10 gap-6">
+            <div className="space-y-1">
+              <h1
+                className="text-3xl font-black tracking-tighter text-white flex items-center gap-3"
+                style={{ fontFamily: "'Inter Tight', sans-serif" }}
+              >
+                Fleet Management
+                <span
+                  className="px-2 py-0.5 text-[10px] rounded border font-mono-data tracking-widest uppercase"
+                  style={{
+                    backgroundColor: "rgba(168, 140, 251, 0.1)",
+                    color: "#a88cfb",
+                    borderColor: "rgba(168, 140, 251, 0.2)",
+                  }}
+                >
+                  Live Status
+                </span>
+              </h1>
+              <p
+                className="max-w-xl text-sm leading-relaxed"
+                style={{ color: "#acaab1" }}
+              >
+                Active deployment of neural processing agents across ThirdEye node
+                clusters. Monitoring real-time throughput and cognitive load.
+              </p>
+            </div>
+            <button
+              className="font-bold text-sm px-6 py-3 rounded-lg flex items-center gap-3 neon-glow-violet active:scale-95 transition-all"
+              style={{
+                backgroundColor: "#a88cfb",
+                color: "#260069",
+                fontFamily: "'Inter Tight', sans-serif",
+              }}
+            >
+              <span className="material-symbols-outlined text-lg">add_circle</span>
+              Deploy New Agent
+            </button>
+          </div>
+
+          {/* Stats Grid */}
+          <AgentStats />
+
+          {/* Agent Cards Grid */}
+          <AgentCards />
+
+          {/* Ticker Section */}
+          <SystemTicker />
+        </div>
+      </main>
+    </div>
+  );
+
+}