wyxrouter 0.4.71

package/src/shared/components/KiroOAuthWrapper.js

@@ -0,0 +1,149 @@
+"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") {
+      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

@@ -0,0 +1,205 @@
+"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

@@ -0,0 +1,190 @@
+"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(() => {
+    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);
+    }
+  }, [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

@@ -0,0 +1,75 @@
+"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

@@ -0,0 +1,44 @@
+"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>
+  );
+}