@amir83nasr/10router 0.1.0

package/src/app/(dashboard)/dashboard/usage/components/ProviderTopology.tsx

@@ -0,0 +1,550 @@
+"use client";
+
+import { useMemo, useState, useEffect, useCallback, useRef } from "react";
+import { ReactFlow, Handle, Position, Controls, BaseEdge, getBezierPath } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { AI_PROVIDERS } from "@/shared/constants/providers";
+import { getProviderIconSrc, markProviderIconMissing } from "@/shared/utils/providerIcon";
+
+// Force-stop FE animation if a provider stays active longer than this
+const FE_ACTIVE_TIMEOUT_MS = 60000;
+const FE_ACTIVE_TICK_MS = 1000;
+
+// Kame + electric particles along active edges
+const KAME_PARTICLE_COUNT = 6;
+const SPARK_COUNT = 5;
+
+function getProviderConfig(providerId) {
+  return AI_PROVIDERS[providerId] || { color: "#6b7280", name: providerId };
+}
+
+function getProviderImageUrl(providerId) {
+  return getProviderIconSrc(providerId);
+}
+
+// Custom provider node - rectangle with image + name
+function ProviderNode({ data }: any) {
+  const { label, color, imageUrl, textIcon, active } = data;
+  const [imgError, setImgError] = useState<boolean>(false);
+  return (
+    <div
+      className="flex items-center gap-2.5 px-4 py-2.5 rounded-lg border-2 transition-all duration-300 bg-background"
+      style={{
+        borderColor: active ? color : "var(--border)",
+        boxShadow: active ? `0 0 16px ${color}40` : "none",
+        minWidth: "150px",
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        id="top"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+      <Handle
+        type="target"
+        position={Position.Bottom}
+        id="bottom"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="left"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+      <Handle
+        type="target"
+        position={Position.Right}
+        id="right"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+
+      {/* Provider icon */}
+      <div
+        className="w-8 h-8 rounded-md flex items-center justify-center shrink-0"
+        style={{ backgroundColor: `${color}15` }}
+      >
+        {imageUrl && !imgError ? (
+          <img
+            src={imageUrl}
+            alt={label}
+            className="w-6 h-6 rounded-sm object-contain"
+            loading="lazy"
+            decoding="async"
+            onError={() => {
+              const m = imageUrl?.match(/^\/providers\/([^/]+)\.png$/i);
+              if (m) markProviderIconMissing(m[1]);
+              setImgError(true);
+            }}
+          />
+        ) : (
+          <span className="text-sm font-bold" style={{ color }}>
+            {textIcon}
+          </span>
+        )}
+      </div>
+
+      {/* Provider name */}
+      <span
+        className="text-base font-medium truncate"
+        style={{ color: active ? color : "var(--foreground)" }}
+      >
+        {label}
+      </span>
+
+      {/* Active indicator */}
+      {active && (
+        <span className="relative flex h-2 w-2 shrink-0">
+          <span
+            className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+            style={{ backgroundColor: color }}
+          />
+          <span
+            className="relative inline-flex rounded-full h-2 w-2"
+            style={{ backgroundColor: color }}
+          />
+        </span>
+      )}
+    </div>
+  );
+}
+
+// Center 10Router node — pulse/glow on card only (no expanding rings)
+function RouterNode({ data }: any) {
+  const powering = (data.activeCount || 0) > 0;
+  return (
+    <div
+      className={`relative z-[1] flex items-center justify-center px-5 py-3 rounded-xl border-2 min-w-[130px] ${
+        powering
+          ? "topo-router-core border-yellow-300 bg-gradient-to-br from-primary/30 via-yellow-400/20 to-cyan-400/25"
+          : "border-primary bg-primary/5 shadow-md"
+      }`}
+    >
+      <Handle
+        type="source"
+        position={Position.Top}
+        id="top"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="bottom"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+      <Handle
+        type="source"
+        position={Position.Left}
+        id="left"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="right"
+        className="!bg-transparent !border-0 !w-0 !h-0"
+      />
+
+      <img
+        src="/favicon.svg"
+        alt="10Router"
+        className={`w-6 h-6 mr-2 ${powering ? "topo-router-icon" : ""}`}
+        loading="lazy"
+        decoding="async"
+      />
+      <span
+        className={`text-sm font-bold ${powering ? "topo-router-label text-yellow-300" : "text-primary"}`}
+      >
+        10Router
+      </span>
+      {data.activeCount > 0 && (
+        <span className="ml-2 px-1.5 py-0.5 rounded-full bg-yellow-400 text-black text-xs font-bold topo-router-badge">
+          {data.activeCount}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// Active: electric kame beam (multi-layer stroke + sparks). Idle/last/error: solid BaseEdge.
+function TopologyEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  data,
+}: any) {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+  const active = !!data?.active;
+  const stroke = style.stroke || "var(--border)";
+  const filterId = `topo-electric-${id}`;
+
+  if (!active) {
+    return <BaseEdge id={id} path={edgePath} style={{ ...style, stroke }} />;
+  }
+
+  return (
+    <g className="topo-edge-electric">
+      <defs>
+        <filter id={filterId} x="-40%" y="-40%" width="180%" height="180%">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.9"
+            numOctaves="2"
+            seed="2"
+            result="noise"
+          >
+            <animate
+              attributeName="baseFrequency"
+              values="0.8;1.4;0.8"
+              dur="0.25s"
+              repeatCount="indefinite"
+            />
+          </feTurbulence>
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="noise"
+            scale="3.5"
+            xChannelSelector="R"
+            yChannelSelector="G"
+          />
+        </filter>
+      </defs>
+      {/* Outer electric halo */}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="#22d3ee"
+        strokeWidth={10}
+        strokeOpacity={0.35}
+        strokeLinecap="round"
+        filter={`url(#${filterId})`}
+        className="topo-edge-halo"
+      />
+      {/* Mid plasma */}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="#4ade80"
+        strokeWidth={5}
+        strokeOpacity={0.85}
+        strokeLinecap="round"
+        filter={`url(#${filterId})`}
+        className="topo-edge-plasma"
+      />
+      {/* Hot white core */}
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        style={{ stroke: "#f8fafc", strokeWidth: 2.2, opacity: 1 }}
+        className="topo-edge-kame"
+      />
+      {/* Energy orbs */}
+      {Array.from({ length: KAME_PARTICLE_COUNT }, (_, i) => (
+        <circle
+          key={`${id}-p-${i}`}
+          r={i % 2 === 0 ? 4 : 2.5}
+          fill={i % 3 === 0 ? "#fde047" : i % 3 === 1 ? "#67e8f9" : "#fff"}
+          opacity={0.95}
+          style={{ filter: "drop-shadow(0 0 4px #22d3ee)" }}
+        >
+          <animateMotion
+            dur={`${0.4 + i * 0.08}s`}
+            repeatCount="indefinite"
+            path={edgePath}
+            begin={`${i * 0.09}s`}
+          />
+        </circle>
+      ))}
+      {/* Electric sparks (short-lived blink along path) */}
+      {Array.from({ length: SPARK_COUNT }, (_, i) => (
+        <circle key={`${id}-s-${i}`} r={1.8} fill="#e0f2fe" opacity={0}>
+          <animate
+            attributeName="opacity"
+            values="0;1;0;0;1;0"
+            dur={`${0.35 + (i % 3) * 0.1}s`}
+            begin={`${i * 0.07}s`}
+            repeatCount="indefinite"
+          />
+          <animateMotion
+            dur={`${0.28 + i * 0.05}s`}
+            repeatCount="indefinite"
+            path={edgePath}
+            begin={`${i * 0.11}s`}
+          />
+        </circle>
+      ))}
+    </g>
+  );
+}
+
+const nodeTypes = { provider: ProviderNode, router: RouterNode };
+const edgeTypes = { topology: TopologyEdge };
+
+// Place N nodes evenly along an ellipse around the router center.
+function buildLayout(providers, activeSet, lastSet, errorSet) {
+  const nodeW = 180;
+  const nodeH = 30;
+  const routerW = 120;
+  const routerH = 44;
+  const nodeGap = 24;
+
+  const count = providers.length;
+
+  // Compute rx so arc spacing between nodes >= nodeW + nodeGap
+  const minRx = ((nodeW + nodeGap) * count) / (2 * Math.PI);
+  const rx = Math.max(320, minRx);
+  const ry = Math.max(200, rx * 0.55); // ellipse ratio ~0.55
+  if (count === 0) {
+    return {
+      nodes: [
+        {
+          id: "router",
+          type: "router",
+          position: { x: 0, y: 0 },
+          data: { activeCount: 0 },
+          draggable: false,
+        },
+      ],
+      edges: [],
+    };
+  }
+
+  const nodes = [];
+  const edges = [];
+
+  nodes.push({
+    id: "router",
+    type: "router",
+    position: { x: -routerW / 2, y: -routerH / 2 },
+    data: { activeCount: activeSet.size },
+    draggable: false,
+  });
+
+  const edgeStyle = (active, last, error) => {
+    if (error) return { stroke: "#ef4444", strokeWidth: 2.5, opacity: 0.9 };
+    if (active) return { stroke: "#22d3ee", strokeWidth: 3.5, opacity: 1 };
+    if (last) return { stroke: "#f59e0b", strokeWidth: 2, opacity: 0.7 };
+    return { stroke: "var(--border)", strokeWidth: 1, opacity: 0.3 };
+  };
+
+  providers.forEach((p, i) => {
+    const config = getProviderConfig(p.provider);
+    const active = activeSet.has(p.provider?.toLowerCase());
+    const last = !active && lastSet.has(p.provider?.toLowerCase());
+    const error = !active && errorSet.has(p.provider?.toLowerCase());
+    const nodeId = `provider-${p.provider}`;
+    const data = {
+      label:
+        (config.name !== p.provider ? config.name : null) || p.nodeName || p.name || p.provider,
+      color: config.color || "#6b7280",
+      imageUrl: getProviderImageUrl(p.provider),
+      textIcon: config.textIcon || (p.provider || "?").slice(0, 2).toUpperCase(),
+      active,
+    };
+
+    // Distribute evenly starting from top (−π/2), clockwise
+    const angle = -Math.PI / 2 + (2 * Math.PI * i) / count;
+    const cx = rx * Math.cos(angle);
+    const cy = ry * Math.sin(angle);
+
+    // Pick router handle closest to the node direction
+    let sourceHandle, targetHandle;
+    if (
+      Math.abs(angle + Math.PI / 2) < Math.PI / 4 ||
+      Math.abs(angle - (3 * Math.PI) / 2) < Math.PI / 4
+    ) {
+      sourceHandle = "top";
+      targetHandle = "bottom";
+    } else if (Math.abs(angle - Math.PI / 2) < Math.PI / 4) {
+      sourceHandle = "bottom";
+      targetHandle = "top";
+    } else if (cx > 0) {
+      sourceHandle = "right";
+      targetHandle = "left";
+    } else {
+      sourceHandle = "left";
+      targetHandle = "right";
+    }
+
+    nodes.push({
+      id: nodeId,
+      type: "provider",
+      position: { x: cx - nodeW / 2, y: cy - nodeH / 2 },
+      data,
+      draggable: false,
+    });
+
+    edges.push({
+      id: `e-${nodeId}`,
+      type: "topology",
+      source: "router",
+      sourceHandle,
+      target: nodeId,
+      targetHandle,
+      // Built-in animated uses stroke-dasharray (CPU-heavy); use particle beam instead
+      animated: false,
+      data: { active },
+      style: edgeStyle(active, last, error),
+    });
+  });
+
+  return { nodes, edges };
+}
+
+export default function ProviderTopology({
+  providers = [],
+  activeRequests = [],
+  lastProvider = "",
+  errorProvider = "",
+}: any) {
+  // Serialize to stable string keys so useMemo only re-runs when values actually change
+  const activeKey = useMemo(
+    () =>
+      activeRequests
+        .map((r) => r.provider?.toLowerCase())
+        .filter(Boolean)
+        .sort()
+        .join(","),
+    [activeRequests],
+  );
+  const lastKey = lastProvider?.toLowerCase() || "";
+  const errorKey = errorProvider?.toLowerCase() || "";
+
+  const rawActiveSet = useMemo(() => new Set(activeKey ? activeKey.split(",") : []), [activeKey]);
+  const lastSet = useMemo(() => new Set(lastKey ? [lastKey] : []), [lastKey]);
+  const errorSet = useMemo(() => new Set(errorKey ? [errorKey] : []), [errorKey]);
+
+  // Track firstSeen per active provider; drop provider if running too long (BE stuck)
+  const firstSeenRef = useRef({});
+  const [tick, setTick] = useState<number>(0);
+
+  useEffect(() => {
+    const seen = firstSeenRef.current;
+    const now = Date.now();
+    for (const p of rawActiveSet) {
+      if (!seen[p]) seen[p] = now;
+    }
+    for (const p of Object.keys(seen)) {
+      if (!rawActiveSet.has(p)) delete seen[p];
+    }
+  }, [rawActiveSet]);
+
+  useEffect(() => {
+    if (rawActiveSet.size === 0) return;
+    const id = setInterval(() => setTick((t) => t + 1), FE_ACTIVE_TICK_MS);
+    return () => clearInterval(id);
+  }, [rawActiveSet]);
+
+  const activeSet = useMemo(() => {
+    const now = Date.now();
+    const filtered = new Set();
+    for (const p of rawActiveSet) {
+      const ts = firstSeenRef.current[p];
+      if (!ts || now - ts < FE_ACTIVE_TIMEOUT_MS) filtered.add(p);
+    }
+    return filtered;
+  }, [rawActiveSet, tick]);
+
+  const { nodes, edges } = useMemo(
+    () => buildLayout(providers, activeSet, lastSet, errorSet),
+    [providers, activeSet, lastSet, errorSet],
+  );
+
+  // Stable key — only remount when provider list changes
+  const providersKey = useMemo(
+    () =>
+      providers
+        .map((p) => p.provider)
+        .sort()
+        .join(","),
+    [providers],
+  );
+
+  const rfInstance = useRef<any>(null);
+  const containerRef = useRef<any>(null);
+  const fitOpts = { padding: 0.2, duration: 200 };
+  const onInit = useCallback((instance) => {
+    rfInstance.current = instance;
+    setTimeout(() => instance.fitView(fitOpts), 50);
+  }, []);
+
+  // Re-fit on container resize
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      if (rfInstance.current) rfInstance.current.fitView(fitOpts);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Re-fit when node count/layout changes
+  useEffect(() => {
+    if (rfInstance.current) {
+      const id = setTimeout(() => rfInstance.current.fitView(fitOpts), 50);
+      return () => clearTimeout(id);
+    }
+  }, [nodes.length]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="flex h-[480px] w-full min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-card"
+      style={{ paddingBlock: 0, gap: 0 }}
+    >
+      <div className="flex shrink-0 items-center gap-2 border-b border-border bg-card/80 px-4 py-3 backdrop-blur">
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
+        </span>
+        <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          Live Topology
+        </span>
+      </div>
+      <div className="min-h-0 flex-1">
+        {providers.length === 0 ? (
+          <div className="h-full flex items-center justify-center text-muted-foreground text-sm">
+            No providers connected
+          </div>
+        ) : (
+          <ReactFlow
+            key={providersKey}
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            fitView
+            fitViewOptions={fitOpts}
+            minZoom={0.1}
+            maxZoom={2}
+            onInit={onInit}
+            panOnDrag
+            zoomOnScroll
+            zoomOnPinch
+            zoomOnDoubleClick
+            preventScrolling={false}
+            nodesDraggable={false}
+            nodesConnectable={false}
+            elementsSelectable={false}
+          >
+            <Controls showInteractive={false} className="topo-flow-controls" />
+          </ReactFlow>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/usage/components/UsageChart.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const fmtTokens = (n) => {
+  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+  return String(n || 0);
+};
+
+const fmtCost = (n) => `$${(n || 0).toFixed(4)}`;
+
+export default function UsageChart({ period = "7d" }: any) {
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [viewMode, setViewMode] = useState<string>("tokens");
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/usage/chart?period=${period}`);
+      if (res.ok) {
+        const json = await res.json();
+        setData(json);
+      }
+    } catch (e) {
+      console.error("Failed to fetch chart data:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [period]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const hasData = data.some((d) => d.tokens > 0 || d.cost > 0);
+
+  return (
+    <Card className="flex min-w-0 flex-col gap-3 p-3 sm:p-4">
+      <CardContent className="flex min-w-0 flex-col gap-3 px-0 py-0">
+        <div className="grid w-full grid-cols-2 items-center gap-1 rounded-lg border border-border bg-muted p-1 sm:w-auto sm:self-start">
+          <button
+            onClick={() => setViewMode("tokens")}
+            className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "tokens" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
+          >
+            Tokens
+          </button>
+          <button
+            onClick={() => setViewMode("cost")}
+            className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "cost" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
+          >
+            Cost
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="flex flex-col gap-2" aria-hidden>
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-16" />
+            </div>
+            <Skeleton className="h-[220px] w-full rounded-lg" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-3 w-12" />
+              <Skeleton className="h-3 w-12" />
+              <Skeleton className="h-3 w-12" />
+            </div>
+          </div>
+        ) : !hasData ? (
+          <div className="h-48 flex items-center justify-center text-muted-foreground text-sm">
+            No data for this period
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height={220}>
+            <AreaChart data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+              <defs>
+                <linearGradient id="gradTokens" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#6366f1" stopOpacity={0.25} />
+                  <stop offset="95%" stopColor="#6366f1" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient id="gradCost" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.25} />
+                  <stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.1} />
+              <XAxis
+                dataKey="label"
+                tick={{ fontSize: 10, fill: "currentColor", fillOpacity: 0.5 }}
+                tickLine={false}
+                axisLine={false}
+                interval="preserveStartEnd"
+              />
+              <YAxis
+                tick={{ fontSize: 10, fill: "currentColor", fillOpacity: 0.5 }}
+                tickLine={false}
+                axisLine={false}
+                tickFormatter={viewMode === "tokens" ? fmtTokens : fmtCost}
+                width={50}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "var(--background)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "8px",
+                  fontSize: "12px",
+                }}
+                formatter={(value, name) =>
+                  name === "tokens" ? [fmtTokens(value), "Tokens"] : [fmtCost(value), "Cost"]
+                }
+              />
+              {viewMode === "tokens" ? (
+                <Area
+                  type="monotone"
+                  dataKey="tokens"
+                  stroke="#6366f1"
+                  strokeWidth={2}
+                  fill="url(#gradTokens)"
+                  dot={false}
+                  activeDot={{ r: 4 }}
+                />
+              ) : (
+                <Area
+                  type="monotone"
+                  dataKey="cost"
+                  stroke="#f59e0b"
+                  strokeWidth={2}
+                  fill="url(#gradCost)"
+                  dot={false}
+                  activeDot={{ r: 4 }}
+                />
+              )}
+            </AreaChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+}