@cartanova/qgrid-cli 2.10.10 → 2.11.1

package/bundle/web-dist/server/assets/{settings-CBUZ47Xx.js → settings-JwJKxn2e.js}

@@ -1,7 +1,7 @@
-import { A as require_react, O as useQueryClient, X as __toESM, a as SettingService, k as require_jsx_runtime, o as TokenService } from "./services.generated-BA4AcAf5.js";
-import { l as lucideRotateCcw } from "../entry-server.generated.js";
-import { t as useUpdateTokenMutation } from "./use-update-token-mutation-pkArIzCP.js";
-import { t as lucidePlus } from "./plus-BZ9I0VgC.js";
+import { $ as __toESM, M as require_jsx_runtime, N as require_react, a as SettingService, j as useQueryClient, o as TokenService } from "./services.generated-CMJ8AHbO.js";
+import { s as lucideRotateCcw } 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 ~icons/lucide/eye.jsx
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_jsx_runtime = require_jsx_runtime();
@@ -57,11 +57,11 @@ var lucideMinus = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg",
 });
 //#endregion
 //#region src/components/qgrid/SettingsPanel.tsx
-var GROUP_LABELS = {
-	qgrid: "Qgrid",
-	slack: "Slack 알림",
-	slackConnection: "Slack 연결"
-};
+var GROUP_LABELS = new Map([
+	["qgrid", "Qgrid"],
+	["slack", "Slack 알림"],
+	["slackConnection", "Slack 연결"]
+]);
 function maskValue(value) {
 	if (!value) return "";
 	if (value.length <= 12) return "•".repeat(value.length);
@@ -160,7 +160,7 @@ function SettingRow({ item, disabled = false }) {
 			await invalidate();
 			setDraft(null);
 		} catch (e) {
-			setError(e.message);
+			setError(e instanceof Error ? e.message : String(e));
 		}
 	};
 	const reset = async () => {
@@ -170,7 +170,7 @@ function SettingRow({ item, disabled = false }) {
 			await invalidate();
 			setDraft(null);
 		} catch (e) {
-			setError(e.message);
+			setError(e instanceof Error ? e.message : String(e));
 		}
 	};
 	const isSecret = item.kind === "secret";
@@ -277,7 +277,7 @@ function KeepaliveTokenSettings({ runnerEnabled }) {
 			});
 			await queryClient.invalidateQueries({ queryKey: ["Token", "getTokens"] });
 		} catch (cause) {
-			setError(cause.message);
+			setError(cause instanceof Error ? cause.message : String(cause));
 		}
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -339,7 +339,7 @@ function TriggerReminderButton() {
 			const { sent } = await mutation.mutateAsync();
 			setResult(sent === 0 ? "재로그인이 필요한 토큰이 없습니다" : `${sent}건 발송`);
 		} catch (e) {
-			setResult(e.message);
+			setResult(e instanceof Error ? e.message : String(e));
 		}
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -436,7 +436,7 @@ function SettingsPanel() {
 					className: "panel-header flex items-center justify-between px-4 py-2.5 sm:px-5",
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 						className: "text-[13px] font-medium text-sand-700",
-						children: GROUP_LABELS[group] ?? group
+						children: GROUP_LABELS.get(group) ?? group
 					}), group === "slack" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriggerReminderButton, {})]
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: "divide-y divide-sand-100/80",

package/bundle/web-dist/server/assets/{show-LSFIzvO2.js → show-BEv6z1v_.js}

