wyxrouter 0.4.71

package/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/utils.js

@@ -0,0 +1,244 @@
+import { getModelsByProviderId } from "open-sse/config/providerModels.js";
+
+/**
+ * Format ISO date string to countdown format (inspired by vscode-antigravity-cockpit)
+ * @param {string|Date} date - ISO date string or Date object
+ * @returns {string} Formatted countdown (e.g., "2d 5h 30m", "4h 40m", "15m") or "-"
+ */
+export function formatResetTime(date) {
+  if (!date) return "-";
+
+  try {
+    const resetDate = typeof date === "string" ? new Date(date) : date;
+    const now = new Date();
+    const diffMs = resetDate - now;
+
+    if (diffMs <= 0) return "-";
+
+    const totalMinutes = Math.ceil(diffMs / (1000 * 60));
+    
+    // < 60 minutes: show only minutes
+    if (totalMinutes < 60) {
+      return `${totalMinutes}m`;
+    }
+    
+    const totalHours = Math.floor(totalMinutes / 60);
+    const remainingMinutes = totalMinutes % 60;
+    
+    // < 24 hours: show hours and minutes
+    if (totalHours < 24) {
+      return `${totalHours}h ${remainingMinutes}m`;
+    }
+    
+    // >= 24 hours: show days, hours, and minutes
+    const days = Math.floor(totalHours / 24);
+    const remainingHours = totalHours % 24;
+    return `${days}d ${remainingHours}h ${remainingMinutes}m`;
+  } catch (error) {
+    return "-";
+  }
+}
+
+/**
+ * Get Tailwind color class based on percentage
+ * @param {number} percentage - Remaining percentage (0-100)
+ * @returns {string} Color name: "green" | "yellow" | "red"
+ */
+export function getStatusColor(percentage) {
+  if (percentage > 70) return "green";
+  if (percentage >= 30) return "yellow";
+  return "red"; // 0-29% including 0% (out of quota) - show red
+}
+
+/**
+ * Get status emoji based on percentage
+ * @param {number} percentage - Remaining percentage (0-100)
+ * @returns {string} Emoji: "🟢" | "🟡" | "🔴"
+ */
+export function getStatusEmoji(percentage) {
+  if (percentage > 70) return "🟢";
+  if (percentage >= 30) return "🟡";
+  return "🔴"; // 0-29% including 0% (out of quota) - show red
+}
+
+/**
+ * Calculate remaining percentage
+ * @param {number} used - Used amount
+ * @param {number} total - Total amount
+ * @returns {number} Remaining percentage (0-100)
+ */
+export function calculatePercentage(used, total) {
+  if (!total || total === 0) return 0;
+  if (!used || used < 0) return 100;
+  if (used >= total) return 0;
+
+  return Math.round(((total - used) / total) * 100);
+}
+
+/**
+ * Get remaining percentage from a normalized quota row
+ * @param {Object} quota - Normalized quota object
+ * @returns {number} Remaining percentage (0-100)
+ */
+export function getRemainingPercentage(quota) {
+  if (quota?.remaining !== undefined) {
+    return Math.max(0, Math.round(quota.remaining));
+  }
+
+  if (quota?.remainingPercentage !== undefined) {
+    return Math.round(quota.remainingPercentage);
+  }
+
+  return calculatePercentage(quota?.used, quota?.total);
+}
+
+/**
+ * Parse provider-specific quota structures into normalized array
+ * @param {string} provider - Provider name (github, antigravity, codex, kiro, claude)
+ * @param {Object} data - Raw quota data from provider
+ * @returns {Array<Object>} Normalized quota objects with { name, used, total, resetAt }
+ */
+export function parseQuotaData(provider, data) {
+  if (!data || typeof data !== "object") return [];
+
+  const normalizedQuotas = [];
+
+  try {
+    switch (provider.toLowerCase()) {
+      case "github":
+        if (data.quotas) {
+          Object.entries(data.quotas).forEach(([name, quota]) => {
+            normalizedQuotas.push({
+              name,
+              used: quota.used || 0,
+              total: quota.total || 0,
+              resetAt: quota.resetAt || null,
+            });
+          });
+        }
+        break;
+
+      case "antigravity":
+        if (data.quotas) {
+          Object.entries(data.quotas).forEach(([modelKey, quota]) => {
+            normalizedQuotas.push({
+              name: quota.displayName || modelKey,
+              modelKey: modelKey, // Keep modelKey for sorting
+              used: quota.used || 0,
+              total: quota.total || 0,
+              resetAt: quota.resetAt || null,
+              remainingPercentage: quota.remainingPercentage,
+            });
+          });
+        }
+        break;
+
+      case "codex":
+        if (data.quotas) {
+          Object.entries(data.quotas).forEach(([quotaType, quota]) => {
+            normalizedQuotas.push({
+              name: quotaType,
+              used: quota.used || 0,
+              total: quota.total || 0,
+              remaining: quota.remaining,
+              resetAt: quota.resetAt || null,
+            });
+          });
+        }
+        break;
+
+      case "kiro":
+        if (data.quotas) {
+          Object.entries(data.quotas).forEach(([quotaType, quota]) => {
+            normalizedQuotas.push({
+              name: quotaType,
+              used: quota.used || 0,
+              total: quota.total || 0,
+              resetAt: quota.resetAt || null,
+            });
+          });
+        }
+        break;
+
+      case "qoder":
+        // Qoder ships a `user` quota and (optionally) an `organization`
+        // quota, both with same shape: {total, used, remaining, unit, resetAt}.
+        // Skip an organization bucket when its total is 0 — most personal
+        // Qoder accounts won't have one and rendering "0/0" is misleading.
+        // Don't forward Qoder's `remaining` field: it's an absolute credit
+        // count, but getRemainingPercentage / QuotaTable interpret
+        // `remaining` as a 0-100 percentage and would render 348 credits
+        // as "348%". The percentage is computed from used/total instead.
+        if (data.quotas) {
+          Object.entries(data.quotas).forEach(([quotaType, quota]) => {
+            if (quotaType === "organization" && (!quota || (Number(quota.total) || 0) === 0)) {
+              return;
+            }
+            normalizedQuotas.push({
+              name: quotaType === "user" ? "Personal" : quotaType === "organization" ? "Organization" : quotaType,
+              used: quota.used || 0,
+              total: quota.total || 0,
+              unit: quota.unit,
+              resetAt: quota.resetAt || null,
+            });
+          });
+        }
+        break;
+
+      case "claude":
+        if (data.message) {
+          // Handle error message case
+          normalizedQuotas.push({
+            name: "error",
+            used: 0,
+            total: 0,
+            resetAt: null,
+            message: data.message,
+          });
+        } else if (data.quotas) {
+          Object.entries(data.quotas).forEach(([name, quota]) => {
+            normalizedQuotas.push({
+              name,
+              used: quota.used || 0,
+              total: quota.total || 0,
+              resetAt: quota.resetAt || null,
+            });
+          });
+        }
+        break;
+
+      default:
+        // Generic fallback for unknown providers
+        if (data.quotas) {
+          Object.entries(data.quotas).forEach(([name, quota]) => {
+            normalizedQuotas.push({
+              name,
+              used: quota.used || 0,
+              total: quota.total || 0,
+              resetAt: quota.resetAt || null,
+            });
+          });
+        }
+    }
+  } catch (error) {
+    console.error(`Error parsing quota data for ${provider}:`, error);
+    return [];
+  }
+
+  // Sort quotas according to PROVIDER_MODELS order
+  const modelOrder = getModelsByProviderId(provider);
+  if (modelOrder.length > 0) {
+    const orderMap = new Map(modelOrder.map((m, i) => [m.id, i]));
+    
+    normalizedQuotas.sort((a, b) => {
+      // Use modelKey for antigravity, otherwise use name
+      const keyA = a.modelKey || a.name;
+      const keyB = b.modelKey || b.name;
+      const orderA = orderMap.get(keyA) ?? 999;
+      const orderB = orderMap.get(keyB) ?? 999;
+      return orderA - orderB;
+    });
+  }
+
+  return normalizedQuotas;
+}

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

