1 files changed, 507 insertions, 0 deletions
diff --git a/frontend/components/prism/InsidersPage.tsx b/frontend/components/prism/InsidersPage.tsx
new file mode 100644
index 0000000..c0d1363
--- /dev/null
+++ b/frontend/components/prism/InsidersPage.tsx
@@ -0,0 +1,507 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { api } from "@/lib/api";
+import { buildKpis } from "@/lib/overview";
+import { fmtLarge, fmtNumber } from "@/lib/format";
+import { KPIStrip } from "@/components/prism/KPIStrip";
+import { TickerHeader } from "@/components/prism/TickerHeader";
+import type { InsidersResponse, InsiderTransaction, TickerOverview } from "@/types/api";
+
+type InsidersState = "loading" | "ready" | "error" | "empty";
+type Filter = "all" | "buy" | "sell";
+
+type Props = {
+  ticker: string;
+  overview: TickerOverview;
+  isSaved: boolean;
+  onToggleWatchlist: () => void;
+};
+
+// ── Skeleton ──────────────────────────────────────────────────────────────────
+
+function SkeletonBlock({ height, className = "" }: { height: number; className?: string }) {
+  return (
+    <div
+      className={className}
+      style={{
+        height,
+        borderRadius: "var(--r-3)",
+        background: "linear-gradient(90deg, var(--ink-2, #181d26) 25%, var(--ink-3, #1e232e) 50%, var(--ink-2, #181d26) 75%)",
+        backgroundSize: "200% 100%",
+        animation: "psm-shimmer 1.4s ease infinite",
+      }}
+    />
+  );
+}
+
+function InsidersSkeleton() {
+  return (
+    <>
+      {/* KPI row */}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--sp-4)", marginBottom: "var(--sp-5)" }}>
+        {[0, 1, 2, 3].map((i) => <SkeletonBlock key={i} height={64} />)}
+      </div>
+      {/* Chart card */}
+      <div className="psm-card" style={{ marginBottom: "var(--sp-4)" }}>
+        <SkeletonBlock height={220} />
+      </div>
+      {/* Table card */}
+      <div className="psm-card">
+        <SkeletonBlock height={32} className="" />
+        <div style={{ marginTop: "var(--sp-4)", display: "flex", flexDirection: "column", gap: "var(--sp-3)" }}>
+          {[0, 1, 2, 3, 4].map((i) => <SkeletonBlock key={i} height={44} />)}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ── Summary KPI strip ─────────────────────────────────────────────────────────
+
+function InsiderKPIs({ summary }: { summary: InsidersResponse["summary"] }) {
+  const items = [
+    { label: "BUY TRANSACTIONS", value: String(summary.buy_count), tone: "pos" as const },
+    { label: "TOTAL BOUGHT", value: fmtLarge(summary.buy_value), tone: "pos" as const },
+    { label: "SELL TRANSACTIONS", value: String(summary.sell_count), tone: "neg" as const },
+    { label: "TOTAL SOLD", value: fmtLarge(summary.sell_value), tone: "neg" as const },
+  ];
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(4, 1fr)",
+        gap: "var(--sp-4)",
+        marginBottom: "var(--sp-5)",
+      }}
+    >
+      {items.map((item) => (
+        <div
+          key={item.label}
+          className="psm-card"
+          style={{ padding: "var(--sp-4) var(--sp-5)" }}
+        >
+          <div
+            style={{
+              fontFamily: "var(--font-sans)",
+              fontSize: "var(--fs-11)",
+              color: "var(--fg-3)",
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              marginBottom: "var(--sp-2)",
+            }}
+          >
+            {item.label}
+          </div>
+          <div
+            style={{
+              fontFamily: "var(--font-mono)",
+              fontSize: "var(--fs-20)",
+              fontVariantNumeric: "tabular-nums",
+              color: item.tone === "pos" ? "var(--positive)" : "var(--negative)",
+            }}
+          >
+            {item.value || "—"}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Monthly chart (SVG diverging bars) ───────────────────────────────────────
+
+function MonthlyChart({ data }: { data: InsidersResponse["monthly_chart"] }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(600);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const ro = new ResizeObserver((entries) => {
+      setWidth(entries[0].contentRect.width);
+    });
+    ro.observe(containerRef.current);
+    setWidth(containerRef.current.offsetWidth);
+    return () => ro.disconnect();
+  }, []);
+
+  if (!data.length) {
+    return (
+      <div
+        style={{
+          textAlign: "center",
+          padding: "var(--sp-8) 0",
+          fontFamily: "var(--font-sans)",
+          fontSize: "var(--fs-13)",
+          color: "var(--fg-3)",
+        }}
+      >
+        No activity in the last 6 months
+      </div>
+    );
+  }
+
+  const PAD_L = 52;
+  const PAD_R = 16;
+  const PAD_T = 16;
+  const PAD_B = 28;
+  const H = 220;
+  const chartW = Math.max(width - PAD_L - PAD_R, 10);
+  const chartH = H - PAD_T - PAD_B;
+
+  // max absolute value for symmetric axis
+  const maxVal = Math.max(...data.map((d) => Math.max(d.buy, d.sell)), 0.01);
+  const axisMax = Math.ceil(maxVal * 1.15 * 10) / 10 || 1;
+
+  const barW = Math.max(Math.floor((chartW / data.length) * 0.6), 4);
+  const barGap = chartW / data.length;
+
+  const yScale = (v: number) => (v / axisMax) * (chartH / 2);
+  const midY = PAD_T + chartH / 2;
+
+  // Y axis ticks
+  const ticks = [axisMax, axisMax / 2, 0, -axisMax / 2, -axisMax];
+
+  return (
+    <div ref={containerRef} style={{ width: "100%" }}>
+      <svg
+        width={width}
+        height={H}
+        style={{ display: "block", overflow: "visible" }}
+      >
+        {/* Y axis ticks + labels */}
+        {ticks.map((t) => {
+          const y = midY - yScale(t);
+          const label = t === 0 ? "0" : `${t > 0 ? "+" : ""}${Math.abs(t).toFixed(1)}M`;
+          return (
+            <g key={t}>
+              <line
+                x1={PAD_L - 4}
+                x2={PAD_L + chartW}
+                y1={y}
+                y2={y}
+                stroke={t === 0 ? "var(--line-1)" : "var(--line-1)"}
+                strokeWidth={t === 0 ? 1.5 : 0.5}
+                strokeDasharray={t === 0 ? undefined : "2 3"}
+                opacity={t === 0 ? 1 : 0.5}
+              />
+              <text
+                x={PAD_L - 8}
+                y={y + 4}
+                textAnchor="end"
+                fontFamily="var(--font-mono)"
+                fontSize={10}
+                fill="var(--fg-3)"
+              >
+                {label}
+              </text>
+            </g>
+          );
+        })}
+
+        {/* Bars */}
+        {data.map((d, i) => {
+          const cx = PAD_L + i * barGap + barGap / 2;
+          const buyH = yScale(d.buy);
+          const sellH = yScale(d.sell);
+
+          return (
+            <g key={d.month}>
+              {/* Buy bar (up) */}
+              {d.buy > 0 && (
+                <rect
+                  x={cx - barW / 2}
+                  y={midY - buyH}
+                  width={barW}
+                  height={buyH}
+                  fill="var(--positive)"
+                  opacity={0.85}
+                  rx={1}
+                />
+              )}
+              {/* Sell bar (down) */}
+              {d.sell > 0 && (
+                <rect
+                  x={cx - barW / 2}
+                  y={midY}
+                  width={barW}
+                  height={sellH}
+                  fill="var(--negative)"
+                  opacity={0.85}
+                  rx={1}
+                />
+              )}
+              {/* Month label */}
+              <text
+                x={cx}
+                y={H - 6}
+                textAnchor="middle"
+                fontFamily="var(--font-mono)"
+                fontSize={10}
+                fill="var(--fg-3)"
+              >
+                {d.month.slice(5)}
+              </text>
+            </g>
+          );
+        })}
+      </svg>
+
+      {/* Legend */}
+      <div
+        style={{
+          display: "flex",
+          gap: "var(--sp-5)",
+          justifyContent: "flex-end",
+          marginTop: "var(--sp-2)",
+        }}
+      >
+        {[
+          { color: "var(--positive)", label: "Buys" },
+          { color: "var(--negative)", label: "Sells" },
+        ].map(({ color, label }) => (
+          <div
+            key={label}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--sp-2)",
+              fontFamily: "var(--font-sans)",
+              fontSize: "var(--fs-12)",
+              color: "var(--fg-3)",
+            }}
+          >
+            <span
+              style={{
+                display: "inline-block",
+                width: 8,
+                height: 8,
+                borderRadius: 1,
+                background: color,
+              }}
+            />
+            {label}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── Transaction table ─────────────────────────────────────────────────────────
+
+function TransactionRow({ tx }: { tx: InsiderTransaction }) {
+  const isBuy = tx.direction === "buy";
+  const isSell = tx.direction === "sell";
+
+  return (
+    <div className="psm-insider">
+      <div className="who">
+        <span className="name">{tx.insider || "—"}</span>
+        <span className="role">{tx.position || "—"}</span>
+      </div>
+      <span
+        className={`pill ${isBuy ? "buy" : isSell ? "sell" : ""}`}
+        style={
+          !isBuy && !isSell
+            ? { background: "var(--ink-2, #181d26)", color: "var(--fg-3)", border: "1px solid var(--line-1)" }
+            : undefined
+        }
+      >
+        {tx.direction.toUpperCase()}
+      </span>
+      <div style={{ textAlign: "right" }}>
+        <div className="val">{tx.value ? fmtLarge(tx.value) : "—"}</div>
+        <div
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: "var(--fs-11)",
+            color: "var(--fg-3)",
+            fontVariantNumeric: "tabular-nums",
+          }}
+        >
+          {tx.shares ? `${fmtNumber(tx.shares, 0)} sh` : ""}
+          {tx.date ? ` · ${tx.date}` : ""}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TransactionTable({ transactions }: { transactions: InsiderTransaction[] }) {
+  const [filter, setFilter] = useState<Filter>("all");
+
+  const filtered =
+    filter === "all" ? transactions : transactions.filter((t) => t.direction === filter);
+
+  const FILTERS: { key: Filter; label: string }[] = [
+    { key: "all", label: "ALL" },
+    { key: "buy", label: "BUYS" },
+    { key: "sell", label: "SELLS" },
+  ];
+
+  return (
+    <div>
+      {/* Filter toggles */}
+      <div
+        style={{
+          display: "flex",
+          gap: "var(--sp-2)",
+          marginBottom: "var(--sp-4)",
+        }}
+      >
+        {FILTERS.map(({ key, label }) => (
+          <button
+            key={key}
+            onClick={() => setFilter(key)}
+            className={`psm-tab${filter === key ? " active" : ""}`}
+            style={{ cursor: "pointer" }}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {filtered.length === 0 ? (
+        <div
+          style={{
+            textAlign: "center",
+            padding: "var(--sp-8) 0",
+            fontFamily: "var(--font-sans)",
+            fontSize: "var(--fs-13)",
+            color: "var(--fg-3)",
+          }}
+        >
+          No transactions match filter
+        </div>
+      ) : (
+        filtered.map((tx, i) => <TransactionRow key={i} tx={tx} />)
+      )}
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export function InsidersPage({ ticker, overview, isSaved, onToggleWatchlist }: Props) {
+  const [data, setData] = useState<InsidersResponse | null>(null);
+  const [state, setState] = useState<InsidersState>("loading");
+  const kpis = buildKpis(overview);
+
+  useEffect(() => {
+    let cancelled = false;
+    setState("loading");
+    setData(null);
+
+    api
+      .insiders(ticker)
+      .then((res) => {
+        if (cancelled) return;
+        if (!res.transactions.length) {
+          setState("empty");
+        } else {
+          setData(res);
+          setState("ready");
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setState("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [ticker]);
+
+  return (
+    <>
+      <TickerHeader overview={overview} onToggleWatchlist={onToggleWatchlist} isSaved={isSaved} />
+      <KPIStrip items={kpis} />
+
+      <div style={{ padding: "0 var(--sp-1)" }}>
+        {state === "loading" && <InsidersSkeleton />}
+
+        {state === "error" && (
+          <div className="psm-card" style={{ textAlign: "center", padding: "var(--sp-8)" }}>
+            <div
+              style={{
+                fontFamily: "var(--font-sans)",
+                fontSize: "var(--fs-14)",
+                color: "var(--fg-3)",
+              }}
+            >
+              Failed to load insider data
+            </div>
+          </div>
+        )}
+
+        {state === "empty" && (
+          <div className="psm-card" style={{ textAlign: "center", padding: "var(--sp-8)" }}>
+            <div
+              style={{
+                fontFamily: "var(--font-sans)",
+                fontSize: "var(--fs-14)",
+                color: "var(--fg-3)",
+              }}
+            >
+              No insider activity reported
+            </div>
+          </div>
+        )}
+
+        {state === "ready" && data && (
+          <>
+            <InsiderKPIs summary={data.summary} />
+
+            <div className="psm-card" style={{ marginBottom: "var(--sp-4)" }}>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "baseline",
+                  marginBottom: "var(--sp-4)",
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: "var(--font-sans)",
+                    fontSize: "var(--fs-11)",
+                    color: "var(--fg-3)",
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                  }}
+                >
+                  Monthly Insider Activity — Last 6 Months ($M)
+                </span>
+              </div>
+              <MonthlyChart data={data.monthly_chart} />
+            </div>
+
+            <div className="psm-card">
+              <div
+                style={{
+                  fontFamily: "var(--font-sans)",
+                  fontSize: "var(--fs-11)",
+                  color: "var(--fg-3)",
+                  letterSpacing: "0.08em",
+                  textTransform: "uppercase",
+                  marginBottom: "var(--sp-4)",
+                }}
+              >
+                All Transactions
+              </div>
+              <TransactionTable transactions={data.transactions} />
+            </div>
+          </>
+        )}
+      </div>
+
+      <style>{`
+        @keyframes psm-shimmer {
+          0%   { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      `}</style>
+    </>
+  );
+}