@amir83nasr/10router 0.1.0

package/src/shared/components/VersionLabel.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { APP_CONFIG } from "@/shared/constants/config";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import Icon from "@/shared/components/Icon";
+import UpdateDialog, { type UpdateInfo } from "@/shared/components/UpdateDialog";
+import { cn } from "@/shared/utils/cn";
+
+export default function VersionLabel({ collapsed }: { collapsed?: boolean }) {
+  const [info, setInfo] = useState<UpdateInfo | null>(null);
+  const [checkFailed, setCheckFailed] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const res = await fetch("/api/version", { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setInfo({
+        currentVersion: data?.currentVersion ?? APP_CONFIG.version,
+        latestVersion: data?.latestVersion ?? APP_CONFIG.version,
+        hasUpdate: !!data?.hasUpdate,
+      });
+      setCheckFailed(false);
+    } catch {
+      // Fail-open: footer keeps local version, dialog still shows manual steps.
+      setCheckFailed(true);
+    }
+  }, []);
+
+  /* eslint-disable react-hooks/set-state-in-effect -- mount-time version fetch, same as other dashboard pages */
+  useEffect(() => {
+    load();
+    const id = setInterval(load, 30 * 60 * 1000);
+    return () => clearInterval(id);
+  }, [load]);
+  /* eslint-enable react-hooks/set-state-in-effect */
+
+  const hasUpdate = info?.hasUpdate ?? false;
+  const label = hasUpdate
+    ? `v${info?.latestVersion} available`
+    : info
+      ? `v${info.currentVersion} · up to date`
+      : `v${APP_CONFIG.version}`;
+
+  const trigger = collapsed ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {hasUpdate ? (
+          <button
+            type="button"
+            onClick={() => setDialogOpen(true)}
+            aria-label={`Update available. ${label}`}
+            className="relative mx-auto flex size-8 items-center justify-center rounded-md bg-amber-500/15 text-amber-600 transition-colors hover:bg-amber-500/25 dark:text-amber-400"
+          >
+            <Icon name="download" className="size-4" />
+            <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-amber-500" />
+          </button>
+        ) : (
+          <span className="mx-auto flex size-8 items-center justify-center rounded-md text-muted-foreground">
+            <Icon name="refresh" className="size-4" />
+          </span>
+        )}
+      </TooltipTrigger>
+      <TooltipContent>{hasUpdate ? `${label} — click to update` : label}</TooltipContent>
+    </Tooltip>
+  ) : hasUpdate ? (
+    <button
+      type="button"
+      onClick={() => setDialogOpen(true)}
+      className="flex w-full items-center gap-2 rounded-md bg-amber-500/15 px-1 py-1 text-left transition-colors hover:bg-amber-500/25"
+      aria-label={`Update available. ${label}`}
+    >
+      <span className="relative flex shrink-0 items-center text-muted-foreground">
+        <Icon name="download" className="size-4" />
+        <span className="absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-amber-500" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[11px] text-muted-foreground">
+          {APP_CONFIG.name} v{info?.currentVersion ?? APP_CONFIG.version}
+        </span>
+        <span className="block truncate text-[11px] font-medium text-amber-600 dark:text-amber-400">
+          {label}
+        </span>
+      </span>
+      <Icon name="chevron_right" className="size-3.5 shrink-0 text-muted-foreground" />
+    </button>
+  ) : (
+    <div className="flex w-full items-center gap-2 rounded-md px-1 py-1 text-left">
+      <span className="flex shrink-0 items-center text-muted-foreground">
+        <Icon name="refresh" className="size-4" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[11px] text-muted-foreground">
+          {APP_CONFIG.name} v{info?.currentVersion ?? APP_CONFIG.version}
+        </span>
+        <span
+          className={cn(
+            "block truncate text-[11px] font-medium",
+            checkFailed || !info ? "text-muted-foreground" : "text-green-600 dark:text-green-400",
+          )}
+        >
+          {label}
+        </span>
+      </span>
+    </div>
+  );
+
+  return (
+    <>
+      {trigger}
+      <UpdateDialog
+        open={dialogOpen && hasUpdate}
+        onOpenChange={setDialogOpen}
+        info={info}
+        checkFailed={checkFailed}
+        onRetry={load}
+      />
+    </>
+  );
+}

