init

thirdeye/dashboard/app/components/InsightHero.tsx

@@ -0,0 +1,121 @@
+export default function InsightHero() {
+  return (
+    <div className="glass rounded-2xl border border-white/5 p-8 relative overflow-hidden group animate-fade-in-scale delay-200">
+      <div className="absolute top-0 right-0 p-8 opacity-10 blur-xl group-hover:opacity-20 transition-opacity duration-700">
+        {/* This div seems to be a placeholder or an incomplete instruction.
+            The content '8BFA", boxShadow: "0 0 15px rgba(167, 139, 250, 0.08)", }'
+            is not valid JSX content. Assuming it was meant to be part of a style
+            or a class, but without clear instruction, it's left as an empty div
+            to maintain syntactic correctness. */}
+      </div>
+      <div className="p-10 grid md:grid-cols-3 gap-10 relative z-10">
+        {/* Left: main content */}
+        <div className="md:col-span-2 space-y-6">
+          <div className="flex items-center gap-4">
+            <span
+              className="px-3 py-1 text-[10px] font-bold tracking-[0.1em] rounded-full"
+              style={{
+                color: "#A78BFA",
+                backgroundColor: "rgba(167,139,250,0.2)",
+                border: "1px solid rgba(167,139,250,0.3)",
+              }}
+            >
+              SYSTEM_ALERT
+            </span>
+            <span className="text-zinc-400 text-[11px] uppercase tracking-widest font-semibold">
+              Cross-Group Intelligence Analysis
+            </span>
+          </div>
+
+          <h2 className="text-3xl font-bold tracking-tight text-white leading-tight">
+            Discrepancy in Strategy Alignment: Product vs Engineering
+          </h2>
+
+          <p className="text-zinc-300 text-[15px] leading-relaxed max-w-2xl font-light">
+            Insight explanation: Discrepancy in Q3 roadmap priorities identified across 4
+            cross-functional meetings. Product prioritizes feature velocity, while Engineering
+            focuses on technical debt reduction.
+          </p>
+
+          <div className="flex gap-4">
+            <button className="bg-[#A78BFA]/20 text-[#A78BFA] border border-[#A78BFA]/50 hover:bg-[#A78BFA] hover:text-[#09090B] px-6 py-2 rounded-lg text-sm font-semibold tracking-widest uppercase btn-interactive shadow-[0_0_15px_rgba(167,139,250,0.1)] hover:shadow-[0_0_20px_rgba(167,139,250,0.4)]">
+              Schedule Sync
+            </button>
+            <button className="text-zinc-400 hover:text-zinc-200 bg-white/5 hover:bg-white/10 px-6 py-2 rounded-lg text-sm font-semibold tracking-widest uppercase transition-colors btn-interactive">
+              Dismiss Signal
+            </button>
+          </div>
+        </div>
+
+        {/* Right: alignment bars */}
+        <div className="space-y-6">
+          {/* Group A */}
+          <div
+            className="p-5 rounded-xl border"
+            style={{ backgroundColor: "rgba(0,0,0,0.2)" }}
+          >
+            <div className="flex justify-between items-center mb-3">
+              <span className="text-[11px] text-zinc-300 font-semibold">Group A (Product)</span>
+              <span className="text-xs text-white">72%</span>
+            </div>
+            <div
+              className="h-1.5 rounded-full overflow-hidden"
+              style={{ backgroundColor: "rgba(255,255,255,0.05)" }}
+            >
+              <div
+                className="h-full rounded-full"
+                style={{ width: "72%", backgroundColor: "rgba(167,139,250,0.6)" }}
+              />
+            </div>
+            <p className="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">
+              Alignment on Speed-to-Market
+            </p>
+          </div>
+
+          {/* Group B */}
+          <div
+            className="p-5 rounded-xl border"
+            style={{ backgroundColor: "rgba(0,0,0,0.2)" }}
+          >
+            <div className="flex justify-between items-center mb-3">
+              <span className="text-[11px] text-zinc-300 font-semibold">Group B (Eng)</span>
+              <span className="text-xs text-white">84%</span>
+            </div>
+            <div
+              className="h-1.5 rounded-full overflow-hidden"
+              style={{ backgroundColor: "rgba(255,255,255,0.05)" }}
+            >
+              <div className="h-full rounded-full" style={{ width: "84%", backgroundColor: "#A78BFA" }} />
+            </div>
+            <p className="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">
+              Focus on System Stability
+            </p>
+          </div>
+
+          {/* Recommendation */}
+          <div
+            className="p-5 rounded-xl"
+            style={{
+              border: "1px solid rgba(167,139,250,0.2)",
+              backgroundColor: "rgba(167,139,250,0.1)",
+            }}
+          >
+            <p className="text-[12px] font-medium leading-relaxed" style={{ color: "#A78BFA" }}>
+              <span className="font-bold">RECOMMENDATION:</span> Schedule immediate alignment session
+              for Q3 priority sync.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Abstract gradient element */}
+      <div
+        className="absolute right-0 top-0 h-full w-96 pointer-events-none"
+        style={{
+          opacity: 0.1,
+          background: "linear-gradient(to left, #A78BFA, transparent)",
+        }}
+      />
+    </div>
+  );
+}

