@cartanova/qgrid-cli 2.11.0 → 2.11.1

package/bundle/web-dist/server/assets/tokens-CNT4mI-f.js

@@ -0,0 +1,560 @@
+import { $ as __toESM, M as require_jsx_runtime, N as require_react, j as useQueryClient, n as QgridService, o as TokenService } from "./services.generated-CMJ8AHbO.js";
+import { i as o, n as useOAuthLoginFlow, r as OAuthCodeEntry } from "./use-oauth-login-flow-jkAkT3X6.js";
+import { u as lucideKeyRound } from "../entry-server.generated.js";
+import { t as useUpdateTokenMutation } from "./use-update-token-mutation-Sm6kh02m.js";
+import { t as lucidePlus } from "./plus-DaYQRpBt.js";
+//#region src/components/qgrid/DeviceCodeEntry.tsx
+var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
+var import_jsx_runtime = require_jsx_runtime();
+function formatRemaining(ms) {
+	const totalSec = Math.max(Math.ceil(ms / 1e3), 0);
+	const m = Math.floor(totalSec / 60);
+	const s = totalSec % 60;
+	return `${m}:${String(s).padStart(2, "0")}`;
+}
+/** 만료 시각까지 1초마다 갱신되는 남은 시간. */
+function Countdown({ expiresAt }) {
+	const [now, setNow] = (0, import_react.useState)(() => Date.now());
+	(0, import_react.useEffect)(() => {
+		const id = window.setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(id);
+	}, []);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "tabular-nums",
+		children: formatRemaining(expiresAt - now)
+	});
+}
+/**
+* Grok device-code 로그인 단계. 사용자 코드와 인증 링크를 보여 주고, 폴링 상태를 표시한다.
+* 폴링 자체는 `useOAuthLoginFlow().startDevice` 가 소유한다.
+*/
+function DeviceCodeEntry({ flow, onRestart }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "space-y-2",
+		children: [
+			flow.status === "starting" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "flex items-center gap-1.5 text-[12px] text-sand-600",
+				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" }), "Requesting device code..."]
+			}),
+			flow.status === "waiting" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "text-[12px] text-sand-600 leading-relaxed",
+					children: "아래 링크를 열어 xAI 계정으로 로그인한 뒤 이 코드를 입력하세요. 승인되면 토큰이 자동으로 추가됩니다."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "rounded-md border border-sand-200 bg-sand-50 px-3 py-3 text-center",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+						children: "Device code"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-1 font-mono text-lg tracking-widest text-sand-900 select-all",
+						children: flow.userCode
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+					href: flow.verificationUriComplete ?? flow.verificationUri,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "block w-full py-2.5 text-sm font-medium rounded-md bg-sand-900 text-white text-center hover:bg-sand-800 transition-colors duration-150",
+					children: "Open xAI to approve"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: "flex items-center justify-between text-[11px] text-sand-500",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-2.5 h-2.5 border-2 border-sand-400 border-t-transparent rounded-full animate-spin" }), flow.slowDown ? "Waiting for approval (polling slowed down)..." : "Waiting for approval..."]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["expires in ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Countdown, { expiresAt: flow.expiresAt })] })]
+				})
+			] }),
+			flow.status === "added" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "text-[12px] text-sage-600",
+				children: [
+					"Token \"",
+					flow.name,
+					"\" added."
+				]
+			}),
+			flow.status === "expired" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-[11px] text-red-500",
+				children: "Device code가 만료되었습니다 — 로그인을 다시 시작하세요."
+			}),
+			flow.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-[11px] text-red-500",
+				children: flow.message
+			}),
+			/* @__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: onRestart,
+				children: "처음부터 다시 시작"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/qgrid/AddTokenModal.tsx
+function Spinner({ light }) {
+	return /* @__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-t-transparent rounded-full animate-spin ${light ? "border-white" : "border-sand-400"}` }), "Waiting for login..."]
+	});
+}
+function OrDivider() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 h-px bg-sand-200" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[10px] text-sand-400 uppercase",
+				children: "or"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 h-px bg-sand-200" })
+		]
+	});
+}
+/** Provider 선택 버튼들. 상태는 상위(`useOAuthLoginFlow`)가 소유한다. */
+function AddTokenProviderOptions({ disabled, loadingProvider, onStart, onStartGrokDevice }) {
+	const secondary = "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";
+	return /* @__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,
+				onClick: () => onStart("openai"),
+				children: loadingProvider === "openai" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { light: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideKeyRound, { className: "size-4" }), "Login with OpenAI"] })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(OrDivider, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: secondary,
+				disabled,
+				onClick: () => onStart("anthropic"),
+				children: loadingProvider === "anthropic" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { light: false }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideKeyRound, { className: "size-4" }), "Login with Claude"] })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(OrDivider, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: secondary,
+				disabled,
+				onClick: onStartGrokDevice,
+				children: loadingProvider === "grok" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { light: false }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideKeyRound, { className: "size-4" }), "Login with xAI"] })
+			})
+		]
+	});
+}
+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("");
+		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",
+		className: "px-3.5 py-1.5 text-[12px] font-medium rounded-lg bg-sienna-500 text-white hover:bg-sienna-600 disabled:opacity-50 transition-all duration-150 active:scale-[0.97] flex items-center gap-1.5 shadow-sm",
+		onClick: () => setOpen(true),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucidePlus, { className: "size-3.5" }), "Add Token"]
+	}), open && /* @__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: close,
+			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/50",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+						className: "text-base font-medium text-sand-900",
+						children: "Add Token"
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "px-5 py-4 space-y-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+						htmlFor: "token-name",
+						className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+						children: "Name *"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(o, {
+						value: name,
+						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"
+					})] }), oauth.codeEntryProvider ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OAuthCodeEntry, {
+						provider: oauth.codeEntryProvider,
+						isPending: oauth.completeMutation.isPending,
+						isError: oauth.completeMutation.isError,
+						onSubmit: (code) => void submitPastedCode(code),
+						onRestart: oauth.reset
+					}) : oauth.deviceFlow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DeviceCodeEntry, {
+						flow: oauth.deviceFlow,
+						onRestart: oauth.reset
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AddTokenProviderOptions, {
+						disabled: !name.trim() || oauth.loadingProvider !== null,
+						loadingProvider: oauth.loadingProvider,
+						onStart: (provider) => void oauth.start(provider, name),
+						onStartGrokDevice: () => void oauth.startDevice(name, close)
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "px-5 py-3 border-t border-sand-100/50 flex items-center justify-end gap-2",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "px-3 py-1 text-xs font-medium rounded-md border border-sand-200 text-sand-600 hover:bg-sand-100 transition-colors duration-150",
+						onClick: close,
+						children: "Cancel"
+					})
+				})
+			]
+		})]
+	})] });
+}
+//#endregion
+//#region ~icons/lucide/pencil.jsx
+var lucidePencil = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497zM15 5l4 4"
+	})
+});
+//#endregion
+//#region ~icons/lucide/trash-2.jsx
+var lucideTrash2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+	})
+});
+//#endregion
+//#region src/lib/token-label.ts
+function maskAccessToken(credentials) {
+	const token = credentials.accessToken;
+	if (!token) return "—";
+	return token.length <= 12 ? token : `${token.slice(0, 8)}...${token.slice(-4)}`;
+}
+//#endregion
+//#region src/components/qgrid/TokenTable.tsx
+function getExpiresAt(token) {
+	const c = token.credentials;
+	if ("accessTokenExpiresAt" in c) return c.accessTokenExpiresAt;
+	if ("authMode" in c) {
+		const ms = Date.parse(c.expiresAt);
+		return Number.isNaN(ms) ? null : ms;
+	}
+	return c.expiresAt;
+}
+function formatExpiry(expiresAt) {
+	if (!expiresAt) return {
+		text: "",
+		color: ""
+	};
+	const diff = expiresAt - Date.now();
+	if (diff <= 0) return {
+		text: "expired",
+		color: "text-red-500"
+	};
+	const h = Math.floor(diff / 36e5);
+	const m = Math.floor(diff % 36e5 / 6e4);
+	const text = h > 0 ? `${h}h ${m}m` : `${m}m`;
+	if (diff < 36e5) return {
+		text,
+		color: "text-amber-500"
+	};
+	return {
+		text,
+		color: "text-sand-400"
+	};
+}
+function TokenTable({ data, isLoading }) {
+	const [deleteTarget, setDeleteTarget] = (0, import_react.useState)(null);
+	const [editTarget, setEditTarget] = (0, import_react.useState)(null);
+	const [editName, setEditName] = (0, import_react.useState)("");
+	const queryClient = useQueryClient();
+	const removeMutation = QgridService.useRemoveTokenMutation();
+	const updateMutation = useUpdateTokenMutation();
+	const toggleMutation = QgridService.useToggleTokenMutation();
+	const invalidate = () => Promise.all([queryClient.invalidateQueries({ queryKey: ["Token"] }), queryClient.invalidateQueries({ queryKey: ["Qgrid"] })]);
+	const handleToggle = async (token) => {
+		await toggleMutation.mutateAsync({ id: token.id });
+		await invalidate();
+	};
+	const handleDelete = async () => {
+		if (!deleteTarget) return;
+		await removeMutation.mutateAsync({ id: deleteTarget.id });
+		await invalidate();
+		setDeleteTarget(null);
+	};
+	const openEdit = (token) => {
+		setEditTarget(token);
+		setEditName(token.name ?? "");
+	};
+	const handleUpdate = async () => {
+		if (!editTarget) return;
+		await updateMutation.mutateAsync({
+			id: editTarget.id,
+			name: editName.trim()
+		});
+		await invalidate();
+		setEditTarget(null);
+	};
+	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "space-y-2",
+		children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-12 bg-sand-100 rounded-md animate-pulse" }, `skeleton-${i}`))
+	});
+	const tokens = data ?? [];
+	if (tokens.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "text-sand-400 text-center py-16 text-sm",
+		children: [
+			"No tokens registered. Click ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", {
+				className: "text-sand-600",
+				children: "Add Token"
+			}),
+			" to get started."
+		]
+	});
+	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.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.credentials)
+										})
+									}),
+									/* @__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 || !token.active && token.reauth_required,
+											title: !token.active && token.reauth_required ? "재로그인이 필요한 토큰입니다" : void 0,
+											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", {
+												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);
+						})
+					})]
+				})
+			})
+		}),
+		editTarget && /* @__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: () => setEditTarget(null),
+				onKeyDown: () => {}
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative panel shadow-xl w-full max-w-sm 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: "Edit Token"
+						})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "px-5 py-4 space-y-3",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+							htmlFor: "token-name",
+							className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+							children: "Name"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(o, {
+							value: editName,
+							onChange: (e) => setEditName(e.target.value),
+							placeholder: "e.g. prod, dev, team-a",
+							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"
+						})] })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "px-5 py-3 border-t border-sand-100/60 flex items-center justify-end gap-2",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "px-3 py-1 text-xs font-medium rounded-md border border-sand-200 text-sand-600 hover:bg-sand-100 transition-colors duration-150",
+							onClick: () => setEditTarget(null),
+							children: "Cancel"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "px-3 py-1 text-xs font-medium rounded-md bg-sienna-400 text-white hover:bg-sienna-500 disabled:opacity-50 transition-colors duration-150",
+							disabled: updateMutation.isPending,
+							onClick: handleUpdate,
+							children: updateMutation.isPending ? "Saving..." : "Save"
+						})]
+					})
+				]
+			})]
+		}),
+		deleteTarget && /* @__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: () => setDeleteTarget(null),
+				onKeyDown: () => {}
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative panel shadow-xl w-full max-w-sm mx-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "px-5 py-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+						className: "text-base font-medium text-sand-900",
+						children: "Remove Token"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+						className: "text-sm text-sand-700 mt-2",
+						children: [
+							"Are you sure you want to remove",
+							" ",
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+								className: "text-[13px] font-mono text-sand-800",
+								children: maskAccessToken(deleteTarget.credentials)
+							}),
+							deleteTarget.name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "text-sand-500",
+								children: [
+									" (",
+									deleteTarget.name,
+									")"
+								]
+							}),
+							"?"
+						]
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "px-5 py-3 border-t border-sand-100/60 flex items-center justify-end gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "px-3 py-1 text-xs font-medium rounded-md border border-sand-200 text-sand-600 hover:bg-sand-100 transition-colors duration-150",
+						onClick: () => setDeleteTarget(null),
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "px-3 py-1 text-xs font-medium rounded-md bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 transition-colors duration-150",
+						disabled: removeMutation.isPending,
+						onClick: handleDelete,
+						children: removeMutation.isPending ? "Removing..." : "Remove"
+					})]
+				})]
+			})]
+		})
+	] });
+}
+//#endregion
+//#region src/routes/tokens.tsx?tsr-split=component
+function TokensPage() {
+	const { data, isLoading } = TokenService.useTokens("A");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "max-w-6xl mx-auto space-y-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex items-center justify-end",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AddTokenModal, {})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenTable, {
+			data: data?.rows,
+			isLoading
+		})]
+	});
+}
+//#endregion
+export { TokensPage as component };

package/bundle/web-dist/server/assets/{use-oauth-login-flow-CKDHgc3U.js → use-oauth-login-flow-jkAkT3X6.js}

@@ -1,4 +1,4 @@
-import { F as require_react, N as useQueryClient, P as require_jsx_runtime, k as require_jsx_dev_runtime, n as QgridService, o as TokenService, tt as __toESM } from "./services.generated-DQATJ6qf.js";
+import { $ as __toESM, M as require_jsx_runtime, N as require_react, j as useQueryClient, n as QgridService, o as TokenService } from "./services.generated-CMJ8AHbO.js";
 import { t as clsx } from "./clsx-D_N5PN_2.js";
 //#region ../../node_modules/.pnpm/tailwind-merge@3.5.0/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 /**
@@ -2023,8 +2023,6 @@ var o = import_react.forwardRef(({ className: o, type: s, onValueChange: c, onCh
 o.displayName = "Input";
 //#endregion
 //#region src/components/qgrid/OAuthCodeEntry.tsx
-var import_jsx_dev_runtime = require_jsx_dev_runtime();
-var _jsxFileName = "/home/runner/work/qgrid/qgrid/packages/web/src/components/qgrid/OAuthCodeEntry.tsx";
 var HELP_TEXT = {
 	openai: "새 탭에서 OpenAI 로그인을 완료한 뒤 연결 실패 화면이 나타나면, 주소창의 전체 URL을 아래에 붙여넣으세요.",
 	anthropic: "새 탭에서 Claude 로그인을 완료하면 코드가 표시됩니다. 코드 전체를 아래에 붙여넣으세요.",
@@ -2041,58 +2039,34 @@ var PLACEHOLDER = {
 */
 function OAuthCodeEntry({ provider, isPending, isError, onSubmit, onRestart }) {
 	const [pastedCode, setPastedCode] = (0, import_react.useState)("");
-	return /* @__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("div", {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "space-y-2",
 		children: [
-			/* @__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("p", {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 				className: "text-[12px] text-sand-600 leading-relaxed",
 				children: HELP_TEXT[provider]
-			}, void 0, false, {
-				fileName: _jsxFileName,
-				lineNumber: 41,
-				columnNumber: 7
-			}, this),
-			/* @__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)(o, {
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(o, {
 				value: pastedCode,
 				onChange: (e) => setPastedCode(e.target.value),
 				placeholder: PLACEHOLDER[provider],
 				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"
-			}, void 0, false, {
-				fileName: _jsxFileName,
-				lineNumber: 42,
-				columnNumber: 7
-			}, this),
-			isError && /* @__PURE__ */ (void 0)("p", {
+			}),
+			isError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 				className: "text-[11px] text-red-500",
 				children: "인증 결과 확인에 실패했습니다 — 전체 값을 다시 붙여넣거나 로그인을 다시 시작하세요."
-			}, void 0, false, {
-				fileName: _jsxFileName,
-				lineNumber: 49,
-				columnNumber: 9
-			}, this),
-			/* @__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("button", {
+			}),
+			/* @__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_dev_runtime.jsxDEV)("span", {
+				children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
 					className: "flex items-center gap-1.5",
-					children: [/* @__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" }, void 0, false, {
-						fileName: _jsxFileName,
-						lineNumber: 61,
-						columnNumber: 13
-					}, this), "Verifying..."]
-				}, void 0, true, {
-					fileName: _jsxFileName,
-					lineNumber: 60,
-					columnNumber: 11
-				}, this) : "Complete login"
-			}, void 0, false, {
-				fileName: _jsxFileName,
-				lineNumber: 53,
-				columnNumber: 7
-			}, this),
-			/* @__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("button", {
+					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: () => {
@@ -2100,17 +2074,9 @@ function OAuthCodeEntry({ provider, isPending, isError, onSubmit, onRestart }) {
 					onRestart();
 				},
 				children: "처음부터 다시 시작"
-			}, void 0, false, {
-				fileName: _jsxFileName,
-				lineNumber: 68,
-				columnNumber: 7
-			}, this)
+			})
 		]
-	}, void 0, true, {
-		fileName: _jsxFileName,
-		lineNumber: 40,
-		columnNumber: 5
-	}, this);
+	});
 }
 //#endregion
 //#region src/components/qgrid/use-oauth-login-flow.ts

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

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