@jcjeon/integration-cli 0.2.0 → 0.2.1

package/apps/web/src/features/auth/hooks/useCodexAuth.ts

@@ -1,149 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { io, type Socket } from "socket.io-client";
-
-import { CODEX_WS_NAMESPACE, SERVER_URL } from "@/lib/constants";
-import { configureCodexAuth, getCodexAuthStatus } from "../api/auth.api";
-
-export type CodexAuthState = "checking" | "authenticated" | "unauthenticated" | "not-installed";
-export type CodexLoginState = "idle" | "pending" | "done" | "error";
-export type CodexLoginMethod = "device" | "apikey";
-
-const URL_REGEX = /https?:\/\/[\w./-]+/g;
-const CODE_REGEX = /(?<![A-Z0-9])([A-Z0-9]{4}-[A-Z0-9]{4,6})(?![A-Z0-9])/;
-
-export function extractUrls(text: string): string[] {
-  return Array.from(new Set(text.match(URL_REGEX) ?? []));
-}
-
-export function extractDeviceCode(text: string): string | null {
-  return text.match(CODE_REGEX)?.[1] ?? null;
-}
-
-export function useCodexAuth() {
-  const [authState, setAuthState] = useState<CodexAuthState>("checking");
-  const [loginMethod, setLoginMethod] = useState<CodexLoginMethod>("device");
-
-  // device auth state
-  const [loginState, setLoginState] = useState<CodexLoginState>("idle");
-  const [loginOutput, setLoginOutput] = useState("");
-  const [loginUrls, setLoginUrls] = useState<string[]>([]);
-  const [deviceCode, setDeviceCode] = useState<string | null>(null);
-
-  // api key state
-  const [apiKeyLoginState, setApiKeyLoginState] = useState<CodexLoginState>("idle");
-  const [configError, setConfigError] = useState("");
-
-  const socketRef = useRef<Socket | null>(null);
-  const outputRef = useRef("");
-  const isLoginActiveRef = useRef(false);
-
-  const checkAuth = useCallback(async () => {
-    setAuthState("checking");
-    try {
-      const data = await getCodexAuthStatus();
-      if (!data.installed) setAuthState("not-installed");
-      else setAuthState(data.loggedIn ? "authenticated" : "unauthenticated");
-    } catch {
-      setAuthState("unauthenticated");
-    }
-  }, []);
-
-  useEffect(() => { void checkAuth(); }, [checkAuth]);
-
-  // ── Device auth (WebSocket) ───────────────────────────────────────────
-
-  const startDeviceLogin = useCallback(() => {
-    if (loginState === "pending") return;
-
-    outputRef.current = "";
-    setLoginOutput("");
-    setLoginUrls([]);
-    setDeviceCode(null);
-    setLoginState("pending");
-    isLoginActiveRef.current = true;
-
-    const socket = io(`${SERVER_URL}${CODEX_WS_NAMESPACE}`, { transports: ["websocket"] });
-    socketRef.current = socket;
-
-    socket.on("connect", () => socket.emit("auth:login:start"));
-
-    socket.on("auth:output", ({ text }: { text: string }) => {
-      outputRef.current += text;
-      setLoginOutput(outputRef.current);
-      setLoginUrls(extractUrls(outputRef.current));
-      const code = extractDeviceCode(outputRef.current);
-      if (code) setDeviceCode(code);
-    });
-
-    socket.on("auth:done", ({ success }: { success: boolean }) => {
-      isLoginActiveRef.current = false;
-      socket.disconnect();
-      socketRef.current = null;
-      setLoginState(success ? "done" : "error");
-      if (success) setAuthState("authenticated");
-    });
-
-    socket.on("disconnect", () => {
-      if (isLoginActiveRef.current) {
-        isLoginActiveRef.current = false;
-        setLoginState("error");
-      }
-    });
-  }, [loginState]);
-
-  const cancelDeviceLogin = useCallback(() => {
-    isLoginActiveRef.current = false;
-    socketRef.current?.emit("auth:login:cancel");
-    socketRef.current?.disconnect();
-    socketRef.current = null;
-    setLoginState("idle");
-    setLoginOutput("");
-    setLoginUrls([]);
-    setDeviceCode(null);
-    outputRef.current = "";
-  }, []);
-
-  // ── API key ───────────────────────────────────────────────────────────
-
-  const saveApiKey = useCallback(async (apiKey: string) => {
-    setConfigError("");
-    setApiKeyLoginState("pending");
-    try {
-      await configureCodexAuth(apiKey);
-      setApiKeyLoginState("done");
-      setAuthState("authenticated");
-    } catch {
-      setConfigError("API 키 저장에 실패했습니다. 서버 연결을 확인하세요.");
-      setApiKeyLoginState("error");
-    }
-  }, []);
-
-  const resetApiKeyLogin = useCallback(() => {
-    setApiKeyLoginState("idle");
-    setConfigError("");
-  }, []);
-
-  return {
-    authState,
-    loginMethod,
-    setLoginMethod,
-
-    // device auth
-    loginState,
-    loginOutput,
-    loginUrls,
-    deviceCode,
-    startDeviceLogin,
-    cancelDeviceLogin,
-
-    // api key
-    apiKeyLoginState,
-    configError,
-    saveApiKey,
-    resetApiKeyLogin,
-
-    checkAuth,
-  };
-}

