init

thirdeye/dashboard/app/intelligence/ThoughtStreams.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { fetchAllSignals, Signal, formatRelativeTime, getSeverityColor } from "../lib/api";
+
+export default function ThoughtStreams() {
+  const [signals, setSignals] = useState<Signal[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const all = await fetchAllSignals();
+        const flat = all
+          .flatMap((g) => g.signals)
+          .sort(
+            (a, b) =>
+              new Date(b.metadata.timestamp).getTime() -
+              new Date(a.metadata.timestamp).getTime()
+          )
+          .slice(0, 10);
+        setSignals(flat);
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  return (
+    <div className="glass-card p-6 rounded-2xl flex flex-col">
+      <h3 className="text-sm font-bold tracking-tight text-white uppercase mb-6">
+        Thought Streams
+      </h3>
+
+      <div
+        className="space-y-4 flex-1 overflow-y-auto pr-2 custom-scrollbar"
+        style={{ maxHeight: "16rem" }}
+      >
+        {loading && (
+          <div className="flex items-center gap-2 text-zinc-600 text-[10px] font-mono-data">
+            <span className="material-symbols-outlined animate-spin text-sm">autorenew</span>
+            Loading streams...
+          </div>
+        )}
+
+        {!loading && signals.length === 0 && (
+          <p className="text-[10px] text-zinc-600 font-mono-data">
+            No signals yet. Streams will appear here as groups send messages.
+          </p>
+        )}
+
+        {signals.map((sig, i) => (
+          <div key={i} className="flex items-start space-x-3 text-[10px]">
+            <span className="font-mono-data shrink-0" style={{ color: "#A78BFA" }}>
+              {formatRelativeTime(sig.metadata.timestamp)}
+            </span>
+            <p
+              className="font-mono-data leading-relaxed"
+              style={{ color: "rgba(249,245,248,0.6)" }}
+            >
+              <span style={{ color: getSeverityColor(sig.metadata.severity) }}>
+                {sig.metadata.type.toUpperCase()}:
+              </span>{" "}
+              {sig.document.slice(0, 80)}
+              {sig.document.length > 80 ? "…" : ""}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <button
+        className="mt-6 w-full py-3 rounded-xl text-[10px] font-mono-data uppercase tracking-widest transition-all hover:opacity-80"
+        style={{
+          backgroundColor: "rgba(167,139,250,0.05)",
+          border: "1px solid rgba(167,139,250,0.2)",
+          color: "#A78BFA",
+        }}
+      >
+        Export Intelligence Data
+      </button>
+    </div>
+  );
+}