vforclaude2 0.3.87

package/src/shared/components/OAuthModal.js

@@ -0,0 +1,476 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import { Modal, Button, Input } from "@/shared/components";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+
+/**
+ * OAuth Modal Component
+ * - Localhost: Auto callback via popup message
+ * - Remote: Manual paste callback URL
+ */
+export default function OAuthModal({ isOpen, provider, providerInfo, onSuccess, onClose }) {
+  const [step, setStep] = useState("waiting"); // waiting | input | success | error
+  const [authData, setAuthData] = useState(null);
+  const [callbackUrl, setCallbackUrl] = useState("");
+  const [error, setError] = useState(null);
+  const [isDeviceCode, setIsDeviceCode] = useState(false);
+  const [deviceData, setDeviceData] = useState(null);
+  const [polling, setPolling] = useState(false);
+  const popupRef = useRef(null);
+  const pollingAbortRef = useRef(false);
+  const { copied, copy } = useCopyToClipboard();
+
+  // State for client-only values to avoid hydration mismatch
+  const [isLocalhost, setIsLocalhost] = useState(false);
+  const [placeholderUrl, setPlaceholderUrl] = useState("/callback?code=...");
+  const callbackProcessedRef = useRef(false);
+
+  // Detect if running on localhost (client-side only)
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setIsLocalhost(
+        window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"
+      );
+      setPlaceholderUrl(`${window.location.origin}/callback?code=...`);
+    }
+  }, []);
+
+  // Define all useCallback hooks BEFORE the useEffects that reference them
+
+  // Exchange tokens
+  const exchangeTokens = useCallback(async (code, state) => {
+    if (!authData) return;
+    try {
+      const res = await fetch(`/api/oauth/${provider}/exchange`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          code,
+          redirectUri: authData.redirectUri,
+          codeVerifier: authData.codeVerifier,
+          state,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+
+      setStep("success");
+      onSuccess?.();
+    } catch (err) {
+      setError(err.message);
+      setStep("error");
+    }
+  }, [authData, provider, onSuccess]);
+
+  // Poll for device code token
+  const startPolling = useCallback(async (deviceCode, codeVerifier, interval, extraData) => {
+    pollingAbortRef.current = false;
+    setPolling(true);
+    const maxAttempts = 60;
+
+    for (let i = 0; i < maxAttempts; i++) {
+      // Check if polling should be aborted
+      if (pollingAbortRef.current) {
+        console.log("[OAuthModal] Polling aborted");
+        setPolling(false);
+        return;
+      }
+
+      await new Promise((r) => setTimeout(r, interval * 1000));
+
+      // Check again after sleep
+      if (pollingAbortRef.current) {
+        console.log("[OAuthModal] Polling aborted after sleep");
+        setPolling(false);
+        return;
+      }
+
+      try {
+        const res = await fetch(`/api/oauth/${provider}/poll`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ deviceCode, codeVerifier, extraData }),
+        });
+
+        const data = await res.json();
+
+        if (data.success) {
+          pollingAbortRef.current = true; // Stop polling immediately
+          setStep("success");
+          setPolling(false);
+          onSuccess?.();
+          return;
+        }
+
+        if (data.error === "expired_token" || data.error === "access_denied") {
+          throw new Error(data.errorDescription || data.error);
+        }
+
+        if (data.error === "slow_down") {
+          interval = Math.min(interval + 5, 30);
+        }
+      } catch (err) {
+        setError(err.message);
+        setStep("error");
+        setPolling(false);
+        return;
+      }
+    }
+
+    setError("Authorization timeout");
+    setStep("error");
+    setPolling(false);
+  }, [provider, onSuccess]);
+
+  // Start OAuth flow
+  const startOAuthFlow = useCallback(async () => {
+    if (!provider) return;
+    try {
+      setError(null);
+
+      // Device code flow providers
+      const deviceCodeProviders = ["github", "qwen", "kiro", "kimi-coding", "kilocode"];
+      if (deviceCodeProviders.includes(provider)) {
+        setIsDeviceCode(true);
+        setStep("waiting");
+
+        const res = await fetch(`/api/oauth/${provider}/device-code`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+
+        setDeviceData(data);
+
+        // Open verification URL
+        const verifyUrl = data.verification_uri_complete || data.verification_uri;
+        if (verifyUrl) window.open(verifyUrl, "_blank");
+
+        // Pass extraData for Kiro (contains _clientId, _clientSecret)
+        const extraData = provider === "kiro" ? { _clientId: data._clientId, _clientSecret: data._clientSecret } : null;
+        startPolling(data.device_code, data.codeVerifier, data.interval || 5, extraData);
+        return;
+      }
+
+      // Authorization code flow - always use localhost with current port (except Codex)
+      let redirectUri;
+      if (provider === "codex") {
+        // Codex requires fixed port 1455
+        redirectUri = "http://localhost:1455/auth/callback";
+      } else {
+        // Always use localhost with current port for OAuth callback
+        const port = window.location.port || (window.location.protocol === "https:" ? "443" : "80");
+        redirectUri = `http://localhost:${port}/callback`;
+      }
+
+      const res = await fetch(`/api/oauth/${provider}/authorize?redirect_uri=${encodeURIComponent(redirectUri)}`);
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+
+      setAuthData({ ...data, redirectUri });
+
+      // For Codex or non-localhost: use manual input mode
+      if (provider === "codex" || !isLocalhost) {
+        setStep("input");
+        window.open(data.authUrl, "_blank");
+      } else {
+        // Localhost (non-Codex): Open popup and wait for message
+        setStep("waiting");
+        popupRef.current = window.open(data.authUrl, "oauth_popup", "width=600,height=700");
+
+        // Check if popup was blocked
+        if (!popupRef.current) {
+          setStep("input");
+        }
+      }
+    } catch (err) {
+      setError(err.message);
+      setStep("error");
+    }
+  }, [provider, isLocalhost, startPolling]);
+
+  const flowStartedRef = useRef(false);
+
+  // Reset state and start OAuth when modal opens
+  useEffect(() => {
+    if (isOpen && provider) {
+      if (flowStartedRef.current) return;
+      flowStartedRef.current = true;
+      
+      setAuthData(null);
+      setCallbackUrl("");
+      setError(null);
+      setIsDeviceCode(false);
+      setDeviceData(null);
+      setPolling(false);
+      pollingAbortRef.current = false;
+      startOAuthFlow();
+    } else if (!isOpen) {
+      flowStartedRef.current = false;
+      // Abort polling when modal closes
+      pollingAbortRef.current = true;
+    }
+  }, [isOpen, provider, startOAuthFlow]);
+
+  // Listen for OAuth callback via multiple methods
+  useEffect(() => {
+    if (!authData) return;
+    callbackProcessedRef.current = false; // Reset when authData changes
+
+    // Handler for callback data - only process once
+    const handleCallback = async (data) => {
+      if (callbackProcessedRef.current) return; // Already processed
+
+      const { code, state, error: callbackError, errorDescription } = data;
+
+      if (callbackError) {
+        callbackProcessedRef.current = true;
+        setError(errorDescription || callbackError);
+        setStep("error");
+        return;
+      }
+
+      if (code) {
+        callbackProcessedRef.current = true;
+        await exchangeTokens(code, state);
+      }
+    };
+
+    // Method 1: postMessage from popup
+    const handleMessage = (event) => {
+      // Allow messages from same origin or localhost (any port)
+      const isLocalhost = event.origin.includes("localhost") || event.origin.includes("127.0.0.1");
+      const isSameOrigin = event.origin === window.location.origin;
+      if (!isLocalhost && !isSameOrigin) return;
+      
+      if (event.data?.type === "oauth_callback") {
+        handleCallback(event.data.data);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+
+    // Method 2: BroadcastChannel
+    let channel;
+    try {
+      channel = new BroadcastChannel("oauth_callback");
+      channel.onmessage = (event) => handleCallback(event.data);
+    } catch (e) {
+      console.log("BroadcastChannel not supported");
+    }
+
+    // Method 3: localStorage event
+    const handleStorage = (event) => {
+      if (event.key === "oauth_callback" && event.newValue) {
+        try {
+          const data = JSON.parse(event.newValue);
+          handleCallback(data);
+          localStorage.removeItem("oauth_callback");
+        } catch (e) {
+          console.log("Failed to parse localStorage data");
+        }
+      }
+    };
+    window.addEventListener("storage", handleStorage);
+
+    // Also check localStorage on mount (in case callback already happened)
+    try {
+      const stored = localStorage.getItem("oauth_callback");
+      if (stored) {
+        const data = JSON.parse(stored);
+        if (data.timestamp && Date.now() - data.timestamp < 30000) {
+          handleCallback(data);
+        }
+        localStorage.removeItem("oauth_callback");
+      }
+    } catch {
+      // localStorage may be unavailable or data may be malformed - ignore silently
+    }
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      window.removeEventListener("storage", handleStorage);
+      if (channel) channel.close();
+    };
+  }, [authData, exchangeTokens]);
+
+  // Handle manual URL input
+  const handleManualSubmit = async () => {
+    try {
+      setError(null);
+      const url = new URL(callbackUrl);
+      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");
+      }
+
+      await exchangeTokens(code, state);
+    } catch (err) {
+      setError(err.message);
+      setStep("error");
+    }
+  };
+
+  // Clear session on modal close
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  if (!provider || !providerInfo) return null;
+
+  return (
+    <Modal isOpen={isOpen} title={`Connect ${providerInfo.name}`} onClose={handleClose} size="lg">
+      <div className="flex flex-col gap-4">
+        {/* Waiting Step (Localhost - popup mode) */}
+        {step === "waiting" && !isDeviceCode && (
+          <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">Waiting for Authorization</h3>
+            <p className="text-sm text-text-muted mb-4">
+              Complete the authorization in the popup window.
+            </p>
+            <Button variant="ghost" onClick={() => setStep("input")}>
+              Popup blocked? Enter URL manually
+            </Button>
+          </div>
+        )}
+
+        {/* Device Code Flow - Waiting */}
+        {step === "waiting" && isDeviceCode && deviceData && (
+          <>
+            <div className="text-center py-4">
+              <p className="text-sm text-text-muted mb-4">
+                Visit the URL below and enter the code:
+              </p>
+              <div className="bg-sidebar p-4 rounded-lg mb-4">
+                <p className="text-xs text-text-muted mb-1">Verification URL</p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 text-sm break-all">{deviceData.verification_uri}</code>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    icon={copied === "verify_url" ? "check" : "content_copy"}
+                    onClick={() => copy(deviceData.verification_uri, "verify_url")}
+                  />
+                </div>
+              </div>
+              <div className="bg-primary/10 p-4 rounded-lg">
+                <p className="text-xs text-text-muted mb-1">Your Code</p>
+                <div className="flex items-center justify-center gap-2">
+                  <p className="text-2xl font-mono font-bold text-primary">{deviceData.user_code}</p>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    icon={copied === "user_code" ? "check" : "content_copy"}
+                    onClick={() => copy(deviceData.user_code, "user_code")}
+                  />
+                </div>
+              </div>
+            </div>
+            {polling && (
+              <div className="flex items-center justify-center gap-2 text-sm text-text-muted">
+                <span className="material-symbols-outlined animate-spin">progress_activity</span>
+                Waiting for authorization...
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Manual Input Step */}
+        {step === "input" && !isDeviceCode && (
+          <>
+            <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={authData?.authUrl || ""} readOnly className="flex-1 font-mono text-xs" />
+                  <Button variant="secondary" icon={copied === "auth_url" ? "check" : "content_copy"} onClick={() => copy(authData?.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.
+                </p>
+                <Input
+                  value={callbackUrl}
+                  onChange={(e) => setCallbackUrl(e.target.value)}
+                  placeholder={placeholderUrl}
+                  className="font-mono text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <Button onClick={handleManualSubmit} fullWidth disabled={!callbackUrl}>
+                Connect
+              </Button>
+              <Button onClick={handleClose} variant="ghost" fullWidth>
+                Cancel
+              </Button>
+            </div>
+          </>
+        )}
+
+        {/* Success Step */}
+        {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 {providerInfo.name} account has been connected.
+            </p>
+            <Button onClick={handleClose} fullWidth>
+              Done
+            </Button>
+          </div>
+        )}
+
+        {/* Error Step */}
+        {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={startOAuthFlow} variant="secondary" fullWidth>
+                Try Again
+              </Button>
+              <Button onClick={handleClose} variant="ghost" fullWidth>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+OAuthModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  provider: PropTypes.string,
+  providerInfo: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  onSuccess: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};

package/src/shared/components/Pagination.js

@@ -0,0 +1,146 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+import Button from "./Button";
+
+export default function Pagination({
+  currentPage,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  className,
+}) {
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const startItem = totalItems > 0 ? (currentPage - 1) * pageSize + 1 : 0;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const showMax = 5;
+
+    let start = Math.max(1, currentPage - 2);
+    let end = Math.min(totalPages, start + showMax - 1);
+
+    if (end - start + 1 < showMax) {
+      start = Math.max(1, end - showMax + 1);
+    }
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col sm:flex-row items-center justify-between gap-4 py-4",
+        className
+      )}
+    >
+      {/* Info text */}
+      {totalItems > 0 && (
+        <div className="text-sm text-text-muted">
+          Showing <span className="font-medium text-text-main">{startItem}</span> to{" "}
+          <span className="font-medium text-text-main">{endItem}</span> of{" "}
+          <span className="font-medium text-text-main">{totalItems}</span> results
+        </div>
+      )}
+
+      <div className="flex items-center gap-4">
+        {/* Page size selector */}
+        {onPageSizeChange && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-text-muted">Rows:</span>
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+              className={cn(
+                "h-9 rounded-lg border border-black/10 dark:border-white/10 bg-surface",
+                "text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20",
+                "cursor-pointer"
+              )}
+            >
+              {[10, 20, 50].map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {totalPages > 1 && (
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage - 1)}
+              disabled={currentPage === 1}
+              className="w-9 px-0"
+            >
+              <span className="material-symbols-outlined text-[18px]">chevron_left</span>
+            </Button>
+
+            {pageNumbers[0] > 1 && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onPageChange(1)}
+                  className="w-9 px-0"
+                >
+                  1
+                </Button>
+                {pageNumbers[0] > 2 && (
+                  <span className="text-text-muted px-1">...</span>
+                )}
+              </>
+            )}
+
+            {pageNumbers.map((page) => (
+              <Button
+                key={page}
+                variant={currentPage === page ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => onPageChange(page)}
+                className="w-9 px-0"
+              >
+                {page}
+              </Button>
+            ))}
+
+            {pageNumbers[pageNumbers.length - 1] < totalPages && (
+              <>
+                {pageNumbers[pageNumbers.length - 1] < totalPages - 1 && (
+                  <span className="text-text-muted px-1">...</span>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onPageChange(totalPages)}
+                  className="w-9 px-0"
+                >
+                  {totalPages}
+                </Button>
+              </>
+            )}
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(currentPage + 1)}
+              disabled={currentPage === totalPages}
+              className="w-9 px-0"
+            >
+              <span className="material-symbols-outlined text-[18px]">chevron_right</span>
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}