@cartanova/qgrid-cli 2.6.1 → 2.6.4

package/bundle/web-dist/server/assets/{tokens-CvytQ9Xy.js → tokens-h-2A3wfD.js}

@@ -1,7 +1,7 @@
-import { Z as __toESM, _ as require_jsx_runtime, g as useQueryClient, v as require_react } from "./sd.generated-ek-tz-7H.js";
-import { a as TokenService, n as QgridService } from "./services.generated-BNuxWs7K.js";
+import { Z as __toESM, _ as require_jsx_runtime, g as useQueryClient, v as require_react } from "./sd.generated-B0xqnHEo.js";
+import { a as TokenService, n as QgridService } from "./services.generated-DqAKskAS.js";
 import { i as Q, o as lucideKeyRound } from "../entry-server.generated.js";
-import { t as useUpdateTokenMutation } from "./use-update-token-mutation-BBCC2GKM.js";
+import { t as useUpdateTokenMutation } from "./use-update-token-mutation-DHCaa7Ku.js";
 //#region ~icons/lucide/plus.jsx
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_jsx_runtime = require_jsx_runtime();
@@ -20,77 +20,168 @@ var lucidePlus = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
 	})
 });
 //#endregion
-//#region src/components/qgrid/AddTokenModal.tsx
-function AddTokenModal() {
-	const [open, setOpen] = (0, import_react.useState)(false);
-	const [oauthLoading, setOauthLoading] = (0, import_react.useState)(null);
-	const [name, setName] = (0, import_react.useState)("");
-	const [codeEntry, setCodeEntry] = (0, import_react.useState)(false);
+//#region src/components/qgrid/OAuthCodeEntry.tsx
+/**
+* 원격 접속(code 모드) Claude 로그인의 코드 입력 단계.
+* Add Token 모달과 재로그인이 같은 문구·에러·재시작 동선을 쓰도록 한 곳에 둔다.
+*/
+function OAuthCodeEntry({ isPending, isError, onSubmit, onRestart }) {
 	const [pastedCode, setPastedCode] = (0, import_react.useState)("");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "space-y-2",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-[12px] text-sand-600 leading-relaxed",
+				children: "새 탭에서 Claude 로그인을 완료하면 코드가 표시됩니다. 코드 전체를 아래에 붙여넣으세요."
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Q, {
+				value: pastedCode,
+				onChange: (e) => setPastedCode(e.target.value),
+				placeholder: "code#state",
+				className: "w-full border border-sand-200 rounded-md px-3 py-2 text-sm font-mono text-sand-900 bg-white placeholder:text-sand-300 focus:outline-none focus:border-sienna-300"
+			}),
+			isError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-[11px] text-red-500",
+				children: "코드 확인에 실패했습니다 — 표시된 코드 전체를 다시 붙여넣거나 로그인을 다시 시작하세요."
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "w-full py-2.5 text-sm font-medium rounded-md bg-sand-900 text-white hover:bg-sand-800 disabled:opacity-50 transition-colors duration-150 flex items-center justify-center gap-2",
+				disabled: !pastedCode.trim() || isPending,
+				onClick: () => onSubmit(pastedCode),
+				children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" }), "Verifying..."]
+				}) : "Complete login"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "w-full py-1.5 text-[12px] text-sand-500 hover:text-sand-700 transition-colors duration-150",
+				onClick: () => {
+					setPastedCode("");
+					onRestart();
+				},
+				children: "처음부터 다시 시작"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/qgrid/use-oauth-login-flow.ts
+var OPENAI_POLL_INTERVAL_MS = 3e3;
+var OPENAI_POLL_TIMEOUT_MS = 3e5;
+/** 캐시에 적재된 토큰 행 수. 폴링 조기 종료 판정에만 쓰는 근사치다. */
+function countTokens(queryClient) {
+	let total = 0;
+	for (const query of queryClient.getQueryCache().findAll({ queryKey: ["Token"] })) {
+		const rows = query.state.data?.rows;
+		if (Array.isArray(rows)) total = Math.max(total, rows.length);
+	}
+	return total;
+}
+/**
+* provider별 OAuth 로그인 시작과 코드 제출을 한 곳에 모은다.
+* Add Token 모달과 tokens 목록의 재로그인 버튼이 같은 플로우를 쓴다 — 두 진입점이
+* redirect/code 분기나 폴링 처리를 각자 구현하면 원격 접속 경험이 갈라진다.
+*/
+function useOAuthLoginFlow() {
+	const [loadingProvider, setLoadingProvider] = (0, import_react.useState)(null);
+	const [codeEntry, setCodeEntry] = (0, import_react.useState)(false);
 	const queryClient = useQueryClient();
 	const oauthStartMutation = QgridService.useOauthStartMutation();
 	const oauthStartOpenAIMutation = QgridService.useOauthStartOpenAIMutation();
 	const oauthCompleteMutation = QgridService.useOauthCompleteMutation();
-	const handleOAuthLogin = async (provider) => {
-		if (!name.trim()) return;
-		if (provider === "openai") {
-			const popup = window.open("about:blank", "_blank");
-			setOauthLoading("openai");
-			try {
-				const { authUrl } = await oauthStartOpenAIMutation.mutateAsync({ name: name.trim() });
+	const pollTimers = (0, import_react.useRef)({});
+	const stopPolling = () => {
+		if (pollTimers.current.interval !== void 0) clearInterval(pollTimers.current.interval);
+		if (pollTimers.current.timeout !== void 0) clearTimeout(pollTimers.current.timeout);
+		pollTimers.current = {};
+	};
+	(0, import_react.useEffect)(() => stopPolling, []);
+	const invalidateTokens = () => Promise.all([queryClient.invalidateQueries({ queryKey: ["Token"] }), queryClient.invalidateQueries({ queryKey: ["Qgrid"] })]);
+	const start = async (provider, name) => {
+		const trimmed = name.trim();
+		if (!trimmed) return;
+		const popup = window.open("about:blank", "_blank");
+		setLoadingProvider(provider);
+		try {
+			if (provider === "openai") {
+				const { authUrl } = await oauthStartOpenAIMutation.mutateAsync({ name: trimmed });
 				if (popup) popup.location.href = authUrl;
 				else window.open(authUrl, "_blank");
-				const poll = setInterval(async () => {
-					await queryClient.invalidateQueries({ queryKey: ["Token"] });
-					await queryClient.invalidateQueries({ queryKey: ["Qgrid"] });
-				}, 3e3);
-				setTimeout(() => {
-					clearInterval(poll);
-					setOauthLoading(null);
-				}, 3e5);
-			} catch (e) {
-				console.error("OAuth start failed:", e);
-				setOauthLoading(null);
+				const before = countTokens(queryClient);
+				stopPolling();
+				pollTimers.current.interval = window.setInterval(() => {
+					invalidateTokens().then(() => {
+						if (countTokens(queryClient) > before) {
+							stopPolling();
+							setLoadingProvider(null);
+						}
+					});
+				}, OPENAI_POLL_INTERVAL_MS);
+				pollTimers.current.timeout = window.setTimeout(() => {
+					stopPolling();
+					setLoadingProvider(null);
+				}, OPENAI_POLL_TIMEOUT_MS);
+				return;
 			}
-		} else {
-			const popup = window.open("about:blank", "_blank");
-			setOauthLoading("anthropic");
-			try {
-				const { authUrl, mode } = await oauthStartMutation.mutateAsync({ name: name.trim() });
-				if (mode === "code") {
-					if (popup) popup.location.href = authUrl;
-					else window.open(authUrl, "_blank");
-					setCodeEntry(true);
-					setOauthLoading(null);
-				} else {
-					popup?.close();
-					window.location.href = authUrl;
-				}
-			} catch (e) {
+			const { authUrl, mode } = await oauthStartMutation.mutateAsync({ name: trimmed });
+			if (mode === "code") {
+				if (popup) popup.location.href = authUrl;
+				else window.open(authUrl, "_blank");
+				setCodeEntry(true);
+				setLoadingProvider(null);
+			} else {
 				popup?.close();
-				console.error("OAuth start failed:", e);
-				setOauthLoading(null);
+				window.location.href = authUrl;
 			}
+		} catch (e) {
+			popup?.close();
+			console.error("OAuth start failed:", e);
+			setLoadingProvider(null);
 		}
 	};
-	const submitPastedCode = async () => {
-		if (!pastedCode.trim()) return;
+	/** @returns 교환 성공 여부. 실패 시 `completeMutation.isError` 로 안내 문구를 띄운다. */
+	const submitCode = async (pastedCode) => {
+		const trimmed = pastedCode.trim();
+		if (!trimmed) return false;
 		try {
-			await oauthCompleteMutation.mutateAsync({ pastedCode: pastedCode.trim() });
+			await oauthCompleteMutation.mutateAsync({ pastedCode: trimmed });
 		} catch (e) {
 			console.error("OAuth complete failed:", e);
-			return;
+			return false;
 		}
-		await Promise.all([queryClient.invalidateQueries({ queryKey: ["Token"] }), queryClient.invalidateQueries({ queryKey: ["Qgrid"] })]);
-		close();
+		await invalidateTokens();
+		return true;
+	};
+	const reset = () => {
+		stopPolling();
+		setLoadingProvider(null);
+		setCodeEntry(false);
+		oauthCompleteMutation.reset();
+	};
+	return {
+		loadingProvider,
+		codeEntry,
+		start,
+		submitCode,
+		reset,
+		completeMutation: oauthCompleteMutation
 	};
+}
+//#endregion
+//#region src/components/qgrid/AddTokenModal.tsx
+function AddTokenModal() {
+	const [open, setOpen] = (0, import_react.useState)(false);
+	const [name, setName] = (0, import_react.useState)("");
+	const oauth = useOAuthLoginFlow();
 	const close = () => {
 		setOpen(false);
 		setName("");
-		setOauthLoading(null);
-		setCodeEntry(false);
-		setPastedCode("");
-		oauthCompleteMutation.reset();
+		oauth.reset();
+	};
+	const submitPastedCode = async (pastedCode) => {
+		if (await oauth.submitCode(pastedCode)) close();
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 		type: "button",
@@ -124,53 +215,20 @@ function AddTokenModal() {
 						onChange: (e) => setName(e.target.value),
 						placeholder: "e.g. your-token-name",
 						className: "mt-1 w-full border border-sand-200 rounded-md px-3 py-2 text-sm text-sand-900 bg-white placeholder:text-sand-300 focus:outline-none focus:border-sienna-300"
-					})] }), codeEntry ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "space-y-2",
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-								className: "text-[12px] text-sand-600 leading-relaxed",
-								children: "새 탭에서 Claude 로그인을 완료하면 코드가 표시됩니다. 코드 전체를 아래에 붙여넣으세요."
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Q, {
-								value: pastedCode,
-								onChange: (e) => setPastedCode(e.target.value),
-								placeholder: "code#state",
-								className: "w-full border border-sand-200 rounded-md px-3 py-2 text-sm font-mono text-sand-900 bg-white placeholder:text-sand-300 focus:outline-none focus:border-sienna-300"
-							}),
-							oauthCompleteMutation.isError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-								className: "text-[11px] text-red-500",
-								children: "코드 확인에 실패했습니다 — 표시된 코드 전체를 다시 붙여넣거나 로그인을 다시 시작하세요."
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "w-full py-2.5 text-sm font-medium rounded-md bg-sand-900 text-white hover:bg-sand-800 disabled:opacity-50 transition-colors duration-150 flex items-center justify-center gap-2",
-								disabled: !pastedCode.trim() || oauthCompleteMutation.isPending,
-								onClick: submitPastedCode,
-								children: oauthCompleteMutation.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-									className: "flex items-center gap-1.5",
-									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" }), "Verifying..."]
-								}) : "Complete login"
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "w-full py-1.5 text-[12px] text-sand-500 hover:text-sand-700 transition-colors duration-150",
-								onClick: () => {
-									setCodeEntry(false);
-									setPastedCode("");
-									oauthCompleteMutation.reset();
-								},
-								children: "처음부터 다시 시작"
-							})
-						]
+					})] }), oauth.codeEntry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OAuthCodeEntry, {
+						isPending: oauth.completeMutation.isPending,
+						isError: oauth.completeMutation.isError,
+						onSubmit: (code) => void submitPastedCode(code),
+						onRestart: oauth.reset
 					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "space-y-2",
 						children: [
 							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "w-full py-2.5 text-sm font-medium rounded-md bg-sand-900 text-white hover:bg-sand-800 disabled:opacity-50 transition-colors duration-150 flex items-center justify-center gap-2",
-								disabled: !name.trim() || oauthLoading !== null,
-								onClick: () => handleOAuthLogin("openai"),
-								children: oauthLoading === "openai" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								disabled: !name.trim() || oauth.loadingProvider !== null,
+								onClick: () => void oauth.start("openai", name),
+								children: oauth.loadingProvider === "openai" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
 									className: "flex items-center gap-1.5",
 									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" }), "Waiting for login..."]
 								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideKeyRound, { className: "size-4" }), "Login with OpenAI"] })
