@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/components/ProviderDetailPanel.tsx

@@ -1,15 +1,53 @@
-import { useColors } from '../contexts/ThemeContext.tsx';
-import { UsageGauge } from './UsageGauge.tsx';
-import { Sparkline } from './Sparkline.tsx';
-import type { ProviderState } from '../contexts/PluginContext.tsx';
-import type { UsageLimit } from '@/plugins/types/provider.ts';
+import type { UsageLimit } from "@/plugins/types/provider.ts";
+import type { ProviderState } from "../contexts/PluginContext.tsx";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import { Sparkline } from "./Sparkline.tsx";
+import { UsageGauge } from "./UsageGauge.tsx";
 
 function pad(str: string, len: number): string {
-  return str.length >= len ? str.slice(0, len) : str + ' '.repeat(len - str.length);
+  return str.length >= len ? str.slice(0, len) : str + " ".repeat(len - str.length);
+}
+
+/** Single-line compact gauge: "Label         ████████····  67%" */
+function InlineGauge({
+  label,
+  usedPercent,
+  color,
+}: {
+  label: string;
+  usedPercent: number | null;
+  color?: string;
+}) {
+  const colors = useColors();
+  const providerColor = color ?? colors.primary;
+  const percent = usedPercent ?? 0;
+
+  const labelWidth = 18;
+  const barWidth = 15;
+  const filledWidth = Math.round((percent / 100) * barWidth);
+  const emptyWidth = barWidth - filledWidth;
+
+  const fillColor =
+    percent >= 90 ? colors.gaugeDanger : percent >= 70 ? colors.gaugeWarning : providerColor;
+
+  const truncLabel = label.length > labelWidth ? label.slice(0, labelWidth - 1) + "…" : label;
+  const paddedLabel = pad(truncLabel, labelWidth);
+  const filledBar = "█".repeat(filledWidth);
+  const emptyBar = "·".repeat(emptyWidth);
+  const pctStr = usedPercent !== null ? `${Math.round(percent)}%`.padStart(4) : " --";
+
+  return (
+    <text height={1}>
+      <span fg={colors.textMuted}>{paddedLabel}</span>
+      <span fg={fillColor}>{filledBar}</span>
+      <span fg={colors.gaugeBackground}>{emptyBar}</span>
+      <span fg={colors.text}>{" " + pctStr}</span>
+    </text>
+  );
 }
 
 function padStart(str: string, len: number): string {
-  return str.length >= len ? str.slice(0, len) : ' '.repeat(len - str.length) + str;
+  return str.length >= len ? str.slice(0, len) : " ".repeat(len - str.length) + str;
 }
 
 function formatTokenCount(val: number): string {
@@ -26,9 +64,9 @@ function formatCost(val: number): string {
 
 function formatTimestamp(ts: number): string {
   const d = new Date(ts);
-  const h = d.getHours().toString().padStart(2, '0');
-  const m = d.getMinutes().toString().padStart(2, '0');
-  const s = d.getSeconds().toString().padStart(2, '0');
+  const h = d.getHours().toString().padStart(2, "0");
+  const m = d.getMinutes().toString().padStart(2, "0");
+  const s = d.getSeconds().toString().padStart(2, "0");
   return `${h}:${m}:${s}`;
 }
 
@@ -61,19 +99,23 @@ export function ProviderDetailPanel({ provider }: ProviderDetailPanelProps) {
     );
   }
 
-  const allLimits: UsageLimit[] = [];
+  const rawLimits: UsageLimit[] = [];
   if (usage.limits?.items && usage.limits.items.length > 0) {
-    allLimits.push(...usage.limits.items);
+    rawLimits.push(...usage.limits.items);
   } else {
-    if (usage.limits?.primary) allLimits.push(usage.limits.primary);
-    if (usage.limits?.secondary) allLimits.push(usage.limits.secondary);
+    if (usage.limits?.primary) rawLimits.push(usage.limits.primary);
+    if (usage.limits?.secondary) rawLimits.push(usage.limits.secondary);
   }
+  const sortedLimits = [...rawLimits].sort((a, b) => (b.usedPercent ?? 0) - (a.usedPercent ?? 0));
+  const compactMode = sortedLimits.length > 3;
+  const maxVisibleLimits = 5;
+  const allLimits = sortedLimits.slice(0, maxVisibleLimits);
+  const hiddenLimitCount = sortedLimits.length - allLimits.length;
 
-  const historyValues = provider.history.map(s => s.usedPercent ?? 0);
+  const historyValues = provider.history.map((s) => s.usedPercent ?? 0);
   const peak = historyValues.length > 0 ? Math.max(...historyValues) : 0;
-  const avg = historyValues.length > 0
-    ? historyValues.reduce((a, b) => a + b, 0) / historyValues.length
-    : 0;
+  const avg =
+    historyValues.length > 0 ? historyValues.reduce((a, b) => a + b, 0) / historyValues.length : 0;
 
   const tokens = usage.tokens;
   const cost = usage.cost;
@@ -93,61 +135,82 @@ export function ProviderDetailPanel({ provider }: ProviderDetailPanelProps) {
       <box flexDirection="row" justifyContent="space-between" height={1}>
         <text fg={providerColor} height={1}>
           <strong>{provider.plugin.name}</strong>
-          {usage.planType ? ` · ${usage.planType}` : ''}
+          {usage.planType ? ` · ${usage.planType}` : ""}
         </text>
         <text fg={colors.textMuted} height={1}>
           {`Last: ${formatTimestamp(lastRefreshed)}`}
         </text>
       </box>
 
-      <box flexDirection="row" gap={2} paddingTop={1}>
-        <box flexDirection="column" flexGrow={1} gap={1}>
+      <box flexDirection="row" gap={2} paddingTop={compactMode ? 0 : 1}>
+        <box flexDirection="column" flexGrow={1} gap={compactMode ? 0 : 1}>
           {allLimits.length > 0 && (
-            <box flexDirection="column" gap={1}>
-              {allLimits.map((limit, idx) => {
-                const label = limit.label ?? 'Usage';
-                const windowStr = limit.windowMinutes ? formatWindow(limit.windowMinutes) : undefined;
-                const labelHasWindow = label.toLowerCase().includes('window') ||
-                  label.toLowerCase().includes('hour') ||
-                  label.toLowerCase().includes('day');
-                return (
-                  <box key={idx} flexDirection="column">
-                    <UsageGauge
-                      label={label}
+            <box flexDirection="column" gap={compactMode ? 0 : 1}>
+              {compactMode
+                ? allLimits.map((limit, idx) => (
+                    <InlineGauge
+                      key={idx}
+                      label={limit.label ?? "Usage"}
                       usedPercent={limit.usedPercent}
                       color={providerColor}
-                      width={40}
-                      {...(windowStr && !labelHasWindow ? { windowLabel: windowStr } : {})}
-                      {...(limit.resetsAt ? { resetsAt: limit.resetsAt } : {})}
                     />
-                  </box>
-                );
-              })}
+                  ))
+                : allLimits.map((limit, idx) => {
+                    const label = limit.label ?? "Usage";
+                    const windowStr = limit.windowMinutes
+                      ? formatWindow(limit.windowMinutes)
+                      : undefined;
+                    const labelHasWindow =
+                      label.toLowerCase().includes("window") ||
+                      label.toLowerCase().includes("hour") ||
+                      label.toLowerCase().includes("day");
+                    return (
+                      <box key={idx} flexDirection="column">
+                        <UsageGauge
+                          label={label}
+                          usedPercent={limit.usedPercent}
+                          color={providerColor}
+                          width={40}
+                          {...(windowStr && !labelHasWindow ? { windowLabel: windowStr } : {})}
+                          {...(limit.resetsAt ? { resetsAt: limit.resetsAt } : {})}
+                        />
+                      </box>
+                    );
+                  })}
+              {hiddenLimitCount > 0 && (
+                <text fg={colors.textSubtle} height={1}>
+                  +{hiddenLimitCount} more limit{hiddenLimitCount > 1 ? "s" : ""}
+                </text>
+              )}
             </box>
           )}
 
           {tokens && (
             <box flexDirection="column">
-              <text fg={colors.textMuted} height={1}>TOKEN BREAKDOWN</text>
+              <text fg={colors.textMuted} height={1}>
+                TOKEN BREAKDOWN
+              </text>
               <box flexDirection="column">
                 <text height={1}>
-                  <span fg={colors.textMuted}>{pad('Input:', 14)}</span>
+                  <span fg={colors.textMuted}>{pad("Input:", 14)}</span>
                   <span fg={colors.text}>{padStart(formatTokenCount(tokens.input), 10)}</span>
                 </text>
                 <text height={1}>
-                  <span fg={colors.textMuted}>{pad('Output:', 14)}</span>
+                  <span fg={colors.textMuted}>{pad("Output:", 14)}</span>
                   <span fg={colors.text}>{padStart(formatTokenCount(tokens.output), 10)}</span>
                 </text>
                 {tokens.cacheRead !== undefined && tokens.cacheRead > 0 && (
                   <text height={1}>
-                    <span fg={colors.textMuted}>{pad('Cache Read:', 14)}</span>
+                    <span fg={colors.textMuted}>{pad("Cache Read:", 14)}</span>
                     <span fg={colors.text}>{padStart(formatTokenCount(tokens.cacheRead), 10)}</span>
                   </text>
                 )}
                 {tokens.cacheWrite !== undefined && tokens.cacheWrite > 0 && (
                   <text height={1}>
-                    <span fg={colors.textMuted}>{pad('Cache Write:', 14)}</span>
-                    <span fg={colors.text}>{padStart(formatTokenCount(tokens.cacheWrite), 10)}</span>
+                    <span fg={colors.textMuted}>{pad("Cache Write:", 14)}</span>
+                    <span fg={colors.text}>
+                      {padStart(formatTokenCount(tokens.cacheWrite), 10)}
+                    </span>
                   </text>
                 )}
               </box>
@@ -158,22 +221,24 @@ export function ProviderDetailPanel({ provider }: ProviderDetailPanelProps) {
         <box flexDirection="column" flexGrow={1} gap={1}>
           {cost && (
             <box flexDirection="column">
-              <text fg={colors.textMuted} height={1}>COST BREAKDOWN</text>
+              <text fg={colors.textMuted} height={1}>
+                COST BREAKDOWN
+              </text>
               {cost.actual && (
                 <box flexDirection="column">
                   <text height={1}>
-                    <span fg={colors.textMuted}>{pad('Total:', 14)}</span>
+                    <span fg={colors.textMuted}>{pad("Total:", 14)}</span>
                     <span fg={colors.success}>{padStart(formatCost(cost.actual.total), 10)}</span>
                   </text>
                   {cost.actual.input !== undefined && (
                     <text height={1}>
-                      <span fg={colors.textMuted}>{pad('Input:', 14)}</span>
+                      <span fg={colors.textMuted}>{pad("Input:", 14)}</span>
                       <span fg={colors.text}>{padStart(formatCost(cost.actual.input), 10)}</span>
                     </text>
                   )}
                   {cost.actual.output !== undefined && (
                     <text height={1}>
-                      <span fg={colors.textMuted}>{pad('Output:', 14)}</span>
+                      <span fg={colors.textMuted}>{pad("Output:", 14)}</span>
                       <span fg={colors.text}>{padStart(formatCost(cost.actual.output), 10)}</span>
                     </text>
                   )}
@@ -182,19 +247,25 @@ export function ProviderDetailPanel({ provider }: ProviderDetailPanelProps) {
               {!cost.actual && cost.estimated && (
                 <box flexDirection="column">
                   <text height={1}>
-                    <span fg={colors.textMuted}>{pad('Total:', 14)}</span>
-                    <span fg={colors.textMuted}>{padStart(`~${formatCost(cost.estimated.total)}`, 10)}</span>
+                    <span fg={colors.textMuted}>{pad("Total:", 14)}</span>
+                    <span fg={colors.textMuted}>
+                      {padStart(`~${formatCost(cost.estimated.total)}`, 10)}
+                    </span>
                   </text>
                   {cost.estimated.input !== undefined && (
                     <text height={1}>
-                      <span fg={colors.textMuted}>{pad('Input:', 14)}</span>
-                      <span fg={colors.textMuted}>{padStart(`~${formatCost(cost.estimated.input)}`, 10)}</span>
+                      <span fg={colors.textMuted}>{pad("Input:", 14)}</span>
+                      <span fg={colors.textMuted}>
+                        {padStart(`~${formatCost(cost.estimated.input)}`, 10)}
+                      </span>
                     </text>
                   )}
                   {cost.estimated.output !== undefined && (
                     <text height={1}>
-                      <span fg={colors.textMuted}>{pad('Output:', 14)}</span>
-                      <span fg={colors.textMuted}>{padStart(`~${formatCost(cost.estimated.output)}`, 10)}</span>
+                      <span fg={colors.textMuted}>{pad("Output:", 14)}</span>
+                      <span fg={colors.textMuted}>
+                        {padStart(`~${formatCost(cost.estimated.output)}`, 10)}
+                      </span>
                     </text>
                   )}
                 </box>
@@ -204,19 +275,23 @@ export function ProviderDetailPanel({ provider }: ProviderDetailPanelProps) {
 
           {credits && (
             <box flexDirection="row" gap={1} height={1}>
-              <text fg={colors.textMuted} height={1}>Credits:</text>
+              <text fg={colors.textMuted} height={1}>
+                Credits:
+              </text>
               <text fg={credits.unlimited ? colors.success : colors.text} height={1}>
-                {credits.unlimited ? 'Unlimited' : credits.balance ?? '—'}
+                {credits.unlimited ? "Unlimited" : (credits.balance ?? "—")}
               </text>
             </box>
           )}
         </box>
       </box>
 
-      {historyValues.length >= 2 && (
+      {!compactMode && historyValues.length >= 2 && (
         <box flexDirection="column" paddingTop={1}>
           <box flexDirection="row" justifyContent="space-between" height={1}>
-            <text fg={colors.textMuted} height={1}>USAGE TREND</text>
+            <text fg={colors.textMuted} height={1}>
+              USAGE TREND
+            </text>
             <text fg={colors.textSubtle} height={1}>
               {`peak:${Math.round(peak)}%  avg:${Math.round(avg)}%`}
             </text>