npm - xiaodcs-copilot-api - Versions diffs - 2.1.0-recovery.1 - Mend

xiaodcs-copilot-api 2.1.0-recovery.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/LICENSE +21 -0
package/README.md +839 -0
package/README.zh-CN.md +888 -0
package/dist/auth-BB3ETAFy.js +2 -0
package/dist/auth-KY033tLZ.js +355 -0
package/dist/config-RMZKaZqy.js +456 -0
package/dist/debug-kE2HCJrP.js +90 -0
package/dist/electron-fetch-DPhDE6JE.js +20 -0
package/dist/main.js +43 -0
package/dist/mcp-BG6fpi6q.js +35 -0
package/dist/models-Du754vZc.js +88 -0
package/dist/server-J_CROZdx.js +10893 -0
package/dist/start-DQZDepT-.js +523 -0
package/dist/tls-BmWaOfKV.js +14 -0
package/dist/token--3EQGrXj.js +1503 -0
package/dist/tool-search-Ds1vbmGG.js +114 -0
package/package.json +94 -0
package/pages/index.html +2113 -0

package/pages/index.html ADDED Viewed

@@ -0,0 +1,2113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Copilot API Usage Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://unpkg.com/lucide@0.378.0/dist/umd/lucide.min.js"></script>
+    <style>
+      :root {
+        --color-red: #dc2626;
+        --color-green: #16a34a;
+        --color-yellow: #d97706;
+        --color-blue: #2563eb;
+        --color-purple: #7c3aed;
+        --color-aqua: #0891b2;
+        --color-orange: #ea580c;
+        --color-gray: #64748b;
+        --color-red-accent: #ef4444;
+        --color-green-accent: #22c55e;
+        --color-yellow-accent: #f59e0b;
+        --color-blue-accent: #1d4ed8;
+        --color-purple-accent: #8b5cf6;
+        --color-aqua-accent: #0ea5e9;
+        --color-orange-accent: #f97316;
+        --color-gray-accent: #94a3b8;
+        --color-bg-darkest: #0f172a;
+        --color-bg: #ffffff;
+        --color-bg-light-1: #f8fafc;
+        --color-bg-light-2: #e2e8f0;
+        --color-bg-light-3: #cbd5e1;
+        --color-bg-light-4: #94a3b8;
+        --color-bg-soft: #f1f5f9;
+        --color-fg-darker: #64748b;
+        --color-fg-dark: #475569;
+        --color-fg-medium: #334155;
+        --color-fg-light: #1e293b;
+        --color-fg-lightest: #0f172a;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        font-family: "Inter", sans-serif;
+        background-color: #eef2f7;
+        color: var(--color-fg-light);
+      }
+      .app-shell {
+        min-height: 100vh;
+        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+      }
+      .main-shell {
+        min-width: 0;
+        padding: 16px 24px 24px;
+      }
+      .topbar {
+        margin: 0 auto 10px;
+        max-width: 1720px;
+      }
+      .topbar-row {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 14px;
+        margin-bottom: 10px;
+      }
+      .page-title {
+        font-size: clamp(28px, 3vw, 38px);
+        font-weight: 750;
+        line-height: 1.05;
+        color: var(--color-fg-lightest);
+      }
+      .page-subtitle {
+        margin-top: 4px;
+        color: var(--color-gray);
+        font-size: 14px;
+      }
+      .control-surface {
+        display: grid;
+        grid-template-columns:
+          minmax(320px, 1fr)
+          minmax(220px, 320px)
+          150px
+          132px;
+        gap: 12px;
+        align-items: end;
+      }
+      .field-label {
+        display: block;
+        margin-bottom: 6px;
+        color: var(--color-fg-medium);
+        font-size: 12px;
+        font-weight: 700;
+      }
+      .input-control,
+      .select-control {
+        width: 100%;
+        height: 42px;
+        border: 1px solid var(--color-bg-light-3);
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.88);
+        color: var(--color-fg-lightest);
+        font-size: 14px;
+        outline: none;
+        transition:
+          border-color 0.16s ease,
+          box-shadow 0.16s ease,
+          background-color 0.16s ease;
+      }
+      .input-control {
+        padding: 0 12px;
+      }
+      .select-control {
+        padding: 0 34px 0 12px;
+      }
+      .input-control::placeholder {
+        color: #94a3b8;
+      }
+      .primary-action {
+        height: 42px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        background: var(--color-blue);
+        color: #ffffff;
+        font-size: 14px;
+        font-weight: 700;
+        transition:
+          background-color 0.16s ease,
+          transform 0.16s ease;
+      }
+      .primary-action:hover {
+        background: var(--color-blue-accent);
+      }
+      .content-area {
+        max-width: 1720px;
+        margin: 0 auto;
+      }
+      .dashboard-section {
+        margin-bottom: 10px;
+      }
+      .section-heading {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 8px;
+        color: var(--color-fg-lightest);
+        font-size: 16px;
+        font-weight: 750;
+      }
+      .section-subtitle {
+        margin-top: -4px;
+        margin-bottom: 8px;
+        color: var(--color-gray);
+        font-size: 12px;
+      }
+      .panel {
+        border: 1px solid var(--color-bg-light-2);
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.94);
+        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
+      }
+      .panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        min-height: 44px;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--color-bg-light-2);
+      }
+      .panel-title {
+        color: var(--color-fg-lightest);
+        font-size: 14px;
+        font-weight: 750;
+      }
+      .panel-meta {
+        margin-top: 2px;
+        color: var(--color-gray);
+        font-size: 12px;
+      }
+      .metric-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 10px;
+      }
+      .metric-grid-tight {
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+      }
+      .metric-card {
+        min-height: 88px;
+        padding: 12px;
+        border: 1px solid var(--color-bg-light-2);
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.96);
+        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
+      }
+      .metric-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--color-fg-medium);
+        font-size: 13px;
+        font-weight: 650;
+      }
+      .metric-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 999px;
+      }
+      .metric-value {
+        margin-top: 10px;
+        color: var(--color-fg-lightest);
+        font-size: clamp(20px, 2vw, 28px);
+        font-weight: 800;
+        line-height: 1.1;
+      }
+      .metric-note {
+        margin-top: 4px;
+        color: var(--color-gray);
+        font-size: 12px;
+      }
+      .progress-bar-bg {
+        background-color: var(--color-bg-soft);
+        border-radius: 999px;
+        overflow: hidden;
+      }
+      .progress-bar-fg {
+        border-radius: 999px;
+        transition: width 0.5s ease-in-out;
+      }
+      .code-block::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      .code-block::-webkit-scrollbar-track {
+        background: var(--color-bg-light-1);
+      }
+      .code-block::-webkit-scrollbar-thumb {
+        background: var(--color-bg-light-3);
+        border-radius: 999px;
+      }
+      .code-block::-webkit-scrollbar-thumb:hover {
+        background: var(--color-bg-light-4);
+      }
+      .input-focus:focus {
+        border-color: var(--color-blue);
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
+      }
+      button:disabled,
+      select:disabled {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+      .data-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+      }
+      .data-table thead {
+        background: var(--color-bg-light-1);
+        color: var(--color-fg-medium);
+      }
+      .data-table th {
+        font-size: 12px;
+        font-weight: 750;
+      }
+      .data-table td {
+        font-size: 12px;
+      }
+      .data-table th,
+      .data-table td {
+        border-bottom: 1px solid var(--color-bg-light-2);
+      }
+      .pill-button {
+        border: 1px solid var(--color-bg-light-2);
+        border-radius: 7px;
+        background: var(--color-bg);
+        color: var(--color-fg-medium);
+      }
+      .quick-state-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 10px;
+      }
+      @media (max-width: 1280px) {
+        .metric-grid-tight {
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+      }
+      @media (max-width: 1100px) {
+        .control-surface {
+          grid-template-columns: minmax(0, 1fr) 170px 132px;
+        }
+        .endpoint-field {
+          grid-column: 1 / -1;
+        }
+      }
+      @media (max-width: 640px) {
+        .main-shell {
+          padding: 12px 14px 18px;
+        }
+        .topbar-row {
+          display: block;
+        }
+        .control-surface {
+          grid-template-columns: 1fr;
+        }
+        .endpoint-field {
+          grid-column: auto;
+        }
+        .metric-grid-tight {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div id="app" class="app-shell">
+      <div class="main-shell">
+        <header class="topbar">
+          <div class="topbar-row">
+            <div>
+              <h1 class="page-title">Token Usage</h1>
+              <p class="page-subtitle">Copilot quota and token billing dashboard</p>
+            </div>
+          </div>
+          <form id="endpoint-form" class="control-surface">
+            <div class="endpoint-field">
+              <label for="endpoint-url" class="field-label">Usage Endpoint URL</label>
+              <input
+                type="text"
+                id="endpoint-url"
+                class="input-control input-focus"
+                placeholder="http://localhost:4141/usage"
+              />
+            </div>
+            <div>
+              <label for="x-api-key" class="field-label">x-api-key</label>
+              <input
+                type="password"
+                id="x-api-key"
+                class="input-control input-focus"
+                placeholder="Optional when auth is enabled"
+                autocomplete="off"
+                spellcheck="false"
+              />
+            </div>
+            <div>
+              <label for="token-usage-period" class="field-label">Period</label>
+              <select
+                id="token-usage-period"
+                class="select-control input-focus"
+              >
+                <option value="day">Day</option>
+                <option value="week">Week</option>
+                <option value="month">Month</option>
+              </select>
+            </div>
+            <button id="fetch-button" type="submit" class="primary-action">
+              <i data-lucide="refresh-cw" class="h-4 w-4"></i>
+              <span>Refresh</span>
+            </button>
+          </form>
+        </header>
+        <main id="content-area" class="content-area"></main>
+      </div>
+    </div>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const endpointForm = document.getElementById("endpoint-form");
+        const endpointUrlInput = document.getElementById("endpoint-url");
+        const apiKeyInput = document.getElementById("x-api-key");
+        const tokenUsagePeriodSelect = document.getElementById(
+          "token-usage-period"
+        );
+        const contentArea = document.getElementById("content-area");
+        const fetchButton = document.getElementById("fetch-button");
+        const fetchButtonLabel = fetchButton.querySelector("span");
+        // Apply hover effect for fetch button via JS
+        fetchButton.addEventListener("mouseenter", () => {
+          fetchButton.style.backgroundColor = "var(--color-blue-accent)";
+        });
+        fetchButton.addEventListener("mouseleave", () => {
+          fetchButton.style.backgroundColor = "var(--color-blue)";
+        });
+        const DEFAULT_ENDPOINT = "http://localhost:4141/usage";
+        const DEFAULT_TOKEN_USAGE_PERIOD = "day";
+        const DEFAULT_TOKEN_USAGE_EVENTS_PAGE_SIZE = 20;
+        const ALL_METRICS_VALUE = "__all__";
+        const ALL_MODELS_VALUE = "__all__";
+        const API_KEY_STORAGE_KEY = "copilot-api.usage-viewer.x-api-key";
+        const VALID_PERIODS = new Set(["day", "week", "month"]);
+        const EMPTY_TOKEN_USAGE_TOTALS = {
+          cache_creation_input_tokens: 0,
+          cache_read_input_tokens: 0,
+          costs: [],
+          input_tokens: 0,
+          output_tokens: 0,
+          request_count: 0,
+          total_nano_aiu: null,
+          total_tokens: 0,
+        };
+        // --- State Management ---
+        const state = {
+          isLoading: false,
+          isTokenUsageLoading: false,
+          isEventsLoading: false,
+          error: null,
+          data: null,
+          tokenUsageDailySummary: null,
+          tokenUsageSummary: null,
+          tokenUsageEventsPage: null,
+          tokenUsageDailyError: null,
+          tokenUsageSummaryError: null,
+          tokenUsageEventsError: null,
+          tokenUsagePeriod: DEFAULT_TOKEN_USAGE_PERIOD,
+          tokenUsageTrendDayIndex: null,
+          tokenUsageTrendMetric: ALL_METRICS_VALUE,
+          tokenUsageTrendModel: ALL_MODELS_VALUE,
+        };
+        // --- Rendering Logic ---
+        /**
+         * Safely calls lucide.createIcons() if the library is available.
+         */
+        function createIcons() {
+          if (typeof lucide !== "undefined") {
+            lucide.createIcons();
+          }
+        }
+        function escapeHtml(value) {
+          return String(value)
+            .replaceAll("&", "&amp;")
+            .replaceAll("<", "&lt;")
+            .replaceAll(">", "&gt;")
+            .replaceAll('"', "&quot;")
+            .replaceAll("'", "&#39;");
+        }
+        function getErrorMessage(error) {
+          if (error instanceof Error) {
+            return error.message;
+          }
+          return typeof error === "string" ? error : "Unknown error.";
+        }
+        function isMissingTokenUsageEndpointError(error) {
+          return Boolean(
+            error
+              && typeof error === "object"
+              && "status" in error
+              && error.status === 404
+          );
+        }
+        function normalizePeriod(value) {
+          return VALID_PERIODS.has(value)
+            ? value
+            : DEFAULT_TOKEN_USAGE_PERIOD;
+        }
+        function getSelectedPeriod() {
+          const normalized = normalizePeriod(tokenUsagePeriodSelect.value);
+          tokenUsagePeriodSelect.value = normalized;
+          state.tokenUsagePeriod = normalized;
+          return normalized;
+        }
+        function loadStoredApiKey() {
+          try {
+            return localStorage.getItem(API_KEY_STORAGE_KEY) || "";
+          } catch (error) {
+            console.warn("Could not read stored API key:", getErrorMessage(error));
+            return "";
+          }
+        }
+        function storeApiKey(value) {
+          try {
+            const trimmed = value.trim();
+            if (trimmed) {
+              localStorage.setItem(API_KEY_STORAGE_KEY, trimmed);
+            } else {
+              localStorage.removeItem(API_KEY_STORAGE_KEY);
+            }
+          } catch (error) {
+            console.warn("Could not store API key:", getErrorMessage(error));
+          }
+        }
+        function buildRequestHeaders() {
+          const headers = {};
+          const apiKey = apiKeyInput.value.trim();
+          if (apiKey) {
+            headers["x-api-key"] = apiKey;
+          }
+          return headers;
+        }
+        function resolveUsageUrl(endpoint) {
+          return new URL(endpoint, window.location.href).toString();
+        }
+        function deriveEndpointUrl(usageEndpoint, targetPath) {
+          const url = new URL(usageEndpoint, window.location.href);
+          const normalizedTargetPath = targetPath.replace(/^\/+/, "");
+          const normalizedPath = url.pathname.replace(/\/+$/, "");
+          const nextPath = normalizedPath.endsWith("/usage")
+            ? normalizedPath.replace(/\/usage$/, `/${normalizedTargetPath}`)
+            : `${normalizedPath || ""}/${normalizedTargetPath}`;
+          url.pathname = nextPath.startsWith("/") ? nextPath : `/${nextPath}`;
+          url.search = "";
+          url.hash = "";
+          return url.toString();
+        }
+        function buildTokenUsageSummaryUrl(usageEndpoint, period) {
+          const url = new URL(deriveEndpointUrl(usageEndpoint, "token-usage"));
+          url.searchParams.set("period", period);
+          return url.toString();
+        }
+        function buildTokenUsageDailyUrl(usageEndpoint, period) {
+          const url = new URL(
+            deriveEndpointUrl(usageEndpoint, "token-usage/daily")
+          );
+          url.searchParams.set("period", period);
+          return url.toString();
+        }
+        function buildTokenUsageEventsUrl(usageEndpoint, period, page) {
+          const url = new URL(
+            deriveEndpointUrl(usageEndpoint, "token-usage/events")
+          );
+          url.searchParams.set("period", period);
+          url.searchParams.set("page", String(page));
+          url.searchParams.set(
+            "page_size",
+            String(DEFAULT_TOKEN_USAGE_EVENTS_PAGE_SIZE)
+          );
+          return url.toString();
+        }
+        async function fetchJson(url) {
+          const response = await fetch(url, {
+            headers: buildRequestHeaders(),
+          });
+          if (!response.ok) {
+            let message = response.statusText || "Request failed";
+            try {
+              const contentType = response.headers.get("content-type") || "";
+              if (contentType.includes("application/json")) {
+                const payload = await response.json();
+                const apiMessage = payload?.error?.message || payload?.message;
+                if (typeof apiMessage === "string" && apiMessage.trim()) {
+                  message = apiMessage.trim();
+                }
+              } else {
+                const text = await response.text();
+                if (text.trim()) {
+                  message = text.trim();
+                }
+              }
+            } catch (error) {
+              console.warn(
+                "Could not parse error response:",
+                getErrorMessage(error)
+              );
+            }
+            const error = new Error(
+              `Request failed with status ${response.status}: ${message}`
+            );
+            error.status = response.status;
+            throw error;
+          }
+          return response.json();
+        }
+        function syncUrlState() {
+          try {
+            const currentUrl = new URL(window.location.href);
+            const endpoint = endpointUrlInput.value.trim();
+            const period = getSelectedPeriod();
+            if (endpoint) {
+              currentUrl.searchParams.set("endpoint", endpoint);
+            } else {
+              currentUrl.searchParams.delete("endpoint");
+            }
+            currentUrl.searchParams.set("period", period);
+            window.history.pushState({}, "", currentUrl);
+          } catch (error) {
+            console.warn("Could not update URL:", getErrorMessage(error));
+          }
+        }
+        function updateControls() {
+          fetchButton.disabled = state.isLoading;
+          fetchButtonLabel.textContent = state.isLoading
+            ? "Refreshing..."
+            : "Refresh";
+          tokenUsagePeriodSelect.disabled =
+            state.isLoading || state.isTokenUsageLoading;
+        }
+        function formatNumber(value) {
+          return Number.isFinite(value) ? Number(value).toLocaleString() : "0";
+        }
+        function getMetricDisplayText(value) {
+          return typeof value === "number" ? formatNumber(value) : value;
+        }
+        function resolveMetricValueFontSize(displayTexts) {
+          const cards = Array.isArray(displayTexts)
+            ? displayTexts
+            : [displayTexts];
+          const longest = cards.reduce((max, cardText) => {
+            const lines = Array.isArray(cardText) ? cardText : [cardText];
+            const cardMax = lines.reduce((m, line) => {
+              return Math.max(m, String(line ?? "").length);
+            }, 0);
+            return Math.max(max, cardMax);
+          }, 0);
+          if (longest <= 7) return "";
+          if (longest <= 11) return "clamp(15px, 1.3vw, 18px)";
+          if (longest <= 15) return "clamp(13px, 1.1vw, 16px)";
+          return "clamp(11px, 1vw, 14px)";
+        }
+        function formatCurrencyAmount(currency, amount) {
+          const symbols = {
+            CNY: "¥",
+            USD: "$",
+          };
+          const normalizedCurrency =
+            typeof currency === "string" && currency.trim()
+              ? currency.trim().toUpperCase()
+              : "";
+          const symbol = symbols[normalizedCurrency] || "";
+          return symbol
+            ? `${symbol}${Number(amount).toFixed(6)}`
+            : `${normalizedCurrency} ${Number(amount).toFixed(6)}`;
+        }
+        function getCostAmount(cost) {
+          if (Number.isFinite(cost?.amount)) {
+            return Number(cost.amount);
+          }
+          if (Number.isFinite(cost?.total_cost_nanos)) {
+            return Number(cost.total_cost_nanos) / 1_000_000_000;
+          }
+          return null;
+        }
+        function formatTokenUsageCost(cost) {
+          const amount = getCostAmount(cost);
+          return amount === null || !cost?.currency
+            ? "—"
+            : formatCurrencyAmount(cost.currency, amount);
+        }
+        function formatTokenUsageCosts(costs) {
+          if (!Array.isArray(costs) || costs.length === 0) {
+            return ["—"];
+          }
+          return costs.map((cost) => formatTokenUsageCost(cost));
+        }
+        function formatDateTime(value) {
+          if (!Number.isFinite(value)) {
+            return "N/A";
+          }
+          return new Date(value).toLocaleString();
+        }
+        function formatCellText(value) {
+          if (typeof value !== "string") {
+            return "—";
+          }
+          const trimmed = value.trim();
+          return trimmed || "—";
+        }
+        function renderTokenUsageRangeText(period, range) {
+          const labels = {
+            day: "Day window",
+            week: "Last 7 days",
+            month: "Last 30 days",
+          };
+          if (!range) {
+            return labels[period] || labels.day;
+          }
+          return `${labels[period] || labels.day}: ${formatDateTime(
+            range.start_ms
+          )} - ${formatDateTime(range.end_ms)}`;
+        }
+        /**
+         * Renders the entire UI based on the current state.
+         */
+        function render() {
+          updateControls();
+          if (state.isLoading) {
+            contentArea.innerHTML = renderSpinner();
+            createIcons();
+            return;
+          }
+          const hasContent = Boolean(
+            state.error
+              || state.data
+              || state.isTokenUsageLoading
+              || state.isEventsLoading
+              || state.tokenUsageDailySummary
+              || state.tokenUsageSummary
+              || state.tokenUsageEventsPage
+              || state.tokenUsageDailyError
+              || state.tokenUsageSummaryError
+              || state.tokenUsageEventsError
+          );
+          if (!hasContent) {
+            contentArea.innerHTML = renderWelcomeMessage();
+          } else if (state.error && !state.data) {
+            contentArea.innerHTML = `
+              ${renderTokenUsageSection()}
+              ${renderUsageErrorSection()}
+            `;
+          } else if (state.data) {
+            contentArea.innerHTML = `
+              ${renderTokenUsageSection()}
+              ${renderUsageQuotas(state.data.quota_snapshots)}
+              ${renderDetailedData(state.data)}
+            `;
+          } else {
+            contentArea.innerHTML = renderTokenUsageSection();
+          }
+          // Replace placeholder icons with actual Lucide icons
+          createIcons();
+        }
+        /**
+         * Renders the "Usage Quotas" section with progress bars.
+         * @param {object} snapshots - The quota_snapshots object from the API response.
+         * @returns {string} HTML string for the usage quotas section.
+         */
+        function renderUsageQuotas(snapshots) {
+          if (!snapshots) return "";
+          const quotaCards = Object.entries(snapshots)
+            .map(([key, value]) => {
+              return renderQuotaCard(key, value);
+            })
+            .join("");
+          return `
+            <section id="usage-quotas" class="dashboard-section">
+              <h2 class="section-heading">
+                <i data-lucide="gauge" class="h-5 w-5" style="color: var(--color-blue);"></i>
+                <span>Copilot Quotas</span>
+              </h2>
+              <div class="metric-grid">
+                ${quotaCards}
+              </div>
+            </section>
+          `;
+        }
+        function renderUsageErrorSection() {
+          if (!state.error || state.data) {
+            return "";
+          }
+          return `
+            <section id="usage-quotas" class="dashboard-section">
+              <h2 class="section-heading">
+                <i data-lucide="gauge" class="h-5 w-5" style="color: var(--color-blue);"></i>
+                <span>Copilot Quotas</span>
+              </h2>
+              ${renderError(state.error, "Usage request failed")}
+            </section>
+          `;
+        }
+        /**
+         * Renders a single quota card.
+         * @param {string} title - The name of the quota (e.g., 'chat').
+         * @param {object} details - The details object for the quota.
+         * @returns {string} HTML string for a single card.
+         */
+        function renderQuotaCard(title, details) {
+          const { entitlement, remaining, percent_remaining, unlimited } =
+            details;
+          const percentUsed = unlimited ? 0 : 100 - percent_remaining;
+          const used = unlimited
+            ? "N/A"
+            : (entitlement - remaining).toLocaleString();
+          let progressBarColor = "var(--color-green)";
+          if (percentUsed > 75) progressBarColor = "var(--color-yellow)";
+          if (percentUsed > 90) progressBarColor = "var(--color-red)";
+          if (unlimited) progressBarColor = "var(--color-blue)";
+          return `
+            <div class="metric-card">
+              <div class="flex items-center justify-between gap-3">
+                <div class="metric-label capitalize">
+                  <span class="metric-dot" style="background-color: ${progressBarColor};"></span>
+                  <span>${escapeHtml(title.replace(/_/g, " "))}</span>
+                </div>
+                ${
+                  unlimited
+                    ? `<span class="rounded-md px-2 py-1 text-xs font-semibold" style="background-color: rgba(37, 99, 235, 0.1); color: var(--color-blue);">Unlimited</span>`
+                    : `<span class="text-xs font-semibold" style="color: var(--color-gray);">${percentUsed.toFixed(1)}% used</span>`
+                }
+              </div>
+              <div class="mt-5">
+                <div class="w-full progress-bar-bg h-2">
+                  <div class="progress-bar-fg h-2" style="width: ${unlimited ? 100 : percentUsed}%; background-color: ${progressBarColor};"></div>
+                </div>
+              </div>
+              <div class="mt-2 flex items-center justify-between gap-4 text-xs font-medium" style="color: var(--color-gray);">
+                <span>${used} / ${unlimited ? "∞" : entitlement.toLocaleString()}</span>
+                <span>${unlimited ? "∞" : remaining.toLocaleString()} remaining</span>
+              </div>
+            </div>
+          `;
+        }
+        /**
+         * Recursively builds a formatted HTML list from a JSON object.
+         * @param {object} obj - The object to format.
+         * @returns {string} HTML string for the formatted list.
+         */
+        function formatObject(obj) {
+          if (obj === null || typeof obj !== "object") {
+            return `<span style="color: var(--color-green);">${escapeHtml(JSON.stringify(obj))}</span>`;
+          }
+          return (
+            '<div class="pl-4">' +
+            Object.entries(obj)
+              .map(([key, value]) => {
+                const formattedKey = escapeHtml(key.replace(/_/g, " "));
+                let displayValue;
+                if (Array.isArray(value)) {
+                  displayValue =
+                    value.length > 0
+                      ? `<span style='color: var(--color-gray)'>[...${value.length} items]</span>`
+                      : `<span style='color: var(--color-gray)'>[]</span>`;
+                } else if (typeof value === "object" && value !== null) {
+                  displayValue = formatObject(value);
+                } else if (typeof value === "boolean") {
+                  displayValue = `<span class="font-semibold" style="color: ${value ? "var(--color-green)" : "var(--color-red)"}">${escapeHtml(String(value))}</span>`;
+                } else {
+                  displayValue = `<span style="color: var(--color-blue);">${escapeHtml(JSON.stringify(value))}</span>`;
+                }
+                return `<div class="mt-1">
+                                <span class="capitalize font-semibold" style="color: var(--color-fg-lightest);">${formattedKey}:</span>
+                                ${typeof value === "object" && value !== null && !Array.isArray(value) ? displayValue : ` ${displayValue}`}
+                           </div>`;
+              })
+              .join("") +
+            "</div>"
+          );
+        }
+        /**
+         * Renders the section with the full, formatted API response.
+         * @param {object} data - The full API response data.
+         * @returns {string} HTML string for the full data section.
+         */
+        function renderDetailedData(data) {
+          if (!data || Object.keys(data).length === 0) {
+            return "";
+          }
+          const formattedDetails = formatObject(data);
+          return `
+            <section id="detailed-data" class="dashboard-section">
+              <h2 class="section-heading">
+                <i data-lucide="file-text" class="h-5 w-5" style="color: var(--color-blue);"></i>
+                <span>Copilot Usage API Response</span>
+              </h2>
+              <div class="panel p-4 relative font-mono text-xs code-block overflow-auto" style="max-height: 420px;">
+                ${formattedDetails}
+              </div>
+            </section>
+          `;
+        }
+        function renderTokenUsageSection() {
+          const hasTokenUsageContent = Boolean(
+            state.isTokenUsageLoading
+              || state.isEventsLoading
+              || state.tokenUsageDailySummary
+              || state.tokenUsageSummary
+              || state.tokenUsageEventsPage
+              || state.tokenUsageDailyError
+              || state.tokenUsageSummaryError
+              || state.tokenUsageEventsError
+          );
+          if (!hasTokenUsageContent) {
+            return "";
+          }
+          const summary = state.tokenUsageSummary;
+          const dailySummary = state.tokenUsageDailySummary;
+          const eventsPage = state.tokenUsageEventsPage;
+          const totals = summary?.totals || EMPTY_TOKEN_USAGE_TOTALS;
+          const activeRange =
+            summary?.range || dailySummary?.range || eventsPage?.range || null;
+          const totalPages = eventsPage ? Math.max(eventsPage.total_pages, 1) : 1;
+          const eventsMeta = eventsPage
+            ? `Page ${eventsPage.page} / ${totalPages} - ${formatNumber(
+                eventsPage.total
+              )} events`
+            : "No detail page loaded yet.";
+          return `
+            <section id="token-usage" class="dashboard-section">
+              <div class="mb-2 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                <div>
+                  <h2 class="section-heading mb-1">
+                    <i data-lucide="database" class="h-5 w-5" style="color: var(--color-blue);"></i>
+                    <span>Token Usage</span>
+                  </h2>
+                  <p class="section-subtitle mb-0">${escapeHtml(
+                    renderTokenUsageRangeText(state.tokenUsagePeriod, activeRange)
+                  )}</p>
+                </div>
+                <div class="flex flex-wrap items-center gap-2 text-xs font-medium" style="color: var(--color-gray);">
+                  ${
+                    state.isTokenUsageLoading
+                      ? `<span class="rounded-md px-2 py-1" style="background-color: rgba(37, 99, 235, 0.08); color: var(--color-blue);">Refreshing summary...</span>`
+                      : ""
+                  }
+                  ${
+                    state.isEventsLoading
+                      ? `<span class="rounded-md px-2 py-1" style="background-color: rgba(37, 99, 235, 0.08); color: var(--color-blue);">Refreshing details...</span>`
+                      : ""
+                  }
+                </div>
+              </div>
+              ${
+                state.tokenUsageSummaryError
+                  ? renderError(
+                      state.tokenUsageSummaryError,
+                      "Token usage summary failed"
+                    )
+                  : ""
+              }
+              <div class="metric-grid metric-grid-tight ${
+                state.isTokenUsageLoading ? "opacity-60" : ""
+              }">
+                ${
+                  (() => {
+                    const metricFontSize = resolveMetricValueFontSize([
+                      getMetricDisplayText(totals.total_tokens),
+                      getMetricDisplayText(totals.input_tokens),
+                      getMetricDisplayText(totals.output_tokens),
+                      getMetricDisplayText(totals.cache_read_input_tokens),
+                      getMetricDisplayText(totals.cache_creation_input_tokens),
+                      getMetricDisplayText(totals.request_count),
+                      formatTokenUsageCosts(totals.costs),
+                    ]);
+                    return [
+                      renderTokenUsageMetric(
+                        "Total",
+                        totals.total_tokens,
+                        "var(--color-fg-lightest)",
+                        metricFontSize
+                      ),
+                      renderTokenUsageMetric(
+                        "Input",
+                        totals.input_tokens,
+                        "var(--color-blue-accent)",
+                        metricFontSize
+                      ),
+                      renderTokenUsageMetric(
+                        "Output",
+                        totals.output_tokens,
+                        "var(--color-green-accent)",
+                        metricFontSize
+                      ),
+                      renderTokenUsageMetric(
+                        "Cache Read",
+                        totals.cache_read_input_tokens,
+                        "var(--color-aqua-accent)",
+                        metricFontSize
+                      ),
+                      renderTokenUsageMetric(
+                        "Cache Write",
+                        totals.cache_creation_input_tokens,
+                        "var(--color-yellow-accent)",
+                        metricFontSize
+                      ),
+                      renderTokenUsageMetric(
+                        "Requests",
+                        totals.request_count,
+                        "var(--color-purple-accent)",
+                        metricFontSize
+                      ),
+                      renderTokenUsageCostMetric(
+                        "Cost",
+                        formatTokenUsageCosts(totals.costs),
+                        "var(--color-yellow-accent)",
+                        metricFontSize
+                      ),
+                    ].join("");
+                  })()
+                }
+              </div>
+              ${renderTokenUsageDailyTrend(
+                dailySummary,
+                state.tokenUsageDailyError
+              )}
+              <div class="mt-3 grid grid-cols-1 gap-3">
+                <div class="panel">
+                  <div class="panel-header">
+                    <div>
+                      <p class="panel-title">Model Breakdown</p>
+                      <p class="panel-meta">${summary ? `${formatNumber(summary.byModel.length)} models` : "No summary rows loaded."}</p>
+                    </div>
+                  </div>
+                  ${renderTokenUsageModelBreakdown(summary)}
+                </div>
+                <div class="panel">
+                  <div class="panel-header flex-col items-start sm:flex-row sm:items-center">
+                    <div>
+                      <p class="panel-title">Request Events</p>
+                      <p class="panel-meta">${escapeHtml(eventsMeta)}</p>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      ${renderPaginationButton(
+                        "previous",
+                        "Previous",
+                        !eventsPage || state.isEventsLoading || eventsPage.page <= 1
+                      )}
+                      ${renderPaginationButton(
+                        "next",
+                        "Next",
+                        !eventsPage
+                          || state.isEventsLoading
+                          || eventsPage.page >= totalPages
+                      )}
+                    </div>
+                  </div>
+                  ${
+                    state.tokenUsageEventsError
+                      ? `<div class="p-4">${renderError(
+                          state.tokenUsageEventsError,
+                          "Token usage details failed"
+                        )}</div>`
+                      : ""
+                  }
+                  ${renderTokenUsageEventsTable(eventsPage)}
+                </div>
+              </div>
+            </section>
+          `;
+        }
+        function getTokenUsageTrendMetrics() {
+          return [
+            {
+              color: "var(--color-fg-lightest)",
+              key: "total_tokens",
+              label: "Total",
+            },
+            {
+              color: "var(--color-blue-accent)",
+              key: "input_tokens",
+              label: "Input",
+            },
+            {
+              color: "var(--color-green-accent)",
+              key: "output_tokens",
+              label: "Output",
+            },
+            {
+              color: "var(--color-aqua-accent)",
+              key: "cache_read_input_tokens",
+              label: "Cache Read",
+            },
+            {
+              color: "var(--color-yellow-accent)",
+              key: "cache_creation_input_tokens",
+              label: "Cache Write",
+            },
+          ];
+        }
+        function getDailyTrendTotals(day, selectedModel) {
+          if (selectedModel === ALL_MODELS_VALUE) {
+            return day.totals || EMPTY_TOKEN_USAGE_TOTALS;
+          }
+          return (
+            day.byModel?.find((model) => model.model === selectedModel)
+            || EMPTY_TOKEN_USAGE_TOTALS
+          );
+        }
+        function formatChartDate(value) {
+          const parts = String(value).split("-");
+          return parts.length === 3 ? `${parts[1]}/${parts[2]}` : value;
+        }
+        function renderTokenUsageDailyTrend(dailySummary, error) {
+          if (state.tokenUsagePeriod === "day") {
+            return "";
+          }
+          const models = dailySummary?.byModel || [];
+          const selectedModel = models.some(
+            (model) => model.model === state.tokenUsageTrendModel
+          )
+            ? state.tokenUsageTrendModel
+            : ALL_MODELS_VALUE;
+          const options = [
+            `<option value="${ALL_MODELS_VALUE}">All models</option>`,
+            ...models.map(
+              (model) =>
+                `<option value="${escapeHtml(model.model)}" ${
+                  selectedModel === model.model ? "selected" : ""
+                }>${escapeHtml(model.model)}</option>`
+            ),
+          ].join("");
+          return `
+            <div class="mt-3 grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_304px] gap-3">
+              <div class="panel">
+                <div class="panel-header">
+                  <div>
+                    <p class="panel-title">Token Usage Over Time</p>
+                    <p class="panel-meta">${escapeHtml(
+                      renderTokenUsageRangeText(
+                        state.tokenUsagePeriod,
+                        dailySummary?.range || null
+                      )
+                    )}</p>
+                  </div>
+                </div>
+                ${
+                  error
+                    ? `<div class="p-4">${renderError(
+                        error,
+                        "Token usage daily trend failed"
+                      )}</div>`
+                    : ""
+                }
+                ${renderTokenUsageTrendChart(dailySummary, selectedModel)}
+              </div>
+              <aside class="panel">
+                <div class="panel-header">
+                  <div>
+                    <p class="panel-title">Filters</p>
+                    <p class="panel-meta">Applied to the trend chart</p>
+                  </div>
+                </div>
+                <div class="p-4 space-y-4">
+                  <div>
+                    <label class="field-label">Model</label>
+                    <select
+                      data-token-usage-trend-model
+                      class="select-control input-focus text-sm"
+                    >${options}</select>
+                  </div>
+                  <div>
+                    <div class="field-label">Metric</div>
+                    <div class="flex flex-wrap gap-2">
+                      ${renderTokenUsageTrendMetricButtons()}
+                    </div>
+                  </div>
+                </div>
+              </aside>
+            </div>
+          `;
+        }
+        function renderTokenUsageTrendMetricButtons() {
+          const metrics = getTokenUsageTrendMetrics();
+          return [
+            {
+              color: "var(--color-fg-lightest)",
+              key: ALL_METRICS_VALUE,
+              label: "All",
+            },
+            ...metrics,
+          ]
+            .map((metric) => {
+              const isActive = state.tokenUsageTrendMetric === metric.key;
+              return `
+                <button
+                  type="button"
+                  data-trend-metric="${metric.key}"
+                  class="pill-button inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold"
+                  style="background-color: ${isActive ? "rgba(37, 99, 235, 0.1)" : "var(--color-bg)"}; border-color: ${isActive ? "rgba(37, 99, 235, 0.28)" : "var(--color-bg-light-2)"}; color: ${isActive ? "var(--color-blue)" : "var(--color-fg-medium)"};"
+                >
+                  <span class="h-2 w-2 rounded-full" style="background-color: ${metric.color};"></span>
+                  ${escapeHtml(metric.label)}
+                </button>
+              `;
+            })
+            .join("");
+        }
+        function renderTokenUsageTrendChart(dailySummary, selectedModel) {
+          const days = dailySummary?.days || [];
+          const metrics = getTokenUsageTrendMetrics();
+          const visibleMetrics =
+            state.tokenUsageTrendMetric === ALL_METRICS_VALUE
+              ? metrics
+              : metrics.filter(
+                  (metric) => metric.key === state.tokenUsageTrendMetric
+                );
+          const hasUsage = days.some(
+            (day) => getDailyTrendTotals(day, selectedModel).request_count > 0
+          );
+          const latestUsageIndex = days.reduce((latest, day, index) => {
+            return getDailyTrendTotals(day, selectedModel).request_count > 0
+              ? index
+              : latest;
+          }, -1);
+          const activeIndex =
+            Number.isInteger(state.tokenUsageTrendDayIndex)
+              && state.tokenUsageTrendDayIndex >= 0
+              && state.tokenUsageTrendDayIndex < days.length
+              ? state.tokenUsageTrendDayIndex
+              : latestUsageIndex >= 0
+                ? latestUsageIndex
+                : Math.max(0, days.length - 1);
+          const activeDay = days[activeIndex];
+          const activeTotals = activeDay
+            ? getDailyTrendTotals(activeDay, selectedModel)
+            : EMPTY_TOKEN_USAGE_TOTALS;
+          if (state.isTokenUsageLoading && !dailySummary) {
+            return `<div class="p-4 min-h-[14rem] text-sm animate-pulse" style="color: var(--color-gray);">Loading...</div>`;
+          }
+          if (!dailySummary || days.length === 0 || !hasUsage) {
+            return renderEmptyState(
+              "No token usage recorded for the selected period."
+            );
+          }
+          const width = 720;
+          const height = 220;
+          const padding = { bottom: 34, left: 58, right: 16, top: 16 };
+          const plotWidth = width - padding.left - padding.right;
+          const plotHeight = height - padding.top - padding.bottom;
+          const allValues = days.flatMap((day) => {
+            const totals = getDailyTrendTotals(day, selectedModel);
+            return visibleMetrics.map((metric) => totals[metric.key] || 0);
+          });
+          const maxValue = Math.max(1, ...allValues);
+          const xForIndex = (index) =>
+            days.length <= 1
+              ? padding.left + plotWidth / 2
+              : padding.left + (plotWidth * index) / (days.length - 1);
+          const hitWidth =
+            days.length <= 1 ? plotWidth : plotWidth / (days.length - 1);
+          const yForValue = (value) =>
+            padding.top
+            + plotHeight
+            - (Math.max(0, value) / maxValue) * plotHeight;
+          const labelEvery = Math.max(1, Math.ceil(days.length / 6));
+          const yTicks = [0, 0.25, 0.5, 0.75, 1].map((ratio) =>
+            Math.round(maxValue * ratio)
+          );
+          const grid = yTicks
+            .map((tick) => {
+              const y = yForValue(tick);
+              return `
+                <line x1="${padding.left}" x2="${
+                  width - padding.right
+                }" y1="${y}" y2="${y}" stroke="var(--color-bg-light-2)" stroke-width="1" />
+                <text x="${padding.left - 8}" y="${
+                  y + 4
+                }" text-anchor="end" font-size="11" fill="var(--color-gray-accent)">${formatNumber(
+                  tick
+                )}</text>
+              `;
+            })
+            .join("");
+          const xLabels = days
+            .map((day, index) => {
+              if (index % labelEvery !== 0 && index !== days.length - 1) {
+                return "";
+              }
+              return `<text x="${xForIndex(index)}" y="${
+                height - 10
+              }" text-anchor="middle" font-size="11" fill="var(--color-gray-accent)">${escapeHtml(
+                formatChartDate(day.date)
+              )}</text>`;
+            })
+            .join("");
+          const lines = visibleMetrics
+            .map((metric) => {
+              const points = days
+                .map((day, index) => {
+                  const totals = getDailyTrendTotals(day, selectedModel);
+                  return `${xForIndex(index)},${yForValue(
+                    totals[metric.key] || 0
+                  )}`;
+                })
+                .join(" ");
+              const circles = days
+                .map((day, index) => {
+                  const totals = getDailyTrendTotals(day, selectedModel);
+                  const value = totals[metric.key] || 0;
+                  return `<circle cx="${xForIndex(index)}" cy="${yForValue(
+                    value
+                  )}" r="2.5" fill="${
+                    metric.color
+                  }" data-trend-day-index="${index}">
+                    <title>${escapeHtml(
+                      `${formatChartDate(day.date)} ${metric.label}: ${formatNumber(
+                        value
+                      )}`
+                    )}</title>
+                  </circle>`;
+                })
+                .join("");
+              return `
+                <polyline fill="none" points="${points}" stroke="${metric.color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.25">
+                  <title>${escapeHtml(metric.label)}</title>
+                </polyline>
+                ${circles}
+              `;
+            })
+            .join("");
+          const activeMarker = activeDay
+            ? `<line x1="${xForIndex(activeIndex)}" x2="${xForIndex(
+                activeIndex
+              )}" y1="${padding.top}" y2="${
+                padding.top + plotHeight
+              }" stroke="var(--color-bg-light-4)" stroke-dasharray="4 4" stroke-width="1" />`
+            : "";
+          const hitRects = days
+            .map((day, index) => {
+              const x = xForIndex(index);
+              const hitStart = Math.max(padding.left, x - hitWidth / 2);
+              const hitEnd = Math.min(
+                width - padding.right,
+                x + hitWidth / 2
+              );
+              const totals = getDailyTrendTotals(day, selectedModel);
+              const title = [
+                formatChartDate(day.date),
+                ...visibleMetrics.map(
+                  (metric) =>
+                    `${metric.label}: ${formatNumber(
+                      totals[metric.key] || 0
+                    )}`
+                ),
+              ].join("\n");
+              return `<rect x="${hitStart}" y="${padding.top}" width="${
+                hitEnd - hitStart
+              }" height="${plotHeight}" fill="transparent" style="cursor: pointer;" data-trend-day-index="${index}">
+                <title>${escapeHtml(title)}</title>
+              </rect>`;
+            })
+            .join("");
+          const legend = [
+            ...metrics.map(
+              (metric) => `
+                <span class="inline-flex items-center gap-1.5 text-xs font-medium" style="color: var(--color-gray);">
+                  <span class="h-2 w-2 rounded-full" style="background-color: ${
+                    metric.color
+                  };"></span>
+                  ${escapeHtml(metric.label)}
+                </span>
+              `
+            ),
+          ].join("");
+          const activeValues = activeDay
+            ? `
+              <div class="mt-2 flex flex-wrap gap-3 px-3 py-2 text-xs" style="background-color: var(--color-bg-soft); color: var(--color-fg-dark);">
+                <span class="font-semibold" style="color: var(--color-fg-lightest);">${escapeHtml(
+                  formatChartDate(activeDay.date)
+                )}</span>
+                ${visibleMetrics
+                  .map(
+                    (metric) =>
+                      `<span>${escapeHtml(metric.label)}: ${formatNumber(
+                        activeTotals[metric.key] || 0
+                      )}</span>`
+                  )
+                  .join("")}
+              </div>
+            `
+            : "";
+          return `
+            <div class="p-4 ${state.isTokenUsageLoading ? "opacity-60" : ""}">
+              <svg class="w-full h-56" viewBox="0 0 ${width} ${height}" role="img">
+                ${grid}
+                ${xLabels}
+                ${activeMarker}
+                ${lines}
+                ${hitRects}
+              </svg>
+              <div class="mt-2 flex flex-wrap gap-5">
+                ${legend}
+              </div>
+              ${activeValues}
+            </div>
+          `;
+        }
+        function renderTokenUsageValueLines(value) {
+          const lines = Array.isArray(value) ? value : [value];
+          return lines
+            .map((line) => `<span class="block whitespace-nowrap">${escapeHtml(line)}</span>`)
+            .join("");
+        }
+        function renderTokenUsageMetric(label, value, accentColor, fontSize) {
+          const displayText = getMetricDisplayText(value);
+          return `
+            <div class="metric-card">
+              <div class="metric-label">
+                <span class="metric-dot" style="background-color: ${accentColor};"></span>
+                <span>${escapeHtml(label)}</span>
+              </div>
+              <div class="metric-value" style="color: var(--color-fg-lightest);${
+                fontSize ? ` font-size: ${fontSize};` : ""
+              }">${renderTokenUsageValueLines(displayText)}</div>
+              <div class="metric-note">Current period</div>
+            </div>
+          `;
+        }
+        function renderTokenUsageCostMetric(label, value, accentColor, fontSize) {
+          return `
+            <div class="metric-card">
+              <div class="metric-label">
+                <span class="metric-dot" style="background-color: ${accentColor};"></span>
+                <span>${escapeHtml(label)}</span>
+              </div>
+              <div class="metric-value" style="color: var(--color-fg-lightest);${
+                fontSize ? ` font-size: ${fontSize};` : ""
+              }">${renderTokenUsageValueLines(value)}</div>
+              <div class="metric-note">Estimated total</div>
+            </div>
+          `;
+        }
+        function renderTokenUsageModelBreakdown(summary) {
+          if (!summary || summary.byModel.length === 0) {
+            return renderEmptyState(
+              "No token usage recorded for the selected period."
+            );
+          }
+          const rows = summary.byModel
+            .map((model) => {
+              return `
+                <tr class="border-b last:border-b-0" style="border-color: var(--color-bg-light-1);">
+                  <td class="px-4 py-2 max-w-[280px] truncate" style="color: var(--color-fg-lightest);" title="${escapeHtml(
+                    model.model
+                  )}">${escapeHtml(model.model)}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    model.request_count
+                  )}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    model.input_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    model.output_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    model.cache_read_input_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    model.cache_creation_input_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right font-semibold" style="color: var(--color-yellow-accent);">${formatNumber(
+                    model.total_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right font-semibold" style="color: var(--color-yellow-accent);">
+                    <span class="inline-flex flex-col items-end leading-5">${renderTokenUsageValueLines(
+                      formatTokenUsageCosts(model.costs)
+                    )}</span>
+                  </td>
+                </tr>
+              `;
+            })
+            .join("");
+          return `
+            <div class="overflow-auto ${state.isTokenUsageLoading ? "opacity-60" : ""}">
+              <table class="data-table min-w-[860px] text-left">
+                <thead>
+                  <tr>
+                    <th class="px-4 py-2 font-semibold">Model</th>
+                    <th class="px-4 py-2 text-right font-semibold">Requests</th>
+                    <th class="px-4 py-2 text-right font-semibold">Input</th>
+                    <th class="px-4 py-2 text-right font-semibold">Output</th>
+                    <th class="px-4 py-2 text-right font-semibold">Cache Read</th>
+                    <th class="px-4 py-2 text-right font-semibold">Cache Write</th>
+                    <th class="px-4 py-2 text-right font-semibold">Total Tokens</th>
+                    <th class="px-4 py-2 text-right font-semibold">Total Cost</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${rows}
+                </tbody>
+              </table>
+            </div>
+          `;
+        }
+        function renderTokenUsageEventsTable(eventsPage) {
+          if (!eventsPage || eventsPage.items.length === 0) {
+            return renderEmptyState(
+              "No token usage detail rows for the selected period."
+            );
+          }
+          const rows = eventsPage.items
+            .map((event) => {
+              const userId = formatCellText(event.user_id);
+              const sessionId = formatCellText(event.session_id);
+              const traceId = formatCellText(event.trace_id);
+              return `
+                <tr class="border-b last:border-b-0" style="border-color: var(--color-bg-light-1);">
+                  <td class="px-4 py-2 max-w-[170px] truncate whitespace-nowrap" style="color: var(--color-fg-dark);" title="${escapeHtml(
+                    event.created_at_utc
+                  )}">${escapeHtml(formatDateTime(event.created_at_ms))}</td>
+                  <td class="px-4 py-2 max-w-[100px] truncate" style="color: var(--color-fg-lightest);" title="${escapeHtml(
+                    userId
+                  )}">${escapeHtml(userId)}</td>
+                  <td class="px-4 py-2 max-w-[140px] truncate" style="color: var(--color-fg-lightest);" title="${escapeHtml(
+                    event.model
+                  )}">${escapeHtml(event.model)}</td>
+                  <td class="px-4 py-2 max-w-[180px] truncate font-mono" style="color: var(--color-fg-dark);" title="${escapeHtml(
+                    sessionId
+                  )}">${escapeHtml(sessionId)}</td>
+                  <td class="px-4 py-2 max-w-[200px] truncate font-mono" style="color: var(--color-fg-dark);" title="${escapeHtml(
+                    traceId
+                  )}">${escapeHtml(traceId)}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    event.input_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    event.output_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    event.cache_read_input_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
+                    event.cache_creation_input_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right font-semibold" style="color: var(--color-yellow-accent);">${formatNumber(
+                    event.total_tokens
+                  )}</td>
+                  <td class="px-4 py-2 text-right font-semibold" style="color: var(--color-yellow-accent);">
+                    <span class="inline-flex flex-col items-end leading-5">${renderTokenUsageValueLines(
+                      formatTokenUsageCost(event.cost)
+                    )}</span>
+                  </td>
+                </tr>
+              `;
+            })
+            .join("");
+          return `
+            <div class="overflow-auto ${state.isEventsLoading ? "opacity-60" : ""}">
+              <table class="data-table min-w-[1000px] text-left">
+                <thead>
+                  <tr>
+                    <th class="px-4 py-2 font-semibold">Time</th>
+                    <th class="px-4 py-2 font-semibold">User</th>
+                    <th class="px-4 py-2 font-semibold">Model</th>
+                    <th class="px-4 py-2 font-semibold">Session</th>
+                    <th class="px-4 py-2 font-semibold">Trace</th>
+                    <th class="px-4 py-2 text-right font-semibold">Input</th>
+                    <th class="px-4 py-2 text-right font-semibold">Output</th>
+                    <th class="px-4 py-2 text-right font-semibold">Cache Read</th>
+                    <th class="px-4 py-2 text-right font-semibold">Cache Write</th>
+                    <th class="px-4 py-2 text-right font-semibold">Total Tokens</th>
+                    <th class="px-4 py-2 text-right font-semibold">Total Cost</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${rows}
+                </tbody>
+              </table>
+            </div>
+          `;
+        }
+        function renderPaginationButton(action, label, disabled) {
+          return `
+            <button
+              type="button"
+              data-page-action="${action}"
+              class="pill-button px-3 py-1.5 text-xs font-semibold"
+              ${disabled ? "disabled" : ""}
+            >
+              ${label}
+            </button>
+          `;
+        }
+        function renderEmptyState(message) {
+          return `
+            <div class="px-4 py-8 text-sm" style="color: var(--color-gray);">
+              ${escapeHtml(message)}
+            </div>
+          `;
+        }
+        /**
+         * Renders a loading spinner.
+         * @returns {string} HTML string for the spinner.
+         */
+        function renderSpinner() {
+          return `
+            <div class="flex justify-center items-center py-20">
+                <div class="animate-spin h-12 w-12 rounded-full border-4 border-transparent border-t-4" style="border-top-color: var(--color-blue); background-color: rgba(255, 255, 255, 0.65);"></div>
+            </div>`;
+        }
+        /**
+         * Renders an error message box.
+         * @param {string} message - The error message to display.
+         * @returns {string} HTML string for the error message.
+         */
+        function renderError(message, title = "An Error Occurred") {
+          return `
+            <div
+              class="p-3 border rounded-lg"
+              style="background-color: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.22); color: var(--color-red);"
+              role="alert"
+            >
+              <div class="flex items-start">
+                <i data-lucide="alert-triangle" class="h-5 w-5 mr-3 mt-0.5"></i>
+                <div>
+                  <p class="font-bold text-sm">${escapeHtml(title)}</p>
+                  <p class="text-xs">${escapeHtml(message)}</p>
+                </div>
+              </div>
+            </div>
+          `;
+        }
+        /**
+         * Renders a welcome message when the page first loads.
+         * @returns {string} HTML string for the welcome message.
+         */
+        function renderWelcomeMessage() {
+          return `
+            <div class="panel text-center py-16 px-4">
+                <i data-lucide="info" class="mx-auto h-10 w-10" style="color: var(--color-blue);"></i>
+                <h3 class="mt-3 text-lg font-bold" style="color: var(--color-fg-lightest);">Usage data is ready to load</h3>
+                <p class="mt-2 text-sm" style="color: var(--color-gray);">Refresh the configured endpoint to view Copilot quotas, token totals, trends, and request events.</p>
+            </div>
+          `;
+        }
+        // --- Data Fetching ---
+        /**
+         * Fetches usage data and token usage data from the specified API endpoint.
+         */
+        async function fetchData(page = 1) {
+          const endpoint = endpointUrlInput.value.trim();
+          if (!endpoint) {
+            state.data = null;
+            state.tokenUsageDailySummary = null;
+            state.tokenUsageSummary = null;
+            state.tokenUsageEventsPage = null;
+            state.error = "Endpoint URL cannot be empty.";
+            state.tokenUsageDailyError =
+              "Token usage requires a valid endpoint URL.";
+            state.tokenUsageSummaryError =
+              "Token usage requires a valid endpoint URL.";
+            state.tokenUsageEventsError = null;
+            render();
+            return;
+          }
+          const period = getSelectedPeriod();
+          state.isLoading = true;
+          state.error = null;
+          state.tokenUsageDailyError = null;
+          state.tokenUsageSummaryError = null;
+          state.tokenUsageEventsError = null;
+          render();
+          try {
+            const usageUrl = resolveUsageUrl(endpoint);
+            const [usageResult, summaryResult, dailyResult, eventsResult] =
+              await Promise.allSettled([
+                fetchJson(usageUrl),
+                fetchJson(buildTokenUsageSummaryUrl(usageUrl, period)),
+                fetchJson(buildTokenUsageDailyUrl(usageUrl, period)),
+                fetchJson(buildTokenUsageEventsUrl(usageUrl, period, page)),
+              ]);
+            if (usageResult.status === "fulfilled") {
+              state.data = usageResult.value;
+            } else {
+              state.data = null;
+              state.error = getErrorMessage(usageResult.reason);
+            }
+            if (summaryResult.status === "fulfilled") {
+              state.tokenUsageSummary = summaryResult.value;
+            } else if (
+              isMissingTokenUsageEndpointError(summaryResult.reason)
+            ) {
+              state.tokenUsageSummary = null;
+              state.tokenUsageSummaryError = null;
+            } else {
+              state.tokenUsageSummary = null;
+              state.tokenUsageSummaryError = getErrorMessage(
+                summaryResult.reason
+              );
+            }
+            if (dailyResult.status === "fulfilled") {
+              state.tokenUsageDailySummary = dailyResult.value;
+            } else if (
+              isMissingTokenUsageEndpointError(dailyResult.reason)
+            ) {
+              state.tokenUsageDailySummary = null;
+              state.tokenUsageDailyError = null;
+            } else {
+              state.tokenUsageDailySummary = null;
+              state.tokenUsageDailyError = getErrorMessage(
+                dailyResult.reason
+              );
+            }
+            if (eventsResult.status === "fulfilled") {
+              state.tokenUsageEventsPage = eventsResult.value;
+            } else if (
+              isMissingTokenUsageEndpointError(eventsResult.reason)
+            ) {
+              state.tokenUsageEventsPage = null;
+              state.tokenUsageEventsError = null;
+            } else {
+              state.tokenUsageEventsPage = null;
+              state.tokenUsageEventsError = getErrorMessage(
+                eventsResult.reason
+              );
+            }
+          } catch (error) {
+            console.error("Fetch error:", error);
+            state.data = null;
+            state.tokenUsageDailySummary = null;
+            state.tokenUsageSummary = null;
+            state.tokenUsageEventsPage = null;
+            state.error = getErrorMessage(error);
+            state.tokenUsageDailyError = getErrorMessage(error);
+            state.tokenUsageSummaryError = getErrorMessage(error);
+            state.tokenUsageEventsError = getErrorMessage(error);
+          } finally {
+            state.isLoading = false;
+            render();
+          }
+        }
+        async function fetchTokenUsageSummaryAndEvents(page = 1) {
+          const endpoint = endpointUrlInput.value.trim();
+          if (!endpoint) {
+            state.tokenUsageDailySummary = null;
+            state.tokenUsageSummary = null;
+            state.tokenUsageEventsPage = null;
+            state.tokenUsageDailyError =
+              "Token usage requires a valid endpoint URL.";
+            state.tokenUsageSummaryError =
+              "Token usage requires a valid endpoint URL.";
+            state.tokenUsageEventsError = null;
+            render();
+            return;
+          }
+          const period = getSelectedPeriod();
+          state.isTokenUsageLoading = true;
+          state.tokenUsageDailySummary = null;
+          state.tokenUsageSummary = null;
+          state.tokenUsageEventsPage = null;
+          state.tokenUsageDailyError = null;
+          state.tokenUsageSummaryError = null;
+          state.tokenUsageEventsError = null;
+          render();
+          try {
+            const usageUrl = resolveUsageUrl(endpoint);
+            const [summaryResult, dailyResult, eventsResult] =
+              await Promise.allSettled([
+                fetchJson(buildTokenUsageSummaryUrl(usageUrl, period)),
+                fetchJson(buildTokenUsageDailyUrl(usageUrl, period)),
+                fetchJson(buildTokenUsageEventsUrl(usageUrl, period, page)),
+              ]);
+            if (summaryResult.status === "fulfilled") {
+              state.tokenUsageSummary = summaryResult.value;
+            } else if (
+              isMissingTokenUsageEndpointError(summaryResult.reason)
+            ) {
+              state.tokenUsageSummary = null;
+              state.tokenUsageSummaryError = null;
+            } else {
+              state.tokenUsageSummary = null;
+              state.tokenUsageSummaryError = getErrorMessage(
+                summaryResult.reason
+              );
+            }
+            if (dailyResult.status === "fulfilled") {
+              state.tokenUsageDailySummary = dailyResult.value;
+            } else if (
+              isMissingTokenUsageEndpointError(dailyResult.reason)
+            ) {
+              state.tokenUsageDailySummary = null;
+              state.tokenUsageDailyError = null;
+            } else {
+              state.tokenUsageDailySummary = null;
+              state.tokenUsageDailyError = getErrorMessage(
+                dailyResult.reason
+              );
+            }
+            if (eventsResult.status === "fulfilled") {
+              state.tokenUsageEventsPage = eventsResult.value;
+            } else if (
+              isMissingTokenUsageEndpointError(eventsResult.reason)
+            ) {
+              state.tokenUsageEventsPage = null;
+              state.tokenUsageEventsError = null;
+            } else {
+              state.tokenUsageEventsPage = null;
+              state.tokenUsageEventsError = getErrorMessage(
+                eventsResult.reason
+              );
+            }
+          } catch (error) {
+            console.error("Token usage fetch error:", error);
+            state.tokenUsageDailySummary = null;
+            state.tokenUsageSummary = null;
+            state.tokenUsageEventsPage = null;
+            state.tokenUsageDailyError = getErrorMessage(error);
+            state.tokenUsageSummaryError = getErrorMessage(error);
+            state.tokenUsageEventsError = getErrorMessage(error);
+          } finally {
+            state.isTokenUsageLoading = false;
+            render();
+          }
+        }
+        async function fetchTokenUsageEventsPage(page) {
+          const endpoint = endpointUrlInput.value.trim();
+          if (!endpoint) {
+            state.tokenUsageEventsError =
+              "Token usage requires a valid endpoint URL.";
+            render();
+            return;
+          }
+          state.isEventsLoading = true;
+          state.tokenUsageEventsError = null;
+          render();
+          try {
+            const usageUrl = resolveUsageUrl(endpoint);
+            state.tokenUsageEventsPage = await fetchJson(
+              buildTokenUsageEventsUrl(usageUrl, getSelectedPeriod(), page)
+            );
+          } catch (error) {
+            if (isMissingTokenUsageEndpointError(error)) {
+              state.tokenUsageEventsPage = null;
+              state.tokenUsageEventsError = null;
+            } else {
+              console.error("Token usage events fetch error:", error);
+              state.tokenUsageEventsError = getErrorMessage(error);
+            }
+          } finally {
+            state.isEventsLoading = false;
+            render();
+          }
+        }
+        // --- Event Handlers & Initialization ---
+        /**
+         * Handles the form submission to trigger a data fetch.
+         * @param {Event} event - The form submission event.
+         */
+        function handleFormSubmit(event) {
+          event.preventDefault();
+          storeApiKey(apiKeyInput.value);
+          syncUrlState();
+          void fetchData();
+        }
+        function handlePeriodChange() {
+          syncUrlState();
+          void fetchTokenUsageSummaryAndEvents(1);
+        }
+        function handleContentAreaClick(event) {
+          if (!(event.target instanceof Element)) {
+            return;
+          }
+          const trendMetric = event.target.closest("[data-trend-metric]");
+          if (trendMetric) {
+            state.tokenUsageTrendMetric =
+              trendMetric.getAttribute("data-trend-metric")
+              || ALL_METRICS_VALUE;
+            render();
+            return;
+          }
+          const trendPoint = event.target.closest("[data-trend-day-index]");
+          if (trendPoint) {
+            const index = Number.parseInt(
+              trendPoint.getAttribute("data-trend-day-index") || "",
+              10
+            );
+            if (Number.isFinite(index) && index >= 0) {
+              state.tokenUsageTrendDayIndex = index;
+              render();
+            }
+            return;
+          }
+          const actionButton = event.target.closest("[data-page-action]");
+          if (!actionButton || !state.tokenUsageEventsPage || state.isEventsLoading) {
+            return;
+          }
+          const action = actionButton.getAttribute("data-page-action");
+          if (
+            action === "previous"
+            && state.tokenUsageEventsPage.page > 1
+          ) {
+            void fetchTokenUsageEventsPage(state.tokenUsageEventsPage.page - 1);
+          }
+          if (
+            action === "next"
+            && state.tokenUsageEventsPage.page
+              < state.tokenUsageEventsPage.total_pages
+          ) {
+            void fetchTokenUsageEventsPage(state.tokenUsageEventsPage.page + 1);
+          }
+        }
+        function handleContentAreaChange(event) {
+          if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+          }
+          if (!event.target.matches("[data-token-usage-trend-model]")) {
+            return;
+          }
+          state.tokenUsageTrendModel =
+            event.target.value || ALL_MODELS_VALUE;
+          render();
+        }
+        /**
+         * Initializes the application.
+         */
+        function init() {
+          endpointForm.addEventListener("submit", handleFormSubmit);
+          tokenUsagePeriodSelect.addEventListener("change", handlePeriodChange);
+          apiKeyInput.addEventListener("input", () => {
+            storeApiKey(apiKeyInput.value);
+          });
+          contentArea.addEventListener("click", handleContentAreaClick);
+          contentArea.addEventListener("change", handleContentAreaChange);
+          apiKeyInput.value = loadStoredApiKey();
+          const urlParams = new URLSearchParams(window.location.search);
+          const periodFromUrl = normalizePeriod(urlParams.get("period"));
+          const endpointFromUrl = urlParams.get("endpoint");
+          state.tokenUsagePeriod = periodFromUrl;
+          tokenUsagePeriodSelect.value = periodFromUrl;
+          if (endpointFromUrl) {
+            endpointUrlInput.value = endpointFromUrl;
+            void fetchData();
+          } else {
+            endpointUrlInput.value = DEFAULT_ENDPOINT;
+            render();
+          }
+        }
+        // Start the app
+        init();
+      });
+    </script>
+  </body>
+</html>