@jeffreycao/copilot-api 1.14.13 → 1.14.15

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.
package/pages/index.html CHANGED
@@ -692,6 +692,27 @@
692
692
  return Number.isFinite(value) ? Number(value).toLocaleString() : "0";
693
693
  }
694
694
 
695
+ function getMetricDisplayText(value) {
696
+ return typeof value === "number" ? formatNumber(value) : value;
697
+ }
698
+
699
+ function resolveMetricValueFontSize(displayTexts) {
700
+ const cards = Array.isArray(displayTexts)
701
+ ? displayTexts
702
+ : [displayTexts];
703
+ const longest = cards.reduce((max, cardText) => {
704
+ const lines = Array.isArray(cardText) ? cardText : [cardText];
705
+ const cardMax = lines.reduce((m, line) => {
706
+ return Math.max(m, String(line ?? "").length);
707
+ }, 0);
708
+ return Math.max(max, cardMax);
709
+ }, 0);
710
+ if (longest <= 7) return "";
711
+ if (longest <= 11) return "clamp(15px, 1.3vw, 18px)";
712
+ if (longest <= 15) return "clamp(13px, 1.1vw, 16px)";
713
+ return "clamp(11px, 1vw, 14px)";
714
+ }
715
+
695
716
  function formatCurrencyAmount(currency, amount) {
696
717
  const symbols = {
697
718
  CNY: "¥",
@@ -1029,41 +1050,63 @@
1029
1050
  <div class="metric-grid metric-grid-tight ${
1030
1051
  state.isTokenUsageLoading ? "opacity-60" : ""
1031
1052
  }">
1032
- ${renderTokenUsageMetric(
1033
- "Total",
1034
- totals.total_tokens,
1035
- "var(--color-fg-lightest)"
1036
- )}
1037
- ${renderTokenUsageMetric(
1038
- "Input",
1039
- totals.input_tokens,
1040
- "var(--color-blue-accent)"
1041
- )}
1042
- ${renderTokenUsageMetric(
1043
- "Output",
1044
- totals.output_tokens,
1045
- "var(--color-green-accent)"
1046
- )}
1047
- ${renderTokenUsageMetric(
1048
- "Cache Read",
1049
- totals.cache_read_input_tokens,
1050
- "var(--color-aqua-accent)"
1051
- )}
1052
- ${renderTokenUsageMetric(
1053
- "Cache Write",
1054
- totals.cache_creation_input_tokens,
1055
- "var(--color-yellow-accent)"
1056
- )}
1057
- ${renderTokenUsageMetric(
1058
- "Requests",
1059
- totals.request_count,
1060
- "var(--color-purple-accent)"
1061
- )}
1062
- ${renderTokenUsageCostMetric(
1063
- "Cost",
1064
- formatTokenUsageCosts(totals.costs),
1065
- "var(--color-yellow-accent)"
1066
- )}
1053
+ ${
1054
+ (() => {
1055
+ const metricFontSize = resolveMetricValueFontSize([
1056
+ getMetricDisplayText(totals.total_tokens),
1057
+ getMetricDisplayText(totals.input_tokens),
1058
+ getMetricDisplayText(totals.output_tokens),
1059
+ getMetricDisplayText(totals.cache_read_input_tokens),
1060
+ getMetricDisplayText(totals.cache_creation_input_tokens),
1061
+ getMetricDisplayText(totals.request_count),
1062
+ formatTokenUsageCosts(totals.costs),
1063
+ ]);
1064
+ return [
1065
+ renderTokenUsageMetric(
1066
+ "Total",
1067
+ totals.total_tokens,
1068
+ "var(--color-fg-lightest)",
1069
+ metricFontSize
1070
+ ),
1071
+ renderTokenUsageMetric(
1072
+ "Input",
1073
+ totals.input_tokens,
1074
+ "var(--color-blue-accent)",
1075
+ metricFontSize
1076
+ ),
1077
+ renderTokenUsageMetric(
1078
+ "Output",
1079
+ totals.output_tokens,
1080
+ "var(--color-green-accent)",
1081
+ metricFontSize
1082
+ ),
1083
+ renderTokenUsageMetric(
1084
+ "Cache Read",
1085
+ totals.cache_read_input_tokens,
1086
+ "var(--color-aqua-accent)",
1087
+ metricFontSize
1088
+ ),
1089
+ renderTokenUsageMetric(
1090
+ "Cache Write",
1091
+ totals.cache_creation_input_tokens,
1092
+ "var(--color-yellow-accent)",
1093
+ metricFontSize
1094
+ ),
1095
+ renderTokenUsageMetric(
1096
+ "Requests",
1097
+ totals.request_count,
1098
+ "var(--color-purple-accent)",
1099
+ metricFontSize
1100
+ ),
1101
+ renderTokenUsageCostMetric(
1102
+ "Cost",
1103
+ formatTokenUsageCosts(totals.costs),
1104
+ "var(--color-yellow-accent)",
1105
+ metricFontSize
1106
+ ),
1107
+ ].join("");
1108
+ })()
1109
+ }
1067
1110
  </div>
1068
1111
 
1069
1112
  ${renderTokenUsageDailyTrend(
@@ -1477,31 +1520,32 @@
1477
1520
  .join("");
1478
1521
  }
1479
1522
 
1480
- function renderTokenUsageMetric(label, value, accentColor) {
1523
+ function renderTokenUsageMetric(label, value, accentColor, fontSize) {
1524
+ const displayText = getMetricDisplayText(value);
1481
1525
  return `
1482
1526
  <div class="metric-card">
1483
1527
  <div class="metric-label">
1484
1528
  <span class="metric-dot" style="background-color: ${accentColor};"></span>
1485
1529
  <span>${escapeHtml(label)}</span>
1486
1530
  </div>
1487
- <div class="metric-value" style="color: var(--color-fg-lightest);">${renderTokenUsageValueLines(
1488
- typeof value === "number" ? formatNumber(value) : value
1489
- )}</div>
1531
+ <div class="metric-value" style="color: var(--color-fg-lightest);${
1532
+ fontSize ? ` font-size: ${fontSize};` : ""
1533
+ }">${renderTokenUsageValueLines(displayText)}</div>
1490
1534
  <div class="metric-note">Current period</div>
1491
1535
  </div>
1492
1536
  `;
1493
1537
  }
1494
1538
 
1495
- function renderTokenUsageCostMetric(label, value, accentColor) {
1539
+ function renderTokenUsageCostMetric(label, value, accentColor, fontSize) {
1496
1540
  return `
1497
1541
  <div class="metric-card">
1498
1542
  <div class="metric-label">
1499
1543
  <span class="metric-dot" style="background-color: ${accentColor};"></span>
1500
1544
  <span>${escapeHtml(label)}</span>
1501
1545
  </div>
1502
- <div class="metric-value" style="color: var(--color-fg-lightest);">${renderTokenUsageValueLines(
1503
- value
1504
- )}</div>
1546
+ <div class="metric-value" style="color: var(--color-fg-lightest);${
1547
+ fontSize ? ` font-size: ${fontSize};` : ""
1548
+ }">${renderTokenUsageValueLines(value)}</div>
1505
1549
  <div class="metric-note">Estimated total</div>
1506
1550
  </div>
1507
1551
  `;
@@ -1,2 +0,0 @@
1
- import { t as auth } from "./auth-PwhsULFz.js";
2
- export { auth };