wyxrouter 0.4.71

package/src/shared/components/Pagination.js

@@ -0,0 +1,150 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+import Button from "./Button";
+
+export default function Pagination({
+  currentPage,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  className,
+}) {
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const startItem = totalItems > 0 ? (currentPage - 1) * pageSize + 1 : 0;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const showMax = 5;
+
+    let start = Math.max(1, currentPage - 2);
+    let end = Math.min(totalPages, start + showMax - 1);
+
+    if (end - start + 1 < showMax) {
+      start = Math.max(1, end - showMax + 1);
+    }
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col sm:flex-row items-center justify-between gap-4 py-4 px-2",
+        className
+      )}
+    >
+      {/* Info text */}
+      {totalItems > 0 && (
+        <div className="text-sm text-text-muted">
+          Showing <span className="font-medium text-text-main">{startItem}</span> to{" "}
+          <span className="font-medium text-text-main">{endItem}</span> of{" "}
+          <span className="font-medium text-text-main">{totalItems}</span> results
+        </div>
+      )}
+
+      <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4">
+        {/* Page size selector */}
+        {onPageSizeChange && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-text-muted">Rows:</span>
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+              className={cn(
+                "h-9 rounded-lg border border-black/10 dark:border-white/10 bg-surface",
+                "text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20",
+                "cursor-pointer"
+              )}
+              style={{ colorScheme: 'auto' }}
+            >
+              {[10, 20, 50].map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {totalPages > 1 && (
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+              className="w-9 px-0"
+            >
+              <span className="material-symbols-outlined text-[18px]">chevron_left</span>
+            </Button>
+
+            {pageNumbers[0] > 1 && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onPageChange(1)}
+                  className="w-9 px-0 hidden sm:inline-flex"
+                >
+                  1
+                </Button>
+                {pageNumbers[0] > 2 && (
+                  <span className="text-text-muted px-1 hidden sm:inline">...</span>
+                )}
+              </>
+            )}
+
+            {pageNumbers.map((page) => (
+              <Button
+                key={page}
+                variant={currentPage === page ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => onPageChange(page)}
+                className={cn(
+                  "w-9 px-0",
+                  currentPage === page ? "inline-flex" : "hidden sm:inline-flex"
+                )}
+              >
+                {page}
+              </Button>
+            ))}
+
+            {pageNumbers[pageNumbers.length - 1] < totalPages && (
+              <>
+                {pageNumbers[pageNumbers.length - 1] < totalPages - 1 && (
+                  <span className="text-text-muted px-1 hidden sm:inline">...</span>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onPageChange(totalPages)}
+                  className="w-9 px-0 hidden sm:inline-flex"
+                >
+                  {totalPages}
+                </Button>
+              </>
+            )}
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+              className="w-9 px-0"
+            >
+              <span className="material-symbols-outlined text-[18px]">chevron_right</span>
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/shared/components/PricingModal.js

@@ -0,0 +1,208 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getDefaultPricing, formatCost } from "@/shared/constants/pricing.js";
+
+export default function PricingModal({ isOpen, onClose, onSave }) {
+  const [pricingData, setPricingData] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      loadPricing();
+    }
+  }, [isOpen]);
+
+  const loadPricing = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch("/api/pricing");
+      if (response.ok) {
+        const data = await response.json();
+        setPricingData(data);
+      } else {
+        // Fallback to defaults
+        const defaults = getDefaultPricing();
+        setPricingData(defaults);
+      }
+    } catch (error) {
+      console.error("Failed to load pricing:", error);
+      const defaults = getDefaultPricing();
+      setPricingData(defaults);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePricingChange = (provider, model, field, value) => {
+    const numValue = parseFloat(value);
+    if (isNaN(numValue) || numValue < 0) return;
+
+    setPricingData(prev => {
+      const newData = { ...prev };
+      if (!newData[provider]) newData[provider] = {};
+      if (!newData[provider][model]) newData[provider][model] = {};
+      newData[provider][model][field] = numValue;
+      return newData;
+    });
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const response = await fetch("/api/pricing", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(pricingData)
+      });
+
+      if (response.ok) {
+        onSave?.();
+        onClose();
+      } else {
+        const error = await response.json();
+        alert(`Failed to save pricing: ${error.error}`);
+      }
+    } catch (error) {
+      console.error("Failed to save pricing:", error);
+      alert("Failed to save pricing");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleReset = async () => {
+    if (!confirm("Reset all pricing to defaults? This cannot be undone.")) return;
+
+    try {
+      const response = await fetch("/api/pricing", { method: "DELETE" });
+      if (response.ok) {
+        const defaults = getDefaultPricing();
+        setPricingData(defaults);
+      }
+    } catch (error) {
+      console.error("Failed to reset pricing:", error);
+      alert("Failed to reset pricing");
+    }
+  };
+
+  if (!isOpen) return null;
+
+  // Get all unique providers and models for display
+  const allProviders = Object.keys(pricingData).sort();
+  const pricingFields = ["input", "output", "cached", "reasoning", "cache_creation"];
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-bg-base border border-border rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="p-4 border-b border-border flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Pricing Configuration</h2>
+          <button
+            onClick={onClose}
+            className="text-text-muted hover:text-text text-2xl leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto p-4">
+          {loading ? (
+            <div className="text-center py-8 text-text-muted">Loading pricing data...</div>
+          ) : (
+            <div className="space-y-6">
+              {/* Instructions */}
+              <div className="bg-bg-subtle border border-border rounded-lg p-3 text-sm">
+                <p className="font-medium mb-1">Pricing Rates Format</p>
+                <p className="text-text-muted">
+                  All rates are in <strong>dollars per million tokens</strong> ($/1M tokens).
+                  Example: Input rate of 2.50 means $2.50 per 1,000,000 input tokens.
+                </p>
+              </div>
+
+              {/* Pricing Tables */}
+              {allProviders.map(provider => {
+                const models = Object.keys(pricingData[provider]).sort();
+                return (
+                  <div key={provider} className="border border-border rounded-lg overflow-hidden">
+                    <div className="bg-bg-subtle px-4 py-2 font-semibold text-sm">
+                      {provider.toUpperCase()}
+                    </div>
+                    <div className="overflow-x-auto">
+                      <table className="w-full text-sm">
+                        <thead className="bg-bg-hover text-text-muted uppercase text-xs">
+                          <tr>
+                            <th className="px-3 py-2 text-left">Model</th>
+                            <th className="px-3 py-2 text-right">Input</th>
+                            <th className="px-3 py-2 text-right">Output</th>
+                            <th className="px-3 py-2 text-right">Cached</th>
+                            <th className="px-3 py-2 text-right">Reasoning</th>
+                            <th className="px-3 py-2 text-right">Cache Creation</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-border">
+                          {models.map(model => (
+                            <tr key={model} className="hover:bg-bg-subtle/50">
+                              <td className="px-3 py-2 font-medium">{model}</td>
+                              {pricingFields.map(field => (
+                                <td key={field} className="px-3 py-2">
+                                  <input
+                                    type="number"
+                                    step="0.01"
+                                    min="0"
+                                    value={pricingData[provider][model][field] || 0}
+                                    onChange={(e) => handlePricingChange(provider, model, field, e.target.value)}
+                                    className="w-20 px-2 py-1 text-right bg-bg-base border border-border rounded focus:outline-none focus:border-primary"
+                                  />
+                                </td>
+                              ))}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                );
+              })}
+
+              {allProviders.length === 0 && (
+                <div className="text-center py-8 text-text-muted">
+                  No pricing data available
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border flex items-center justify-between gap-2">
+          <button
+            onClick={handleReset}
+            className="px-4 py-2 text-sm text-red-500 hover:bg-red-500/10 rounded border border-red-500/20 transition-colors"
+            disabled={saving}
+          >
+            Reset to Defaults
+          </button>
+          <div className="flex gap-2">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-text-muted hover:text-text border border-border rounded transition-colors"
+              disabled={saving}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              className="px-4 py-2 text-sm bg-primary text-white rounded hover:bg-primary/90 transition-colors disabled:opacity-50"
+              disabled={saving}
+            >
+              {saving ? "Saving..." : "Save Changes"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/shared/components/ProviderIcon.js

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+export default function ProviderIcon({
+  src,
+  alt,
+  size = 32,
+  className = "",
+  fallbackText = "?",
+  fallbackColor,
+}) {
+  const [errored, setErrored] = useState(false);
+  const [imageSrc, setImageSrc] = useState(src);
+
+  useEffect(() => {
+    setErrored(false);
+    setImageSrc(src);
+  }, [src]);
+
+  if (!imageSrc || errored) {
+    return (
+      <span
+        className={`inline-flex items-center justify-center font-bold rounded-lg ${className}`.trim()}
+        style={{
+          width: size,
+          height: size,
+          color: fallbackColor,
+          fontSize: Math.max(10, Math.floor(size * 0.38)),
+        }}
+      >
+        {fallbackText}
+      </span>
+    );
+  }
+
+  return (
+    <img
+      src={imageSrc}
+      alt={alt}
+      width={size}
+      height={size}
+      className={className}
+      onError={() => {
+        if (typeof imageSrc === "string" && imageSrc.endsWith(".png")) {
+          setImageSrc(`${imageSrc.slice(0, -4)}.svg`);
+          return;
+        }
+        setErrored(true);
+      }}
+    />
+  );
+}
+
+ProviderIcon.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  size: PropTypes.number,
+  className: PropTypes.string,
+  fallbackText: PropTypes.string,
+  fallbackColor: PropTypes.string,
+};

package/src/shared/components/ProviderInfoCard.js

@@ -0,0 +1,82 @@
+"use client";
+
+import Card from "./Card";
+
+// Only show fields user actually cares about
+const FIELD_SCHEMA = {
+  mode:             { label: "Mode",       format: (v) => v },
+  defaultModel:     { label: "Model",      format: (v) => v, mono: true },
+  baseUrl:          { label: "Endpoint",   format: (v) => v, isLink: true, mono: true },
+  costPerQuery:     { label: "Cost / call", format: (v) => v === 0 ? "Free" : `$${v.toFixed(4)}` },
+  pricingUrl:       { label: "Pricing",    format: () => "View pricing", isLink: true },
+  freeTier:         { label: "Free tier",  format: (v) => v },
+  freeMonthlyQuota: { label: "Free quota",  format: (v) => v === 0 ? "—" : v >= 999999 ? "Unlimited" : `${v.toLocaleString()} / mo` },
+  searchTypes:      { label: "Types",      format: (v) => v.join(", ") },
+  formats:          { label: "Formats",    format: (v) => v.join(", ") },
+  maxMaxResults:    { label: "Max results", format: (v) => v },
+  maxCharacters:    { label: "Max chars",  format: (v) => v.toLocaleString() },
+};
+
+export default function ProviderInfoCard({ config, provider, title = "Provider Info" }) {
+  if (!config) return null;
+
+  const rows = Object.entries(FIELD_SCHEMA)
+    .filter(([key]) => config[key] !== undefined && config[key] !== null && config[key] !== "")
+    .map(([key, schema]) => ({
+      key,
+      label: schema.label,
+      value: schema.format(config[key]),
+      isLink: schema.isLink,
+      mono: schema.mono,
+      raw: config[key],
+    }));
+
+  const signupUrl = provider?.notice?.apiKeyUrl || provider?.website;
+  const noticeText = provider?.notice?.text;
+
+  return (
+    <Card>
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-lg font-semibold">{title}</h2>
+        {signupUrl && (
+          <a
+            href={signupUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-primary hover:underline inline-flex items-center gap-1"
+          >
+            <span className="material-symbols-outlined text-sm">open_in_new</span>
+            Get API Key
+          </a>
+        )}
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2">
+        {rows.map((r) => (
+          <div key={r.key} className="flex items-center gap-3 min-w-0">
+            <span className="text-xs text-text-muted w-28 shrink-0">{r.label}</span>
+            {r.isLink ? (
+              <a
+                href={r.raw}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`text-sm text-primary hover:underline truncate ${r.mono ? "font-mono" : ""}`}
+              >
+                {r.value}
+              </a>
+            ) : (
+              <span className={`text-sm text-text-main truncate ${r.mono ? "font-mono" : ""}`}>
+                {r.value}
+              </span>
+            )}
+          </div>
+        ))}
+        {noticeText && (
+          <div className="flex items-start gap-3 min-w-0 sm:col-span-2">
+            <span className="text-xs text-text-muted w-28 shrink-0 mt-0.5">Notice</span>
+            <span className="text-sm text-text-main leading-relaxed">{noticeText}</span>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

package/src/shared/components/RequestLogger.js

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Card from "./Card";
+
+export default function RequestLogger() {
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  useEffect(() => {
+    let interval;
+    if (autoRefresh) {
+      interval = setInterval(() => {
+        fetchLogs(false);
+      }, 3000);
+    }
+    return () => clearInterval(interval);
+  }, [autoRefresh]);
+
+  const fetchLogs = async (showLoading = true) => {
+    if (showLoading) setLoading(true);
+    try {
+      const res = await fetch("/api/usage/request-logs");
+      if (res.ok) {
+        const data = await res.json();
+        setLogs(data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch logs:", error);
+    } finally {
+      if (showLoading) setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Request Logs</h2>
+        <div className="flex items-center gap-2">
+          <label className="text-sm font-medium text-text-muted flex items-center gap-2 cursor-pointer">
+            <span>Auto Refresh (3s)</span>
+            <div
+              onClick={() => setAutoRefresh(!autoRefresh)}
+              className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${autoRefresh ? "bg-primary" : "bg-bg-subtle border border-border"
+                }`}
+            >
+              <span
+                className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${autoRefresh ? "translate-x-5" : "translate-x-1"
+                  }`}
+              />
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <Card className="overflow-hidden bg-black/5 dark:bg-black/20">
+        <div className="p-0 overflow-x-auto max-h-[600px] overflow-y-auto font-mono text-xs">
+          {loading && logs.length === 0 ? (
+            <div className="p-8 text-center text-text-muted">Loading logs...</div>
+          ) : logs.length === 0 ? (
+            <div className="p-8 text-center text-text-muted">No logs recorded yet.</div>
+          ) : (
+            <table className="w-full text-left border-collapse whitespace-nowrap">
+              <thead className="sticky top-0 bg-bg-subtle border-b border-border z-10">
+                <tr>
+                  <th className="px-3 py-2 border-r border-border">DateTime</th>
+                  <th className="px-3 py-2 border-r border-border">Model</th>
+                  <th className="px-3 py-2 border-r border-border">Provider</th>
+                  <th className="px-3 py-2 border-r border-border">Account</th>
+                  <th className="px-3 py-2 border-r border-border">In</th>
+                  <th className="px-3 py-2 border-r border-border">Out</th>
+                  <th className="px-3 py-2">Status</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border/50">
+                {logs.map((log, i) => {
+                  const parts = log.split(" | ");
+                  if (parts.length < 7) return null;
+
+                  const status = parts[6];
+                  const isPending = status.includes("PENDING");
+                  const isFailed = status.includes("FAILED");
+                  const isSuccess = status.includes("OK");
+
+                  return (
+                    <tr key={i} className={`hover:bg-primary/5 transition-colors ${isPending ? 'bg-primary/5' : ''}`}>
+                      <td className="px-3 py-1.5 border-r border-border text-text-muted">{parts[0]}</td>
+                      <td className="px-3 py-1.5 border-r border-border font-medium">{parts[1]}</td>
+                      <td className="px-3 py-1.5 border-r border-border">
+                        <span className="px-1.5 py-0.5 rounded bg-bg-subtle border border-border text-[10px] uppercase font-bold">
+                          {parts[2]}
+                        </span>
+                      </td>
+                      <td className="px-3 py-1.5 border-r border-border truncate max-w-[150px]" title={parts[3]}>{parts[3]}</td>
+                      <td className="px-3 py-1.5 border-r border-border text-right text-primary">{parts[4]}</td>
+                      <td className="px-3 py-1.5 border-r border-border text-right text-success">{parts[5]}</td>
+                      <td className={`px-3 py-1.5 font-bold ${isSuccess ? 'text-success' :
+                          isFailed ? 'text-error' :
+                            'text-primary animate-pulse'
+                        }`}>
+                        {status}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </Card>
+      <div className="text-[10px] text-text-muted italic">
+        Logs are loaded from the request history database.
+      </div>
+    </div>
+  );
+}

package/src/shared/components/SegmentedControl.js

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+
+export default function SegmentedControl({
+  options = [],
+  value,
+  onChange,
+  size = "md",
+  className,
+}) {
+  const sizes = {
+    sm: "h-7 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-11 text-base",
+  };
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center p-1 rounded-[10px] overflow-x-auto",
+        "bg-surface-2",
+        className
+      )}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          className={cn(
+            "shrink-0 px-4 rounded-[8px] font-medium transition-all",
+            sizes[size],
+            value === option.value
+              ? "bg-surface text-text-main shadow-sm"
+              : "text-text-muted hover:text-text-main"
+          )}
+        >
+          {option.icon && (
+            <span className="material-symbols-outlined text-[16px] mr-1.5">
+              {option.icon}
+            </span>
+          )}
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}