@@ -1,8 +1,8 @@
-import { A as require_react, E as useQuery, X as __toESM, i as RequestLogStepService, k as require_jsx_runtime, l as isSonamuError, q as __commonJSMin, r as RequestLogService } from "./services.generated-BA4AcAf5.js";
-import { a as Link } from "./lazyRouteComponent-CgBdabgd.js";
-import { c as lucideX, d as Markdown, t as Route, u as remarkGfm } from "../entry-server.generated.js";
-import { n as formatMicroUsd, t as cacheHitRate } from "./cost-eEHeTRT5.js";
-import { n as lucideZap, t as requestModelDisplay } from "./request-model-DjGldb-h.js";
+import { $ as __toESM, C as number, E as union, M as require_jsx_runtime, N as require_react, S as looseObject, T as string, X as __commonJSMin, b as json, h as array, i as RequestLogStepService, k as useQuery, l as isSonamuError, r as RequestLogService, w as object } from "./services.generated-CMJ8AHbO.js";
+import { a as Link } from "./lazyRouteComponent-AKiHfZWp.js";
+import { c as remarkGfm, l as Markdown, o as lucideX, t as Route } from "../entry-server.generated.js";
+import { n as formatMicroUsd, t as cacheHitRate } from "./cost-BC9yzyA9.js";
+import { n as lucideZap, t as requestModelDisplay } from "./request-model-eHE6YbaF.js";
 //#region ../../node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/extends.js
 var require_extends = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _extends() {
@@ -1914,11 +1914,12 @@ function formatNum(n) {
 	return n.toLocaleString();
 }
 var TOKENS_PER_SEC_PROVIDERS = /* @__PURE__ */ new Set();
+var JsonValue = json();
 function tryParseJson(text) {
 	try {
 		return {
 			ok: true,
-			value: JSON.parse(text)
+			value: JsonValue.parse(JSON.parse(text))
 		};
 	} catch {
 		return { ok: false };
@@ -1927,7 +1928,7 @@ function tryParseJson(text) {
 function safeParseJson(text) {
 	if (!text) return {};
 	try {
-		return JSON.parse(text);
+		return JsonValue.parse(JSON.parse(text));
 	} catch {
 		return text;
 	}
@@ -2029,8 +2030,8 @@ function ImageAwareContent({ text, markdown }) {
 function FormattedContent({ text, markdown }) {
 	const parsed = tryParseJson(text);
 	const [mode, setMode] = (0, import_react.useState)("pretty");
-	const canRenderJsonView = parsed.ok && parsed.value !== null && (Array.isArray(parsed.value) || typeof parsed.value === "object");
-	if (!parsed.ok || !canRenderJsonView) {
+	const jsonContainer = parsed.ok && parsed.value instanceof Object ? parsed.value : null;
+	if (!parsed.ok || jsonContainer === null) {
 		if (markdown) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageAwareContent, {
 			text,
 			markdown: true
@@ -2051,7 +2052,7 @@ function FormattedContent({ text, markdown }) {
 			children: "Pretty"
 		})]
 	}), mode === "pretty" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonView, {
-		value: parsed.value,
+		value: jsonContainer,
 		style: lightTheme,
 		displayDataTypes: false,
 		enableClipboard: true,
@@ -2102,12 +2103,12 @@ function Metric({ label, value }) {
 		})]
 	});
 }
-var STATUS_STYLE = {
-	running: "bg-blue-100 text-blue-600",
-	succeeded: "bg-sage-100 text-sage-600",
-	error: "bg-red-100 text-red-600",
-	aborted: "bg-caution-400/15 text-caution-500"
-};
+var STATUS_STYLE = new Map([
+	["running", "bg-blue-100 text-blue-600"],
+	["succeeded", "bg-sage-100 text-sage-600"],
+	["error", "bg-red-100 text-red-600"],
+	["aborted", "bg-caution-400/15 text-caution-500"]
+]);
 function ErrorPanel({ message }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "panel overflow-hidden border border-red-200 bg-red-50/60",
@@ -2159,7 +2160,7 @@ function HeaderBar({ data }) {
 				children: ["fallback ×", data.fallback_count]
 			}),
 			!isRunning && data.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: `text-[10px] px-1.5 py-0.5 rounded-full font-medium uppercase ${STATUS_STYLE[data.status] ?? "bg-sand-100 text-sand-500"}`,
+				className: `text-[10px] px-1.5 py-0.5 rounded-full font-medium uppercase ${STATUS_STYLE.get(data.status) ?? "bg-sand-100 text-sand-500"}`,
 				children: data.status
 			}),
 			data.response_json_ok === false && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
