@jeffreycao/copilot-api 2.7.12 → 2.7.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@jeffreycao/copilot-api",
-  "version": "2.7.12",
+  "version": "2.7.14",
   "description": "GitHub Copilot, OpenAI Codex, OpenCode Go, and third-party AI provider gateway with OpenAI and Anthropic API compatibility.",
   "keywords": [
     "github-copilot",

package/pages/index.html

@@ -672,6 +672,7 @@
         };
 
         // --- State Management ---
+        const SESSION_PAGE_SIZE = 10;
         const state = {
           activeTab: "usage",
           models: null,
@@ -687,6 +688,10 @@
           data: null,
           tokenUsageDailySummary: null,
           tokenUsageSummary: null,
+          tokenUsageSessionsPage: null,
+          isSessionsLoading: false,
+          sessionsRequestId: 0,
+          tokenUsageSessionsError: null,
           tokenUsageEventsPage: null,
           tokenUsageDailyError: null,
           tokenUsageSummaryError: null,
@@ -939,15 +944,24 @@
           return url.toString();
         }
 
-        function buildTokenUsageEventsUrl(usageEndpoint, period, page) {
+        function buildTokenUsageEventsUrl(
+          usageEndpoint,
+          period,
+          page,
+          kind = "events"
+        ) {
           const url = new URL(
-            deriveEndpointUrl(usageEndpoint, "token-usage/events")
+            deriveEndpointUrl(usageEndpoint, `token-usage/${kind}`)
           );
           url.searchParams.set("period", period);
           url.searchParams.set("page", String(page));
           url.searchParams.set(
             "page_size",
-            String(DEFAULT_TOKEN_USAGE_EVENTS_PAGE_SIZE)
+            String(
+              kind === "sessions"
+                ? SESSION_PAGE_SIZE
+                : DEFAULT_TOKEN_USAGE_EVENTS_PAGE_SIZE
+            )
           );
           return url.toString();
         }
@@ -1635,6 +1649,7 @@
           const summary = state.tokenUsageSummary;
           const dailySummary = state.tokenUsageDailySummary;
           const eventsPage = state.tokenUsageEventsPage;
+          const sessionsPage = state.tokenUsageSessionsPage;
           const totals = summary?.totals || EMPTY_TOKEN_USAGE_TOTALS;
           const activeRange =
             summary?.range || dailySummary?.range || eventsPage?.range || null;
@@ -1783,6 +1798,28 @@
                   ${renderTokenUsageModelBreakdown(summary)}
                 </div>
 
+                <div class="panel">
+                  <div class="panel-header">
+                    <div>
+                      <p class="panel-title">Session Breakdown</p>
+                      <p class="panel-meta">${sessionsPage ? `Page ${sessionsPage.page} / ${sessionsPage.total_pages} - ${formatNumber(sessionsPage.total)} sessions` : "No session rows loaded."}</p>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <button type="button" data-session-page="-1" class="pill-button px-3 py-1.5 text-xs font-semibold" ${!sessionsPage || state.isSessionsLoading || sessionsPage.page <= 1 ? "disabled" : ""}>Previous</button>
+                      <button type="button" data-session-page="1" class="pill-button px-3 py-1.5 text-xs font-semibold" ${!sessionsPage || state.isSessionsLoading || sessionsPage.page >= sessionsPage.total_pages ? "disabled" : ""}>Next</button>
+                    </div>
+                  </div>
+                  ${
+                    state.tokenUsageSessionsError
+                      ? `<div class="p-4">${renderError(
+                          state.tokenUsageSessionsError,
+                          "Session breakdown failed"
+                        )}<button type="button" data-session-page="0" class="pill-button mt-2 px-3 py-1.5 text-xs font-semibold">Retry</button></div>`
+                      : ""
+                  }
+                  ${renderTokenUsageModelBreakdown({ bySession: sessionsPage?.items }, "session")}
+                </div>
+
                 <div class="panel">
                   <div class="panel-header flex-col items-start sm:flex-row sm:items-center">
                     <div>
@@ -2248,20 +2285,22 @@
           `;
         }
 
-        function renderTokenUsageModelBreakdown(summary) {
-          if (!summary || summary.byModel.length === 0) {
+        function renderTokenUsageModelBreakdown(summary, by = "model") {
+          const items = by === "session" ? summary?.bySession : summary?.byModel;
+          if (!items || items.length === 0) {
             return renderEmptyState(
               "No token usage recorded for the selected period."
             );
           }
 
-          const rows = summary.byModel
+          const rows = items
             .map((model) => {
+              const name = formatCellText(by === "session" ? model.session_id : model.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 max-w-[280px] truncate${by === "session" ? " font-mono" : ""}" style="color: var(--color-fg-lightest);" title="${escapeHtml(
+                    name
+                  )}">${escapeHtml(name)}</td>
                   <td class="px-4 py-2 text-right" style="color: var(--color-fg-dark);">${formatNumber(
                     model.request_count
                   )}</td>
@@ -2296,7 +2335,7 @@
               <table class="data-table min-w-[960px] text-left">
                 <thead>
                   <tr>
-                    <th class="px-4 py-2 font-semibold">Model</th>
+                    <th class="px-4 py-2 font-semibold">${by === "session" ? "Session" : "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>
@@ -2473,6 +2512,7 @@
          * Fetches usage data and token usage data from the specified API endpoint.
          */
         async function fetchData(page = 1) {
+          invalidateSessionsRequest();
           const endpoint = endpointUrlInput.value.trim();
           if (!endpoint) {
             state.data = null;
@@ -2516,6 +2556,7 @@
 
             if (summaryResult.status === "fulfilled") {
               state.tokenUsageSummary = summaryResult.value;
+              void fetchTokenUsageSessionsPage(1);
             } else if (
               isMissingTokenUsageEndpointError(summaryResult.reason)
             ) {
@@ -2572,6 +2613,7 @@
         }
 
         async function fetchTokenUsageSummaryAndEvents(page = 1) {
+          invalidateSessionsRequest();
           const endpoint = endpointUrlInput.value.trim();
           if (!endpoint) {
             state.tokenUsageDailySummary = null;
@@ -2607,6 +2649,7 @@
 
             if (summaryResult.status === "fulfilled") {
               state.tokenUsageSummary = summaryResult.value;
+              void fetchTokenUsageSessionsPage(1);
             } else if (
               isMissingTokenUsageEndpointError(summaryResult.reason)
             ) {
@@ -2692,6 +2735,56 @@
           }
         }
 
+        async function fetchTokenUsageSessionsPage(page) {
+          const endpoint = endpointUrlInput.value.trim();
+          if (!endpoint) {
+            return;
+          }
+
+          const requestId = ++state.sessionsRequestId;
+          state.isSessionsLoading = true;
+          state.tokenUsageSessionsError = null;
+          render();
+
+          try {
+            const result = await fetchJson(
+              buildTokenUsageEventsUrl(
+                resolveUsageUrl(endpoint),
+                getSelectedPeriod(),
+                page,
+                "sessions"
+              )
+            );
+            if (requestId !== state.sessionsRequestId) {
+              return;
+            }
+            state.tokenUsageSessionsPage = result;
+          } catch (error) {
+            if (requestId !== state.sessionsRequestId) {
+              return;
+            }
+            // Older servers have no sessions endpoint; show the empty state.
+            if (isMissingTokenUsageEndpointError(error)) {
+              state.tokenUsageSessionsPage = null;
+            } else {
+              console.error("Token usage sessions fetch error:", error);
+              state.tokenUsageSessionsError = getErrorMessage(error);
+            }
+          }
+
+          state.isSessionsLoading = false;
+          render("usage");
+        }
+
+        // Clears sessions when refreshing the endpoint or period and ignores
+        // late responses from the previous context.
+        function invalidateSessionsRequest() {
+          state.sessionsRequestId += 1;
+          state.isSessionsLoading = false;
+          state.tokenUsageSessionsPage = null;
+          state.tokenUsageSessionsError = null;
+        }
+
         // --- Event Handlers & Initialization ---
 
         /**
@@ -2753,6 +2846,18 @@
             return;
           }
 
+          const sessionButton = event.target.closest("[data-session-page]");
+          if (sessionButton) {
+            if (!state.isSessionsLoading) {
+              // Offset 0 is the error retry button: reload the current page.
+              void fetchTokenUsageSessionsPage(
+                (state.tokenUsageSessionsPage?.page ?? 1)
+                  + Number(sessionButton.getAttribute("data-session-page"))
+              );
+            }
+            return;
+          }
+
           const actionButton = event.target.closest("[data-page-action]");
           if (!actionButton || !state.tokenUsageEventsPage || state.isEventsLoading) {
             return;

package/dist/auth-B_zdWSA1.js

@@ -1,2 +0,0 @@
-import { t as auth } from "./auth-K4YwtW2M.js";
-export { auth };