@@ -0,0 +1,327 @@
+"use client";
+
+import { useMemo, useState, useEffect, useCallback, useRef } from "react";
+import PropTypes from "prop-types";
+import {
+  ReactFlow,
+  Handle,
+  Position,
+  Controls,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { AI_PROVIDERS } from "@/shared/constants/providers";
+
+// Force-stop FE animation if a provider stays active longer than this
+const FE_ACTIVE_TIMEOUT_MS = 60000;
+const FE_ACTIVE_TICK_MS = 1000;
+
+function getProviderConfig(providerId) {
+  return AI_PROVIDERS[providerId] || { color: "#6b7280", name: providerId };
+}
+
+// Use local provider images from /public/providers/
+function getProviderImageUrl(providerId) {
+  return `/providers/${providerId}.png`;
+}
+
+// Custom provider node - rectangle with image + name
+function ProviderNode({ data }) {
+  const { label, color, imageUrl, textIcon, active } = data;
+  const [imgError, setImgError] = useState(false);
+  return (
+    <div
+      className="flex items-center gap-2.5 px-4 py-2.5 rounded-lg border-2 transition-all duration-300 bg-bg"
+      style={{
+        borderColor: active ? color : "var(--color-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` }}
+      >
+        {!imgError ? (
+          <img src={imageUrl} alt={label} className="w-6 h-6 rounded-sm object-contain" onError={() => 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(--color-text)" }}
+      >
+        {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>
+  );
+}
+
+ProviderNode.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+// Center 9Router node
+function RouterNode({ data }) {
+  return (
+    <div className="flex items-center justify-center px-5 py-3 rounded-xl border-2 border-primary bg-primary/5 shadow-md min-w-[130px]">
+      <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="9Router" className="w-6 h-6 mr-2" />
+      <span className="text-sm font-bold text-primary">9Router</span>
+      {data.activeCount > 0 && (
+        <span className="ml-2 px-1.5 py-0.5 rounded-full bg-primary text-white text-xs font-bold">
+          {data.activeCount}
+        </span>
+      )}
+    </div>
+  );
+}
+
+RouterNode.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+const nodeTypes = { provider: ProviderNode, router: RouterNode };
+
+// 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, color) => {
+    if (error) return { stroke: "#ef4444", strokeWidth: 2.5, opacity: 0.9 };
+    if (active) return { stroke: "#22c55e", strokeWidth: 2.5, opacity: 0.9 };
+    if (last) return { stroke: "#f59e0b", strokeWidth: 2, opacity: 0.7 };
+    return { stroke: "var(--color-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.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}`,
+      source: "router",
+      sourceHandle,
+      target: nodeId,
+      targetHandle,
+      animated: active,
+      style: edgeStyle(active, last, error, config.color),
+    });
+  });
+
+  return { nodes, edges };
+}
+
+export default function ProviderTopology({ providers = [], activeRequests = [], lastProvider = "", errorProvider = "" }) {
+  // 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(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, lastKey, errorKey]
+  );
+
+  // Stable key — only remount when provider list changes
+  const providersKey = useMemo(
+    () => providers.map((p) => p.provider).sort().join(","),
+    [providers]
+  );
+
+  const rfInstance = useRef(null);
+  const containerRef = useRef(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="h-[320px] w-full min-w-0 rounded-lg border border-border bg-bg-subtle/30 sm:h-[480px]">
+      {providers.length === 0 ? (
+        <div className="h-full flex items-center justify-center text-text-muted text-sm">
+          No providers connected
+        </div>
+      ) : (
+        <ReactFlow
+          key={providersKey}
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          fitView
+          fitViewOptions={fitOpts}
+          minZoom={0.1}
+          maxZoom={2}
+          onInit={onInit}
+          proOptions={{ hideAttribution: true }}
+          panOnDrag
+          zoomOnScroll
+          zoomOnPinch
+          zoomOnDoubleClick
+          preventScrolling={false}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable={false}
+        >
+          <Controls showInteractive={false} className="react-flow-controls-custom" />
+        </ReactFlow>
+      )}
+    </div>
+  );
+}
+
+ProviderTopology.propTypes = {
+  providers: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    provider: PropTypes.string,
+    name: PropTypes.string,
+  })),
+  activeRequests: PropTypes.arrayOf(PropTypes.shape({
+    provider: PropTypes.string,
+    model: PropTypes.string,
+    account: PropTypes.string,
+  })),
+  lastProvider: PropTypes.string,
+  errorProvider: PropTypes.string,
+};