@cartanova/qgrid-cli 2.7.0 → 2.7.2

package/bundle/web-dist/server/assets/logs-CJBbHM3_.js

@@ -0,0 +1,481 @@
+import { S as require_react, f as boolean, h as string, m as object, n as QgridService, o as TokenService, p as number, r as RequestLogService, x as require_jsx_runtime } from "./services.generated-DyPeBI00.js";
+import { a as Link, o as useNavigate } from "./lazyRouteComponent-0y-znAfz.js";
+import { n as Route } from "../entry-server.generated.js";
+import { n as formatMicroUsd, r as formatUsd, t as cacheHitRate } from "./cost-CSH_t17I.js";
+require_react();
+var import_jsx_runtime = require_jsx_runtime();
+var lucideChevronLeft = (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: "m15 18l-6-6l6-6"
+	})
+});
+//#endregion
+//#region ~icons/lucide/chevron-right.jsx
+var lucideChevronRight = (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: "m9 18l6-6l-6-6"
+	})
+});
+//#endregion
+//#region src/components/qgrid/RequestLogTable.tsx
+var PAGE_SIZE = 50;
+var UNASSIGNED = "__unassigned__";
+function formatDateTime(iso) {
+	const d = new Date(iso);
+	return `${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")} ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+function formatNum(n) {
+	return n.toLocaleString();
+}
+function formatDuration(ms) {
+	const total = Math.round(ms / 1e3);
+	const m = Math.floor(total / 60);
+	const s = total % 60;
+	return m > 0 ? `${m}m ${s}s` : `${s}s`;
+}
+function RequestModel({ status, requestedModel, servedModel, fallbackCount }) {
+	if (status === "running") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "text-[9px] px-1.5 py-0.5 rounded-full bg-blue-100 text-blue-600 font-medium whitespace-nowrap",
+		children: "실행 중"
+	});
+	const hasFallback = requestedModel !== null && servedModel !== null && requestedModel !== servedModel;
+	const hasRequestedOnly = requestedModel !== null && servedModel === null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "text-xs text-sand-500",
+			children: hasFallback ? `${requestedModel} → ${servedModel}` : servedModel ?? requestedModel ?? "—"
+		}),
+		hasRequestedOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "ml-1 text-[9px] text-sand-400",
+			children: "요청"
+		}),
+		(fallbackCount ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+			className: "ml-1 text-[9px] text-caution-500",
+			children: ["×", fallbackCount]
+		})
+	] });
+}
+function formatTtft(ms) {
+	if (ms <= 0) return "—";
+	return ms >= 1e3 ? `${(ms / 1e3).toFixed(1)}s` : `${ms}ms`;
+}
+var COLUMNS = [
+	{
+		label: "ID",
+		align: "left",
+		width: "w-12",
+		sortKey: "id"
+	},
+	{
+		label: "Date",
+		align: "left",
+		width: "w-20",
+		sortKey: "created_at"
+	},
+	{
+		label: "Project",
+		align: "left",
+		width: "w-20"
+	},
+	{
+		label: "Token",
+		align: "left",
+		width: "w-24"
+	},
+	{
+		label: "Model",
+		align: "left",
+		width: "w-20"
+	},
+	{
+		label: "Fmt",
+		align: "left",
+		width: "w-12"
+	},
+	{
+		label: "TTFT",
+		align: "right",
+		width: "w-16",
+		sortKey: "ttft_ms"
+	},
+	{
+		label: "Duration",
+		align: "right",
+		width: "w-20",
+		sortKey: "duration_ms"
+	},
+	{
+		label: "In",
+		align: "right",
+		width: "w-16",
+		sortKey: "input_tokens"
+	},
+	{
+		label: "Out",
+		align: "right",
+		width: "w-20",
+		sortKey: "output_tokens"
+	},
+	{
+		label: "C.Read",
+		align: "right",
+		width: "w-20",
+		sortKey: "cache_read_tokens"
+	},
+	{
+		label: "C.Write",
+		align: "right",
+		width: "w-20",
+		sortKey: "cache_creation_tokens"
+	},
+	{
+		label: "Hit",
+		align: "right",
+		width: "w-14"
+	},
+	{
+		label: "Tools",
+		align: "right",
+		width: "w-14"
+	},
+	{
+		label: "Cost",
+		align: "right",
+		width: "w-20",
+		sortKey: "cost_usd"
+	}
+];
+function RequestLogTable({ search, onSearchChange }) {
+	const navigate = useNavigate();
+	const page = search.page ?? 1;
+	const tokenFilter = search.token ?? "";
+	const projectFilter = search.project ?? "";
+	const modelFilter = search.model ?? "";
+	const { data: tokensData } = TokenService.useTokens("A");
+	const tokenNames = (tokensData?.rows ?? []).map((t) => t.name).filter(Boolean);
+	const { data: projectData } = QgridService.useProjectNames();
+	const projectNames = projectData?.names ?? [];
+	const { data: modelData } = QgridService.useModelNames();
+	const modelNames = modelData?.names ?? [];
+	const projectFilterParam = (() => {
+		if (projectFilter === UNASSIGNED) return { project_name_is_null: true };
+		if (projectFilter) return { project_name: projectFilter };
+		return {};
+	})();
+	const listFilters = {
+		...tokenFilter ? { token_name: tokenFilter } : {},
+		...projectFilterParam,
+		...modelFilter ? { model_name: modelFilter } : {},
+		...search.broken ? { response_json_broken: true } : {}
+	};
+	const sort = search.sort ?? "id-desc";
+	const separator = sort.lastIndexOf("-");
+	const sortColumn = sort.slice(0, separator);
+	const sortDirection = sort.slice(separator + 1) === "asc" ? "asc" : "desc";
+	const { data, isLoading } = RequestLogService.useRequestLogs("P", {
+		num: PAGE_SIZE,
+		page,
+		orderBy: sort,
+		...listFilters
+	});
+	const { data: costData } = QgridService.useTotalCost({
+		num: 0,
+		page: 1,
+		...listFilters
+	});
+	const rows = data?.rows ?? [];
+	const total = data?.total ?? 0;
+	const totalPages = Math.ceil(total / PAGE_SIZE);
+	const updateFilter = (patch) => {
+		onSearchChange({
+			...search,
+			...patch,
+			page: 1
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "panel overflow-hidden",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "panel-header flex items-center gap-2 px-3 py-2.5 flex-wrap sm:gap-3 sm:px-5",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+					value: tokenFilter,
+					onChange: (e) => updateFilter({ token: e.target.value || void 0 }),
+					disabled: tokenNames.length === 0,
+					className: "border border-sand-200/80 rounded-lg px-2.5 py-1.5 text-[11px] text-sand-700 bg-sand-50/50 focus:outline-none focus:border-sienna-300 disabled:text-sand-300 disabled:cursor-not-allowed",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+						value: "",
+						children: tokenNames.length > 0 ? "All Tokens" : "Tokens —"
+					}), tokenNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+						value: name,
+						children: name
+					}, name))]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+					value: projectFilter,
+					onChange: (e) => updateFilter({ project: e.target.value || void 0 }),
+					className: "border border-sand-200/80 rounded-lg px-2.5 py-1.5 text-[11px] text-sand-700 bg-sand-50/50 focus:outline-none focus:border-sienna-300",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+							value: "",
+							children: "All Projects"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+							value: UNASSIGNED,
+							children: "(unassigned)"
+						}),
+						projectNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+							value: name,
+							children: name
+						}, name))
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+					value: modelFilter,
+					onChange: (e) => updateFilter({ model: e.target.value || void 0 }),
+					disabled: modelNames.length === 0,
+					className: "border border-sand-200/80 rounded-lg px-2.5 py-1.5 text-[11px] text-sand-700 bg-sand-50/50 focus:outline-none focus:border-sienna-300 disabled:text-sand-300 disabled:cursor-not-allowed",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+						value: "",
+						children: modelNames.length > 0 ? "All Models" : "Models —"
+					}), modelNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+						value: name,
+						children: name
+					}, name))]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+					className: "flex cursor-pointer select-none items-center gap-1.5 text-[11px] text-sand-700",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked: search.broken === true,
+						onChange: (e) => updateFilter({ broken: e.target.checked ? true : void 0 }),
+						className: "size-3.5 cursor-pointer accent-caution-500"
+					}), "Broken JSON"]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "text-[11px] text-sand-400",
+					children: [total, " results"]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[11px] tabular-nums font-medium text-sienna-600",
+					children: formatUsd(costData?.usd ?? 0)
+				})
+			]
+		}), isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "space-y-2",
+			children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 bg-sand-100 rounded animate-pulse" }, `skel-${i}`))
+		}) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "text-sand-400 text-center py-12 text-sm",
+			children: "No requests yet."
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "overflow-x-auto px-3 py-3 sm:px-5",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+				className: "w-full min-w-[900px] text-[13px]",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+					className: "border-b border-sand-100/60",
+					children: [COLUMNS.map((col) => {
+						const padX = col.label === "Duration" ? "pl-5 pr-3" : col.width ? "px-4" : "px-3";
+						const active = col.sortKey === sortColumn;
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: `${col.align === "right" ? "text-right" : "text-left"} ${col.width ?? ""} ${col.width ? "whitespace-nowrap" : ""} ${padX} py-1.5 text-[10px] uppercase font-medium ${active ? "text-sienna-600" : "text-sand-400"}`,
+							children: col.sortKey ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+								type: "button",
+								onClick: () => updateFilter({ sort: `${col.sortKey}-${active && sortDirection === "desc" ? "asc" : "desc"}` }),
+								className: `inline-flex items-center gap-0.5 text-[10px] uppercase font-medium hover:text-sienna-500 transition-colors duration-150 ${col.align === "right" ? "justify-end w-full" : ""}`,
+								children: [col.label, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: active ? "" : "text-sand-300",
+									children: active ? sortDirection === "desc" ? "↓" : "↑" : "↕"
+								})]
+							}) : col.label
+						}, col.label);
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "w-8" })]
+				}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
+					className: "divide-y divide-sand-100/60",
+					children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+						className: "transition-colors duration-150 hover:bg-sand-100/60 cursor-pointer",
+						onClick: (e) => {
+							if (e.metaKey || e.ctrlKey) {
+								window.open(`/requests/show?id=${row.id}`, "_blank");
+								return;
+							}
+							navigate({
+								to: "/requests/show",
+								search: { id: row.id }
+							});
+						},
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-4 py-1.5 whitespace-nowrap",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+									to: "/requests/show",
+									search: { id: row.id },
+									onClick: (e) => e.stopPropagation(),
+									className: "text-xs text-sand-500 tabular-nums hover:text-sienna-500",
+									children: row.id
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-4 py-1.5 whitespace-nowrap",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-xs text-sand-400 tabular-nums",
+									children: formatDateTime(row.created_at)
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-4 py-1.5 whitespace-nowrap",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-xs text-sand-600",
+									children: row.project_name ?? "—"
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-4 py-1.5 whitespace-nowrap",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-xs text-sand-500",
+									children: row.token_name
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", {
+								className: "px-4 py-1.5 whitespace-nowrap",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestModel, {
+									status: row.status,
+									requestedModel: row.requested_model_name,
+									servedModel: row.model_name,
+									fallbackCount: row.fallback_count
+								}), row.response_json_ok === false && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									title: "structured 요청의 응답이 JSON 파싱에 실패했습니다",
+									className: "ml-1.5 rounded-full bg-caution-400/15 px-1.5 py-0.5 text-[9px] font-semibold text-caution-500",
+									children: "broken"
+								})]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-4 py-1.5 whitespace-nowrap",
+								children: row.is_structured ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "rounded bg-sienna-100 px-1.5 py-0.5 font-mono text-[10px] text-sienna-700",
+									children: "json"
+								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "font-mono text-[10px] text-sand-400",
+									children: "text"
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-4 py-1.5 text-right tabular-nums text-sand-500 whitespace-nowrap",
+								children: formatTtft(row.ttft_ms)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "pl-5 pr-3 py-1.5 text-right tabular-nums text-sand-500 whitespace-nowrap",
+								children: formatDuration(row.duration_ms)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-3 py-1.5 text-right tabular-nums text-sand-700",
+								children: formatNum(row.input_tokens)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-3 py-1.5 text-right tabular-nums text-sand-700",
+								children: formatNum(row.output_tokens)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-3 py-1.5 text-right tabular-nums text-sand-700",
+								children: formatNum(row.cache_read_tokens)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-3 py-1.5 text-right tabular-nums text-sand-700",
+								children: formatNum(row.cache_creation_tokens)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-3 py-1.5 text-right tabular-nums text-sand-700",
+								children: cacheHitRate(row)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-3 py-1.5 text-right tabular-nums text-sand-500",
+								children: row.tool_call_count > 0 ? row.tool_call_count : "—"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-3 py-1.5 text-right tabular-nums text-sand-700",
+								children: row.image_cost_usd !== null ? formatMicroUsd((row.cost_usd ?? 0) + row.image_cost_usd) : row.cost_usd !== null ? formatMicroUsd(row.cost_usd) : "—"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "px-2 py-1.5",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronRight, { className: "size-4 text-sand-400" })
+							})
+						]
+					}, row.id))
+				})]
+			})
+		}), totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-center gap-3 px-5 py-2.5 border-t border-sand-100/60",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "p-1 rounded text-sand-400 hover:text-sand-600 disabled:opacity-30 transition-colors",
+					disabled: page === 1,
+					onClick: () => onSearchChange({
+						...search,
+						page: page - 1
+					}),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronLeft, { className: "size-4" })
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "text-[11px] text-sand-400 tabular-nums",
+					children: [
+						page,
+						" / ",
+						totalPages
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "p-1 rounded text-sand-400 hover:text-sand-600 disabled:opacity-30 transition-colors",
+					disabled: page === totalPages,
+					onClick: () => onSearchChange({
+						...search,
+						page: page + 1
+					}),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronRight, { className: "size-4" })
+				})
+			]
+		})] })]
+	});
+}
+//#endregion
+//#region src/routes/logs.tsx?tsr-split=component
+object({
+	token: string().optional(),
+	project: string().optional(),
+	model: string().optional(),
+	sort: string().optional(),
+	broken: boolean().optional(),
+	page: number().optional().default(1)
+});
+function LogsPage() {
+	const search = Route.useSearch();
+	const navigate = Route.useNavigate();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "max-w-[100rem] mx-auto",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestLogTable, {
+			search,
+			onSearchChange: (next) => navigate({ search: next })
+		})
+	});
+}
+//#endregion
+export { LogsPage as component };