zevairouter 1.0.154 → 1.0.155

package/src/shared/components/UsageStats.js

@@ -1,571 +0,0 @@
-"use client";
-
-import { useState, useEffect, useMemo, useCallback, useRef } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
-import { FREE_PROVIDERS, AI_PROVIDERS } from "@/shared/constants/providers";
-
-// Keep providers without serviceKinds (default LLM) or with "llm" in serviceKinds
-function isLLMProvider(id) {
-  const p = AI_PROVIDERS[id];
-  if (!p?.serviceKinds) return true;
-  return p.serviceKinds.includes("llm");
-}
-import Badge from "./Badge";
-import Card from "./Card";
-import OverviewCards from "@/app/(dashboard)/dashboard/usage/components/OverviewCards";
-import UsageTable, { fmt, fmtTime } from "@/app/(dashboard)/dashboard/usage/components/UsageTable";
-import ProviderTopology from "@/app/(dashboard)/dashboard/usage/components/ProviderTopology";
-import UsageChart from "@/app/(dashboard)/dashboard/usage/components/UsageChart";
-import { getAccountPendingCount } from "@/shared/utils/usageStats";
-
-function timeAgo(timestamp) {
-  const diff = Math.max(0, Math.floor((Date.now() - new Date(timestamp)) / 1000));
-  if (diff < 60) return `${diff}s ago`;
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-  return `${Math.floor(diff / 86400)}d ago`;
-}
-
-function isSuccessfulStatus(status) {
-  if (!status) return true;
-  const normalized = String(status).trim().toLowerCase();
-  return normalized === "ok"
-    || normalized === "success"
-    || normalized === "succeeded"
-    || /^2\d\d(?:\s|$)/.test(normalized);
-}
-
-// Auto-update time display every second without re-rendering parent
-function TimeAgo({ timestamp }) {
-  const [, setTick] = useState(0);
-
-  useEffect(() => {
-    const timer = setInterval(() => setTick(t => t + 1), 1000);
-    return () => clearInterval(timer);
-  }, []);
-
-  return (
-    <time dateTime={timestamp} title={new Date(timestamp).toLocaleString()}>
-      {timeAgo(timestamp)}
-    </time>
-  );
-}
-
-const STREAM_STATUS = {
-  live: {
-    label: "Live",
-    title: "Usage stream connected",
-    className: "bg-success/10 text-success",
-    dotClassName: "bg-success animate-pulse",
-  },
-  reconnecting: {
-    label: "Reconnecting",
-    title: "Usage stream disconnected; reconnecting automatically",
-    className: "bg-warning/10 text-warning",
-    dotClassName: "bg-warning animate-pulse",
-  },
-  connecting: {
-    label: "Connecting",
-    title: "Connecting to the live usage stream",
-    className: "bg-primary/10 text-primary",
-    dotClassName: "bg-primary animate-pulse",
-  },
-};
-
-function RecentRequests({ requests = [], streamStatus = "connecting" }) {
-  const stream = STREAM_STATUS[streamStatus] || STREAM_STATUS.connecting;
-
-  return (
-    <Card className="flex h-[420px] min-w-0 flex-col overflow-hidden sm:h-[440px]" padding="none">
-      {/* Header */}
-      <div className="flex shrink-0 items-center justify-between border-b border-border-subtle bg-surface/75 px-4 py-3.5">
-        <div className="flex items-center gap-2">
-          <span className="material-symbols-outlined text-[17px] text-primary">monitor_heart</span>
-          <span className="text-xs font-semibold text-text-main">Recent requests</span>
-        </div>
-        <span
-          className={`inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10px] font-semibold ${stream.className}`}
-          title={stream.title}
-        >
-          <span aria-hidden="true" className={`size-1.5 rounded-full ${stream.dotClassName}`} />
-          {stream.label}
-        </span>
-      </div>
-
-      {!requests.length ? (
-        <div className="flex-1 flex items-center justify-center text-text-muted text-sm">No requests yet.</div>
-      ) : (
-        <div className="flex-1 overflow-x-auto overflow-y-auto px-4 pb-3">
-          <table className="w-full min-w-[300px] border-collapse text-xs">
-            <thead className="sticky top-0 z-10 bg-surface/95 backdrop-blur-sm">
-              <tr className="border-b border-border">
-                <th className="w-2 py-1.5 text-left font-semibold text-text-muted">
-                  <span className="sr-only">Status</span>
-                </th>
-                <th className="py-1.5 text-left font-semibold text-text-muted">Model</th>
-                <th className="py-1.5 text-right font-semibold text-text-muted whitespace-nowrap">In / Out</th>
-                <th className="py-1.5 text-right font-semibold text-text-muted">When</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-border/50">
-              {requests.map((r, i) => {
-                const ok = isSuccessfulStatus(r.status);
-                const statusLabel = ok ? "Succeeded" : "Failed";
-                const providerName = AI_PROVIDERS[r.provider]?.name || FREE_PROVIDERS[r.provider]?.name || r.provider || "Unknown provider";
-                return (
-                  <tr
-                    key={`${r.timestamp}-${r.model}-${r.provider}-${r.promptTokens}-${r.completionTokens}-${i}`}
-                    className="transition-colors hover:bg-bg-subtle"
-                  >
-                    <td className="py-1.5" title={statusLabel}>
-                      <span
-                        role="img"
-                        aria-label={statusLabel}
-                        className={`block size-1.5 rounded-full ${ok ? "bg-success" : "bg-error"}`}
-                      />
-                    </td>
-                    <td className="min-w-0 py-1.5 pr-2">
-                      <div className="max-w-[132px] truncate font-mono" title={r.model}>{r.model}</div>
-                      <div className="mt-0.5 max-w-[132px] truncate text-[10px] font-medium text-text-subtle" title={providerName}>
-                        {providerName}
-                      </div>
-                    </td>
-                    <td className="py-1.5 text-right font-mono tabular-nums whitespace-nowrap">
-                      <span className="text-primary">{fmt(r.promptTokens)}↑</span>
-                      {" "}
-                      <span className="text-success">{fmt(r.completionTokens)}↓</span>
-                    </td>
-                    <td className="py-1.5 text-right text-text-muted whitespace-nowrap"><TimeAgo timestamp={r.timestamp} /></td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </Card>
-  );
-}
-
-function sortData(dataMap, pendingMap = {}, sortBy, sortOrder) {
-  return Object.entries(dataMap || {})
-    .map(([key, data]) => {
-      const totalTokens = (data.promptTokens || 0) + (data.completionTokens || 0);
-      const totalCost = data.cost || 0;
-      const inputCost = totalTokens > 0 ? (data.promptTokens || 0) * (totalCost / totalTokens) : 0;
-      const outputCost = totalTokens > 0 ? (data.completionTokens || 0) * (totalCost / totalTokens) : 0;
-      return { ...data, key, totalTokens, totalCost, inputCost, outputCost, pending: pendingMap[key] || 0 };
-    })
-    .sort((a, b) => {
-      let valA = a[sortBy];
-      let valB = b[sortBy];
-      if (typeof valA === "string") valA = valA.toLowerCase();
-      if (typeof valB === "string") valB = valB.toLowerCase();
-      if (valA < valB) return sortOrder === "asc" ? -1 : 1;
-      if (valA > valB) return sortOrder === "asc" ? 1 : -1;
-      return 0;
-    });
-}
-
-function getGroupKey(item, keyField) {
-  switch (keyField) {
-    case "rawModel": return item.rawModel || "Unknown Model";
-    case "accountName": return item.accountName || `Account ${item.connectionId?.slice(0, 8)}...` || "Unknown Account";
-    case "keyName": return item.keyName || "Unknown Key";
-    case "endpoint": return item.endpoint || "Unknown Endpoint";
-    default: return item[keyField] || "Unknown";
-  }
-}
-
-function groupDataByKey(data, keyField) {
-  if (!Array.isArray(data)) return [];
-  const groups = {};
-  data.forEach((item) => {
-    const gk = getGroupKey(item, keyField);
-    if (!groups[gk]) {
-      groups[gk] = {
-        groupKey: gk,
-        summary: { requests: 0, promptTokens: 0, completionTokens: 0, cachedTokens: 0, totalTokens: 0, cost: 0, inputCost: 0, outputCost: 0, lastUsed: null, pending: 0 },
-        items: [],
-      };
-    }
-    const s = groups[gk].summary;
-    s.requests += item.requests || 0;
-    s.promptTokens += item.promptTokens || 0;
-    s.completionTokens += item.completionTokens || 0;
-    s.cachedTokens += item.cachedTokens || 0;
-    s.totalTokens += item.totalTokens || 0;
-    s.cost += item.cost || 0;
-    s.inputCost += item.inputCost || 0;
-    s.outputCost += item.outputCost || 0;
-    s.pending += item.pending || 0;
-    if (item.lastUsed && (!s.lastUsed || new Date(item.lastUsed) > new Date(s.lastUsed))) {
-      s.lastUsed = item.lastUsed;
-    }
-    groups[gk].items.push(item);
-  });
-  return Object.values(groups);
-}
-
-const MODEL_COLUMNS = [
-  { field: "rawModel", label: "Model" },
-  { field: "provider", label: "Provider" },
-  { field: "requests", label: "Requests", align: "right" },
-  { field: "lastUsed", label: "Last Used", align: "right" },
-];
-
-const ACCOUNT_COLUMNS = [
-  { field: "accountName", label: "Account" },
-  { field: "rawModel", label: "Model" },
-  { field: "provider", label: "Provider" },
-  { field: "requests", label: "Requests", align: "right" },
-  { field: "lastUsed", label: "Last Used", align: "right" },
-];
-
-const API_KEY_COLUMNS = [
-  { field: "keyName", label: "API Key Name" },
-  { field: "rawModel", label: "Model" },
-  { field: "provider", label: "Provider" },
-  { field: "requests", label: "Requests", align: "right" },
-  { field: "lastUsed", label: "Last Used", align: "right" },
-];
-
-const ENDPOINT_COLUMNS = [
-  { field: "endpoint", label: "Endpoint" },
-  { field: "rawModel", label: "Model" },
-  { field: "provider", label: "Provider" },
-  { field: "requests", label: "Requests", align: "right" },
-  { field: "lastUsed", label: "Last Used", align: "right" },
-];
-
-const TABLE_OPTIONS = [
-  { value: "model", label: "Usage by Model" },
-  { value: "account", label: "Usage by Account" },
-  { value: "apiKey", label: "Usage by API Key" },
-  { value: "endpoint", label: "Usage by Endpoint" },
-];
-
-const PERIODS = [
-  { value: "today", label: "Today" },
-  { value: "24h", label: "24h" },
-  { value: "7d", label: "7D" },
-  { value: "30d", label: "30D" },
-  { value: "60d", label: "60D" },
-];
-
-export default function UsageStats({ period: periodProp, setPeriod: setPeriodProp, hidePeriodSelector = false } = {}) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const sortBy = searchParams.get("sortBy") || "rawModel";
-  const sortOrder = searchParams.get("sortOrder") || "asc";
-
-  const [stats, setStats] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [fetching, setFetching] = useState(false);
-  const [tableView, setTableView] = useState("model");
-  const [viewMode, setViewMode] = useState("costs");
-  const [providers, setProviders] = useState([]);
-  const [streamStatus, setStreamStatus] = useState("connecting");
-  const [periodLocal, setPeriodLocal] = useState("today");
-  const isInitialLoad = useRef(true);
-  const period = periodProp ?? periodLocal;
-  const setPeriod = setPeriodProp ?? setPeriodLocal;
-
-  // Fetch connected providers once, deduplicate by provider type
-  // Always include noAuth free providers (e.g. opencode) regardless of connections
-  useEffect(() => {
-    fetch("/api/providers")
-      .then((r) => r.ok ? r.json() : null)
-      .then((d) => {
-        const seen = new Set();
-        const unique = (d?.connections || []).filter((c) => {
-          if (c.isActive === false) return false;
-          if (!isLLMProvider(c.provider)) return false;
-          if (seen.has(c.provider)) return false;
-          seen.add(c.provider);
-          return true;
-        });
-        const noAuthProviders = Object.values(FREE_PROVIDERS)
-          .filter((p) => p.noAuth && !seen.has(p.id) && isLLMProvider(p.id))
-          .map((p) => ({ provider: p.id, name: p.name }));
-        setProviders([...unique, ...noAuthProviders]);
-      })
-      .catch(() => {});
-  }, []);
-
-  // Fetch filtered stats via REST when period changes
-  useEffect(() => {
-    // First load: show full spinner; subsequent: show subtle fetching indicator
-    if (isInitialLoad.current) {
-      isInitialLoad.current = false;
-      setLoading(true);
-    } else {
-      setFetching(true);
-    }
-
-    fetch(`/api/usage/stats?period=${period}`)
-      .then((r) => r.ok ? r.json() : null)
-      .then((data) => {
-        if (data) setStats((prev) => ({ ...prev, ...data }));
-      })
-      .catch(() => {})
-      .finally(() => {
-        setLoading(false);
-        setFetching(false);
-      });
-  }, [period]);  
-
-  // SSE connection - real-time updates for activeRequests + recentRequests only
-  useEffect(() => {
-    const es = new EventSource("/api/usage/stream");
-
-    es.onopen = () => setStreamStatus("live");
-
-    es.onmessage = (e) => {
-      try {
-        const data = JSON.parse(e.data);
-        // Always merge only real-time fields, never overwrite full stats from REST
-        setStats((prev) => ({
-          ...(prev || {}),
-          activeRequests: data.activeRequests,
-          recentRequests: data.recentRequests,
-          errorProvider: data.errorProvider,
-          pending: data.pending,
-        }));
-        setLoading(false);
-      } catch (err) {
-        console.error("[SSE CLIENT] parse error:", err);
-      }
-    };
-
-    es.onerror = () => {
-      setStreamStatus("reconnecting");
-      setLoading(false);
-    };
-
-    return () => es.close();
-  }, []);
-
-  const toggleSort = useCallback((tableType, field) => {
-    const params = new URLSearchParams(searchParams.toString());
-    if (params.get("sortBy") === field) {
-      params.set("sortOrder", params.get("sortOrder") === "asc" ? "desc" : "asc");
-    } else {
-      params.set("sortBy", field);
-      params.set("sortOrder", "asc");
-    }
-    router.replace(`?${params.toString()}`, { scroll: false });
-  }, [searchParams, router]);
-
-  // Compute active table data
-  const activeTableConfig = useMemo(() => {
-    if (!stats) return null;
-    switch (tableView) {
-      case "model": {
-        const pendingMap = stats.pending?.byModel || {};
-        return {
-          columns: MODEL_COLUMNS,
-          groupedData: groupDataByKey(sortData(stats.byModel, pendingMap, sortBy, sortOrder), "rawModel"),
-          storageKey: "usage-stats:expanded-models",
-          emptyMessage: "No usage recorded yet.",
-          renderSummaryCells: (group) => (
-            <>
-              <td className="px-6 py-3 text-text-muted">—</td>
-              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
-            </>
-          ),
-          renderDetailCells: (item) => (
-            <>
-              <td className={`px-6 py-3 font-medium transition-colors ${item.pending > 0 ? "text-primary" : ""}`}>{item.rawModel}</td>
-              <td className="px-6 py-3"><Badge variant={item.pending > 0 ? "primary" : "neutral"} size="sm">{item.provider}</Badge></td>
-              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
-            </>
-          ),
-        };
-      }
-      case "account": {
-        const pendingMap = {};
-        if (stats?.pending?.byAccount) {
-          Object.entries(stats.byAccount || {}).forEach(([accountKey, data]) => {
-            pendingMap[accountKey] = getAccountPendingCount(data, stats.pending.byAccount);
-          });
-        }
-        return {
-          columns: ACCOUNT_COLUMNS,
-          groupedData: groupDataByKey(sortData(stats.byAccount, pendingMap, sortBy, sortOrder), "accountName"),
-          storageKey: "usage-stats:expanded-accounts",
-          emptyMessage: "No account-specific usage recorded yet.",
-          renderSummaryCells: (group) => (
-            <>
-              <td className="px-6 py-3 text-text-muted">—</td>
-              <td className="px-6 py-3 text-text-muted">—</td>
-              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
-            </>
-          ),
-          renderDetailCells: (item) => (
-            <>
-              <td className={`px-6 py-3 font-medium transition-colors ${item.pending > 0 ? "text-primary" : ""}`}>{item.accountName || `Account ${item.connectionId?.slice(0, 8)}...`}</td>
-              <td className={`px-6 py-3 font-medium transition-colors ${item.pending > 0 ? "text-primary" : ""}`}>{item.rawModel}</td>
-              <td className="px-6 py-3"><Badge variant={item.pending > 0 ? "primary" : "neutral"} size="sm">{item.provider}</Badge></td>
-              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
-            </>
-          ),
-        };
-      }
-      case "apiKey": {
-        return {
-          columns: API_KEY_COLUMNS,
-          groupedData: groupDataByKey(sortData(stats.byApiKey, {}, sortBy, sortOrder), "keyName"),
-          storageKey: "usage-stats:expanded-apikeys",
-          emptyMessage: "No API key usage recorded yet.",
-          renderSummaryCells: (group) => (
-            <>
-              <td className="px-6 py-3 text-text-muted">—</td>
-              <td className="px-6 py-3 text-text-muted">—</td>
-              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
-            </>
-          ),
-          renderDetailCells: (item) => (
-            <>
-              <td className="px-6 py-3 font-medium">{item.keyName}</td>
-              <td className="px-6 py-3">{item.rawModel}</td>
-              <td className="px-6 py-3"><Badge variant="neutral" size="sm">{item.provider}</Badge></td>
-              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
-            </>
-          ),
-        };
-      }
-      case "endpoint":
-      default: {
-        return {
-          columns: ENDPOINT_COLUMNS,
-          groupedData: groupDataByKey(sortData(stats.byEndpoint, {}, sortBy, sortOrder), "endpoint"),
-          storageKey: "usage-stats:expanded-endpoints",
-          emptyMessage: "No endpoint usage recorded yet.",
-          renderSummaryCells: (group) => (
-            <>
-              <td className="px-6 py-3 text-text-muted">—</td>
-              <td className="px-6 py-3 text-text-muted">—</td>
-              <td className="px-6 py-3 text-right">{fmt(group.summary.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(group.summary.lastUsed)}</td>
-            </>
-          ),
-          renderDetailCells: (item) => (
-            <>
-              <td className="px-6 py-3 font-medium font-mono text-sm">{item.endpoint}</td>
-              <td className="px-6 py-3">{item.rawModel}</td>
-              <td className="px-6 py-3"><Badge variant="neutral" size="sm">{item.provider}</Badge></td>
-              <td className="px-6 py-3 text-right">{fmt(item.requests)}</td>
-              <td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">{fmtTime(item.lastUsed)}</td>
-            </>
-          ),
-        };
-      }
-    }
-  }, [stats, tableView, sortBy, sortOrder]);
-
-  if (!stats && !loading) return <div className="text-text-muted">Failed to load usage statistics.</div>;
-
-  const spinner = (
-    <div className="flex items-center justify-center py-12 text-text-muted">
-      <span className="material-symbols-outlined text-[32px] animate-spin">progress_activity</span>
-    </div>
-  );
-
-  return (
-    <div className="flex min-w-0 flex-col gap-6 lg:gap-7">
-      {/* Period selector (hidden when controlled by parent) */}
-      {!hidePeriodSelector && (
-        <div className="flex w-full items-center gap-2 sm:w-auto sm:self-end">
-          <div className="grid flex-1 grid-cols-5 items-center gap-1 rounded-lg border border-border bg-bg-subtle p-1 sm:flex sm:flex-none">
-            {PERIODS.map((p) => (
-              <button
-                key={p.value}
-                onClick={() => setPeriod(p.value)}
-                disabled={fetching}
-                className={`rounded-md px-3 py-1 text-sm font-medium transition-colors ${period === p.value ? "bg-primary text-white shadow-sm" : "text-text-muted hover:bg-bg-hover hover:text-text"}`}
-              >
-                {p.label}
-              </button>
-            ))}
-          </div>
-          {fetching && (
-            <span className="material-symbols-outlined text-[16px] text-text-muted animate-spin">progress_activity</span>
-          )}
-        </div>
-      )}
-
-      {/* Overview cards */}
-      {loading ? spinner : <OverviewCards stats={stats} />}
-
-      {/* Provider topology + Recent Requests */}
-      {loading ? spinner : (
-        <div className="grid min-w-0 grid-cols-1 items-stretch gap-4 lg:grid-cols-[minmax(0,3fr)_minmax(340px,2fr)]">
-          <ProviderTopology
-            providers={providers}
-            activeRequests={stats.activeRequests || []}
-            lastProvider={stats.recentRequests?.[0]?.provider || ""}
-            errorProvider={stats.errorProvider || ""}
-          />
-          <RecentRequests requests={stats.recentRequests || []} streamStatus={streamStatus} />
-        </div>
-      )}
-
-      {/* Token / Cost chart - sync period */}
-      {loading ? spinner : <UsageChart period={period} />}
-
-      {/* Table with dropdown selector */}
-      <div className="flex flex-col gap-3">
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <select
-            value={tableView}
-            onChange={(e) => setTableView(e.target.value)}
-            className="w-full rounded-lg border border-border bg-surface px-3 py-1.5 text-sm font-medium text-text-main focus:outline-none focus:ring-2 focus:ring-primary/50 sm:w-auto"
-            style={{ colorScheme: 'auto' }}
-          >
-            {TABLE_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>{opt.label}</option>
-            ))}
-          </select>
-          <div className="grid grid-cols-2 items-center gap-1 rounded-lg border border-border bg-bg-subtle p-1 sm:flex">
-            <button
-              onClick={() => setViewMode("costs")}
-              className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "costs" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
-            >
-              Costs
-            </button>
-            <button
-              onClick={() => setViewMode("tokens")}
-              className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "tokens" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
-            >
-              Tokens
-            </button>
-          </div>
-        </div>
-        {loading ? spinner : activeTableConfig && (
-          <UsageTable
-            title=""
-            columns={activeTableConfig.columns}
-            groupedData={activeTableConfig.groupedData}
-            tableType={tableView}
-            sortBy={sortBy}
-            sortOrder={sortOrder}
-            onToggleSort={toggleSort}
-            viewMode={viewMode}
-            storageKey={activeTableConfig.storageKey}
-            renderSummaryCells={activeTableConfig.renderSummaryCells}
-            renderDetailCells={activeTableConfig.renderDetailCells}
-            emptyMessage={activeTableConfig.emptyMessage}
-          />
-        )}
-      </div>
-    </div>
-  );
-}

package/src/shared/components/index.js

@@ -1,46 +0,0 @@
-// Shared Components - Export all
-export { default as Button } from "./Button";
-export { default as Input } from "./Input";
-export { default as Select } from "./Select";
-export { default as Card } from "./Card";
-export { default as Modal, ConfirmModal } from "./Modal";
-export { default as Loading, Spinner, PageLoading, Skeleton, CardSkeleton } from "./Loading";
-export { default as Avatar } from "./Avatar";
-export { default as Badge } from "./Badge";
-export { default as BulkAccountAutomationModal } from "./BulkAccountAutomationModal";
-export { default as Toggle } from "./Toggle";
-export { default as ThemeToggle } from "./ThemeToggle";
-export { ThemeProvider } from "./ThemeProvider";
-export { default as Sidebar } from "./Sidebar";
-export { default as Header } from "./Header";
-export { default as Footer } from "./Footer";
-export { default as OAuthModal } from "./OAuthModal";
-export { default as ModelSelectModal } from "./ModelSelectModal";
-export { default as ManualConfigModal } from "./ManualConfigModal";
-export { default as ComboFormModal } from "./ComboFormModal";
-export { default as McpMarketplaceModal } from "./McpMarketplaceModal";
-export { default as UsageStats } from "./UsageStats";
-export { default as LanguageSwitcher } from "./LanguageSwitcher";
-export { default as HeaderMenu } from "./HeaderMenu";
-export { default as ChangelogModal } from "./ChangelogModal";
-export { default as RequestLogger } from "./RequestLogger";
-export { default as KiroAuthModal } from "./KiroAuthModal";
-export { default as KiroOAuthWrapper } from "./KiroOAuthWrapper";
-export { default as KiroSocialOAuthModal } from "./KiroSocialOAuthModal";
-export { default as CursorAuthModal } from "./CursorAuthModal";
-export { default as IFlowCookieModal } from "./IFlowCookieModal";
-export { default as CodeBuddyQuotaCookieModal } from "./CodeBuddyQuotaCookieModal";
-export { default as CodeBuddyCnPhoneRegisterModal } from "./CodeBuddyCnPhoneRegisterModal";
-export { default as GitLabAuthModal } from "./GitLabAuthModal";
-export { default as EditConnectionModal } from "./EditConnectionModal";
-export { default as AddCustomEmbeddingModal } from "./AddCustomEmbeddingModal";
-export { default as NoAuthProxyCard } from "./NoAuthProxyCard";
-export { default as SegmentedControl } from "./SegmentedControl";
-export { default as Tooltip } from "./Tooltip";
-export { default as ProviderInfoCard } from "./ProviderInfoCard";
-export { default as Pagination } from "./Pagination";
-
-// Layouts
-export * from "./layouts";
-
-

package/src/shared/components/layouts/AuthLayout.js

@@ -1,29 +0,0 @@
-"use client";
-
-import PropTypes from "prop-types";
-import ThemeToggle from "../ThemeToggle";
-
-export default function AuthLayout({ children }) {
-  return (
-    <div className="min-h-screen flex flex-col relative bg-bg transition-colors duration-500 overflow-x-hidden selection:bg-primary/20 selection:text-primary">
-      {/* Background effects */}
-      <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 dark:bg-primary/5 rounded-full blur-[100px] pointer-events-none z-0" />
-      <div className="fixed bottom-0 right-0 w-[600px] h-[600px] bg-orange-200/20 dark:bg-orange-900/10 rounded-full blur-[120px] pointer-events-none z-0 translate-y-1/3 translate-x-1/3" />
-
-      {/* Theme toggle */}
-      <div className="absolute top-6 right-6 z-20">
-        <ThemeToggle variant="card" />
-      </div>
-
-      {/* Content */}
-      <main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 z-10 w-full h-full">
-        {children}
-      </main>
-    </div>
-  );
-}
-
-AuthLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-