wyxrouter 0.4.71

package/src/shared/components/DonateModal.js

@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import { GITHUB_CONFIG } from "@/shared/constants/config";
+
+export default function DonateModal({ isOpen, onClose }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    if (!isOpen || data) return;
+    setLoading(true);
+    setError("");
+    fetch(GITHUB_CONFIG.donateUrl, { cache: "no-store" })
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((json) => setData(json))
+      .catch((err) => setError(err.message || "Failed to load"))
+      .finally(() => setLoading(false));
+  }, [isOpen, data]);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (modalRef.current && !modalRef.current.contains(e.target)) onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose]);
+
+  if (!isOpen || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={onClose} />
+      <div
+        ref={modalRef}
+        className="relative w-full bg-surface border border-black/10 dark:border-white/10 rounded-xl shadow-2xl animate-in fade-in zoom-in-95 duration-200 max-w-3xl flex flex-col max-h-[85vh]"
+      >
+        <div className="flex items-center justify-between p-3 border-b border-black/5 dark:border-white/5">
+          <h2 className="text-lg font-semibold text-text-main flex items-center gap-2">
+            <span className="material-symbols-outlined text-pink-500">volunteer_activism</span>
+            {data?.title || "Support 9Router"}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+            aria-label="Close"
+          >
+            <span className="material-symbols-outlined text-[20px]">close</span>
+          </button>
+        </div>
+
+        <div className="p-6 overflow-y-auto flex-1">
+          {loading && (
+            <div className="flex items-center justify-center py-10 text-text-muted">
+              <span className="material-symbols-outlined animate-spin mr-2">progress_activity</span>
+              Loading...
+            </div>
+          )}
+          {error && (
+            <div className="text-red-500 py-4">Failed to load donate info: {error}</div>
+          )}
+          {!loading && !error && data && (
+            <>
+              {data.message && (
+                <p className="text-text-muted text-sm mb-6 text-center">{data.message}</p>
+              )}
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                {data.channels?.map((ch) => (
+                  <DonateChannelCard key={ch.id} channel={ch} />
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+function DonateChannelCard({ channel }) {
+  const { label, description, icon, color, url, qr } = channel;
+  const content = (
+    <>
+      <div
+        className="w-12 h-12 rounded-full flex items-center justify-center mb-3"
+        style={{ backgroundColor: `${color}20`, color }}
+      >
+        <span className="material-symbols-outlined text-[26px]">{icon}</span>
+      </div>
+      <div className="font-semibold text-text-main mb-1">{label}</div>
+      {description && (
+        <div className="text-xs text-text-muted mb-3 text-center">{description}</div>
+      )}
+      {qr && (
+        <img
+          src={qr}
+          alt={`${label} QR`}
+          className="w-full max-w-[180px] aspect-square object-contain rounded-lg bg-white p-1"
+        />
+      )}
+    </>
+  );
+
+  return (
+    <div className="flex flex-col items-center p-4 rounded-xl border border-black/10 dark:border-white/10 bg-surface/50 hover:border-pink-500/40 transition-colors">
+      {content}
+      {url && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-3 inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity"
+          style={{ backgroundColor: color }}
+        >
+          Open
+          <span className="material-symbols-outlined text-[16px]">open_in_new</span>
+        </a>
+      )}
+    </div>
+  );
+}
+
+DonateModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};

package/src/shared/components/Drawer.js

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect } from "react";
+import { cn } from "@/shared/utils/cn";
+
+export default function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  width = "md",
+  className
+}) {
+  const widths = {
+    sm: "w-[400px]",
+    md: "w-[500px]",
+    lg: "w-[600px]",
+    xl: "w-[800px]",
+    full: "w-full",
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => { document.body.style.overflow = ""; };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-[2px] fade-in cursor-pointer"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Drawer panel */}
+      <div className={cn(
+        "absolute right-0 top-0 h-full bg-surface flex flex-col",
+        "shadow-[var(--shadow-elev)]",
+        "slide-in-right",
+        "border-l border-border-subtle",
+        widths[width] || widths.md,
+        className
+      )}>
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border-subtle flex-shrink-0">
+          <div className="flex items-center gap-3">
+            {title && (
+              <h2 className="text-lg font-semibold text-text-main">{title}</h2>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-[10px] text-text-muted hover:bg-surface-2 hover:text-text-main transition-colors"
+          >
+            <span className="material-symbols-outlined text-[20px]">close</span>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/shared/components/EditConnectionModal.js

@@ -0,0 +1,286 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Modal from "@/shared/components/Modal";
+import Input from "@/shared/components/Input";
+import Button from "@/shared/components/Button";
+import Badge from "@/shared/components/Badge";
+import { isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
+
+export default function EditConnectionModal({ isOpen, connection, proxyPools, onSave, onClose }) {
+  const [formData, setFormData] = useState({
+    name: "",
+    priority: 1,
+    apiKey: "",
+  });
+  const [azureData, setAzureData] = useState({
+    azureEndpoint: "",
+    apiVersion: "2024-10-01-preview",
+    deployment: "",
+    organization: "",
+  });
+  const [cloudflareData, setCloudflareData] = useState({ accountId: "" });
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [validating, setValidating] = useState(false);
+  const [validationResult, setValidationResult] = useState(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (connection) {
+      setFormData({
+        name: connection.name || "",
+        priority: connection.priority || 1,
+        apiKey: "",
+      });
+      // Load Azure-specific data if present
+      if (connection.provider === "azure" && connection.providerSpecificData) {
+        setAzureData({
+          azureEndpoint: connection.providerSpecificData.azureEndpoint || "",
+          apiVersion: connection.providerSpecificData.apiVersion || "2024-10-01-preview",
+          deployment: connection.providerSpecificData.deployment || "",
+          organization: connection.providerSpecificData.organization || "",
+        });
+      }
+      if (connection.provider === "cloudflare-ai" && connection.providerSpecificData) {
+        setCloudflareData({ accountId: connection.providerSpecificData.accountId || "" });
+      }
+      setTestResult(null);
+      setValidationResult(null);
+    }
+  }, [connection]);
+
+  const isOAuth = connection?.authType === "oauth";
+  const isAzure = connection?.provider === "azure";
+  const isCloudflareAi = connection?.provider === "cloudflare-ai";
+  const isCompatible = connection
+    ? (isOpenAICompatibleProvider(connection.provider) || isAnthropicCompatibleProvider(connection.provider))
+    : false;
+
+  const handleTest = async () => {
+    if (!connection?.provider) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const res = await fetch(`/api/providers/${connection.id}/test`, { method: "POST" });
+      const data = await res.json();
+      setTestResult(data.valid ? "success" : "failed");
+    } catch {
+      setTestResult("failed");
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleValidate = async () => {
+    if (!connection?.provider || !formData.apiKey) return;
+    setValidating(true);
+    setValidationResult(null);
+    try {
+      const res = await fetch("/api/providers/validate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          provider: connection.provider,
+          apiKey: formData.apiKey,
+          ...(isAzure ? { providerSpecificData: azureData } : {}),
+          ...(isCloudflareAi ? { providerSpecificData: cloudflareData } : {}),
+        }),
+      });
+      const data = await res.json();
+      setValidationResult(data.valid ? "success" : "failed");
+    } catch {
+      setValidationResult("failed");
+    } finally {
+      setValidating(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!connection) return;
+    setSaving(true);
+    try {
+      const updates = {
+        name: formData.name,
+        priority: formData.priority,
+      };
+      if (!isOAuth && formData.apiKey) {
+        updates.apiKey = formData.apiKey;
+        let isValid = validationResult === "success";
+        if (!isValid) {
+          try {
+            setValidating(true);
+            setValidationResult(null);
+            const res = await fetch("/api/providers/validate", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                provider: connection.provider,
+                apiKey: formData.apiKey,
+                ...(isAzure ? { providerSpecificData: azureData } : {}),
+                ...(isCloudflareAi ? { providerSpecificData: cloudflareData } : {}),
+              }),
+            });
+            const data = await res.json();
+            isValid = !!data.valid;
+            setValidationResult(isValid ? "success" : "failed");
+          } catch {
+            setValidationResult("failed");
+          } finally {
+            setValidating(false);
+          }
+        }
+        if (isValid) {
+          updates.testStatus = "active";
+          updates.lastError = null;
+          updates.lastErrorAt = null;
+        }
+      }
+      
+      // Add Azure-specific data if this is an Azure connection
+      if (isAzure) {
+        updates.providerSpecificData = {
+          azureEndpoint: azureData.azureEndpoint,
+          apiVersion: azureData.apiVersion,
+          deployment: azureData.deployment,
+          organization: azureData.organization,
+        };
+      }
+      if (isCloudflareAi) {
+        updates.providerSpecificData = { accountId: cloudflareData.accountId };
+      }
+      
+      await onSave(updates);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!connection) return null;
+
+  return (
+    <Modal isOpen={isOpen} title="Edit Connection" onClose={onClose}>
+      <div className="flex flex-col gap-4">
+        <Input
+          label="Name"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          placeholder={isOAuth ? "Account name" : "Production Key"}
+        />
+        {isOAuth && connection.email && (
+          <div className="bg-sidebar/50 p-3 rounded-lg">
+            <p className="text-sm text-text-muted mb-1">Email</p>
+            <p className="font-medium">{connection.email}</p>
+          </div>
+        )}
+        <Input
+          label="Priority"
+          type="number"
+          value={formData.priority}
+          onChange={(e) => setFormData({ ...formData, priority: Number.parseInt(e.target.value, 10) || 1 })}
+        />
+
+        {!isOAuth && (
+          <>
+            <div className="flex gap-2">
+              <Input
+                label="API Key"
+                type="password"
+                value={formData.apiKey}
+                onChange={(e) => setFormData({ ...formData, apiKey: e.target.value })}
+                placeholder="Enter new API key"
+                hint="Leave blank to keep the current API key."
+                className="flex-1"
+              />
+              <div className="pt-6">
+                <Button onClick={handleValidate} disabled={!formData.apiKey || validating || saving} variant="secondary">
+                  {validating ? "Checking..." : "Check"}
+                </Button>
+              </div>
+            </div>
+            {validationResult && (
+              <Badge variant={validationResult === "success" ? "success" : "error"}>
+                {validationResult === "success" ? "Valid" : "Invalid"}
+              </Badge>
+            )}
+          </>
+        )}
+
+        {isAzure && (
+          <div className="bg-sidebar/50 p-4 rounded-lg border border-accent/20">
+            <h3 className="font-semibold mb-3 text-sm">Azure OpenAI Configuration</h3>
+            <div className="flex flex-col gap-3">
+              <Input
+                label="Azure Endpoint"
+                value={azureData.azureEndpoint}
+                onChange={(e) => setAzureData({ ...azureData, azureEndpoint: e.target.value })}
+                placeholder="https://your-resource.openai.azure.com"
+                hint="Your Azure OpenAI resource endpoint URL"
+              />
+              <Input
+                label="Deployment Name"
+                value={azureData.deployment}
+                onChange={(e) => setAzureData({ ...azureData, deployment: e.target.value })}
+                placeholder="gpt-4"
+                hint="The deployment name in your Azure resource"
+              />
+              <Input
+                label="API Version"
+                value={azureData.apiVersion}
+                onChange={(e) => setAzureData({ ...azureData, apiVersion: e.target.value })}
+                placeholder="2024-10-01-preview"
+                hint="Azure OpenAI API version to use"
+              />
+              <Input
+                label="Organization"
+                value={azureData.organization}
+                onChange={(e) => setAzureData({ ...azureData, organization: e.target.value })}
+                placeholder="Organization ID"
+                hint="Required for billing"
+              />
+            </div>
+          </div>
+        )}
+
+        {!isCompatible && !isAzure && !isCloudflareAi && (
+          <div className="flex items-center gap-3">
+            <Button onClick={handleTest} variant="secondary" disabled={testing}>
+              {testing ? "Testing..." : "Test Connection"}
+            </Button>
+            {testResult && (
+              <Badge variant={testResult === "success" ? "success" : "error"}>
+                {testResult === "success" ? "Valid" : "Failed"}
+              </Badge>
+            )}
+          </div>
+        )}
+
+        <div className="flex gap-2">
+          <Button onClick={handleSubmit} fullWidth disabled={saving}>{saving ? "Saving..." : "Save"}</Button>
+          <Button onClick={onClose} variant="ghost" fullWidth>Cancel</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+EditConnectionModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  connection: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    email: PropTypes.string,
+    priority: PropTypes.number,
+    authType: PropTypes.string,
+    provider: PropTypes.string,
+    providerSpecificData: PropTypes.object,
+  }),
+  proxyPools: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+  })),
+  onSave: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+

