@cartanova/qgrid-cli 1.9.0 → 2.0.1

package/bundle/web-dist/server/assets/{routes-DQh4d03H.js → routes-B7QYbNIv.js}

@@ -1,5 +1,5 @@
-import { C as require_react_dom, D as require_react, E as require_jsx_runtime, T as useQueryClient, ot as __toESM } from "./sd.generated-CkiEsOwK.js";
-import { r as TokenService, t as QgridService } from "./services.generated-Q2ZIxMdn.js";
+import { Y as __toESM, f as require_react_dom, g as require_react, h as require_jsx_runtime, m as useQueryClient } from "./sd.generated-BeUHLWKH.js";
+import { i as TokenService, t as QgridService } from "./services.generated-C39hdSv0.js";
 import { n as formatUsd } from "./cost-DdHTzQDR.js";
 //#region ../../node_modules/.pnpm/@dnd-kit+utilities@3.2.2_react@19.2.4/node_modules/@dnd-kit/utilities/dist/utilities.esm.js
 var import_react_dom = /* @__PURE__ */ __toESM(require_react_dom());
@@ -2280,10 +2280,39 @@ var lucideGripVertical = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 });
 //#endregion
 //#region src/components/qgrid/UsageCard.tsx
-function barColor(pct) {
-	if (pct >= 95) return "bg-red-500";
-	if (pct >= 80) return "bg-amber-400";
-	return "bg-sienna-400";
+var PROVIDER_THEMES = {
+	openai: {
+		stripe: "bg-openai-400",
+		bar: "bg-openai-bar",
+		badge: "bg-openai-50 text-openai-600",
+		cost: "text-openai-600"
+	},
+	anthropic: {
+		stripe: "bg-anthropic-400",
+		bar: "bg-anthropic-400",
+		badge: "bg-anthropic-50 text-anthropic-600",
+		cost: "text-anthropic-600"
+	},
+	google: {
+		stripe: "bg-google-400",
+		bar: "bg-google-400",
+		badge: "bg-google-50 text-google-600",
+		cost: "text-google-600"
+	}
+};
+var DEFAULT_THEME = {
+	stripe: "bg-sand-400",
+	bar: "bg-sienna-400",
+	badge: "bg-sand-200 text-sand-500",
+	cost: "text-sienna-600"
+};
+function getProviderTheme(provider) {
+	return PROVIDER_THEMES[provider] ?? DEFAULT_THEME;
+}
+function barColor(pct, theme) {
+	if (pct >= 95) return "bg-danger-400";
+	if (pct >= 80) return "bg-caution-400";
+	return theme.bar;
 }
 function formatResets(iso) {
 	if (!iso) return "";
@@ -2293,7 +2322,7 @@ function formatResets(iso) {
 	const m = Math.floor(diff % 36e5 / 6e4);
 	return h > 0 ? `resets ${h}h ${m}m` : `resets ${m}m`;
 }
-function UsageRow({ label, utilization, resetsAt }) {
+function UsageRow({ label, utilization, resetsAt, theme }) {
 	const pct = utilization ?? 0;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-3",
@@ -2305,7 +2334,7 @@ function UsageRow({ label, utilization, resetsAt }) {
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 				className: "flex-1 h-2 bg-sand-200 rounded-full overflow-hidden",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: `h-full rounded-full transition-all duration-300 ${barColor(pct)}`,
+					className: `h-full rounded-full transition-all duration-300 ${barColor(pct, theme)}`,
 					style: { width: `${Math.min(pct, 100)}%` }
 				})
 			}),
@@ -2320,50 +2349,42 @@ function UsageRow({ label, utilization, resetsAt }) {
 		]
 	});
 }
-function TokenUsage({ token }) {
-	const { data, isLoading } = QgridService.useUsage(token.name);
+function TokenUsage({ token, theme }) {
+	const { data, isLoading } = QgridService.useUsage(token.id);
 	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "animate-pulse space-y-2 py-2",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-full bg-sand-200 rounded-full" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-3/4 bg-sand-200 rounded-full" })]
 	});
