@jeffreycao/copilot-api 2.6.31 → 2.6.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@jeffreycao/copilot-api",
-  "version": "2.6.31",
+  "version": "2.6.33",
   "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

@@ -349,7 +349,11 @@
       }
 
       .metric-grid-tight {
-        grid-template-columns: repeat(7, minmax(0, 1fr));
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+      }
+
+      .metric-grid-tight .metric-label {
+        white-space: nowrap;
       }
 
       .metric-card {
@@ -468,9 +472,9 @@
         gap: 10px;
       }
 
-      @media (max-width: 1280px) {
+      @media (max-width: 899px) {
         .metric-grid-tight {
-          grid-template-columns: repeat(4, minmax(0, 1fr));
+          grid-template-columns: repeat(3, minmax(0, 1fr));
         }
       }
 
@@ -488,7 +492,7 @@
         }
       }
 
-      @media (max-width: 640px) {
+      @media (max-width: 639px) {
         .main-shell {
           padding: 12px 14px 18px;
         }
@@ -1035,6 +1039,16 @@
           return Number.isFinite(value) ? Number(value).toLocaleString() : "0";
         }
 
+        function formatCacheHitRate(usage) {
+          const inputTokens =
+            usage.input_tokens +
+            usage.cache_read_input_tokens +
+            usage.cache_creation_input_tokens;
+          return inputTokens > 0
+            ? `${((usage.cache_read_input_tokens / inputTokens) * 100).toFixed(1)}%`
+            : "—";
+        }
+
         function getMetricDisplayText(value) {
           return typeof value === "number" ? formatNumber(value) : value;
         }
@@ -1468,11 +1482,30 @@
          * @param {object} details - The details object for the quota.
          * @returns {string} HTML string for a single card.
          */
+        function getCopilotQuotaRemaining(details) {
+          if (Number.isFinite(details.remaining)) return details.remaining;
+          if (Number.isFinite(details.quota_remaining)) {
+            return details.quota_remaining;
+          }
+          return null;
+        }
+
+        function getCopilotQuotaPercentRemaining(details) {
+          if (details.unlimited) return 100;
+          const percent = Number.isFinite(details.percent_remaining)
+            ? details.percent_remaining
+            : Number.isFinite(details.entitlement) && details.entitlement > 0
+              ? ((getCopilotQuotaRemaining(details) ?? details.entitlement) /
+                  details.entitlement) * 100
+              : 100;
+          return Math.max(0, Math.min(100, percent));
+        }
+
         function renderQuotaCard(title, details) {
-          const { entitlement, remaining, percent_remaining, unlimited } =
-            details;
+          const { entitlement, unlimited } = details;
+          const remaining = getCopilotQuotaRemaining(details) ?? 0;
 
-          const percentUsed = unlimited ? 0 : 100 - percent_remaining;
+          const percentUsed = 100 - getCopilotQuotaPercentRemaining(details);
           const used = unlimited
             ? "N/A"
             : (entitlement - remaining).toLocaleString();
@@ -1658,9 +1691,13 @@
                       getMetricDisplayText(totals.output_tokens),
                       getMetricDisplayText(totals.cache_read_input_tokens),
                       getMetricDisplayText(totals.cache_creation_input_tokens),
+                      formatCacheHitRate(totals),
                       getMetricDisplayText(totals.request_count),
                       formatTokenUsageCosts(totals.costs),
                     ]);
+                    const costCurrencies = [
+                      ...new Set(totals.costs.map((cost) => cost.currency)),
+                    ];
                     return [
                       renderTokenUsageMetric(
                         "Total",
@@ -1692,18 +1729,39 @@
                         "var(--color-yellow-accent)",
                         metricFontSize
                       ),
+                      renderTokenUsageMetric(
+                        "Cache Hit Rate",
+                        formatCacheHitRate(totals),
+                        "var(--color-aqua-accent)",
+                        metricFontSize
+                      ),
                       renderTokenUsageMetric(
                         "Requests",
                         totals.request_count,
                         "var(--color-purple-accent)",
                         metricFontSize
                       ),
-                      renderTokenUsageCostMetric(
-                        "Cost",
-                        formatTokenUsageCosts(totals.costs),
-                        "var(--color-yellow-accent)",
-                        metricFontSize
-                      ),
+                      ...(costCurrencies.length > 0
+                        ? costCurrencies.map((currency) =>
+                            renderTokenUsageCostMetric(
+                              `Cost (${currency})`,
+                              formatTokenUsageCost(
+                                totals.costs.find(
+                                  (cost) => cost.currency === currency
+                                )
+                              ),
+                              "var(--color-yellow-accent)",
+                              metricFontSize
+                            )
+                          )
+                        : [
+                            renderTokenUsageCostMetric(
+                              "Cost",
+                              formatTokenUsageCosts(totals.costs),
+                              "var(--color-yellow-accent)",
+                              metricFontSize
+                            ),
+                          ]),
                     ].join("");
                   })()
                 }
@@ -2219,6 +2277,7 @@
                   <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" style="color: var(--color-fg-dark);">${formatCacheHitRate(model)}</td>
                   <td class="px-4 py-2 text-right font-semibold" style="color: var(--color-yellow-accent);">${formatNumber(
                     model.total_tokens
                   )}</td>
@@ -2234,7 +2293,7 @@
 
           return `
             <div class="overflow-auto ${state.isTokenUsageLoading ? "opacity-60" : ""}">
-              <table class="data-table min-w-[860px] text-left">
+              <table class="data-table min-w-[960px] text-left">
                 <thead>
                   <tr>
                     <th class="px-4 py-2 font-semibold">Model</th>
@@ -2243,6 +2302,7 @@
                     <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">Cache Hit Rate</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>