package/src/shared/components/XiaomiMimoAuthModal.tsx

@@ -0,0 +1,277 @@
+"use client";
+import Icon from "@/shared/components/Icon";
+
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Modal from "./Modal";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Xiaomi MiMo Auth Modal
+ *
+ * Auto-imports credentials from the local Xiaomi MiMo Desktop auth.json (~/.local/share/mimocode/auth.json).
+ * If auto-import fails, offers a one-click browser OAuth fallback.
+ * Reached only via the "Connect with OAuth" button — the API-key path uses the
+ * standard Add API Key modal, since Xiaomi MiMo supports both auth modes.
+ */
+interface XiaomiMimoAuthModalProps {
+  isOpen?: boolean;
+  onSuccess?: any;
+  onClose?: () => void;
+}
+
+export default function XiaomiMimoAuthModal({
+  isOpen,
+  onSuccess,
+  onClose,
+}: XiaomiMimoAuthModalProps) {
+  const [phase, setPhase] = useState<any>("detecting"); // detecting | found | not-found | importing | error
+  const [detectResult, setDetectResult] = useState<any>(null);
+  const [error, setError] = useState<any>(null);
+  const [oauthUrl, setOauthUrl] = useState<any>(null);
+  const [oauthState, setOauthState] = useState<any>(null);
+
+  // Auto-detect local credentials when modal opens
+  useEffect(() => {
+    if (!isOpen) return;
+    let cancelled = false;
+
+    (async () => {
+      setPhase("detecting");
+      setError(null);
+      setDetectResult(null);
+      setOauthUrl(null);
+
+      try {
+        const res = await fetch("/api/oauth/xiaomi-mimo/auto-import");
+        const data = await res.json();
+        if (cancelled) return;
+
+        if (data.found && data.apiKey) {
+          setDetectResult(data);
+          setPhase("found");
+        } else {
+          setPhase("not-found");
+          setError(data.error || "Xiaomi MiMo Desktop credentials not found on this machine.");
+        }
+      } catch {
+        if (!cancelled) {
+          setPhase("not-found");
+          setError("Failed to read local Xiaomi MiMo Desktop credentials.");
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen]);
+
+  // Import the auto-detected key
+  const handleImport = async () => {
+    if (!detectResult?.apiKey) return;
+    setPhase("importing");
+    setError(null);
+
+    try {
+      const res = await fetch("/api/oauth/xiaomi-mimo/api-key", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          apiKey: detectResult.apiKey,
+          uid: detectResult.uid,
+          baseUrl: detectResult.baseUrl,
+          mimoPassToken: detectResult.mimoPassToken || null,
+          mimoUserId: detectResult.mimoUserId || null,
+          mimoCUserId: detectResult.mimoCUserId || null,
+        }),
+      });
+      const data = await res.json();
+
+      if (!res.ok || !data.success) {
+        throw new Error(data.error || "Import failed");
+      }
+
+      onSuccess?.(data.connection);
+      onClose();
+    } catch (err: any) {
+      setPhase("found");
+      setError(err.message);
+    }
+  };
+
+  // Start browser OAuth fallback
+  const handleStartOAuth = async () => {
+    setError(null);
+    try {
+      const state = crypto.randomUUID();
+      const res = await fetch(`/api/oauth/xiaomi-mimo/authorize?state=${state}`);
+      const data = await res.json();
+      if (data.authorizeUrl) {
+        setOauthUrl(data.authorizeUrl);
+        setOauthState(data.state);
+        window.open(data.authorizeUrl, "_blank", "width=600,height=700");
+      } else {
+        throw new Error(data.error || "Failed to start OAuth");
+      }
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  // Poll OAuth result
+  const handlePollOAuth = async () => {
+    if (!oauthState) return;
+    setError(null);
+    try {
+      const res = await fetch(`/api/oauth/xiaomi-mimo/poll-status?state=${oauthState}`);
+      const data = await res.json();
+
+      if (data.status === "done" && data.result) {
+        // Exchange to create the connection
+        const exRes = await fetch("/api/oauth/xiaomi-mimo/exchange", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ state: oauthState }),
+        });
+        const exData = await exRes.json();
+        if (exData.success) {
+          onSuccess?.(exData.connection);
+          onClose();
+        } else {
+          throw new Error(exData.error || "Exchange failed");
+        }
+      } else if (data.status === "error") {
+        throw new Error(data.error || "OAuth failed");
+      } else {
+        setError("Authorization not completed yet. Finish in the browser, then click Check Again.");
+      }
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} title="Connect Xiaomi MiMo" onClose={onClose}>
+      <div className="flex flex-col gap-4">
+        {/* Detecting */}
+        {phase === "detecting" && (
+          <div className="text-center py-6">
+            <div className="size-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
+              <Icon name="progress_activity" className="text-3xl text-primary animate-spin" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Reading local credentials...</h3>
+            <p className="text-sm text-muted-foreground">
+              Checking ~/.local/share/mimocode/auth.json
+            </p>
+          </div>
+        )}
+
+        {/* Found — one-click import */}
+        {phase === "found" && detectResult && (
+          <>
+            <div className="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
+              <div className="flex gap-2">
+                <Icon name="check_circle" className="text-green-600 dark:text-green-400" />
+                <div className="text-sm text-green-800 dark:text-green-200">
+                  <p className="font-medium">Xiaomi MiMo Desktop credentials found!</p>
+                  <p className="mt-1 opacity-80">
+                    UID: {detectResult.uid || "—"} · Source:{" "}
+                    {detectResult.source?.split(/[\\/]/).pop()}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {error && (
+              <div className="bg-red-50 dark:bg-red-900/20 p-3 rounded-lg border border-red-200 dark:border-red-800">
+                <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              </div>
+            )}
+
+            <Button onClick={handleImport} className="w-full">
+              Connect with Local Credentials
+            </Button>
+          </>
+        )}
+
+        {/* Importing */}
+        {phase === "importing" && (
+          <div className="text-center py-6">
+            <div className="size-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
+              <Icon name="progress_activity" className="text-3xl text-primary animate-spin" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Connecting...</h3>
+          </div>
+        )}
+
+        {/* Not found — offer OAuth fallback */}
+        {phase === "not-found" && (
+          <>
+            <div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg border border-amber-200 dark:border-amber-800">
+              <div className="flex gap-2 items-start">
+                <Icon name="info" className="text-amber-600 dark:text-amber-400" />
+                <div className="text-sm text-amber-800 dark:text-amber-200">
+                  <p className="font-medium">Local credentials not found</p>
+                  <p className="mt-1 opacity-80">{error}</p>
+                  <p className="mt-2 opacity-80">
+                    Make sure Xiaomi MiMo Desktop is installed and you are signed in, then retry. Or
+                    sign in via browser below.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {!oauthUrl ? (
+              <div className="flex gap-2">
+                <Button
+                  onClick={() => {
+                    setPhase("detecting");
+                    // Re-trigger detect
+                    fetch("/api/oauth/xiaomi-mimo/auto-import")
+                      .then((r) => r.json())
+                      .then((data) => {
+                        if (data.found && data.apiKey) {
+                          setDetectResult(data);
+                          setPhase("found");
+                        } else {
+                          setPhase("not-found");
+                          setError(data.error || "Still not found.");
+                        }
+                      })
+                      .catch(() => setPhase("not-found"));
+                  }}
+                  variant="outline"
+                  className="w-full"
+                >
+                  Retry Local Detect
+                </Button>
+                <Button onClick={handleStartOAuth} className="w-full">
+                  Sign in via Browser
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-2">
+                <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg border border-blue-200 dark:border-blue-800">
+                  <p className="text-sm text-blue-800 dark:text-blue-200">
+                    Browser opened. Complete the Xiaomi sign-in, then click{" "}
+                    <strong>Check Again</strong>.
+                  </p>
+                </div>
+                <Button onClick={handlePollOAuth} className="w-full">
+                  Check Again
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+XiaomiMimoAuthModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onSuccess: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};

package/src/shared/components/index.ts

@@ -0,0 +1,32 @@
+// Shared Components - Export all
+export { default as Icon } from "./Icon";
+export { default as Modal, ConfirmModal } from "./Modal";
+export { default as Loading, Spinner, PageLoading, Skeleton, CardSkeleton } from "./Loading";
+export { default as ThemeToggle } from "./ThemeToggle";
+export { ThemeProvider } from "./ThemeProvider";
+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 ShutdownModal } from "./ShutdownModal";
+export { default as ChangelogModal } from "./ChangelogModal";
+export { default as RequestLogger } from "./RequestLogger";
+export { default as CursorAuthModal } from "./CursorAuthModal";
+export { default as XiaomiMimoAuthModal } from "./XiaomiMimoAuthModal";
+export { default as IFlowCookieModal } from "./IFlowCookieModal";
+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 ProviderInfoCard } from "./ProviderInfoCard";
+export { default as EntityCard } from "./EntityCard";
+export { EntityCardSkeleton, StatCardSkeleton, PanelSkeleton } from "./EntityCardSkeleton";
+export { default as CapacityBadges } from "./CapacityBadges";
+export * from "./layouts";

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

@@ -0,0 +1,22 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+interface AuthLayoutProps {
+  children: ReactNode;
+}
+
+export default function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col relative bg-background transition-colors duration-500 overflow-x-hidden selection:bg-primary/20 selection:text-foreground">
+      {/* 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" />
+
+      {/* 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>
+  );
+}

package/src/shared/components/layouts/DashboardLayout.tsx

@@ -0,0 +1,105 @@
+"use client";
+import Icon from "@/shared/components/Icon";
+
+import type { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import { useNotificationStore } from "@/store/notificationStore";
+import Header from "../Header";
+import { AppSidebar } from "@/components/app-sidebar";
+import { SidebarInset, SidebarProvider, useSidebar } from "@/components/ui/sidebar";
+
+type ToastType = "success" | "error" | "warning" | "info";
+
+function getToastStyle(type: ToastType) {
+  if (type === "success") {
+    return {
+      wrapper: "border-green-500/30 bg-green-500/10 text-green-600 dark:text-green-400",
+      icon: "check_circle",
+    };
+  }
+  if (type === "error") {
+    return {
+      wrapper: "border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400",
+      icon: "error",
+    };
+  }
+  if (type === "warning") {
+    return {
+      wrapper: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400",
+      icon: "warning",
+    };
+  }
+  return {
+    wrapper: "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400",
+    icon: "info",
+  };
+}
+
+function DashboardShell({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const notifications = useNotificationStore((state: any) => state.notifications);
+  const removeNotification = useNotificationStore((state: any) => state.removeNotification);
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <>
+      {/* Toasts */}
+      <div className="fixed top-4 right-4 z-[80] flex w-[min(92vw,380px)] flex-col gap-2">
+        {notifications.map((n) => {
+          const style = getToastStyle(n.type);
+          return (
+            <div
+              key={n.id}
+              className={`rounded-lg border px-3 py-2 shadow-lg backdrop-blur-sm ${style.wrapper}`}
+            >
+              <div className="flex items-start gap-2">
+                <Icon name={style.icon} className="text-[18px] leading-5" />
+                <div className="min-w-0 flex-1">
+                  {n.title ? <p className="text-xs font-semibold mb-0.5">{n.title}</p> : null}
+                  <p className="text-xs whitespace-pre-wrap break-words">{n.message}</p>
+                </div>
+                {n.dismissible ? (
+                  <button
+                    type="button"
+                    onClick={() => removeNotification(n.id)}
+                    className="text-current/70 hover:text-current"
+                    aria-label="Dismiss notification"
+                  >
+                    <Icon name="close" className="text-[16px]" />
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* shadcn sidebar (desktop fixed, mobile sheet) */}
+      <AppSidebar />
+
+      {/* Main content */}
+      <SidebarInset className="flex flex-col h-full min-w-0 relative transition-colors duration-300 isolate">
+        <Header key={pathname} onMenuClick={toggleSidebar} />
+        <div
+          className={`dashboard-grid-bg flex-1 overflow-y-auto ${pathname === "/dashboard/basic-chat" ? "" : "p-6 lg:p-10"} ${pathname === "/dashboard/basic-chat" ? "flex flex-col overflow-hidden" : ""}`}
+        >
+          <div
+            className={`${pathname === "/dashboard/basic-chat" ? "flex-1 w-full h-full flex flex-col" : "max-w-7xl mx-auto"}`}
+          >
+            {children}
+          </div>
+        </div>
+      </SidebarInset>
+    </>
+  );
+}
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  return (
+    <SidebarProvider>
+      <div className="flex h-screen w-full overflow-hidden bg-background">
+        <DashboardShell>{children}</DashboardShell>
+      </div>
+    </SidebarProvider>
+  );
+}