-	if (data?.error) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "py-1",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-			className: "text-[11px] text-amber-600",
-			children: "Session expired"
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-			className: "text-[10px] text-sand-400 mt-0.5",
-			children: "Please re-login via OAuth or update your token"
-		})]
-	});
-	if (!data?.five_hour) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+	if (data?.error) {
+		const isExpired = data.error.includes("re-login") || data.error.includes("token_revoked") || data.error.includes("401");
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "py-1",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-[11px] text-amber-600",
+				children: isExpired ? "Session expired" : "Unavailable"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-[10px] text-sand-400 mt-0.5",
+				children: isExpired ? "Please re-login via OAuth" : data.error
+			})]
+		});
+	}
+	if (!data?.fiveHour && !data?.sevenDay) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 		className: "text-[11px] text-sand-400 py-1",
 		children: "No usage data"
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "space-y-1.5 py-1",
-		children: [
-			data.five_hour && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
-				label: "5h",
-				utilization: data.five_hour.utilization,
-				resetsAt: data.five_hour.resets_at
-			}),
-			data.seven_day && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
-				label: "7d All",
-				utilization: data.seven_day.utilization,
-				resetsAt: data.seven_day.resets_at
-			}),
-			data.seven_day_sonnet && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
-				label: "7d Sonnet",
-				utilization: data.seven_day_sonnet.utilization,
-				resetsAt: data.seven_day_sonnet.resets_at
-			}),
-			data.seven_day_opus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
-				label: "7d Opus",
-				utilization: data.seven_day_opus.utilization,
-				resetsAt: data.seven_day_opus.resets_at
-			})
-		]
+		children: [data.fiveHour && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+			label: "5h",
+			utilization: data.fiveHour.utilization,
+			resetsAt: data.fiveHour.resetsAt,
+			theme
+		}), data.sevenDay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+			label: "7d",
+			utilization: data.sevenDay.utilization,
+			resetsAt: data.sevenDay.resetsAt,
+			theme
+		})]
 	});
 }
 function SortableTokenCard({ token }) {
@@ -2375,6 +2396,7 @@ function SortableTokenCard({ token }) {
 		}
 	});
 	const { data: costData } = QgridService.useTotalCost(token.name, { enabled: !!token.name });
+	const theme = getProviderTheme(token.provider);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		ref: setNodeRef,
 		style: {
@@ -2385,35 +2407,51 @@ function SortableTokenCard({ token }) {
 		},
 		...attributes,
 		...listeners,
-		className: "relative rounded-lg bg-sand-50 px-4 py-3 select-none cursor-grab active:cursor-grabbing touch-none",
-		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2 mb-2",
-				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideGripVertical, { className: "size-3.5 text-sand-300 shrink-0" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-						className: "text-sm font-medium text-sand-800 truncate",
-						children: token.name ?? "Unnamed"
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-						className: `text-[10px] px-1.5 py-0.5 rounded-full shrink-0 ${token.active ? "bg-sage-100 text-sage-600" : "bg-sand-200 text-sand-500"}`,
-						children: token.active ? "Active" : "Inactive"
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenUsage, { token }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: "absolute top-2 right-3 px-2 py-0.5 rounded-md bg-white text-[11px] tabular-nums font-medium text-sienna-600 border border-sand-200",
-				children: formatUsd(costData?.usd ?? 0)
-			})
-		]
+		className: "relative rounded-lg bg-white border border-sand-200/80 overflow-hidden select-none cursor-grab active:cursor-grabbing touch-none shadow-sm hover:shadow-md transition-shadow duration-200",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `absolute inset-y-0 left-0 w-1 ${theme.stripe}` }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "pl-4 pr-4 py-3",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 mb-2",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideGripVertical, { className: "size-3.5 text-sand-300 shrink-0" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-[13px] font-medium text-sand-800 truncate",
+							children: token.name ?? "Unnamed"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: `text-[10px] px-1.5 py-0.5 rounded-full shrink-0 uppercase ${theme.badge}`,
+							children: token.provider
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: `text-[10px] px-1.5 py-0.5 rounded-full shrink-0 ${token.active ? "bg-sage-100 text-sage-600" : "bg-sand-200 text-sand-500"}`,
+							children: token.active ? "Active" : "Inactive"
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenUsage, {
+					token,
+					theme
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: `absolute top-2.5 right-3 px-2 py-0.5 rounded-md bg-sand-50 text-[11px] tabular-nums font-medium border border-sand-200/80 ${theme.cost}`,
+					children: formatUsd(costData?.usd ?? 0)
+				})
+			]
+		})]
 	});
 }