@@ -2249,6 +2250,19 @@ function MetricsPanel({ data, toolCallCount }) {
 		})]
 	});
 }
+var ToolInputImage = object({
+	mediaType: string().optional(),
+	data: string().optional(),
+	url: string().optional(),
+	byteSize: number().optional()
+});
+var ToolInputArgs = looseObject({ inputImages: array(JsonValue) });
+var MaskableToolInputImage = looseObject({
+	mediaType: JsonValue.optional(),
+	byteSize: JsonValue.optional(),
+	url: JsonValue.optional(),
+	data: JsonValue.optional()
+});
 function formatDurationMs(ms) {
 	if (ms === null || ms === void 0) return "—";
 	return ms >= 1e3 ? `${(ms / 1e3).toFixed(1)}s` : `${ms}ms`;
@@ -2263,10 +2277,12 @@ function detectTokenRateProvider(source) {
 		const canonical = modelName.includes("/") ? modelName.split("/").pop() : modelName;
 		if (canonical.startsWith("claude-")) return "anthropic";
 		if (/^(gpt-|codex-|o\d)/.test(canonical)) return "openai";
+		if (canonical.startsWith("grok-")) return "grok";
 	}
 	const tokenName = source.token_name?.trim().toLowerCase();
 	if (tokenName?.startsWith("anthropic/")) return "anthropic";
 	if (tokenName?.startsWith("openai/")) return "openai";
+	if (tokenName?.startsWith("grok/")) return "grok";
 	return null;
 }
 function isTokensPerSecEnabled(source) {
@@ -2291,36 +2307,37 @@ function CompactMetric({ label, value }) {
 		})]
 	});
 }
-function readToolInputImages(args) {
-	if (!args || typeof args !== "object" || Array.isArray(args)) return [];
-	const inputImages = args.inputImages;
-	return Array.isArray(inputImages) ? inputImages : void 0;
-}
 function getToolInputImages(args) {
-	return (readToolInputImages(args) ?? []).filter((item) => {
-		if (!item || typeof item !== "object" || Array.isArray(item)) return false;
-		const image = item;
-		return typeof image.url === "string" && image.url.length > 0 || typeof image.data === "string" && image.data.length > 0;
+	const parsedArgs = ToolInputArgs.safeParse(args);
+	if (!parsedArgs.success) return [];
+	return parsedArgs.data.inputImages.flatMap((item) => {
+		const image = ToolInputImage.safeParse(item);
+		return image.success && (image.data.url || image.data.data) ? [image.data] : [];
 	});
 }
+function maskToolInputImage(item) {
+	const parsed = MaskableToolInputImage.safeParse(item);
+	if (!parsed.success) return item;
+	const image = parsed.data;
+	const masked = {};
+	if (image.mediaType !== void 0) masked.mediaType = image.mediaType;
+	if (image.byteSize !== void 0) masked.byteSize = image.byteSize;
+	const url = string().safeParse(image.url);
+	const maskedUrl = url.success && url.data.toLowerCase().startsWith("data:") ? `[data-url ${url.data.length} chars]` : image.url;
+	if (maskedUrl) masked.url = maskedUrl;
+	if (image.data) {
+		const data = string().safeParse(image.data);
+		masked.data = data.success ? `[base64 ${data.data.length} chars]` : "[base64 data]";
+	}
+	return masked;
+}
+/** Returns the value passed to JSON.stringify for display; undefined fields are omitted there. */
 function hideToolInputImages(args) {
-	if (!args || typeof args !== "object" || Array.isArray(args)) return args;
-	const record = args;
-	const inputImages = readToolInputImages(record);
-	if (!inputImages) return args;
+	const parsedArgs = ToolInputArgs.safeParse(args);
+	if (!parsedArgs.success || !(args instanceof Object) || Array.isArray(args)) return args;
 	return {
-		...record,
-		inputImages: inputImages.map((item) => {
-			if (!item || typeof item !== "object" || Array.isArray(item)) return item;
-			const image = item;
-			const maskedUrl = typeof image.url === "string" && image.url.toLowerCase().startsWith("data:") ? `[data-url ${image.url.length} chars]` : image.url;
-			return {
-				mediaType: image.mediaType,
-				byteSize: image.byteSize,
-				...maskedUrl ? { url: maskedUrl } : {},
-				...image.data ? { data: `[base64 ${image.data.length} chars]` } : {}
-			};
-		})
+		...args,
+		inputImages: parsedArgs.data.inputImages.map(maskToolInputImage)
 	};
 }
 function ToolInputImages({ images }) {
@@ -2372,6 +2389,8 @@ function ToolCallItem({ entry }) {
 	const { data: detail } = RequestLogStepService.useRequestLogStep("A", entry.id, { enabled: opened });
 	const displayArgs = hideToolInputImages(detail ? safeParseJson(detail.tool_args) : null);
 	const result = detail ? safeParseJson(detail.tool_result) : null;
+	const resultText = string().safeParse(result);
+	const responseText = resultText.success ? resultText.data : JSON.stringify(result);
 	const error = detail?.error ?? entry.error;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
 		className: "group/tool",
@@ -2420,7 +2439,7 @@ function ToolCallItem({ entry }) {
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: "mt-1 rounded-md bg-sand-50 p-3 overflow-auto",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, {
-						text: detail ? typeof result === "string" ? result : JSON.stringify(result) : "Loading...",
+						text: detail ? responseText : "Loading...",
 						markdown: true
 					})
 				})] })
