@amir83nasr/10router 0.1.0

package/src/app/landing/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { useRouter } from "next/navigation";
+import Navigation from "./components/Navigation";
+import HeroSection from "./components/HeroSection";
+import FlowAnimation from "./components/FlowAnimation";
+import HowItWorks from "./components/HowItWorks";
+import Features from "./components/Features";
+import GetStarted from "./components/GetStarted";
+import Footer from "./components/Footer";
+
+export default function LandingPage() {
+  const router = useRouter();
+  return (
+    <div className="relative text-white font-sans overflow-x-hidden antialiased selection:bg-[#32ec83] selection:text-white">
+      {/* Animated Background */}
+      <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#0d1512]">
+        {/* Grid pattern */}
+        <div
+          className="absolute inset-0 opacity-[0.06]"
+          style={{
+            backgroundImage: `linear-gradient(to right, #32ec83 1px, transparent 1px), linear-gradient(to bottom, #32ec83 1px, transparent 1px)`,
+            backgroundSize: "50px 50px",
+          }}
+        ></div>
+
+        {/* Animated gradient orbs */}
+        <div className="absolute top-0 left-1/4 w-[700px] h-[700px] bg-[#32ec83]/12 rounded-full blur-[130px] animate-blob"></div>
+        <div
+          className="absolute top-1/3 right-1/4 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[130px] animate-blob"
+          style={{ animationDelay: "2s", animationDuration: "22s" }}
+        ></div>
+        <div
+          className="absolute bottom-0 left-1/2 w-[650px] h-[650px] bg-blue-500/8 rounded-full blur-[130px] animate-blob"
+          style={{ animationDelay: "4s", animationDuration: "25s" }}
+        ></div>
+
+        {/* Vignette effect */}
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              "radial-gradient(circle at center, transparent 0%, rgba(13, 21, 18, 0.4) 100%)",
+          }}
+        ></div>
+      </div>
+
+      <div className="relative z-10">
+        <Navigation />
+
+        <main>
+          {/* Hero with Flow Animation */}
+          <div className="relative">
+            <HeroSection />
+            <div className="flex justify-center pb-20">
+              <FlowAnimation />
+            </div>
+          </div>
+
+          <GetStarted />
+          <HowItWorks />
+          <Features />
+
+          {/* CTA Section */}
+          <section className="py-32 px-6 relative overflow-hidden">
+            <div className="absolute inset-0 bg-linear-to-t from-[#32ec83]/5 to-transparent pointer-events-none"></div>
+            <div className="max-w-4xl mx-auto text-center relative z-10">
+              <h2 className="text-4xl md:text-5xl font-black mb-6">
+                Ready to Simplify Your AI Infrastructure?
+              </h2>
+              <p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
+                Join developers who are streamlining their AI integrations with 10Router. Open
+                source and free to start.
+              </p>
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                <button
+                  onClick={() => router.push("/dashboard")}
+                  className="w-full sm:w-auto h-14 px-10 rounded-lg bg-[#32ec83] hover:bg-[#1ec768] text-[#0d1512] text-lg font-bold transition-all shadow-[0_0_20px_rgba(50,236,131,0.5)]"
+                >
+                  Start Free
+                </button>
+                <button
+                  onClick={() =>
+                    window.open("https://github.com/Amir83Nasr/10router#readme", "_blank")
+                  }
+                  className="w-full sm:w-auto h-14 px-10 rounded-lg border border-[#1f2f26] hover:bg-[#122019] text-white text-lg font-bold transition-all"
+                >
+                  Read Documentation
+                </button>
+              </div>
+            </div>
+          </section>
+        </main>
+
+        <Footer />
+      </div>
+
+      {/* Global styles for keyframes */}
+      <style jsx global>{`
+        @keyframes float {
+          0%,
+          100% {
+            transform: translateY(0);
+          }
+          50% {
+            transform: translateY(-10px);
+          }
+        }
+        @keyframes dash {
+          to {
+            stroke-dashoffset: -20;
+          }
+        }
+        @keyframes blob {
+          0%,
+          100% {
+            transform: translate(0, 0) scale(1);
+          }
+          33% {
+            transform: translate(30px, -50px) scale(1.1);
+          }
+          66% {
+            transform: translate(-20px, 20px) scale(0.9);
+          }
+        }
+        .animate-blob {
+          animation: blob 20s ease-in-out infinite;
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/app/layout.tsx

@@ -0,0 +1,60 @@
+import type { Metadata, Viewport } from "next";
+import { Inter, Vazirmatn } from "next/font/google";
+import Script from "next/script";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import "./globals.css";
+import { ThemeProvider } from "@/shared/components/ThemeProvider";
+import "@/lib/network/initOutboundProxy"; // Auto-initialize outbound proxy env
+import "@/shared/services/bootstrap"; // Auto-run initializeApp (watchdog, auto-resume tunnel)
+import { initConsoleLogCapture } from "@/lib/consoleLogBuffer";
+import { RuntimeI18nProvider } from "@/i18n/RuntimeI18nProvider";
+
+// Hook console immediately at module load time (server-side only, runs once)
+initConsoleLogCapture();
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const vazirmatn = Vazirmatn({
+  subsets: ["arabic", "latin"],
+  variable: "--font-vazirmatn",
+});
+
+export const metadata: Metadata = {
+  title: "10Router - AI Infrastructure Management",
+  description:
+    "One endpoint for all your AI providers. Manage keys, monitor usage, and scale effortlessly.",
+  icons: {
+    icon: "/favicon.svg",
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: "#F2F9F4",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        {/* Theme is pinned to light — clear any persisted dark mode
+            (zustand "theme" key / `dark` class) before first paint. */}
+        <Script
+          id="theme-reset"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var s=localStorage.getItem('theme');if(s){try{var o=JSON.parse(s);if(o&&o.state){o.state.theme='light';localStorage.setItem('theme',JSON.stringify(o))}}catch(e){}}document.documentElement.classList.remove('dark')}catch(e){}})();`,
+          }}
+        />
+      </head>
+      <body className={`${inter.variable} ${vazirmatn.variable} font-sans antialiased`}>
+        <ThemeProvider>
+          <RuntimeI18nProvider>{children}</RuntimeI18nProvider>
+        </ThemeProvider>
+        <GoogleAnalytics gaId={"G-LC959F603F"} />
+      </body>
+    </html>
+  );
+}

