@cartanova/qgrid-cli 1.3.0 → 1.5.0

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

@@ -0,0 +1,244 @@
+import { S as require_react, nt as __toESM, x as require_jsx_runtime } from "./sd.generated-BeEKgSOs.js";
+import { n as RequestLogService, r as TokenService } from "./services.generated-DjxCLdMu.js";
+import { o as useNavigate } from "./lazyRouteComponent-Dyl_0WZs.js";
+import { n as Route } from "../entry-server.generated.js";
+//#region ~icons/lucide/chevron-left.jsx
+var import_react = /* @__PURE__ */ __toESM(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;
+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 calcCacheHitRate(row) {
+	const denom = row.input_tokens + row.cache_read_tokens + row.cache_creation_tokens;
+	if (denom === 0) return "—";
+	return `${Math.round(row.cache_read_tokens / denom * 100)}%`;
+}
+function trimQuery(q, maxLen = 30) {
+	return q.length > maxLen ? `${q.slice(0, maxLen)}...` : q;
+}
+function RequestLogTable({ page: externalPage, onPageChange } = {}) {
+	const navigate = useNavigate();
+	const [internalPage, setInternalPage] = (0, import_react.useState)(1);
+	const page = externalPage ?? internalPage;
+	const setPage = onPageChange ?? setInternalPage;
+	const [tokenFilter, setTokenFilter] = (0, import_react.useState)("");
+	const { data: tokensData } = TokenService.useTokens("A");
+	const tokenNames = (tokensData?.rows ?? []).map((t) => t.name).filter(Boolean);
+	const { data, isLoading } = RequestLogService.useRequestLogs("A", {
+		num: PAGE_SIZE,
+		page,
+		orderBy: "id-desc",
+		...tokenFilter ? { token_name: tokenFilter } : {}
+	});
+	const rows = data?.rows ?? [];
+	const total = data?.total ?? 0;
+	const totalPages = Math.ceil(total / PAGE_SIZE);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2 mb-3 flex-wrap",
+		children: [tokenNames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+			value: tokenFilter,
+			onChange: (e) => {
+				setTokenFilter(e.target.value);
+				setPage(1);
+			},
+			className: "border border-sand-200 rounded-md px-2 py-1 text-xs text-sand-700 bg-white focus:outline-none focus:border-sienna-300",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+				value: "",
+				children: "All Tokens"
+			}), tokenNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+				value: name,
+				children: name
+			}, name))]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+			className: "text-[11px] text-sand-400",
+			children: [total, " results"]
+		})]
+	}), 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: "rounded-lg bg-sand-50 overflow-hidden",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+			className: "w-full text-sm",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+				className: "border-b border-sand-200",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-left px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Date"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-left px-3 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-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Query"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "In"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Out"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "C.Read"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "C.Write"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Hit"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "w-8 px-2 py-2.5" })
+				]
+			}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
+				className: "divide-y divide-sand-200/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: () => navigate({
+						to: "/requests/show",
+						search: { id: row.id }
+					}),
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-[10px] text-sand-400 tabular-nums whitespace-nowrap",
+								children: formatDateTime(row.created_at)
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-xs text-sand-500",
+								children: row.token_name
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-sand-800 truncate max-w-48",
+								title: row.query,
+								children: trimQuery(row.query)
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5 text-right tabular-nums text-sand-700",
+							children: formatNum(row.input_tokens)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5 text-right tabular-nums text-sand-700",
+							children: formatNum(row.output_tokens)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.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-2.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-2.5 text-right tabular-nums text-sand-700",
+							children: calcCacheHitRate(row)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-2 py-2.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 mt-3",
+		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: () => setPage(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: () => setPage(page + 1),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronRight, { className: "size-4" })
+			})
+		]
+	})] })] });
+}
+//#endregion
+//#region src/routes/logs.tsx?tsr-split=component
+function LogsPage() {
+	const { page } = Route.useSearch();
+	const navigate = Route.useNavigate();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "space-y-5 max-w-300 mx-auto -translate-x-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+			className: "text-xl font-medium text-sand-900 tracking-tight",
+			children: "Request Logs"
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestLogTable, {
+			page,
+			onPageChange: (p) => navigate({ search: { page: p } })
+		})]
+	});
+}
+//#endregion
+export { LogsPage as component };