@@ -2628,11 +2647,19 @@ function historyItemLabel(item) {
 	if (item.type === "function_call_output") return `fn result`;
 	return item.role ?? item.type;
 }
+var HistoryTextPart = looseObject({ text: string() });
+var HistoryContent = union([
+	string(),
+	array(union([HistoryTextPart, JsonValue])),
+	JsonValue
+]);
 function extractText(content) {
-	if (typeof content === "string") return content;
-	if (Array.isArray(content)) return content.map((c) => {
-		if (typeof c === "object" && c !== null && "text" in c) return c.text;
-		return JSON.stringify(c);
+	const text = string().safeParse(content);
+	if (text.success) return text.data;
+	const parts = array(union([HistoryTextPart, JsonValue])).safeParse(content);
+	if (parts.success) return parts.data.map((part) => {
+		const textPart = HistoryTextPart.safeParse(part);
+		return textPart.success ? textPart.data.text : JSON.stringify(part);
 	}).join("\n");
 	return JSON.stringify(content);
 }
@@ -2648,18 +2675,21 @@ function HistorySection({ history }) {
 		defaultOpen: false,
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "space-y-1.5",
-			children: history.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: `rounded-md px-3 py-2 ${historyItemBg(item)}`,
-				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium mb-1",
-						children: historyItemLabel(item)
-					}),
-					item.content !== null && item.content !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonoPre, { children: extractText(item.content) }),
-					item.arguments && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonoPre, { children: item.arguments }),
-					item.output && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonoPre, { children: item.output })
-				]
-			}, `hist-${i}`))
+			children: history.map((item, i) => {
+				const content = HistoryContent.safeParse(item.content);
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: `rounded-md px-3 py-2 ${historyItemBg(item)}`,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium mb-1",
+							children: historyItemLabel(item)
+						}),
+						item.content !== null && item.content !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonoPre, { children: content.success ? extractText(content.data) : JSON.stringify(item.content) }),
+						item.arguments && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonoPre, { children: item.arguments }),
+						item.output && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonoPre, { children: item.output })
+					]
+				}, `hist-${i}`);
+			})
 		})
 	});
 }
