zevairouter 1.0.154 → 1.0.155

package/src/shared/components/KiroOAuthWrapper.js

@@ -1,150 +0,0 @@
-"use client";
-
-import { useState, useCallback, useEffect } from "react";
-import PropTypes from "prop-types";
-import OAuthModal from "./OAuthModal";
-import KiroAuthModal from "./KiroAuthModal";
-import KiroSocialOAuthModal from "./KiroSocialOAuthModal";
-
-/**
- * Kiro OAuth Wrapper
- * Orchestrates between method selection, device code flow, and social login flow
- */
-export default function KiroOAuthWrapper({
-  isOpen,
-  providerInfo,
-  onSuccess,
-  onRefresh,
-  onClose,
-  initialBulkJobId,
-  initialFlow,
-  onBulkJobChange,
-}) {
-  const [authMethod, setAuthMethod] = useState(null); // null | "builder-id" | "idc" | "social" | "import"
-  const [socialProvider, setSocialProvider] = useState(null); // "google" | "github"
-  const [idcConfig, setIdcConfig] = useState(null);
-
-  useEffect(() => {
-    if (!isOpen || !initialFlow) return;
-    if (initialFlow.method === "builder-id") {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- sync-from-props: restores the requested auth flow when the modal is opened with an initialFlow
-      setAuthMethod("builder-id");
-      return;
-    }
-    if (initialFlow.method === "social") {
-      setAuthMethod("social");
-      setSocialProvider(initialFlow.provider || "google");
-      return;
-    }
-    setAuthMethod(null);
-    setSocialProvider(null);
-    setIdcConfig(null);
-  }, [initialFlow, isOpen]);
-
-  const handleMethodSelect = useCallback((method, config) => {
-    if (method === "builder-id") {
-      // Use device code flow (AWS Builder ID)
-      setAuthMethod("builder-id");
-    } else if (method === "idc") {
-      // Use device code flow with IDC config
-      setAuthMethod("idc");
-      setIdcConfig(config);
-    } else if (method === "social") {
-      // Use social login with manual callback
-      setAuthMethod("social");
-      setSocialProvider(config.provider);
-    } else if (method === "import") {
-      // Import handled in KiroAuthModal, just close
-      onSuccess?.();
-    }
-  }, [onSuccess]);
-
-  const handleBack = () => {
-    setAuthMethod(null);
-    setSocialProvider(null);
-    setIdcConfig(null);
-  };
-
-  const handleSocialSuccess = () => {
-    setAuthMethod(null);
-    setSocialProvider(null);
-    onSuccess?.();
-    onClose?.(); // Close modal after success
-  };
-
-  const handleDeviceSuccess = () => {
-    setAuthMethod(null);
-    setIdcConfig(null);
-    onSuccess?.();
-    onClose?.(); // Close modal after success
-  };
-
-  // Show method selection first
-  if (!authMethod) {
-    return (
-      <KiroAuthModal
-        isOpen={isOpen}
-        onMethodSelect={handleMethodSelect}
-        onImportSuccess={onRefresh || onSuccess}
-        initialJobId={initialBulkJobId}
-        initialSelectedMethod={
-          initialFlow?.method === "import"
-            ? "import"
-            : initialFlow?.method === "idc"
-              ? "idc"
-              : undefined
-        }
-        initialImportMode={initialFlow?.method === "import" ? initialFlow.importMode : undefined}
-        initialFlowKey={initialFlow?.key}
-        onBulkJobChange={onBulkJobChange}
-        onClose={onClose}
-      />
-    );
-  }
-
-  // Show device code flow (Builder ID or IDC)
-  if (authMethod === "builder-id" || authMethod === "idc") {
-    return (
-      <OAuthModal
-        isOpen={isOpen}
-        provider="kiro"
-        providerInfo={providerInfo}
-        onSuccess={handleDeviceSuccess}
-        onClose={handleBack}
-        idcConfig={idcConfig}
-      />
-    );
-  }
-
-  // Show social login flow (Google/GitHub with manual callback)
-  if (authMethod === "social" && socialProvider) {
-    return (
-      <KiroSocialOAuthModal
-        isOpen={isOpen}
-        provider={socialProvider}
-        onSuccess={handleSocialSuccess}
-        onClose={handleBack}
-      />
-    );
-  }
-
-  return null;
-}
-
-KiroOAuthWrapper.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  providerInfo: PropTypes.shape({
-    name: PropTypes.string,
-  }),
-  initialBulkJobId: PropTypes.string,
-  initialFlow: PropTypes.shape({
-    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    method: PropTypes.string,
-    importMode: PropTypes.string,
-    provider: PropTypes.string,
-  }),
-  onBulkJobChange: PropTypes.func,
-  onRefresh: PropTypes.func,
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/components/KiroSocialOAuthModal.js