package/apps/web/src/features/auth/hooks/useGeminiAuth.ts

@@ -1,125 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { io, type Socket } from "socket.io-client";
-
-import { GEMINI_WS_NAMESPACE, SERVER_URL } from "@/lib/constants";
-import { configureGeminiAuth, getGeminiAuthStatus } from "../api/auth.api";
-
-export type GeminiAuthState = "checking" | "authenticated" | "unauthenticated" | "not-installed";
-export type GeminiLoginState = "idle" | "pending" | "done" | "error";
-export type GeminiAuthMethod = "api-key" | "gca";
-
-const URL_REGEX = /https?:\/\/[^\s\-"<>\\^`{|}~]+/g;
-
-function extractUrls(text: string): string[] {
-  return Array.from(new Set(text.match(URL_REGEX) ?? []));
-}
-
-export function useGeminiAuth() {
-  const [authState, setAuthState] = useState<GeminiAuthState>("checking");
-  const [loginState, setLoginState] = useState<GeminiLoginState>("idle");
-  const [loginOutput, setLoginOutput] = useState("");
-  const [loginUrls, setLoginUrls] = useState<string[]>([]);
-  const [configError, setConfigError] = useState("");
-
-  const socketRef = useRef<Socket | null>(null);
-  const outputRef = useRef("");
-  const isLoginActiveRef = useRef(false);
-
-  const checkAuth = useCallback(async () => {
-    setAuthState("checking");
-    try {
-      const data = await getGeminiAuthStatus();
-      if (!data.installed) setAuthState("not-installed");
-      else setAuthState(data.loggedIn ? "authenticated" : "unauthenticated");
-    } catch {
-      setAuthState("unauthenticated");
-    }
-  }, []);
-
-  useEffect(() => { void checkAuth(); }, [checkAuth]);
-
-  // ── API Key 방식 ────────────────────────────────────────────────────────────
-  const saveApiKey = useCallback(async (apiKey: string) => {
-    setConfigError("");
-    setLoginState("pending");
-    try {
-      await configureGeminiAuth("api-key", apiKey);
-      setLoginState("done");
-      setAuthState("authenticated");
-    } catch {
-      setConfigError("API 키 저장에 실패했습니다. 서버 연결을 확인하세요.");
-      setLoginState("error");
-    }
-  }, []);
-
-  // ── GCA 방식 (gcloud auth application-default login) ────────────────────────
-  const startGcaLogin = useCallback(() => {
-    if (loginState === "pending") return;
-
-    outputRef.current = "";
-    setLoginOutput("");
-    setLoginUrls([]);
-    setLoginState("pending");
-    isLoginActiveRef.current = true;
-
-    const socket = io(`${SERVER_URL}${GEMINI_WS_NAMESPACE}`, { transports: ["websocket"] });
-    socketRef.current = socket;
-
-    socket.on("connect", () => socket.emit("auth:gca:start"));
-
-    socket.on("auth:output", ({ text }: { text: string }) => {
-      outputRef.current += text;
-      setLoginOutput(outputRef.current);
-      setLoginUrls(extractUrls(outputRef.current));
-    });
-
-    socket.on("auth:done", ({ success }: { success: boolean }) => {
-      isLoginActiveRef.current = false;
-      socket.disconnect();
-      socketRef.current = null;
-      setLoginState(success ? "done" : "error");
-      if (success) setAuthState("authenticated");
-    });
-
-    socket.on("disconnect", () => {
-      if (isLoginActiveRef.current) {
-        isLoginActiveRef.current = false;
-        setLoginState("error");
-      }
-    });
-  }, [loginState]);
-
-  const cancelLogin = useCallback(() => {
-    isLoginActiveRef.current = false;
-    socketRef.current?.emit("auth:login:cancel");
-    socketRef.current?.disconnect();
-    socketRef.current = null;
-    setLoginState("idle");
-    setLoginOutput("");
-    setLoginUrls([]);
-    outputRef.current = "";
-  }, []);
-
-  const resetLogin = useCallback(() => {
-    setLoginState("idle");
-    setLoginOutput("");
-    setLoginUrls([]);
-    setConfigError("");
-    outputRef.current = "";
-  }, []);
-
-  return {
-    authState,
-    loginState,
-    loginOutput,
-    loginUrls,
-    configError,
-    saveApiKey,
-    startGcaLogin,
-    cancelLogin,
-    resetLogin,
-    checkAuth,
-  };
-}

package/apps/web/src/features/auth/ui/CodexLoginPanel.tsx

@@ -1,302 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-
-import type { CodexLoginMethod, CodexLoginState } from "../hooks/useCodexAuth";
-
-const OPENAI_LOGO = (
-  <svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 shrink-0 text-gray-900/80 dark:text-white/80" aria-hidden="true">
-    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
-  </svg>
-);
-
-// ─── Method Tab ───────────────────────────────────────────────────────────────
-
-interface TabProps {
-  method: CodexLoginMethod;
-  selected: CodexLoginMethod;
-  onSelect: (m: CodexLoginMethod) => void;
-  label: string;
-}
-
-function MethodTab({ method, selected, onSelect, label }: TabProps) {
-  return (
-    <button
-      type="button"
-      onClick={() => onSelect(method)}
-      className={[
-        "flex-1 rounded-lg px-4 py-2 text-xs font-medium transition-colors",
-        selected === method
-          ? "bg-gray-900/[0.07] text-gray-900/75 dark:bg-white/[0.07] dark:text-white/75"
-          : "text-gray-900/35 hover:text-gray-900/60 dark:text-white/35 dark:hover:text-white/60",
-      ].join(" ")}
-    >
-      {label}
-    </button>
-  );
-}
-
-// ─── Device Auth Panel ────────────────────────────────────────────────────────
-
-interface DeviceAuthProps {
-  loginState: CodexLoginState;
-  loginOutput: string;
-  loginUrls: string[];
-  deviceCode: string | null;
-  onStart: () => void;
-  onCancel: () => void;
-}
-
-function DeviceAuthView({ loginState, loginOutput, loginUrls, deviceCode, onStart, onCancel }: DeviceAuthProps) {
-  if (loginState === "idle") {
-    return (
-      <button
-        onClick={onStart}
-        className="rounded-xl bg-gray-900 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
-      >
-        ChatGPT로 로그인
-      </button>
-    );
-  }
-
-  if (loginState === "pending") {
-    return (
-      <div className="flex w-full max-w-sm flex-col gap-4">
-        {loginUrls.length > 0 ? (
-          <>
-            <div className="flex flex-col gap-2">
-              <p className="text-xs font-medium text-gray-900/35 dark:text-white/35">
-                1. 아래 링크를 브라우저에서 열어 로그인하세요
-              </p>
-              {loginUrls.map((url) => (
-                <a
-                  key={url}
-                  href={url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="break-all rounded-lg border border-emerald-700/40 bg-emerald-950/20 px-4 py-3 text-xs font-mono text-emerald-700 transition-colors hover:border-emerald-500 hover:text-emerald-600 dark:text-emerald-300 dark:hover:text-emerald-200"
-                >
-                  {url}
-                </a>
-              ))}
-            </div>
-            {deviceCode && (
-              <div className="flex flex-col gap-1.5">
-                <p className="text-xs font-medium text-gray-900/35 dark:text-white/35">
-                  2. 이 일회용 코드를 입력하세요 <span className="text-gray-900/20 dark:text-white/20">(15분 내 유효)</span>
-                </p>
-                <div className="flex items-center justify-center rounded-xl border border-gray-900/[0.10] bg-gray-900/[0.03] py-4 dark:border-white/[0.10] dark:bg-white/[0.03]">
-                  <span className="font-mono text-2xl font-bold tracking-widest text-gray-900/80 dark:text-white/80">
-                    {deviceCode}
-                  </span>
-                </div>
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="flex items-center justify-center gap-2 text-sm text-gray-900/30 dark:text-white/30">
-            <span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-900/[0.08] border-t-gray-900/60 dark:border-white/[0.08] dark:border-t-white/60" />
-            연결 중…
-          </div>
-        )}
-
-        {loginOutput && !loginUrls.length && (
-          <pre className="max-h-40 overflow-y-auto rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.02] px-4 py-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-gray-900/45 dark:border-white/[0.07] dark:bg-white/[0.02] dark:text-white/45">
-            {loginOutput}
-          </pre>
-        )}
-
-        <button
-          onClick={onCancel}
-          className="text-xs text-gray-900/25 transition-colors hover:text-gray-900/50 dark:text-white/25 dark:hover:text-white/50"
-        >
-          취소
-        </button>
-      </div>
-    );
-  }
-
-  if (loginState === "done") {
-    return (
-      <div className="flex flex-col items-center gap-2 text-center">
-        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500/[0.10]">
-          <svg viewBox="0 0 20 20" fill="currentColor" className="h-6 w-6 text-emerald-500 dark:text-emerald-400">
-            <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
-          </svg>
-        </div>
-        <p className="text-sm font-medium text-emerald-600 dark:text-emerald-400">로그인 완료</p>
-        <p className="text-xs text-gray-900/25 dark:text-white/25">잠시 후 자동으로 이동합니다…</p>
-      </div>
-    );
-  }
-
-  // error
-  return (
-    <div className="flex flex-col items-center gap-3 text-center">
-      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-500/[0.10]">
-        <svg viewBox="0 0 20 20" fill="currentColor" className="h-6 w-6 text-red-500 dark:text-red-400">
-          <path fillRule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
-        </svg>
-      </div>
-      <p className="text-sm text-red-500 dark:text-red-400">로그인 중 문제가 발생했습니다.</p>
-      {loginOutput && (
-        <pre className="max-h-32 w-full max-w-sm overflow-y-auto rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.02] px-4 py-3 font-mono text-xs whitespace-pre-wrap text-gray-900/40 dark:border-white/[0.07] dark:bg-white/[0.02] dark:text-white/40">
-          {loginOutput}
-        </pre>
-      )}
-      <button
-        onClick={onStart}
-        className="rounded-xl bg-gray-900 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
-      >
-        다시 시도
-      </button>
-    </div>
-  );
-}
-
-// ─── API Key Panel ────────────────────────────────────────────────────────────
-
-interface ApiKeyProps {
-  loginState: CodexLoginState;
-  configError: string;
-  onSave: (key: string) => void;
-}
-
-function ApiKeyView({ loginState, configError, onSave }: ApiKeyProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const key = inputRef.current?.value.trim() ?? "";
-    if (key) onSave(key);
-  };
-
-  if (loginState === "done") {
-    return (
-      <div className="flex flex-col items-center gap-2 text-center">
-        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500/[0.10]">
-          <svg viewBox="0 0 20 20" fill="currentColor" className="h-6 w-6 text-emerald-500 dark:text-emerald-400">
-            <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
-          </svg>
-        </div>
-        <p className="text-sm font-medium text-emerald-600 dark:text-emerald-400">인증 완료</p>
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="flex w-full max-w-sm flex-col gap-4">
-      <div className="flex flex-col gap-1.5">
-        <label className="text-xs font-medium text-gray-900/50 dark:text-white/50">
-          OpenAI API 키
-        </label>
-        <input
-          ref={inputRef}
-          type="password"
-          placeholder="sk-..."
-          autoFocus
-          required
-          className="rounded-lg border border-gray-900/[0.10] bg-gray-900/[0.03] px-3.5 py-2.5 font-mono text-sm text-gray-900/85 placeholder-gray-900/20 outline-none transition-colors focus:border-gray-900/30 focus:ring-2 focus:ring-gray-900/5 dark:border-white/[0.10] dark:bg-white/[0.03] dark:text-white/85 dark:placeholder-white/20 dark:focus:border-white/30 dark:focus:ring-white/5"
-        />
-        <p className="text-[11px] text-gray-900/30 dark:text-white/30">
-          <a
-            href="https://platform.openai.com/api-keys"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-gray-900/55 underline-offset-2 hover:underline dark:text-white/55"
-          >
-            OpenAI 플랫폼
-          </a>
-          에서 API 키를 발급받을 수 있습니다.
-        </p>
-        {configError && (
-          <p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
-        )}
-      </div>
-
-      <button
-        type="submit"
-        disabled={loginState === "pending"}
-        className="flex items-center justify-center gap-2 rounded-xl bg-gray-900 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-gray-800 disabled:opacity-50 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
-      >
-        {loginState === "pending" && (
-          <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white dark:border-gray-900/30 dark:border-t-gray-900" />
-        )}
-        {loginState === "pending" ? "저장 중…" : "저장"}
-      </button>
-    </form>
-  );
-}
-
-// ─── CodexLoginPanel ──────────────────────────────────────────────────────────
-
-export type { CodexLoginMethod };
-
-interface Props {
-  loginMethod: CodexLoginMethod;
-  onMethodChange: (m: CodexLoginMethod) => void;
-  // device auth
-  loginState: CodexLoginState;
-  loginOutput: string;
-  loginUrls: string[];
-  deviceCode: string | null;
-  onStartDeviceLogin: () => void;
-  onCancelDeviceLogin: () => void;
-  // api key
-  apiKeyLoginState: CodexLoginState;
-  configError: string;
-  onSaveApiKey: (key: string) => void;
-}
-
-export function CodexLoginPanel({
-  loginMethod,
-  onMethodChange,
-  loginState,
-  loginOutput,
-  loginUrls,
-  deviceCode,
-  onStartDeviceLogin,
-  onCancelDeviceLogin,
-  apiKeyLoginState,
-  configError,
-  onSaveApiKey,
-}: Props) {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-6 px-6">
-      {/* Header */}
-      <div className="flex flex-col items-center gap-3 text-center">
-        <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-gray-900/[0.04] dark:border-white/[0.08] dark:bg-white/[0.04]">
-          {OPENAI_LOGO}
-        </div>
-        <h2 className="text-xl font-semibold text-gray-900/90 dark:text-white/90">Codex CLI 인증</h2>
-        <p className="max-w-sm text-sm text-gray-900/40 dark:text-white/40">
-          ChatGPT 계정으로 로그인하거나 API 키를 입력해 주세요.
-        </p>
-      </div>
-
-      {/* Method tabs */}
-      <div className="flex w-full max-w-sm rounded-xl border border-gray-900/[0.08] p-1 dark:border-white/[0.08]">
-        <MethodTab method="device" selected={loginMethod} onSelect={onMethodChange} label="ChatGPT 로그인" />
-        <MethodTab method="apikey" selected={loginMethod} onSelect={onMethodChange} label="API 키" />
-      </div>
-
-      {/* Content */}
-      {loginMethod === "device" ? (
-        <DeviceAuthView
-          loginState={loginState}
-          loginOutput={loginOutput}
-          loginUrls={loginUrls}
-          deviceCode={deviceCode}
-          onStart={onStartDeviceLogin}
-          onCancel={onCancelDeviceLogin}
-        />
-      ) : (
-        <ApiKeyView
-          loginState={apiKeyLoginState}
-          configError={configError}
-          onSave={onSaveApiKey}
-        />
-      )}
-    </div>
-  );
-}