@@ -2715,7 +2745,7 @@ function ToolsHeaderMetadata({ tools }) {
 function ToolInputZod({ code, fullCode }) {
 	const highlighted = (0, import_react.useMemo)(() => highlightTypeText(code), [code]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
-		"data-zod-parameter-shape": true,
+		"data-zod-parameter-schema": true,
 		className: `max-h-64 overflow-auto rounded-md bg-sand-900 px-3 py-2.5 font-mono text-[11px] leading-relaxed whitespace-pre text-sand-200 ${fullCode ? "cursor-help outline-none focus-visible:ring-2 focus-visible:ring-sienna-300" : ""}`,
 		tabIndex: fullCode ? 0 : void 0,
 		title: fullCode,

package/bundle/web-dist/server/assets/{tokens-DxrBW512.js → tokens-CNT4mI-f.js}

@@ -1,11 +1,149 @@
-import { A as require_react, O as useQueryClient, X as __toESM, k as require_jsx_runtime, n as QgridService, o as TokenService } from "./services.generated-BA4AcAf5.js";
-import { f as lucideKeyRound, o as Q } from "../entry-server.generated.js";
-import { t as useUpdateTokenMutation } from "./use-update-token-mutation-pkArIzCP.js";
-import { n as OAuthCodeEntry, t as useOAuthLoginFlow } from "./use-oauth-login-flow-Gn8flMK5.js";
-import { t as lucidePlus } from "./plus-BZ9I0VgC.js";
-//#region src/components/qgrid/AddTokenModal.tsx
+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)("");
@@ -45,7 +183,7 @@ function AddTokenModal() {
 						htmlFor: "token-name",
 						className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
 						children: "Name *"
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Q, {
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(o, {
 						value: name,
 						onChange: (e) => setName(e.target.value),
 						placeholder: "e.g. your-token-name",
@@ -56,41 +194,14 @@ function AddTokenModal() {
 						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() || 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"] })
-							}),
-							/* @__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" })
-								]
-							}),
-							/* @__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() || 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"] })
-							})
-						]
+					}) : 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", {
@@ -141,19 +252,20 @@ var lucideTrash2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg",
 //#endregion
 //#region src/lib/token-label.ts
 function maskAccessToken(credentials) {
-	if (!credentials || typeof credentials !== "object") return "—";
-	if ("authSource" in credentials && credentials.authSource === "system-keychain") return "System Keychain";
-	const token = "accessToken" in credentials ? credentials.accessToken : void 0;
-	if (typeof token !== "string" || !token) return "—";
+	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 ("expiresAt" in c && typeof c.expiresAt === "number") return c.expiresAt;
-	if ("accessTokenExpiresAt" in c && typeof c.accessTokenExpiresAt === "number") return c.accessTokenExpiresAt;
-	return null;
+	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 {
@@ -352,7 +464,7 @@ function TokenTable({ data, isLoading }) {
 							htmlFor: "token-name",
 							className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
 							children: "Name"
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Q, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(o, {
 							value: editName,
 							onChange: (e) => setEditName(e.target.value),
 							placeholder: "e.g. prod, dev, team-a",

package/bundle/web-dist/server/assets/total-cost-fTE9Xy82.js

@@ -0,0 +1,18 @@
+//#region src/components/qgrid/total-cost.ts
+/** 비용을 몰라 합계에 들어가지 않은 요청 수(가격 없는 이미지 + provider 비용 없는 음성/영상). */
+function unpricedRequestCount(cost) {
+	return cost.unknownImageCostCount + (cost.unknownCostCount ?? 0);
+}
+/** 합계 옆에 붙일 짧은 표시. 빠진 요청이 없으면 null. */
+function unpricedRequestLabel(cost) {
+	const count = unpricedRequestCount(cost);
+	return count > 0 ? `+${count} unpriced` : null;
+}
+/** 표시에 붙일 설명. 이미지와 그 외 요청을 나눠 보여준다. */
+function unpricedRequestTitle(cost) {
+	if (unpricedRequestCount(cost) === 0) return null;
+	const media = cost.unknownCostCount ?? 0;
+	return `Total excludes requests with unknown cost: ${cost.unknownImageCostCount} image, ${media} voice/video.`;
+}
+//#endregion
+export { unpricedRequestTitle as n, unpricedRequestLabel as t };