@@ -189,9 +247,9 @@ function AddTokenModal() {
 							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: "w-full py-2.5 text-sm font-medium rounded-md border border-sand-300 text-sand-700 hover:bg-sand-100 disabled:opacity-50 transition-colors duration-150 flex items-center justify-center gap-2",
-								disabled: !name.trim() || oauthLoading !== null,
-								onClick: () => handleOAuthLogin("anthropic"),
-								children: oauthLoading === "anthropic" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								disabled: !name.trim() || oauth.loadingProvider !== null,
+								onClick: () => void oauth.start("anthropic", name),
+								children: oauth.loadingProvider === "anthropic" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
 									className: "flex items-center gap-1.5",
 									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-3.5 h-3.5 border-2 border-sand-400 border-t-transparent rounded-full animate-spin" }), "Waiting for login..."]
 								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideKeyRound, { className: "size-4" }), "Login with Claude"] })
@@ -287,6 +345,7 @@ function TokenTable({ data, isLoading }) {
 	const removeMutation = QgridService.useRemoveTokenMutation();
 	const updateMutation = useUpdateTokenMutation();
 	const toggleMutation = QgridService.useToggleTokenMutation();
+	const oauth = useOAuthLoginFlow();
 	const invalidate = () => Promise.all([queryClient.invalidateQueries({ queryKey: ["Token"] }), queryClient.invalidateQueries({ queryKey: ["Qgrid"] })]);
 	const handleToggle = async (token) => {
 		await toggleMutation.mutateAsync({ id: token.id });
@@ -298,6 +357,9 @@ function TokenTable({ data, isLoading }) {
 		await invalidate();
 		setDeleteTarget(null);
 	};
+	const submitReloginCode = async (pastedCode) => {
+		if (await oauth.submitCode(pastedCode)) oauth.reset();
+	};
 	const openEdit = (token) => {
 		setEditTarget(token);
 		setEditName(token.name ?? "");
@@ -330,103 +392,142 @@ function TokenTable({ data, isLoading }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "panel overflow-hidden",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
-				className: "w-full text-[13px]",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
-					className: "panel-header",
-					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-							className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
-							children: "Provider"
-						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-							className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
-							children: "Name"
-						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-							className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
-							children: "Token"
-						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-							className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
-							children: "Status"
-						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-							className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
-							children: "Expires"
-						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "w-20 px-3 py-2.5" })
-					]
-				}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
-					className: "divide-y divide-sand-100/80",
-					children: tokens.map((token) => {
-						const expiry = formatExpiry(getExpiresAt(token));
-						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
-							className: `transition-colors duration-150 hover:bg-sand-100/60 ${token.active ? "" : "opacity-50"}`,
-							children: [
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "px-5 py-3",
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: "text-xs font-medium text-sand-500 uppercase",
-										children: token.provider
-									})
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "px-5 py-3",
-									children: token.name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: "text-sm text-sand-700",
-										children: token.name
-									}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: "text-[11px] text-sand-400",
-										children: "—"
-									})
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "px-5 py-3",
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
-										className: "text-[13px] font-mono text-sand-800",
-										children: maskAccessToken(token)
-									})
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "px-5 py-3",
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: `relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-200 ${token.active ? "bg-sage-400" : "bg-sand-300"}`,
-										onClick: () => handleToggle(token),
-										disabled: toggleMutation.isPending,
-										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform duration-200 ${token.active ? "translate-x-4.5" : "translate-x-0.5"}` })
-									})
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "px-5 py-3",
-									children: expiry.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: `text-xs ${expiry.color}`,
-										children: expiry.text
-									})
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "px-3 py-3",
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-										className: "flex items-center gap-1",
-										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-											type: "button",
-											className: "p-1 rounded text-sand-400 hover:text-sienna-500 transition-colors duration-150",
-											onClick: () => openEdit(token),
-											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucidePencil, { className: "size-4" })
-										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+					className: "w-full min-w-[640px] text-[13px]",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+						className: "panel-header",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+								children: "Provider"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+								children: "Name"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+								children: "Token"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+								children: "Status"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "text-left px-5 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+								children: "Expires"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "w-20 px-3 py-2.5" })
+						]
+					}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
+						className: "divide-y divide-sand-100/80",
+						children: tokens.map((token) => {
+							const expiry = formatExpiry(getExpiresAt(token));
+							return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+								className: `transition-colors duration-150 hover:bg-sand-100/60 ${token.active ? "" : "opacity-50"}`,
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+										className: "px-5 py-3",
+										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: "text-xs font-medium text-sand-500 uppercase",
+											children: token.provider
+										})
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+										className: "px-5 py-3",
+										children: token.name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: "text-sm text-sand-700",
+											children: token.name
+										}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: "text-[11px] text-sand-400",
+											children: "—"
+										})
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+										className: "px-5 py-3",
+										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+											className: "text-[13px] font-mono text-sand-800",
+											children: maskAccessToken(token)
+										})
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+										className: "px-5 py-3",
+										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
 											type: "button",
-											className: "p-1 rounded text-sand-400 hover:text-red-500 transition-colors duration-150",
-											onClick: () => setDeleteTarget(token),
-											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideTrash2, { className: "size-4" })
-										})]
+											className: `relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-200 ${token.active ? "bg-sage-400" : "bg-sand-300"}`,
+											onClick: () => handleToggle(token),
+											disabled: toggleMutation.isPending,
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform duration-200 ${token.active ? "translate-x-4.5" : "translate-x-0.5"}` })
+										})
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+										className: "px-5 py-3",
+										children: expiry.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: `text-xs ${expiry.color}`,
+											children: expiry.text
+										})
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+										className: "px-3 py-3",
+										children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "flex items-center gap-1",
+											children: [
+												!token.active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+													type: "button",
+													title: "기존 이름으로 다시 로그인",
+													className: "px-2 py-0.5 mr-1 text-[11px] font-medium rounded-md border border-sand-300 text-sand-600 hover:bg-sand-100 disabled:opacity-50 transition-colors duration-150 inline-flex items-center gap-1",
+													disabled: oauth.loadingProvider !== null,
+													onClick: () => void oauth.start(token.provider, token.name ?? ""),
+													children: oauth.loadingProvider === token.provider ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-3 h-3 border-2 border-sand-400 border-t-transparent rounded-full animate-spin" }), "로그인 대기"] }) : "재로그인"
+												}),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: "p-1 rounded text-sand-400 hover:text-sienna-500 transition-colors duration-150",
+													onClick: () => openEdit(token),
+													children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucidePencil, { className: "size-4" })
+												}),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: "p-1 rounded text-sand-400 hover:text-red-500 transition-colors duration-150",
+													onClick: () => setDeleteTarget(token),
+													children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideTrash2, { className: "size-4" })
+												})
+											]
+										})
 									})