@@ -1,205 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { Modal, Button, Input } from "@/shared/components";
-import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
-
-/**
- * Kiro Social OAuth Modal (Google/GitHub)
- * Handles manual callback URL flow for social login
- */
-export default function KiroSocialOAuthModal({ isOpen, provider, onSuccess, onClose }) {
-  const [step, setStep] = useState("loading"); // loading | input | success | error
-  const [authUrl, setAuthUrl] = useState("");
-  const [authData, setAuthData] = useState(null);
-  const [callbackUrl, setCallbackUrl] = useState("");
-  const [error, setError] = useState(null);
-  const { copied, copy } = useCopyToClipboard();
-
-  // Initialize auth flow
-  useEffect(() => {
-    if (!isOpen || !provider) return;
-
-    const initAuth = async () => {
-      try {
-        setError(null);
-        setStep("loading");
-
-        const res = await fetch(`/api/oauth/kiro/social-authorize?provider=${provider}`);
-        const data = await res.json();
-
-        if (!res.ok) {
-          throw new Error(data.error);
-        }
-
-        setAuthData(data);
-        setAuthUrl(data.authUrl);
-        setStep("input");
-
-        // Auto-open browser
-        window.open(data.authUrl, "_blank");
-      } catch (err) {
-        setError(err.message);
-        setStep("error");
-      }
-    };
-
-    initAuth();
-  }, [isOpen, provider]);
-
-  const handleManualSubmit = async () => {
-    try {
-      setError(null);
-      
-      // Parse callback URL - can be either kiro:// or http://localhost format
-      let url;
-      try {
-        url = new URL(callbackUrl);
-      } catch (e) {
-        // If URL parsing fails, might be malformed
-        throw new Error("Invalid callback URL format");
-      }
-
-      const code = url.searchParams.get("code");
-      const state = url.searchParams.get("state");
-      const errorParam = url.searchParams.get("error");
-
-      if (errorParam) {
-        throw new Error(url.searchParams.get("error_description") || errorParam);
-      }
-
-      if (!code) {
-        throw new Error("No authorization code found in URL");
-      }
-
-      // Exchange code for tokens
-      const res = await fetch("/api/oauth/kiro/social-exchange", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          code,
-          codeVerifier: authData.codeVerifier,
-          provider,
-        }),
-      });
-
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error);
-
-      setStep("success");
-      onSuccess?.();
-    } catch (err) {
-      setError(err.message);
-      setStep("error");
-    }
-  };
-
-  const providerName = provider === "google" ? "Google" : "GitHub";
-
-  return (
-    <Modal isOpen={isOpen} title={`Connect Kiro via ${providerName}`} onClose={onClose} size="lg">
-      <div className="flex flex-col gap-4">
-        {/* Loading */}
-        {step === "loading" && (
-          <div className="text-center py-6">
-            <div className="size-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
-              <span className="material-symbols-outlined text-3xl text-primary animate-spin">
-                progress_activity
-              </span>
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Initializing...</h3>
-            <p className="text-sm text-text-muted">
-              Setting up {providerName} authentication
-            </p>
-          </div>
-        )}
-
-        {/* Manual Input Step */}
-        {step === "input" && (
-          <>
-            <div className="space-y-4">
-              <div>
-                <p className="text-sm font-medium mb-2">Step 1: Open this URL in your browser</p>
-                <div className="flex gap-2">
-                  <Input value={authUrl} readOnly className="flex-1 font-mono text-xs" />
-                  <Button 
-                    variant="secondary" 
-                    icon={copied === "auth_url" ? "check" : "content_copy"} 
-                    onClick={() => copy(authUrl, "auth_url")}
-                  >
-                    Copy
-                  </Button>
-                </div>
-              </div>
-
-              <div>
-                <p className="text-sm font-medium mb-2">Step 2: Paste the callback URL here</p>
-                <p className="text-xs text-text-muted mb-2">
-                  After authorization, copy the full URL from your browser address bar.
-                </p>
-                <Input
-                  value={callbackUrl}
-                  onChange={(e) => setCallbackUrl(e.target.value)}
-                  placeholder="kiro://kiro.kiroAgent/authenticate-success?code=..."
-                  className="font-mono text-xs"
-                />
-              </div>
-            </div>
-
-            <div className="flex gap-2">
-              <Button onClick={handleManualSubmit} fullWidth disabled={!callbackUrl}>
-                Connect
-              </Button>
-              <Button onClick={onClose} variant="ghost" fullWidth>
-                Cancel
-              </Button>
-            </div>
-          </>
-        )}
-
-        {/* Success */}
-        {step === "success" && (
-          <div className="text-center py-6">
-            <div className="size-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-              <span className="material-symbols-outlined text-3xl text-green-600">check_circle</span>
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Connected Successfully!</h3>
-            <p className="text-sm text-text-muted mb-4">
-              Your Kiro account via {providerName} has been connected.
-            </p>
-            <Button onClick={onClose} fullWidth>
-              Done
-            </Button>
-          </div>
-        )}
-
-        {/* Error */}
-        {step === "error" && (
-          <div className="text-center py-6">
-            <div className="size-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
-              <span className="material-symbols-outlined text-3xl text-red-600">error</span>
-            </div>
-            <h3 className="text-lg font-semibold mb-2">Connection Failed</h3>
-            <p className="text-sm text-red-600 mb-4">{error}</p>
-            <div className="flex gap-2">
-              <Button onClick={() => setStep("input")} variant="secondary" fullWidth>
-                Try Again
-              </Button>
-              <Button onClick={onClose} variant="ghost" fullWidth>
-                Cancel
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
-}
-
-KiroSocialOAuthModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  provider: PropTypes.oneOf(["google", "github"]).isRequired,
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/components/LanguageSwitcher.js

@@ -1,192 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { LOCALES, LOCALE_COOKIE, normalizeLocale } from "@/i18n/config";
-import { reloadTranslations } from "@/i18n/runtime";
-
-function getLocaleFromCookie() {
-  if (typeof document === "undefined") return "en";
-  const cookie = document.cookie
-    .split(";")
-    .find((c) => c.trim().startsWith(`${LOCALE_COOKIE}=`));
-  const value = cookie ? decodeURIComponent(cookie.split("=")[1]) : "en";
-  return normalizeLocale(value);
-}
-
-// Locale display names and flags - will be translated by runtime i18n
-const getLocaleInfo = (locale) => {
-  const locales = {
-    "en": { name: "English", flag: "🇺🇸" },
-    "vi": { name: "Tiếng Việt", flag: "🇻🇳" },
-    "zh-CN": { name: "简体中文", flag: "🇨🇳" },
-    "zh-TW": { name: "繁體中文", flag: "🇹🇼" },
-    "ja": { name: "日本語", flag: "🇯🇵" },
-    "pt-BR": { name: "Português (Brasil)", flag: "🇧🇷" },
-    "pt-PT": { name: "Português (Portugal)", flag: "🇵🇹" },
-    "ko": { name: "한국어", flag: "🇰🇷" },
-    "es": { name: "Español", flag: "🇪🇸" },
-    "de": { name: "Deutsch", flag: "🇩🇪" },
-    "fr": { name: "Français", flag: "🇫🇷" },
-    "he": { name: "עברית", flag: "🇮🇱" },
-    "ar": { name: "العربية", flag: "🇸🇦" },
-    "ru": { name: "Русский", flag: "🇷🇺" },
-    "pl": { name: "Polski", flag: "🇵🇱" },
-    "cs": { name: "Čeština", flag: "🇨🇿" },
-    "nl": { name: "Nederlands", flag: "🇳🇱" },
-    "tr": { name: "Türkçe", flag: "🇹🇷" },
-    "uk": { name: "Українська", flag: "🇺🇦" },
-    "tl": { name: "Tagalog", flag: "🇵🇭" },
-    "id": { name: "Indonesia", flag: "🇮🇩" },
-    "th": { name: "ไทย", flag: "🇹🇭" },
-    "hi": { name: "हिन्दी", flag: "🇮🇳" },
-    "bn": { name: "বাংলা", flag: "🇧🇩" },
-    "ur": { name: "اردو", flag: "🇵🇰" },
-    "ro": { name: "Română", flag: "🇷🇴" },
-    "sv": { name: "Svenska", flag: "🇸🇪" },
-    "it": { name: "Italiano", flag: "🇮🇹" },
-    "el": { name: "Ελληνικά", flag: "🇬🇷" },
-    "hu": { name: "Magyar", flag: "🇭🇺" },
-    "fi": { name: "Suomi", flag: "🇫🇮" },
-    "da": { name: "Dansk", flag: "🇩🇰" },
-    "no": { name: "Norsk", flag: "🇳🇴" }
-  };
-  return locales[locale] || { name: locale, flag: "🌐" };
-};
-
-export default function LanguageSwitcher({ className = "", isOpen: controlledOpen, onClose, hideTrigger = false }) {
-  const [locale, setLocale] = useState("en");
-  const [isPending, setIsPending] = useState(false);
-  const [internalOpen, setInternalOpen] = useState(false);
-  const modalRef = useRef(null);
-
-  const isControlled = typeof controlledOpen === "boolean";
-  const isOpen = isControlled ? controlledOpen : internalOpen;
-  const setIsOpen = (value) => {
-    if (isControlled) {
-      if (!value && onClose) onClose(locale);
-    } else {
-      setInternalOpen(value);
-    }
-  };
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time mount initialization from locale cookie (external store), intentionally client-only
-    setLocale(getLocaleFromCookie());
-  }, []);
-
-  // Close modal when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (modalRef.current && !modalRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- react only to isOpen; setIsOpen only ever closes (idempotent) so a fresh closure isn't required
-  }, [isOpen]);
-
-  const handleSetLocale = async (nextLocale) => {
-    if (nextLocale === locale || isPending) return;
-
-    setIsPending(true);
-    setIsOpen(false);
-    try {
-      await fetch("/api/locale", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ locale: nextLocale }),
-      });
-      
-      // Reload translations without full page reload
-      await reloadTranslations();
-      setLocale(nextLocale);
-    } catch (err) {
-      console.error("Failed to set locale:", err);
-    } finally {
-      setIsPending(false);
-    }
-  };
-
-  return (
-    <div className={className}>
-      {/* Trigger button */}
-      {!hideTrigger && (
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          disabled={isPending}
-          className="flex items-center gap-2 px-3 py-2 rounded-lg text-text-muted hover:text-text-main hover:bg-surface/60 transition-colors"
-          title="Language"
-          data-i18n-skip="true"
-        >
-          <span className="material-symbols-outlined text-[20px]">language</span>
-          <span className="text-sm font-medium">{getLocaleInfo(locale).name}</span>
-          <span className="text-lg">{getLocaleInfo(locale).flag}</span>
-        </button>
-      )}
-
-      {/* Portal modal - renders at document.body to avoid parent layout constraints */}
-      {isOpen && createPortal(
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" data-i18n-skip="true">
-          {/* Overlay */}
-          <div
-            className="absolute inset-0 bg-black/30 backdrop-blur-sm"
-            onClick={() => setIsOpen(false)}
-          />
-
-          {/* Modal content */}
-          <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-2xl flex flex-col max-h-[80vh]"
-          >
-            {/* Modal header */}
-            <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">Select Language</h2>
-              <button
-                onClick={() => setIsOpen(false)}
-                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>
-
-            {/* Modal body - fixed grid columns, equal sizing */}
-            <div className="p-6 overflow-y-auto flex-1">
-              <div className="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-2">
-                {LOCALES.map((item) => {
-                  const active = locale === item;
-                  const info = getLocaleInfo(item);
-                  return (
-                    <button
-                      key={item}
-                      onClick={() => handleSetLocale(item)}
-                      disabled={isPending}
-                      className={`flex flex-col items-center justify-start gap-1 px-2 py-3 rounded-lg text-xs font-medium transition-colors w-full ${
-                        active
-                          ? "bg-primary/15 text-primary ring-2 ring-primary"
-                          : "text-text-main hover:bg-black/5 dark:hover:bg-white/5"
-                      } ${isPending ? "opacity-70 cursor-wait" : ""}`}
-                      title={info.name}
-                    >
-                      <span className="text-2xl">{info.flag}</span>
-                      {/* Fixed 2-line height so all cards are uniform */}
-                      <span className="text-center leading-tight line-clamp-2 h-8 flex items-center">{info.name}</span>
-                      {active && (
-                        <span className="material-symbols-outlined text-sm">check</span>
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-    </div>
-  );
-}

package/src/shared/components/Loading.js

@@ -1,75 +0,0 @@
-"use client";
-
-import { cn } from "@/shared/utils/cn";
-
-// Spinner loading
-export function Spinner({ size = "md", className }) {
-  const sizes = {
-    sm: "size-4",
-    md: "size-6",
-    lg: "size-8",
-    xl: "size-12",
-  };
-
-  return (
-    <span
-      className={cn(
-        "material-symbols-outlined animate-spin text-brand-500",
-        sizes[size],
-        className
-      )}
-    >
-      progress_activity
-    </span>
-  );
-}
-
-// Full page loading
-export function PageLoading({ message = "Loading..." }) {
-  return (
-    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-bg">
-      <Spinner size="xl" />
-      <p className="mt-4 text-text-muted">{message}</p>
-    </div>
-  );
-}
-
-// Skeleton loading
-export function Skeleton({ className, ...props }) {
-  return (
-    <div
-      className={cn(
-        "animate-pulse rounded-[10px] bg-surface-2",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-// Card skeleton
-export function CardSkeleton() {
-  return (
-    <div className="p-6 rounded-[14px] border border-border-subtle bg-surface shadow-[var(--shadow-soft)]">
-      <div className="flex items-center justify-between mb-4">
-        <Skeleton className="h-4 w-24" />
-        <Skeleton className="size-10 rounded-[10px]" />
-      </div>
-      <Skeleton className="h-8 w-16 mb-2" />
-      <Skeleton className="h-3 w-20" />
-    </div>
-  );
-}
-
-export default function Loading({ type = "spinner", ...props }) {
-  switch (type) {
-    case "page":
-      return <PageLoading {...props} />;
-    case "skeleton":
-      return <Skeleton {...props} />;
-    case "card":
-      return <CardSkeleton {...props} />;
-    default:
-      return <Spinner {...props} />;
-  }
-}

package/src/shared/components/ManualConfigModal.js

@@ -1,44 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Modal from "./Modal";
-import Button from "./Button";
-import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
-
-export default function ManualConfigModal({ isOpen, onClose, title = "Manual Configuration", configs = [] }) {
-  const { copy } = useCopyToClipboard();
-  const [copiedIndex, setCopiedIndex] = useState(null);
-
-  const copyConfig = (text, index) => {
-    copy(text, `manualconfig-${index}`);
-    setCopiedIndex(index);
-    setTimeout(() => setCopiedIndex(null), 2000);
-  };
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title={title} size="xl">
-      <div className="flex flex-col gap-4">
-        {configs.map((config, index) => (
-          <div key={index} className="flex flex-col gap-2">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-text-main">{config.filename}</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => copyConfig(config.content, index)}
-              >
-                <span className="material-symbols-outlined text-[14px] mr-1">
-                  {copiedIndex === index ? "check" : "content_copy"}
-                </span>
-                {copiedIndex === index ? "Copied!" : "Copy"}
-              </Button>
-            </div>
-            <pre className="px-3 py-2 bg-black/5 dark:bg-white/5 rounded font-mono text-xs overflow-x-auto whitespace-pre-wrap break-all max-h-60 overflow-y-auto border border-border">
-              {config.content}
-            </pre>
-          </div>
-        ))}
-      </div>
-    </Modal>
-  );
-}