+var PROVIDERS = [
+	"all",
+	"openai",
+	"anthropic"
+];
 function UsageCard() {
 	const { data, isLoading } = TokenService.useTokens("A", { orderBy: "ord-asc" });
 	const queryClient = useQueryClient();
 	const reorderMutation = TokenService.useReorderMutation();
 	const [localTokens, setLocalTokens] = (0, import_react.useState)([]);
+	const [providerFilter, setProviderFilter] = (0, import_react.useState)("all");
 	(0, import_react.useEffect)(() => {
 		if (data?.rows) setLocalTokens(data.rows);
 	}, [data?.rows]);
@@ -2445,45 +2483,64 @@ function UsageCard() {
 		});
 	};
 	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: "grid grid-cols-2 gap-3",
-		children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "rounded-lg bg-sand-50 px-4 py-3 animate-pulse",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-16 bg-sand-200 rounded mb-3" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-full bg-sand-200 rounded-full" })]
-		}, `skel-${i}`))
+		className: "panel p-5",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "grid grid-cols-2 gap-3",
+			children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "rounded-lg bg-sand-50 px-4 py-3 animate-pulse",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-16 bg-sand-200 rounded mb-3" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-full bg-sand-200 rounded-full" })]
+			}, `skel-${i}`))
+		})
 	});
 	if (localTokens.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: "rounded-lg bg-sand-50 px-5 py-4",
+		className: "panel px-5 py-10",
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-			className: "text-sand-400 text-sm",
+			className: "text-sand-400 text-[13px] text-center",
 			children: "No tokens registered"
 		})
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DndContext, {
-		sensors,
-		collisionDetection: closestCenter,
-		onDragEnd: handleDragEnd,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableContext, {
-			items: localTokens.map((t) => String(t.id)),
-			strategy: rectSortingStrategy,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "grid grid-cols-2 gap-3",
-				children: localTokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableTokenCard, { token }, token.id))
+	const filteredTokens = providerFilter === "all" ? localTokens : localTokens.filter((t) => t.provider === providerFilter);
+	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 justify-between px-5 py-2.5",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[13px] font-medium text-sand-700",
+				children: "Token Usage"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "segmented-control flex gap-0.5",
+				children: PROVIDERS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					type: "button",
+					"data-active": providerFilter === p,
+					className: `px-2.5 py-[3px] text-[11px] font-medium rounded-[6px] transition-all duration-150 ${providerFilter === p ? "text-sand-800" : "text-sand-500 hover:text-sand-700"}`,
+					onClick: () => setProviderFilter(p),
+					children: p === "all" ? "All" : p === "openai" ? "OpenAI" : "Anthropic"
+				}, p))
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "p-4",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableContext, {
+					items: filteredTokens.map((t) => String(t.id)),
+					strategy: rectSortingStrategy,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "grid grid-cols-2 gap-3",
+						children: filteredTokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableTokenCard, { token }, token.id))
+					})
+				})
 			})
-		})
+		})]
 	});
 }
 //#endregion
 //#region src/routes/index.tsx?tsr-split=component
 function Dashboard() {
-	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: "Dashboard"
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "pt-12",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageCard, {})
-		})]
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "max-w-6xl mx-auto",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageCard, {})
 	});
 }
 //#endregion