thirdeye/dashboard/app/components/IntelligenceTicker.tsx

@@ -0,0 +1,45 @@
+const logs = [
+  "[Signal_Rcv] :: Offset=0x3f4 :: Status=Stable",
+  "[Agent_Sync] :: UUID_4492 :: Auth_Granted",
+  "[IO_Wait] :: 0.042ms :: Vector_Validated",
+  "[Core_Idle] :: Temp_Optimal",
+  "[Log_Dump] :: Stream_Active",
+];
+
+export default function IntelligenceTicker() {
+  // Duplicate for seamless looping
+  const allLogs = [...logs, ...logs];
+
+  return (
+    <footer
+      className="rounded-xl border overflow-hidden"
+      style={{ backgroundColor: "#0C0C0E", padding: "1rem" }}
+    >
+      <div className="flex items-center gap-6 overflow-hidden">
+        <span
+          className="text-[10px] font-extrabold uppercase tracking-widest rounded-full px-3 py-1 flex-shrink-0"
+          style={{
+            color: "#A78BFA",
+            backgroundColor: "rgba(167,139,250,0.1)",
+            border: "1px solid rgba(167,139,250,0.2)",
+          }}
+        >
+          System_Log
+        </span>
+
+        <div className="overflow-hidden flex-1">
+          <div className="ticker-track">
+            {allLogs.map((log, i) => (
+              <span
+                key={i}
+                className="text-[10px] font-medium text-zinc-600 uppercase tracking-wide opacity-80 mr-12 whitespace-nowrap"
+              >
+                {log}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

thirdeye/dashboard/app/components/LiveSignals.tsx

@@ -0,0 +1,85 @@
+const signals = [
+  {
+    icon: "warning",
+    time: "T-2m ago",
+    message:
+      "Unusual spike in security mentions in DevOps channels. Analyzing 12 recent signals...",
+    tag: "Security Risk",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "rgba(167,139,250,0.3)",
+  },
+  {
+    icon: "check_circle",
+    time: "T-14m ago",
+    message:
+      "High consensus reached on Microservices architecture for project 'Aurora'. 95% alignment.",
+    tag: "Consensus Met",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "#A78BFA",
+  },
+  {
+    icon: "campaign",
+    time: "T-1h ago",
+    message:
+      "New 'ThirdEye Sovereign' feature mentioned across all leadership streams. Tracking adoption...",
+    tag: "Brand Sync",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "rgba(167,139,250,0.5)",
+  },
+  {
+    icon: "psychology_alt",
+    time: "T-2h ago",
+    message:
+      "Ongoing trend: Focus shift to AI-assisted development across 5 engineering squads.",
+    tag: "Trend Vector",
+    borderOpacity: "border-l-[3px]",
+    borderColor: "rgba(167,139,250,0.7)",
+  },
+];
+
+export default function LiveSignals() {
+  return (
+    <section className="space-y-6">
+    <div>
+      <div className="flex items-center gap-3 mb-4 animate-fade-in-right delay-300">
+        <div className="w-2 h-2 rounded-full bg-[#A78BFA] shadow-[0_0_10px_#A78BFA] animate-pulse"></div>
+        <h3 className="text-xs font-semibold tracking-widest text-zinc-400 uppercase">Live Signals Stream</h3>
+        <div className="ml-auto flex gap-2">
+          <button className="text-zinc-500 hover:text-[#A78BFA] transition-colors btn-interactive"><span className="material-symbols-outlined text-sm">filter_list</span></button>
+          <button className="text-zinc-500 hover:text-[#A78BFA] transition-colors btn-interactive"><span className="material-symbols-outlined text-sm">sort</span></button>
+        </div>
+      </div>
+      <div className="grid grid-cols-4 gap-4 animate-fade-in-up delay-400">
+        {signals.map((s, idx) => (
+          <div key={idx} className="glass rounded-xl p-4 border border-white/5 hover:border-[#A78BFA]/30 hover:bg-white/5 transition-all group card-interactive flex flex-col justify-between min-h-[140px]" style={{ animationDelay: `${400 + idx * 100}ms` }}>
+            <div className="flex justify-between items-start mb-6">
+              <div
+                className="p-2.5 rounded-lg"
+                style={{ backgroundColor: "rgba(167,139,250,0.1)" }}
+              >
+                <span className="material-symbols-outlined" style={{ color: "#A78BFA", fontSize: "22px" }}>
+                  {s.icon}
+                </span>
+              </div>
+              <span className="text-[10px] text-zinc-400 uppercase tracking-tighter">{s.time}</span>
+            </div>
+
+            <p className="text-[14px] font-medium text-zinc-200 leading-relaxed mb-8">
+              {s.message}
+            </p>
+
+            <div className="mt-auto flex items-center justify-between">
+              <span className="text-[10px] font-bold uppercase tracking-[0.1em]" style={{ color: "#A78BFA" }}>
+                {s.tag}
+              </span>
+              <span className="material-symbols-outlined text-zinc-500 group-hover:text-[#A78BFA] transition-all cursor-pointer" style={{ fontSize: "22px" }}>
+                arrow_forward
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+    </section>
+  );
+}

thirdeye/dashboard/app/components/MaterialSymbols.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function MaterialSymbols() {
+  useEffect(() => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap';
+    document.head.appendChild(link);
+
+    return () => {
+      document.head.removeChild(link);
+    };
+  }, []);
+
+  return null;
+}

thirdeye/dashboard/app/components/MetricTiles.tsx

@@ -0,0 +1,62 @@
+const metrics = [
+  {
+    label: "Active Agents",
+    icon: "sensors",
+    value: "14",
+    sub: "+2 Synced",
+    subColor: "text-[#A78BFA]",
+    subIcon: "trending_up",
+  },
+  {
+    label: "Signals Processed",
+    icon: "data_exploration",
+    value: "8.4k",
+    sub: "Last 24h Cycle",
+    subColor: "text-zinc-400",
+    subIcon: null,
+  },
+  {
+    label: "Open Insights",
+    icon: "lightbulb",
+    value: "23",
+    sub: "4 Critical Priority",
+    subColor: "text-[#A78BFA] font-semibold uppercase tracking-tighter",
+    subIcon: null,
+  },
+  {
+    label: "Avg Latency",
+    icon: "timer",
+    value: "184ms",
+    sub: "Optimal Range",
+    subColor: "text-zinc-400 uppercase tracking-tighter",
+    subIcon: null,
+  },
+];
+
+export default function MetricTiles() {
+  return (
+      <div className="grid grid-cols-4 gap-6 animate-fade-in-up">
+        {metrics.map((metric, index) => (
+          <div key={index} className={`glass p-6 rounded-2xl border flex flex-col justify-between relative overflow-hidden group card-interactive cursor-pointer`} style={{ borderColor: 'rgba(255, 255, 255, 0.05)', animationDelay: `${index * 100}ms` }}>
+          <div className="flex justify-between items-start mb-4">
+            <span className="text-[10px] uppercase tracking-[0.15em] font-semibold text-zinc-400">
+              {metric.label}
+            </span>
+            <span className="material-symbols-outlined" style={{ fontSize: "18px", color: "rgba(167,139,250,0.6)" }}>
+              {metric.icon}
+            </span>
+          </div>
+          <div className="text-3xl font-semibold text-white">{metric.value}</div>
+          <div className={`text-[11px] mt-3 flex items-center gap-1.5 font-medium ${metric.subColor}`}>
+            {metric.subIcon && (
+              <span className="material-symbols-outlined" style={{ fontSize: "11px" }}>
+                {metric.subIcon}
+              </span>
+            )}
+            <span>{metric.sub}</span>
+          </div>
+        </div>
+      ))}
+      </div>
+  );
+}

thirdeye/dashboard/app/components/Sidebar.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+
+const navItems = [
+  { icon: "target", label: "Mission", href: "/mission" },
+  { icon: "group", label: "Agents", href: "/agents" },
+  { icon: "psychology", label: "Intelligence", href: "/intelligence" },
+  { icon: "hub", label: "Knowledge Base", href: "/knowledge-base" },
+  { icon: "terminal", label: "System Logs", href: "/logs" },
+];
+
+const activityItems = [
+  { icon: "video_camera_front", label: "Meetings", href: "/meetings" },
+  { icon: "bug_report", label: "Jira Tickets", href: "/jira" },
+  { icon: "chat", label: "Chat History", href: "/chats" },
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside
+      className="h-screen w-[240px] fixed left-0 top-0 flex flex-col border-r z-50"
+      style={{ backgroundColor: "#0C0C0E" }}
+    >
+      {/* Logo */}
+      <div className="p-8">
+        <Link href="/" className="flex items-center gap-3 w-full hover:opacity-80 transition-opacity drop-shadow-lg">
+          <Image src="/new-logo.png" alt="ThirdEye" width={32} height={32} className="rounded-md" />
+          <div className="flex flex-col justify-center">
+            <div className="text-2xl font-black tracking-wide text-[#a88cf8] uppercase leading-none mt-1">THIRDEYE</div>
+            <div className="text-[9px] font-bold tracking-[0.3em] text-zinc-500 mt-1.5 uppercase">SOVEREIGN_V1</div>
+          </div>
+        </Link>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 px-4 space-y-1 overflow-y-auto custom-scrollbar">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link
+              key={item.label}
+              href={item.href}
+              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-300 ${
+                isActive
+                  ? "text-[#A78BFA] bg-[rgba(167,139,250,0.1)]"
+                  : "text-zinc-500 hover:text-zinc-200 hover:bg-[#141419]"
+              }`}
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>
+                {item.icon}
+              </span>
+              <span className="text-[11px] uppercase tracking-wider font-semibold">
+                {item.label}
+              </span>
+            </Link>
+          );
+        })}
+
+        {/* Activity section */}
+        <div className="pt-4 pb-1 px-4">
+          <p className="text-[9px] font-bold tracking-[0.25em] text-zinc-600 uppercase">Activity</p>
+        </div>
+        {activityItems.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link
+              key={item.label}
+              href={item.href}
+              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-300 ${
+                isActive
+                  ? "text-[#A78BFA] bg-[rgba(167,139,250,0.1)]"
+                  : "text-zinc-500 hover:text-zinc-200 hover:bg-[#141419]"
+              }`}
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>
+                {item.icon}
+              </span>
+              <span className="text-[11px] uppercase tracking-wider font-semibold">
+                {item.label}
+              </span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Footer */}
+      <div className="p-6 border-t">
+        <Link
+          href="#"
+          className="flex items-center gap-3 px-4 py-3 text-zinc-500 hover:text-zinc-200 hover:bg-[#141419] rounded-lg transition-all duration-300 mb-6"
+        >
+          <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>
+            settings
+          </span>
+          <span className="text-[11px] uppercase tracking-wider font-semibold">
+            Settings
+          </span>
+        </Link>
+
+        {/* User Card */}
+        <div
+          className="flex items-center gap-3 px-4 py-3 rounded-xl"
+          style={{ backgroundColor: "rgba(20,20,25,0.5)" }}
+        >
+          <div
+            className="w-8 h-8 rounded flex items-center justify-center overflow-hidden flex-shrink-0"
+            style={{ backgroundColor: "rgba(167,139,250,0.1)" }}
+          >
+            <span
+              className="material-symbols-outlined text-[#A78BFA]"
+              style={{ fontSize: "18px" }}
+            >
+              person
+            </span>
+          </div>
+          <div className="overflow-hidden">
+            <p className="text-[11px] text-zinc-200 font-semibold truncate">CMD_DECKARD</p>
+            <p className="text-[9px] text-zinc-500 uppercase tracking-tighter">Clearance L4</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

thirdeye/dashboard/app/components/TopBar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { checkHealth } from "../lib/api";
+
+export default function TopBar() {
+  const [healthy, setHealthy] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    checkHealth().then(setHealthy);
+    const interval = setInterval(() => checkHealth().then(setHealthy), 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <header
+      className="h-20 flex justify-between items-center px-10 w-full border-b z-40 sticky top-0"
+      style={{ backgroundColor: "rgba(12,12,14,0.8)", backdropFilter: "blur(24px)" }}
+    >
+      {/* Search */}
+      <div className="flex items-center gap-6">
+        <div className="relative">
+          <span
+            className="material-symbols-outlined absolute left-0 top-1/2 -translate-y-1/2 text-zinc-600"
+            style={{ fontSize: "18px" }}
+          >
+            search
+          </span>
+          <input
+            type="text"
+            placeholder="Query the system..."
+            className="bg-transparent border-none text-[13px] focus:outline-none rounded py-2 pl-8 pr-4 w-72 placeholder:text-zinc-700 text-zinc-200 transition-all"
+          />
+        </div>
+      </div>
+
+      {/* Right side */}
+      <div className="flex items-center gap-8">
+        <div className="flex items-center gap-6 text-zinc-500">
+          <span
+            className="material-symbols-outlined text-lg hover:text-[#A78BFA] cursor-pointer transition-colors"
+            style={{ fontSize: "22px" }}
+          >
+            notifications
+          </span>
+          <span
+            className="material-symbols-outlined text-lg hover:text-[#A78BFA] cursor-pointer transition-colors"
+            style={{ fontSize: "22px" }}
+          >
+            terminal
+          </span>
+        </div>
+
+        <div className="h-6 w-px" style={{ backgroundColor: "rgba(255,255,255,0.05)" }} />
+
+        {/* Health indicator */}
+        <div
+          className="text-[10px] font-bold px-4 py-1.5 rounded-full tracking-wide flex items-center gap-2"
+          style={{
+            color: healthy === false ? "#ff6f78" : "#A78BFA",
+            backgroundColor: healthy === false ? "rgba(255,111,120,0.05)" : "rgba(167,139,250,0.05)",
+            border: `1px solid ${healthy === false ? "rgba(255,111,120,0.2)" : "rgba(167,139,250,0.2)"}`,
+          }}
+        >
+          <span
+            className="w-1.5 h-1.5 rounded-full"
+            style={{
+              backgroundColor: healthy === null ? "#A78BFA" : healthy ? "#10b981" : "#ff6f78",
+              display: "inline-block",
+              boxShadow: healthy ? "0 0 6px #10b981" : undefined,
+            }}
+          />
+          {healthy === null
+            ? "CONNECTING..."
+            : healthy
+            ? "THIRDEYE_CORE: ONLINE"
+            : "BACKEND: OFFLINE"}
+        </div>
+      </div>
+    </header>
+  );
+}