package/src/shared/components/Footer.js

@@ -0,0 +1,132 @@
+"use client";
+
+import Link from "next/link";
+import { APP_CONFIG } from "@/shared/constants/config";
+
+const footerLinks = {
+  product: [
+    { label: "Features", href: "#features" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "Changelog", href: "#" },
+  ],
+  resources: [
+    { label: "Documentation", href: "#" },
+    { label: "API Reference", href: "#" },
+    { label: "Help Center", href: "#" },
+  ],
+  company: [
+    { label: "About", href: "#" },
+    { label: "Blog", href: "#" },
+    { label: "Contact", href: "#" },
+  ],
+};
+
+export default function Footer() {
+  return (
+    <footer className="bg-bg border-t border-border pt-16 pb-12">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-10 mb-12">
+          {/* Brand */}
+          <div className="col-span-2 lg:col-span-2">
+            <div className="flex items-center gap-2 mb-6">
+              <div className="size-6 text-primary">
+                <svg className="w-full h-full" fill="currentColor" viewBox="0 0 48 48">
+                  <path
+                    clipRule="evenodd"
+                    d="M12.0799 24L4 19.2479L9.95537 8.75216L18.04 13.4961L18.0446 4H29.9554L29.96 13.4961L38.0446 8.75216L44 19.2479L35.92 24L44 28.7521L38.0446 39.2479L29.96 34.5039L29.9554 44H18.0446L18.04 34.5039L9.95537 39.2479L4 28.7521L12.0799 24Z"
+                    fillRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <span className="text-xl font-bold text-text-main">
+                {APP_CONFIG.name}
+              </span>
+            </div>
+            <p className="text-text-muted mb-6 max-w-sm font-light">
+              The unified interface for modern AI infrastructure. Secure, observable, and scalable.
+            </p>
+            {/* Social links */}
+            <div className="flex gap-4">
+              <a
+                href="#"
+                className="text-gray-400 hover:text-primary transition-colors"
+                aria-label="Twitter"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z" />
+                </svg>
+              </a>
+              <a
+                href="#"
+                className="text-gray-400 hover:text-primary transition-colors"
+                aria-label="GitHub"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          {/* Product */}
+          <div>
+            <h4 className="font-semibold text-text-main mb-4">Product</h4>
+            <ul className="flex flex-col gap-3 text-sm text-text-muted font-light">
+              {footerLinks.product.map((link) => (
+                <li key={link.label}>
+                  <Link href={link.href} className="hover:text-primary transition-colors">
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Resources */}
+          <div>
+            <h4 className="font-semibold text-text-main mb-4">Resources</h4>
+            <ul className="flex flex-col gap-3 text-sm text-text-muted font-light">
+              {footerLinks.resources.map((link) => (
+                <li key={link.label}>
+                  <Link href={link.href} className="hover:text-primary transition-colors">
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Company */}
+          <div>
+            <h4 className="font-semibold text-text-main mb-4">Company</h4>
+            <ul className="flex flex-col gap-3 text-sm text-text-muted font-light">
+              {footerLinks.company.map((link) => (
+                <li key={link.label}>
+                  <Link href={link.href} className="hover:text-primary transition-colors">
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom */}
+        <div className="border-t border-border pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-sm text-text-muted">
+            © {new Date().getFullYear()} {APP_CONFIG.name} Inc. All rights reserved.
+          </p>
+          <div className="flex gap-6 text-sm text-text-muted">
+            <Link href="#" className="hover:text-primary transition-colors">
+              Privacy Policy
+            </Link>
+            <Link href="#" className="hover:text-primary transition-colors">
+              Terms of Service
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+