package/src/app/login/page.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Loader2 } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export default function LoginPage() {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [resetHint, setResetHint] = useState("");
+  const [retryAfter, setRetryAfter] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [hasPassword, setHasPassword] = useState(null);
+  const [authMode, setAuthMode] = useState("password");
+  const [ssoType, setSsoType] = useState("oidc");
+  const [oidcConfigured, setOidcConfigured] = useState(false);
+  const [oidcLoginLabel, setOidcLoginLabel] = useState("Sign in with OIDC");
+  const [samlConfigured, setSamlConfigured] = useState(false);
+  const [samlLoginLabel, setSamlLoginLabel] = useState("Sign in with SAML SSO");
+  const [mustChange, setMustChange] = useState(false);
+  const [newPassword, setNewPassword] = useState("");
+
+  // Countdown for rate-limit
+  useEffect(() => {
+    if (retryAfter <= 0) return;
+    const id = setInterval(() => setRetryAfter((s) => (s > 0 ? s - 1 : 0)), 1000);
+    return () => clearInterval(id);
+  }, [retryAfter]);
+
+  useEffect(() => {
+    async function checkAuth() {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 5000);
+      const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
+
+      try {
+        const res = await fetch(`${baseUrl}/api/auth/status`, {
+          signal: controller.signal,
+        });
+        clearTimeout(timeoutId);
+
+        if (res.ok) {
+          const data = await res.json();
+          if (data.authenticated === true || data.requireLogin === false) {
+            window.location.assign("/dashboard");
+            return;
+          }
+          setHasPassword(!!data.hasPassword);
+          setAuthMode(data.authMode || "password");
+          setSsoType(data.ssoType || "oidc");
+          setOidcConfigured(data.oidcConfigured === true);
+          setOidcLoginLabel(data.oidcLoginLabel || "Sign in with OIDC");
+          setSamlConfigured(data.samlConfigured === true);
+          setSamlLoginLabel(data.samlLoginLabel || "Sign in with SAML SSO");
+        } else {
+          // Safe fallback on non-OK response to avoid infinite loading state.
+          setHasPassword(true);
+        }
+      } catch (err) {
+        clearTimeout(timeoutId);
+        setHasPassword(true);
+      }
+    }
+    checkAuth();
+  }, []);
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    setResetHint("");
+
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ password }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        if (data.mustChangePassword) {
+          setMustChange(true);
+          return;
+        }
+        window.location.assign("/dashboard");
+      } else {
+        const data = await res.json();
+        setError(data.error || "Invalid password");
+        if (data.resetHint) setResetHint(data.resetHint);
+        if (data.retryAfter) setRetryAfter(Number(data.retryAfter));
+      }
+    } catch (err) {
+      setError("An error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Force a new password before entering the dashboard (default + remote).
+  const handleSetNewPassword = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch("/api/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ currentPassword: password, newPassword }),
+      });
+      if (res.ok) {
+        window.location.assign("/dashboard");
+      } else {
+        const data = await res.json();
+        setError(data.error || "Failed to set password");
+      }
+    } catch (err) {
+      setError("An error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOidcLogin = () => {
+    window.location.href = "/api/auth/oidc/start";
+  };
+
+  const handleSamlLogin = () => {
+    window.location.href = "/api/auth/saml/start";
+  };
+
+  const isSsoEnabled = ["sso", "oidc", "saml", "both"].includes(authMode);
+  const activeSsoType = ssoType || (authMode === "saml" ? "saml" : "oidc");
+
+  const samlAvailable = isSsoEnabled && activeSsoType === "saml" && samlConfigured;
+  const oidcAvailable = isSsoEnabled && activeSsoType === "oidc" && oidcConfigured;
+  const ssoAvailable = samlAvailable || oidcAvailable;
+
+  const passwordAvailable = authMode === "password" || authMode === "both" || !ssoAvailable;
+
+  // Show loading state while checking password
+  if (hasPassword === null) {
+    return (
+      <div className="dashboard-grid-bg min-h-screen flex items-center justify-center bg-background p-4">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          <p className="text-muted-foreground mt-4">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="dashboard-grid-bg min-h-screen flex items-center justify-center bg-background p-4 relative overflow-hidden">
+      <div className="relative z-10 w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-primary mb-2">10Router</h1>
+          <p className="text-muted-foreground">
+            {samlAvailable
+              ? "Sign in with SAML 2.0 Single Sign-On"
+              : oidcAvailable
+                ? "Sign in with your OIDC provider to access the dashboard"
+                : "Enter your password to access the dashboard"}
+          </p>
+        </div>
+
+        <Card>
+          <CardContent>
+            {mustChange ? (
+              <form onSubmit={handleSetNewPassword} className="flex flex-col gap-4">
+                <p className="text-sm text-amber-600 dark:text-amber-400 text-center">
+                  Set a new password before accessing the dashboard remotely.
+                </p>
+                <div className="flex flex-col gap-2">
+                  <label className="text-sm font-medium">New password</label>
+                  <Input
+                    type="password"
+                    placeholder="Enter new password"
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.target.value)}
+                    required
+                    autoFocus
+                  />
+                  {error && <p className="text-xs text-red-500">{error}</p>}
+                </div>
+                <Button type="submit" className="w-full" disabled={loading || !newPassword}>
+                  {loading && <Loader2 className="animate-spin" />}
+                  Set password
+                </Button>
+              </form>
+            ) : (
+              <div className="flex flex-col gap-4">
+                {samlAvailable && (
+                  <Button type="button" className="w-full" onClick={handleSamlLogin}>
+                    {samlLoginLabel}
+                  </Button>
+                )}
+
+                {oidcAvailable && (
+                  <Button type="button" className="w-full" onClick={handleOidcLogin}>
+                    {oidcLoginLabel}
+                  </Button>
+                )}
+
+                {ssoAvailable && passwordAvailable && <div className="h-px bg-border/60" />}
+
+                {passwordAvailable ? (
+                  <form onSubmit={handleLogin} className="flex flex-col gap-4">
+                    {isSsoEnabled && !ssoAvailable && (
+                      <p className="text-xs text-amber-600 dark:text-amber-400 text-center">
+                        {activeSsoType === "saml" ? "SAML SSO" : "OIDC"} login is enabled, but
+                        configuration is incomplete. Password login is still available for recovery.
+                      </p>
+                    )}
+
+                    {authMode === "both" && ssoAvailable && (
+                      <p className="text-xs text-muted-foreground text-center">
+                        Password and {activeSsoType === "saml" ? "SAML SSO" : "OIDC"} login are both
+                        enabled.
+                      </p>
+                    )}
+
+                    <div className="flex flex-col gap-2">
+                      <label className="text-sm font-medium">Password</label>
+                      <Input
+                        type="password"
+                        placeholder="Enter password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                        autoFocus={!oidcAvailable}
+                      />
+                      {error && <p className="text-xs text-red-500">{error}</p>}
+                      {retryAfter > 0 && (
+                        <p className="text-xs text-amber-600 dark:text-amber-400">
+                          Locked. Retry in <span className="font-mono">{retryAfter}s</span>.
+                        </p>
+                      )}
+                      {resetHint && (
+                        <p className="text-xs text-muted-foreground">
+                          Forgot password? Open{" "}
+                          <code className="bg-sidebar px-1 rounded">10router</code> CLI on the host
+                          → <b>Settings</b> → <b>Reset Password to Default</b>.
+                        </p>
+                      )}
+                    </div>
+
+                    <Button type="submit" className="w-full" disabled={loading || retryAfter > 0}>
+                      {loading && <Loader2 className="animate-spin" />}
+                      {retryAfter > 0 ? `Wait ${retryAfter}s` : "Login"}
+                    </Button>
+
+                    {hasPassword === false && (
+                      <p className="text-xs text-center text-muted-foreground mt-2">
+                        Default password is <code className="bg-sidebar px-1 rounded">123456</code>
+                      </p>
+                    )}
+                    {hasPassword === false && (
+                      <p className="text-xs text-center text-amber-600 dark:text-amber-400">
+                        Security risk: no password set. You will be asked to set one when logging in
+                        remotely.
+                      </p>
+                    )}
+                  </form>
+                ) : (
+                  error && <p className="text-xs text-red-500">{error}</p>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/app/manifest.ts

@@ -0,0 +1,33 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "10Router - AI Infrastructure Management",
+    short_name: "10Router",
+    description:
+      "One endpoint for all your AI providers. Manage keys, monitor usage, and scale effortlessly.",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#F2F9F4",
+    theme_color: "#F2F9F4",
+    orientation: "portrait-primary",
+    icons: [
+      {
+        src: "/icons/icon-192.svg",
+        sizes: "192x192",
+        type: "image/svg+xml",
+      },
+      {
+        src: "/icons/icon-512.svg",
+        sizes: "512x512",
+        type: "image/svg+xml",
+      },
+      {
+        src: "/icons/icon-512.svg",
+        sizes: "512x512",
+        type: "image/svg+xml",
+        purpose: "maskable",
+      },
+    ],
+  };
+}

package/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function InitPage() {
+  redirect("/dashboard");
+}

package/src/components/app-sidebar.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/shared/utils/cn";
+import { APP_CONFIG } from "@/shared/constants/config";
+import Icon from "@/shared/components/Icon";
+import VersionLabel from "@/shared/components/VersionLabel";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+  useSidebar,
+} from "@/components/ui/sidebar";
+
+interface NavItem {
+  id: string;
+  href: string;
+  label: string;
+  icon: string;
+  match?: (pathname: string) => boolean;
+}
+
+const NAV: NavItem[] = [
+  {
+    id: "endpoint",
+    href: "/dashboard",
+    label: "Endpoint & Key",
+    icon: "api",
+    match: (p) => p === "/dashboard" || p.startsWith("/dashboard/endpoint"),
+  },
+  { id: "providers", href: "/dashboard/providers", label: "Providers", icon: "dns" },
+  { id: "combos", href: "/dashboard/combos", label: "Combo", icon: "layers" },
+  { id: "usage", href: "/dashboard/usage", label: "Usage", icon: "bar_chart" },
+  { id: "token-saver", href: "/dashboard/token-saver", label: "Token Saver", icon: "scissors" },
+  { id: "cli-tools", href: "/dashboard/cli-tools", label: "CLI Tools", icon: "terminal" },
+  {
+    id: "systemone",
+    href: "/dashboard/media-providers/systemone",
+    label: "System One",
+    icon: "bolt",
+  },
+];
+
+const SYSTEM: NavItem[] = [
+  { id: "proxy-pools", href: "/dashboard/proxy-pools", label: "Proxy Pools", icon: "waypoints" },
+];
+
+const MISC: NavItem[] = [
+  { id: "profile", href: "/dashboard/profile", label: "Settings", icon: "settings" },
+];
+
+function isActive(pathname: string, item: NavItem) {
+  if (item.match) return item.match(pathname);
+  if (item.href === "/dashboard/profile") return pathname === "/dashboard/profile";
+  return pathname.startsWith(item.href);
+}
+
+function NavLink({ item }: { item: NavItem }) {
+  const pathname = usePathname();
+  const active = isActive(pathname, item);
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild isActive={active}>
+        <Link href={item.href} className="gap-3">
+          <Icon name={item.icon} className="text-[18px]" />
+          <span className="min-w-0 flex-1 truncate">{item.label}</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
+
+export function AppSidebar({ ...props }: any) {
+  const pathname = usePathname();
+  const { state } = useSidebar();
+  const collapsed = state === "collapsed";
+
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader className="h-20 justify-center border-b border-sidebar-border px-4">
+        <Link href="/dashboard" className="flex min-w-0 items-center gap-3">
+          <Image
+            src="/icons/icon.svg"
+            alt="10Router logo"
+            width={36}
+            height={36}
+            className="size-9 rounded-[10px] shrink-0"
+          />
+          {!collapsed && (
+            <div className="flex min-w-0 flex-col leading-tight">
+              <span className="truncate text-lg font-semibold tracking-tight text-foreground">
+                {APP_CONFIG.name}
+              </span>
+              <span className="truncate text-xs text-muted-foreground">v{APP_CONFIG.version}</span>
+            </div>
+          )}
+        </Link>
+      </SidebarHeader>
+
+      <SidebarContent className="pt-2">
+        <SidebarGroup>
+          <SidebarGroupLabel>Overview</SidebarGroupLabel>
+          <SidebarMenu>
+            {NAV.map((item) => (
+              <NavLink key={item.id} item={item} />
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+
+        <SidebarSeparator />
+
+        <SidebarGroup>
+          <SidebarGroupLabel>System</SidebarGroupLabel>
+          <SidebarMenu>
+            {SYSTEM.map((item) => (
+              <NavLink key={item.id} item={item} />
+            ))}
+            {MISC.map((item) => (
+              <NavLink key={item.id} item={item} />
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-sidebar-border p-4">
+        <VersionLabel collapsed={collapsed} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}