@ottocode/web-sdk 0.1.277 → 0.1.279

package/dist/components/index.js

@@ -326,6 +326,15 @@ function hasPlatformOpenUrl() {
 function hasPlatformSystemFonts() {
   return !!getPlatformWindow()?.OTTO_LIST_SYSTEM_FONTS;
 }
+function isPlatformDesktop() {
+  if (typeof window === "undefined")
+    return false;
+  try {
+    return "__TAURI__" in window || "__TAURI_INTERNALS__" in window || "__TAURI_METADATA__" in window;
+  } catch {
+    return false;
+  }
+}
 
 // src/lib/open-url.ts
 function openUrl(url) {
@@ -1941,6 +1950,30 @@ var skillsMixin = {
   }
 };
 
+// src/lib/api-client/usage.ts
+import {
+  getUsageStats as apiGetUsageStats,
+  getGlobalUsageStats as apiGetGlobalUsageStats
+} from "@ottocode/api";
+var usageMixin = {
+  async getUsageStats() {
+    const { data, error } = await apiGetUsageStats();
+    if (error)
+      throw new Error(extractErrorMessage(error));
+    if (!data)
+      throw new Error("Empty response from /v1/usage/stats");
+    return data;
+  },
+  async getGlobalUsageStats() {
+    const { data, error } = await apiGetGlobalUsageStats();
+    if (error)
+      throw new Error(extractErrorMessage(error));
+    if (!data)
+      throw new Error("Empty response from /v1/usage/stats/global");
+    return data;
+  }
+};
+
 // src/lib/api-client/index.ts
 class ApiClient {
   getSessions = sessionsMixin.getSessions;
@@ -2031,6 +2064,8 @@ class ApiClient {
   getSkillFileContent = skillsMixin.getSkillFileContent;
   getSkillsConfig = skillsMixin.getSkillsConfig;
   updateSkillsConfig = skillsMixin.updateSkillsConfig;
+  getUsageStats = usageMixin.getUsageStats;
+  getGlobalUsageStats = usageMixin.getGlobalUsageStats;
 }
 var apiClient = new ApiClient;
 
@@ -2092,7 +2127,8 @@ var DEFAULT_FONT_FAMILY = "IBM Plex Mono";
 var DEFAULT_STORED_PREFERENCES = {
   vimMode: false,
   compactThread: true,
-  fontFamily: DEFAULT_FONT_FAMILY
+  fontFamily: DEFAULT_FONT_FAMILY,
+  smartEdges: true
 };
 function cssFontFamily(fontFamily) {
   const trimmed = fontFamily.trim();
@@ -2125,7 +2161,8 @@ function resolveInitialPreferences() {
       return {
         vimMode: typeof parsed.vimMode === "boolean" ? parsed.vimMode : DEFAULT_STORED_PREFERENCES.vimMode,
         compactThread: typeof parsed.compactThread === "boolean" ? parsed.compactThread : DEFAULT_STORED_PREFERENCES.compactThread,
-        fontFamily: typeof parsed.fontFamily === "string" && parsed.fontFamily.trim() ? parsed.fontFamily.trim() : DEFAULT_STORED_PREFERENCES.fontFamily
+        fontFamily: typeof parsed.fontFamily === "string" && parsed.fontFamily.trim() ? parsed.fontFamily.trim() : DEFAULT_STORED_PREFERENCES.fontFamily,
+        smartEdges: typeof parsed.smartEdges === "boolean" ? parsed.smartEdges : DEFAULT_STORED_PREFERENCES.smartEdges
       };
     }
   } catch (error) {
@@ -2180,6 +2217,9 @@ function usePreferences() {
     if (updates.fontFamily !== undefined) {
       localUpdates.fontFamily = updates.fontFamily.trim() || DEFAULT_FONT_FAMILY;
     }
+    if (updates.smartEdges !== undefined) {
+      localUpdates.smartEdges = updates.smartEdges;
+    }
     if (Object.keys(localUpdates).length > 0) {
       updateStore(localUpdates);
     }
@@ -23748,7 +23788,8 @@ import {
   Check as Check11,
   Key,
   Type,
-  Sparkles as Sparkles6
+  Sparkles as Sparkles6,
+  BarChart3
 } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 
@@ -24580,6 +24621,7 @@ function PreferencesModal({ isOpen, onClose }) {
   const { data: config2 } = useConfig();
   const { preferences: preferences2, updatePreferences } = usePreferences();
   const updateDefaults = useUpdateDefaults();
+  const isDesktop = isPlatformDesktop();
   return /* @__PURE__ */ jsx96(Modal, {
     isOpen,
     onClose,
@@ -24609,6 +24651,11 @@ function PreferencesModal({ isOpen, onClose }) {
               checked: preferences2.fullWidthContent,
               onChange: (checked) => updatePreferences({ fullWidthContent: checked })
             }),
+            isDesktop ? /* @__PURE__ */ jsx96(ToggleRow, {
+              label: "Smart Sidebar Edges",
+              checked: preferences2.smartEdges,
+              onChange: (checked) => updatePreferences({ smartEdges: checked })
+            }) : null,
             /* @__PURE__ */ jsx96(FontPickerRow, {
               value: preferences2.fontFamily,
               onChange: (fontFamily) => updatePreferences({ fontFamily })
@@ -24693,7 +24740,9 @@ function PreferencesModal({ isOpen, onClose }) {
     })
   });
 }
-var SettingsSidebar = memo34(function SettingsSidebar2() {
+var SettingsSidebar = memo34(function SettingsSidebar2({
+  onOpenDashboard
+} = {}) {
   const isExpanded = useSettingsStore((state) => state.isExpanded);
   const collapseSidebar = useSettingsStore((state) => state.collapseSidebar);
   const [isPreferencesOpen, setIsPreferencesOpen] = useState43(false);
@@ -24850,6 +24899,35 @@ var SettingsSidebar = memo34(function SettingsSidebar2() {
               /* @__PURE__ */ jsx96(OttoRouterTopupModal, {})
             ]
           }),
+          /* @__PURE__ */ jsxs84("button", {
+            type: "button",
+            onClick: () => {
+              if (onOpenDashboard) {
+                onOpenDashboard();
+                return;
+              }
+              if (typeof window === "undefined")
+                return;
+              const basePathRaw = globalThis.OTTO_ROUTER_BASEPATH ?? "/";
+              const basePath = basePathRaw.replace(/\/+$/, "");
+              const target = `${basePath}/dashboard`.replace(/\/+/g, "/");
+              window.location.assign(target || "/dashboard");
+            },
+            title: "Open usage dashboard",
+            className: "group shrink-0 w-full h-12 px-3 flex items-center gap-2 bg-muted/20 hover:bg-muted/60 border-t border-border transition-colors text-left cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx96(BarChart3, {
+                className: "w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors"
+              }),
+              /* @__PURE__ */ jsx96("span", {
+                className: "text-sm flex-1 text-muted-foreground group-hover:text-foreground transition-colors",
+                children: "Usage Dashboard"
+              }),
+              /* @__PURE__ */ jsx96(ChevronRight13, {
+                className: "w-4 h-4 text-muted-foreground group-hover:text-foreground group-hover:translate-x-0.5 transition-all"
+              })
+            ]
+          }),
           /* @__PURE__ */ jsxs84("button", {
             type: "button",
             onClick: () => setIsPreferencesOpen(true),
@@ -31497,11 +31575,970 @@ var OnboardingModal = memo52(function OnboardingModal2({
     ]
   });
 });
+// src/components/dashboard/UsageDashboard.tsx
+import { useCallback as useCallback35, useEffect as useEffect58, useMemo as useMemo31, useState as useState51 } from "react";
+import { AlertTriangle as AlertTriangle3, ArrowLeft as ArrowLeft2, Globe2 as Globe22, RefreshCw as RefreshCw12 } from "lucide-react";
+import { jsx as jsx116, jsxs as jsxs103, Fragment as Fragment44 } from "react/jsx-runtime";
+function formatNumber(n) {
+  if (!Number.isFinite(n) || n === 0)
+    return "0";
+  if (Math.abs(n) >= 1e9)
+    return `${(n / 1e9).toFixed(1)}B`;
+  if (Math.abs(n) >= 1e6)
+    return `${(n / 1e6).toFixed(1)}M`;
+  if (Math.abs(n) >= 1000)
+    return `${(n / 1000).toFixed(1)}k`;
+  return n.toLocaleString();
+}
+function formatUsd(n) {
+  if (!Number.isFinite(n) || n === 0)
+    return "$0";
+  if (n < 0.01)
+    return `$${n.toFixed(4)}`;
+  if (n < 1)
+    return `$${n.toFixed(3)}`;
+  if (n < 100)
+    return `$${n.toFixed(2)}`;
+  return `$${n.toFixed(0)}`;
+}
+function authLabel(t) {
+  if (t === "oauth")
+    return "oauth";
+  if (t === "subscription")
+    return "sub";
+  if (t === "wallet")
+    return "wallet";
+  if (t === "api")
+    return "api";
+  return "—";
+}
+function authColor(t) {
+  if (t === "oauth")
+    return "text-emerald-400";
+  if (t === "subscription")
+    return "text-violet-400";
+  if (t === "wallet")
+    return "text-fuchsia-400";
+  if (t === "api")
+    return "text-sky-400";
+  return "text-muted-foreground";
+}
+function DailyChart({ data }) {
+  const [tab, setTab] = useState51("cost");
+  const [hover, setHover] = useState51(null);
+  const max = useMemo31(() => {
+    if (tab === "tokens") {
+      return data.reduce((m, d) => Math.max(m, d.inputTokens + d.outputTokens), 0);
+    }
+    return data.reduce((m, d) => Math.max(m, d.notionalCostUsd), 0);
+  }, [data, tab]);
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx116("div", {
+      className: "h-44 flex items-center justify-center text-xs text-muted-foreground",
+      children: "No activity yet"
+    });
+  }
+  const focus = hover != null ? data[hover] : data[data.length - 1];
+  const focusValue = tab === "tokens" ? formatNumber(focus.inputTokens + focus.outputTokens) : formatUsd(focus.notionalCostUsd);
+  const focusSub = tab === "tokens" ? `${formatNumber(focus.inputTokens)} in · ${formatNumber(focus.outputTokens)} out` : focus.costUsd > 0 ? `${formatUsd(focus.costUsd)} pay-as-you-go · ${formatUsd(focus.notionalCostUsd - focus.costUsd)} via plans` : `${formatUsd(focus.notionalCostUsd)} via plans`;
+  return /* @__PURE__ */ jsxs103("div", {
+    children: [
+      /* @__PURE__ */ jsxs103("div", {
+        className: "flex items-baseline justify-between gap-4 mb-4",
+        children: [
+          /* @__PURE__ */ jsxs103("div", {
+            className: "min-w-0",
+            children: [
+              /* @__PURE__ */ jsx116("div", {
+                className: "text-[10px] uppercase tracking-[0.12em] text-muted-foreground",
+                children: focus.date
+              }),
+              /* @__PURE__ */ jsx116("div", {
+                className: "text-xl font-semibold tabular-nums mt-0.5 truncate",
+                children: focusValue
+              }),
+              /* @__PURE__ */ jsx116("div", {
+                className: "text-[11px] text-muted-foreground tabular-nums mt-0.5 truncate",
+                children: focusSub
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs103("div", {
+            className: "shrink-0 inline-flex p-0.5 rounded-md border border-border bg-muted/30 text-[11px]",
+            children: [
+              /* @__PURE__ */ jsx116("button", {
+                type: "button",
+                onClick: () => setTab("cost"),
+                className: `px-2.5 py-1 rounded transition-colors ${tab === "cost" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+                children: "Cost"
+              }),
+              /* @__PURE__ */ jsx116("button", {
+                type: "button",
+                onClick: () => setTab("tokens"),
+                className: `px-2.5 py-1 rounded transition-colors ${tab === "tokens" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+                children: "Tokens"
+              })
+            ]
+          })
+        ]
+      }),
+      tab === "cost" ? /* @__PURE__ */ jsx116(CostChart, {
+        data,
+        max,
+        hover,
+        onHover: setHover
+      }) : /* @__PURE__ */ jsx116(TokenChart, {
+        data,
+        max,
+        hover,
+        onHover: setHover
+      }),
+      /* @__PURE__ */ jsxs103("div", {
+        className: "mt-3 flex items-center justify-between text-[10px] text-muted-foreground font-mono",
+        children: [
+          /* @__PURE__ */ jsx116("span", {
+            children: data[0]?.date
+          }),
+          tab === "cost" ? /* @__PURE__ */ jsxs103("span", {
+            className: "flex items-center gap-3",
+            children: [
+              /* @__PURE__ */ jsx116(Dot, {
+                color: "bg-sky-400",
+                label: "api"
+              }),
+              /* @__PURE__ */ jsx116(Dot, {
+                color: "bg-emerald-400/70",
+                label: "oauth"
+              }),
+              /* @__PURE__ */ jsx116(Dot, {
+                color: "bg-violet-400/70",
+                label: "sub"
+              })
+            ]
+          }) : /* @__PURE__ */ jsxs103("span", {
+            className: "flex items-center gap-3",
+            children: [
+              /* @__PURE__ */ jsx116(Dot, {
+                color: "bg-muted-foreground/60",
+                label: "input"
+              }),
+              /* @__PURE__ */ jsx116(Dot, {
+                color: "bg-foreground/80",
+                label: "output"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx116("span", {
+            children: data[data.length - 1]?.date
+          })
+        ]
+      })
+    ]
+  });
+}
+function CostChart({ data, max, hover, onHover }) {
+  return /* @__PURE__ */ jsx116("div", {
+    role: "img",
+    "aria-label": "Daily cost chart",
+    className: "flex items-end gap-[3px] h-44 select-none",
+    onMouseLeave: () => onHover(null),
+    children: data.map((d, i) => {
+      const notional = d.notionalCostUsd;
+      const heightPct = max > 0 ? Math.max(2, notional / max * 100) : 2;
+      const apiPct = notional > 0 ? d.notionalByAuth.api / notional * 100 : 0;
+      const oauthPct = notional > 0 ? d.notionalByAuth.oauth / notional * 100 : 0;
+      const subPct = notional > 0 ? d.notionalByAuth.subscription / notional * 100 : 0;
+      const active = hover === i;
+      return /* @__PURE__ */ jsx116("button", {
+        type: "button",
+        onMouseEnter: () => onHover(i),
+        onFocus: () => onHover(i),
+        className: "flex-1 h-full flex flex-col justify-end min-w-0 group cursor-default",
+        children: /* @__PURE__ */ jsxs103("div", {
+          className: `w-full rounded-sm overflow-hidden flex flex-col-reverse transition-all ${active ? "opacity-100" : "opacity-90 group-hover:opacity-100"}`,
+          style: { height: `${heightPct}%` },
+          children: [
+            apiPct > 0 && /* @__PURE__ */ jsx116("div", {
+              className: "bg-sky-400",
+              style: { height: `${apiPct}%` }
+            }),
+            oauthPct > 0 && /* @__PURE__ */ jsx116("div", {
+              className: "bg-emerald-400/70",
+              style: {
+                height: `${oauthPct}%`,
+                backgroundImage: "repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 4px)"
+              }
+            }),
+            subPct > 0 && /* @__PURE__ */ jsx116("div", {
+              className: "bg-violet-400/70",
+              style: {
+                height: `${subPct}%`,
+                backgroundImage: "repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 4px)"
+              }
+            }),
+            notional === 0 && d.messages > 0 && /* @__PURE__ */ jsx116("div", {
+              className: "bg-muted-foreground/30 h-full"
+            })
+          ]
+        })
+      }, d.date);
+    })
+  });
+}
+function TokenChart({ data, max, hover, onHover }) {
+  return /* @__PURE__ */ jsx116("div", {
+    role: "img",
+    "aria-label": "Daily tokens chart",
+    className: "flex items-end gap-[3px] h-44 select-none",
+    onMouseLeave: () => onHover(null),
+    children: data.map((d, i) => {
+      const total = d.inputTokens + d.outputTokens;
+      const heightPct = max > 0 ? Math.max(2, total / max * 100) : 2;
+      const inputPct = total > 0 ? d.inputTokens / total * 100 : 0;
+      const outputPct = total > 0 ? d.outputTokens / total * 100 : 0;
+      const active = hover === i;
+      return /* @__PURE__ */ jsx116("button", {
+        type: "button",
+        onMouseEnter: () => onHover(i),
+        onFocus: () => onHover(i),
+        className: "flex-1 h-full flex flex-col justify-end min-w-0 group cursor-default",
+        children: /* @__PURE__ */ jsxs103("div", {
+          className: `w-full rounded-sm overflow-hidden flex flex-col-reverse transition-all ${active ? "opacity-100" : "opacity-90 group-hover:opacity-100"}`,
+          style: { height: `${heightPct}%` },
+          children: [
+            inputPct > 0 && /* @__PURE__ */ jsx116("div", {
+              className: "bg-muted-foreground/60",
+              style: { height: `${inputPct}%` }
+            }),
+            outputPct > 0 && /* @__PURE__ */ jsx116("div", {
+              className: "bg-foreground/80",
+              style: { height: `${outputPct}%` }
+            })
+          ]
+        })
+      }, d.date);
+    })
+  });
+}
+function Dot({ color, label }) {
+  return /* @__PURE__ */ jsxs103("span", {
+    className: "flex items-center gap-1",
+    children: [
+      /* @__PURE__ */ jsx116("span", {
+        className: `size-1.5 rounded-full ${color}`
+      }),
+      /* @__PURE__ */ jsx116("span", {
+        children: label
+      })
+    ]
+  });
+}
+function SplitRow({
+  color,
+  label,
+  msgs,
+  value,
+  total
+}) {
+  const pct = total > 0 ? msgs / total * 100 : 0;
+  return /* @__PURE__ */ jsxs103("div", {
+    className: "flex items-center gap-3 py-2",
+    children: [
+      /* @__PURE__ */ jsx116("span", {
+        className: "text-xs text-muted-foreground w-20 shrink-0",
+        children: label
+      }),
+      /* @__PURE__ */ jsx116("div", {
+        className: "flex-1 h-1.5 rounded-full bg-muted/40 overflow-hidden",
+        children: /* @__PURE__ */ jsx116("div", {
+          className: `h-full ${color} transition-all duration-500`,
+          style: { width: `${pct}%` }
+        })
+      }),
+      /* @__PURE__ */ jsxs103("span", {
+        className: "text-[11px] text-muted-foreground tabular-nums w-20 text-right shrink-0",
+        children: [
+          formatNumber(msgs),
+          " msgs"
+        ]
+      }),
+      /* @__PURE__ */ jsx116("span", {
+        className: "text-sm font-medium tabular-nums w-20 text-right shrink-0 text-foreground",
+        children: formatUsd(value)
+      })
+    ]
+  });
+}
+function AuthSplit({ stats }) {
+  const total = stats.totals.messagesByAuth.api + stats.totals.messagesByAuth.oauth + stats.totals.messagesByAuth.subscription;
+  if (total === 0)
+    return /* @__PURE__ */ jsx116("div", {
+      className: "text-xs text-muted-foreground",
+      children: "No activity yet."
+    });
+  const notionalByAuth = { oauth: 0, api: 0, subscription: 0 };
+  for (const p of stats.providers) {
+    if (p.authType === "oauth")
+      notionalByAuth.oauth += p.notionalCostUsd;
+    else if (p.authType === "subscription" || p.authType === "wallet")
+      notionalByAuth.subscription += p.notionalCostUsd;
+    else if (p.authType === "api")
+      notionalByAuth.api += p.notionalCostUsd;
+  }
+  const rows = [
+    {
+      key: "api",
+      color: "bg-sky-400",
+      label: "API key",
+      msgs: stats.totals.messagesByAuth.api,
+      value: notionalByAuth.api
+    },
+    {
+      key: "oauth",
+      color: "bg-emerald-400",
+      label: "OAuth",
+      msgs: stats.totals.messagesByAuth.oauth,
+      value: notionalByAuth.oauth
+    },
+    {
+      key: "subscription",
+      color: "bg-violet-400",
+      label: "Subscription",
+      msgs: stats.totals.messagesByAuth.subscription,
+      value: notionalByAuth.subscription
+    }
+  ].sort((a, b) => b.value - a.value || b.msgs - a.msgs);
+  return /* @__PURE__ */ jsx116("div", {
+    className: "space-y-0.5",
+    children: rows.map((r) => /* @__PURE__ */ jsx116(SplitRow, {
+      total,
+      color: r.color,
+      label: r.label,
+      msgs: r.msgs,
+      value: r.value
+    }, r.key))
+  });
+}
+function ProviderList({ providers }) {
+  if (providers.length === 0) {
+    return /* @__PURE__ */ jsx116("div", {
+      className: "py-10 text-center text-xs text-muted-foreground",
+      children: "No usage yet"
+    });
+  }
+  return /* @__PURE__ */ jsx116("div", {
+    className: "divide-y divide-border/60",
+    children: providers.map((p) => /* @__PURE__ */ jsxs103("div", {
+      className: "flex items-center gap-3 py-2.5 px-1 hover:bg-muted/20 transition-colors",
+      children: [
+        /* @__PURE__ */ jsx116("div", {
+          className: "size-7 shrink-0 rounded-md bg-muted/30 flex items-center justify-center text-muted-foreground",
+          children: /* @__PURE__ */ jsx116(ProviderLogo, {
+            provider: p.provider,
+            size: 16
+          })
+        }),
+        /* @__PURE__ */ jsxs103("div", {
+          className: "flex-1 min-w-0",
+          children: [
+            /* @__PURE__ */ jsx116("div", {
+              className: "text-sm text-foreground truncate capitalize",
+              children: p.provider
+            }),
+            /* @__PURE__ */ jsxs103("div", {
+              className: "text-[10px] text-muted-foreground tabular-nums",
+              children: [
+                formatNumber(p.messages),
+                " msgs ·",
+                " ",
+                /* @__PURE__ */ jsx116("span", {
+                  className: authColor(p.authType),
+                  children: authLabel(p.authType)
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs103("div", {
+          className: "text-right tabular-nums shrink-0",
+          children: [
+            /* @__PURE__ */ jsx116("div", {
+              className: "text-sm font-medium text-foreground",
+              children: formatUsd(p.notionalCostUsd)
+            }),
+            /* @__PURE__ */ jsxs103("div", {
+              className: "text-[10px] text-muted-foreground",
+              children: [
+                formatNumber(p.inputTokens + p.outputTokens),
+                " tok"
+              ]
+            })
+          ]
+        })
+      ]
+    }, p.provider))
+  });
+}
+function ModelList({ models }) {
+  if (models.length === 0) {
+    return /* @__PURE__ */ jsx116("div", {
+      className: "py-10 text-center text-xs text-muted-foreground",
+      children: "No model usage yet"
+    });
+  }
+  return /* @__PURE__ */ jsx116("div", {
+    className: "divide-y divide-border/60",
+    children: models.slice(0, 12).map((m) => /* @__PURE__ */ jsxs103("div", {
+      className: "flex items-center gap-3 py-2.5 px-1 hover:bg-muted/20 transition-colors",
+      children: [
+        /* @__PURE__ */ jsx116("div", {
+          className: "size-7 shrink-0 rounded-md bg-muted/30 flex items-center justify-center text-muted-foreground",
+          children: /* @__PURE__ */ jsx116(ProviderLogo, {
+            provider: m.provider,
+            size: 14
+          })
+        }),
+        /* @__PURE__ */ jsxs103("div", {
+          className: "flex-1 min-w-0",
+          children: [
+            /* @__PURE__ */ jsx116("div", {
+              className: "text-sm text-foreground truncate font-mono",
+              children: m.model
+            }),
+            /* @__PURE__ */ jsxs103("div", {
+              className: "text-[10px] text-muted-foreground tabular-nums",
+              children: [
+                formatNumber(m.messages),
+                " msgs ·",
+                " ",
+                formatNumber(m.inputTokens + m.outputTokens),
+                " tok"
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs103("div", {
+          className: "text-right tabular-nums shrink-0",
+          children: [
+            /* @__PURE__ */ jsx116("div", {
+              className: "text-sm font-medium text-foreground",
+              children: formatUsd(m.notionalCostUsd)
+            }),
+            /* @__PURE__ */ jsx116("div", {
+              className: `text-[10px] ${authColor(m.authType)}`,
+              children: authLabel(m.authType)
+            })
+          ]
+        })
+      ]
+    }, `${m.provider}-${m.model}`))
+  });
+}
+function ProjectList({
+  projects
+}) {
+  if (projects.included.length === 0 && projects.unavailable.length === 0) {
+    return /* @__PURE__ */ jsx116("div", {
+      className: "py-10 text-center text-xs text-muted-foreground",
+      children: "No projects registered yet"
+    });
+  }
+  return /* @__PURE__ */ jsxs103("div", {
+    className: "divide-y divide-border/60",
+    children: [
+      projects.included.map((p) => /* @__PURE__ */ jsxs103("div", {
+        className: "flex items-center gap-3 py-2.5 px-1 hover:bg-muted/20 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxs103("div", {
+            className: "flex-1 min-w-0",
+            children: [
+              /* @__PURE__ */ jsx116("div", {
+                className: "text-sm text-foreground truncate",
+                children: p.name
+              }),
+              /* @__PURE__ */ jsx116("div", {
+                className: "text-[10px] text-muted-foreground tabular-nums truncate font-mono",
+                children: p.path
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs103("div", {
+            className: "text-right tabular-nums shrink-0",
+            children: [
+              /* @__PURE__ */ jsx116("div", {
+                className: "text-sm font-medium text-foreground",
+                children: formatUsd(p.notionalCostUsd)
+              }),
+              /* @__PURE__ */ jsxs103("div", {
+                className: "text-[10px] text-muted-foreground",
+                children: [
+                  formatNumber(p.messages),
+                  " msgs"
+                ]
+              })
+            ]
+          })
+        ]
+      }, p.id)),
+      projects.unavailable.map((p) => /* @__PURE__ */ jsxs103("div", {
+        className: "flex items-center gap-3 py-2.5 px-1 opacity-60",
+        title: p.reason,
+        children: [
+          /* @__PURE__ */ jsx116(AlertTriangle3, {
+            className: "size-3.5 text-amber-400 shrink-0"
+          }),
+          /* @__PURE__ */ jsxs103("div", {
+            className: "flex-1 min-w-0",
+            children: [
+              /* @__PURE__ */ jsx116("div", {
+                className: "text-sm text-foreground/80 truncate",
+                children: p.name
+              }),
+              /* @__PURE__ */ jsxs103("div", {
+                className: "text-[10px] text-muted-foreground truncate font-mono",
+                children: [
+                  p.path,
+                  " · ",
+                  p.reason
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx116("div", {
+            className: "text-[10px] text-amber-400 shrink-0",
+            children: "unavailable"
+          })
+        ]
+      }, p.id))
+    ]
+  });
+}
+function Section({
+  title,
+  subtitle,
+  right,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs103("section", {
+    className: `rounded-2xl border border-border bg-card/60 backdrop-blur-sm ${className}`,
+    children: [
+      (title || right) && /* @__PURE__ */ jsxs103("header", {
+        className: "px-5 pt-4 pb-3 flex items-center justify-between gap-3",
+        children: [
+          /* @__PURE__ */ jsxs103("div", {
+            className: "min-w-0",
+            children: [
+              title && /* @__PURE__ */ jsx116("h2", {
+                className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground",
+                children: title
+              }),
+              subtitle && /* @__PURE__ */ jsx116("p", {
+                className: "text-xs text-muted-foreground/70 mt-0.5",
+                children: subtitle
+              })
+            ]
+          }),
+          right
+        ]
+      }),
+      /* @__PURE__ */ jsx116("div", {
+        className: "px-5 pb-5",
+        children
+      })
+    ]
+  });
+}
+function UsageDashboard({ onBack }) {
+  const [stats, setStats] = useState51(null);
+  const [loading, setLoading] = useState51(false);
+  const [error, setError] = useState51(null);
+  const [scope, setScope] = useState51("project");
+  const fetchStats = useCallback35(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = scope === "global" ? await apiClient.getGlobalUsageStats() : await apiClient.getUsageStats();
+      setStats(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load usage stats");
+    } finally {
+      setLoading(false);
+    }
+  }, [scope]);
+  useEffect58(() => {
+    fetchStats();
+  }, [fetchStats]);
+  const handleBack = useCallback35(() => {
+    if (onBack)
+      return onBack();
+    if (typeof window === "undefined")
+      return;
+    if (window.history.length > 1)
+      window.history.back();
+    else
+      window.location.assign("/");
+  }, [onBack]);
+  const projectName = useMemo31(() => {
+    if (scope === "global") {
+      const included = stats?.projects?.included.length ?? 0;
+      const unavailable = stats?.projects?.unavailable.length ?? 0;
+      const total = included + unavailable;
+      if (total === 0)
+        return "all projects";
+      return unavailable > 0 ? `${included} of ${total} projects` : `${total} project${total === 1 ? "" : "s"}`;
+    }
+    if (!stats?.project)
+      return "";
+    const parts = stats.project.split("/").filter(Boolean);
+    return parts[parts.length - 1] ?? stats.project;
+  }, [scope, stats?.project, stats?.projects]);
+  const totalSpend = stats?.totals.costUsd ?? 0;
+  const totalMessages = stats?.totals.messages ?? 0;
+  const totalTokens = (stats?.totals.inputTokens ?? 0) + (stats?.totals.outputTokens ?? 0);
+  return /* @__PURE__ */ jsxs103("div", {
+    className: "fixed inset-0 flex flex-col bg-background text-foreground",
+    children: [
+      /* @__PURE__ */ jsx116("header", {
+        className: "shrink-0 h-10 border-b border-border/60 bg-background/80 backdrop-blur",
+        children: /* @__PURE__ */ jsxs103("div", {
+          className: "h-full max-w-5xl mx-auto px-6 flex items-center justify-between gap-3",
+          children: [
+            /* @__PURE__ */ jsxs103("div", {
+              className: "flex items-center gap-2 min-w-0",
+              children: [
+                /* @__PURE__ */ jsx116("button", {
+                  type: "button",
+                  onClick: handleBack,
+                  className: "inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors",
+                  title: "Back",
+                  "aria-label": "Back",
+                  children: /* @__PURE__ */ jsx116(ArrowLeft2, {
+                    className: "size-3.5"
+                  })
+                }),
+                /* @__PURE__ */ jsxs103("div", {
+                  className: "min-w-0 flex items-baseline gap-1.5 text-xs",
+                  children: [
+                    /* @__PURE__ */ jsx116("span", {
+                      className: "text-muted-foreground/70 uppercase tracking-[0.1em] text-[10px]",
+                      children: "Usage"
+                    }),
+                    /* @__PURE__ */ jsx116("span", {
+                      className: "text-muted-foreground/40",
+                      children: "/"
+                    }),
+                    /* @__PURE__ */ jsx116("span", {
+                      className: "font-medium truncate text-foreground",
+                      children: projectName || "—"
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs103("div", {
+              className: "flex items-center gap-1.5",
+              children: [
+                /* @__PURE__ */ jsxs103("div", {
+                  className: "inline-flex p-0.5 rounded-md border border-border bg-muted/30 text-[11px]",
+                  children: [
+                    /* @__PURE__ */ jsx116("button", {
+                      type: "button",
+                      onClick: () => setScope("project"),
+                      className: `px-2 py-0.5 rounded transition-colors ${scope === "project" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+                      children: "Project"
+                    }),
+                    /* @__PURE__ */ jsxs103("button", {
+                      type: "button",
+                      onClick: () => setScope("global"),
+                      className: `px-2 py-0.5 rounded transition-colors inline-flex items-center gap-1 ${scope === "global" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+                      children: [
+                        /* @__PURE__ */ jsx116(Globe22, {
+                          className: "size-3"
+                        }),
+                        "Global"
+                      ]
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx116("button", {
+                  type: "button",
+                  onClick: () => void fetchStats(),
+                  disabled: loading,
+                  className: "inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors disabled:opacity-50",
+                  title: "Refresh",
+                  "aria-label": "Refresh",
+                  children: /* @__PURE__ */ jsx116(RefreshCw12, {
+                    className: `size-3.5 ${loading ? "animate-spin" : ""}`
+                  })
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx116("main", {
+        className: "flex-1 min-h-0 overflow-y-auto overscroll-contain",
+        children: /* @__PURE__ */ jsxs103("div", {
+          className: "max-w-5xl mx-auto px-6 py-8 space-y-5",
+          children: [
+            error && /* @__PURE__ */ jsx116("div", {
+              className: "rounded-xl border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive",
+              children: error
+            }),
+            loading && !stats && /* @__PURE__ */ jsx116("div", {
+              className: "py-24 text-center text-xs text-muted-foreground",
+              children: "loading…"
+            }),
+            stats && /* @__PURE__ */ jsxs103(Fragment44, {
+              children: [
+                /* @__PURE__ */ jsxs103("div", {
+                  className: "rounded-2xl border border-border bg-gradient-to-br from-card to-card/40 px-6 py-7",
+                  children: [
+                    /* @__PURE__ */ jsxs103("div", {
+                      className: "grid grid-cols-1 md:grid-cols-[1.4fr_1fr_1fr] gap-6 md:gap-10 items-center",
+                      children: [
+                        /* @__PURE__ */ jsxs103("div", {
+                          children: [
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "text-[10px] uppercase tracking-[0.18em] text-muted-foreground",
+                              children: "Token value · API rates"
+                            }),
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "mt-2 text-5xl font-semibold tabular-nums tracking-tight",
+                              children: formatUsd(stats.totals.notionalCostUsd)
+                            }),
+                            /* @__PURE__ */ jsxs103("div", {
+                              className: "mt-2 text-[11px] text-muted-foreground tabular-nums",
+                              children: [
+                                "all ",
+                                formatNumber(stats.totals.messages),
+                                " msgs valued at catalog API pricing"
+                              ]
+                            })
+                          ]
+                        }),
+                        /* @__PURE__ */ jsxs103("div", {
+                          className: "md:border-l md:border-border/60 md:pl-6",
+                          children: [
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "text-[10px] uppercase tracking-[0.18em] text-muted-foreground",
+                              children: "API spend"
+                            }),
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "mt-2 text-3xl font-semibold tabular-nums tracking-tight",
+                              children: formatUsd(totalSpend)
+                            }),
+                            /* @__PURE__ */ jsxs103("div", {
+                              className: "mt-2 text-[11px] text-muted-foreground tabular-nums",
+                              children: [
+                                formatNumber(stats.totals.messagesByAuth.api),
+                                " ",
+                                "pay-as-you-go msgs"
+                              ]
+                            })
+                          ]
+                        }),
+                        /* @__PURE__ */ jsxs103("div", {
+                          className: "md:border-l md:border-border/60 md:pl-6",
+                          children: [
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "text-[10px] uppercase tracking-[0.18em] text-emerald-400/80",
+                              children: "OAuth · plan value"
+                            }),
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "mt-2 text-3xl font-semibold tabular-nums tracking-tight text-emerald-400",
+                              children: formatUsd(stats.providers.filter((p) => p.authType === "oauth").reduce((s, p) => s + p.notionalCostUsd, 0))
+                            }),
+                            /* @__PURE__ */ jsxs103("div", {
+                              className: "mt-2 text-[11px] text-muted-foreground tabular-nums",
+                              children: [
+                                formatNumber(stats.totals.messagesByAuth.oauth),
+                                " msgs via plan subscriptions"
+                              ]
+                            })
+                          ]
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsxs103("div", {
+                      className: "mt-6 pt-5 border-t border-border/40 grid grid-cols-3 gap-6 text-[11px] text-muted-foreground",
+                      children: [
+                        /* @__PURE__ */ jsxs103("div", {
+                          children: [
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "uppercase tracking-[0.14em] text-muted-foreground/70",
+                              children: "Messages"
+                            }),
+                            /* @__PURE__ */ jsxs103("div", {
+                              className: "mt-1 text-sm text-foreground tabular-nums",
+                              children: [
+                                formatNumber(totalMessages),
+                                " ",
+                                /* @__PURE__ */ jsxs103("span", {
+                                  className: "text-muted-foreground/70",
+                                  children: [
+                                    "· ",
+                                    formatNumber(stats.totals.sessions),
+                                    " sessions"
+                                  ]
+                                })
+                              ]
+                            })
+                          ]
+                        }),
+                        /* @__PURE__ */ jsxs103("div", {
+                          children: [
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "uppercase tracking-[0.14em] text-muted-foreground/70",
+                              children: "Tokens"
+                            }),
+                            /* @__PURE__ */ jsxs103("div", {
+                              className: "mt-1 text-sm text-foreground tabular-nums",
+                              children: [
+                                formatNumber(totalTokens),
+                                " ",
+                                /* @__PURE__ */ jsxs103("span", {
+                                  className: "text-muted-foreground/70",
+                                  children: [
+                                    "· ",
+                                    formatNumber(stats.totals.inputTokens),
+                                    " in /",
+                                    " ",
+                                    formatNumber(stats.totals.outputTokens),
+                                    " out"
+                                  ]
+                                })
+                              ]
+                            })
+                          ]
+                        }),
+                        /* @__PURE__ */ jsxs103("div", {
+                          children: [
+                            /* @__PURE__ */ jsx116("div", {
+                              className: "uppercase tracking-[0.14em] text-muted-foreground/70",
+                              children: "Mix"
+                            }),
+                            /* @__PURE__ */ jsxs103("div", {
+                              className: "mt-1 text-sm tabular-nums",
+                              children: [
+                                /* @__PURE__ */ jsxs103("span", {
+                                  className: authColor("api"),
+                                  children: [
+                                    formatNumber(stats.totals.messagesByAuth.api),
+                                    " api"
+                                  ]
+                                }),
+                                stats.totals.messagesByAuth.oauth > 0 && /* @__PURE__ */ jsxs103(Fragment44, {
+                                  children: [
+                                    /* @__PURE__ */ jsx116("span", {
+                                      className: "text-muted-foreground/40",
+                                      children: " · "
+                                    }),
+                                    /* @__PURE__ */ jsxs103("span", {
+                                      className: authColor("oauth"),
+                                      children: [
+                                        formatNumber(stats.totals.messagesByAuth.oauth),
+                                        " ",
+                                        "oauth"
+                                      ]
+                                    })
+                                  ]
+                                }),
+                                stats.totals.messagesByAuth.subscription > 0 && /* @__PURE__ */ jsxs103(Fragment44, {
+                                  children: [
+                                    /* @__PURE__ */ jsx116("span", {
+                                      className: "text-muted-foreground/40",
+                                      children: " · "
+                                    }),
+                                    /* @__PURE__ */ jsxs103("span", {
+                                      className: authColor("subscription"),
+                                      children: [
+                                        formatNumber(stats.totals.messagesByAuth.subscription),
+                                        " ",
+                                        "sub"
+                                      ]
+                                    })
+                                  ]
+                                })
+                              ]
+                            })
+                          ]
+                        })
+                      ]
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx116(Section, {
+                  title: "How you're paying",
+                  subtitle: "OAuth & Subscription are flat-rate · not per-token",
+                  children: /* @__PURE__ */ jsx116(AuthSplit, {
+                    stats
+                  })
+                }),
+                /* @__PURE__ */ jsx116(Section, {
+                  title: "Daily activity",
+                  children: /* @__PURE__ */ jsx116(DailyChart, {
+                    data: stats.daily
+                  })
+                }),
+                /* @__PURE__ */ jsxs103("div", {
+                  className: "grid grid-cols-1 md:grid-cols-2 gap-5",
+                  children: [
+                    /* @__PURE__ */ jsx116(Section, {
+                      title: "By provider",
+                      children: /* @__PURE__ */ jsx116(ProviderList, {
+                        providers: stats.providers
+                      })
+                    }),
+                    /* @__PURE__ */ jsx116(Section, {
+                      title: "Top models",
+                      subtitle: stats.models.length > 12 ? `Showing 12 of ${stats.models.length}` : undefined,
+                      children: /* @__PURE__ */ jsx116(ModelList, {
+                        models: stats.models
+                      })
+                    })
+                  ]
+                }),
+                scope === "global" && stats.projects && /* @__PURE__ */ jsx116(Section, {
+                  title: "Projects",
+                  subtitle: stats.projects.unavailable.length > 0 ? `${stats.projects.included.length} included · ${stats.projects.unavailable.length} unavailable` : `${stats.projects.included.length} included`,
+                  children: /* @__PURE__ */ jsx116(ProjectList, {
+                    projects: stats.projects
+                  })
+                }),
+                stats.notes.missingPricing.length > 0 && /* @__PURE__ */ jsxs103("div", {
+                  className: "text-[10px] text-muted-foreground/70 text-center font-mono py-2",
+                  children: [
+                    "pricing missing for ",
+                    stats.notes.missingPricing.length,
+                    " model",
+                    stats.notes.missingPricing.length === 1 ? "" : "s",
+                    " · cost shown as $0"
+                  ]
+                }),
+                /* @__PURE__ */ jsxs103("div", {
+                  className: "text-[10px] text-muted-foreground/60 text-center pt-2 pb-4",
+                  children: [
+                    "estimated from catalog pricing · generated",
+                    " ",
+                    new Date(stats.generatedAt).toLocaleString()
+                  ]
+                })
+              ]
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
 export {
   ViewerTabs,
   UserMessageGroup,
   UsageRing,
   UsageModal,
+  UsageDashboard,
   TunnelSidebarToggle,
   TunnelSidebar,
   ToolResultRenderer,
@@ -31573,4 +32610,4 @@ export {
   AssistantMessageGroup
 };
 
-//# debugId=83646DAB6C1728A064756E2164756E21
+//# debugId=4C1FF6CB288F864964756E2164756E21