-								})
-							]
-						}, token.id);
+								]
+							}, token.id);
+						})
+					})]
+				})
+			})
+		}),
+		oauth.codeEntry && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "absolute inset-0 bg-sand-900/8 backdrop-blur-sm",
+				onClick: oauth.reset,
+				onKeyDown: () => {}
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative panel shadow-xl w-full max-w-md mx-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "px-5 py-4 border-b border-sand-100/60",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+						className: "text-base font-medium text-sand-900",
+						children: "재로그인"
+					})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "px-5 py-4",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OAuthCodeEntry, {
+						isPending: oauth.completeMutation.isPending,
+						isError: oauth.completeMutation.isError,
+						onSubmit: (code) => void submitReloginCode(code),
+						onRestart: oauth.reset
 					})
 				})]
-			})
+			})]
 		}),
 		editTarget && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",

package/bundle/web-dist/server/assets/{use-update-token-mutation-BBCC2GKM.js → use-update-token-mutation-DHCaa7Ku.js}

@@ -1,4 +1,4 @@
-import { n as QgridService, o as useMutation } from "./services.generated-BNuxWs7K.js";
+import { n as QgridService, o as useMutation } from "./services.generated-DqAKskAS.js";
 //#region src/services/token/use-update-token-mutation.ts
 function useUpdateTokenMutation() {
 	return useMutation({ mutationFn: ({ id, name, quotaThreshold, weight }) => QgridService.updateToken(id, name, quotaThreshold, weight) });