@tokentop/ttop 0.2.2 → 0.3.0

package/src/tui/components/ProviderAggregateStrip.tsx

@@ -1,10 +1,10 @@
-import { useMemo } from 'react';
-import { useTerminalDimensions } from '@opentui/react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import type { ProviderState } from '../contexts/PluginContext.tsx';
+import { useTerminalDimensions } from "@opentui/react";
+import { useMemo } from "react";
+import type { ProviderState } from "../contexts/PluginContext.tsx";
+import { useColors } from "../contexts/ThemeContext.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);
 }
 
 function formatCost(val: number): string {
@@ -62,10 +62,13 @@ export function computeAggregates(providers: ProviderState[]): ProviderAggregate
 
     if (p.usage?.cost) {
       const cost = p.usage.cost;
-      const todayTotal = cost.actual?.total ?? cost.estimated?.total ?? 0;
+      const todayTotal =
+        cost.estimatedDaily?.total ?? cost.actual?.total ?? cost.estimated?.total ?? 0;
+      const mtdTotal =
+        cost.estimatedMonthly?.total ?? cost.actual?.total ?? cost.estimated?.total ?? 0;
       costToday += todayTotal;
-      costMtd += todayTotal;
-      if (cost.source === 'estimated') {
+      costMtd += mtdTotal;
+      if (cost.source === "estimated" || cost.estimatedDaily || cost.estimatedMonthly) {
         costTodayEstimated = true;
         costMtdEstimated = true;
       }
@@ -122,48 +125,72 @@ export function ProviderAggregateStrip({ providers }: ProviderAggregateStripProp
 
   const agg = useMemo(() => computeAggregates(providers), [providers]);
 
-  const costTodayStr = `${agg.costTodayEstimated ? '~' : ''}${formatCost(agg.costToday)}`;
-  const costMtdStr = `${agg.costMtdEstimated ? '~' : ''}${formatCost(agg.costMtd)}`;
-  const tokensStr = `${agg.tokens24hEstimated ? '~' : ''}${formatTokens(agg.totalTokens24h)}`;
-
-  const trendStr = agg.trendVsYesterday !== null
-    ? (agg.trendVsYesterday >= 0 ? `+${agg.trendVsYesterday.toFixed(0)}%` : `${agg.trendVsYesterday.toFixed(0)}%`)
-    : '—';
-  const trendColor = agg.trendVsYesterday !== null
-    ? (agg.trendVsYesterday > 10 ? colors.warning : agg.trendVsYesterday < -10 ? colors.success : colors.textMuted)
-    : colors.textSubtle;
+  const costTodayStr = `${agg.costTodayEstimated ? "~" : ""}${formatCost(agg.costToday)}`;
+  const costMtdStr = `${agg.costMtdEstimated ? "~" : ""}${formatCost(agg.costMtd)}`;
+  const tokensStr = `${agg.tokens24hEstimated ? "~" : ""}${formatTokens(agg.totalTokens24h)}`;
+
+  const trendStr =
+    agg.trendVsYesterday !== null
+      ? agg.trendVsYesterday >= 0
+        ? `+${agg.trendVsYesterday.toFixed(0)}%`
+        : `${agg.trendVsYesterday.toFixed(0)}%`
+      : "—";
+  const trendColor =
+    agg.trendVsYesterday !== null
+      ? agg.trendVsYesterday > 10
+        ? colors.warning
+        : agg.trendVsYesterday < -10
+          ? colors.success
+          : colors.textMuted
+      : colors.textSubtle;
 
   return (
     <box flexDirection="column" flexShrink={0}>
       <box flexDirection="row" height={1} gap={2} paddingX={1}>
         <text height={1}>
           <span fg={colors.textMuted}>HEALTH </span>
-          {agg.okCount > 0 && <span fg={colors.success}>{pad(`${agg.okCount} ok`, isCompact ? 5 : 5)}</span>}
-          {agg.warnCount > 0 && <span fg={colors.warning}> {pad(`${agg.warnCount} warn`, isCompact ? 7 : 7)}</span>}
-          {agg.errCount > 0 && <span fg={colors.error}> {pad(`${agg.errCount} err`, isCompact ? 6 : 6)}</span>}
+          {agg.okCount > 0 && (
+            <span fg={colors.success}>{pad(`${agg.okCount} ok`, isCompact ? 5 : 5)}</span>
+          )}
+          {agg.warnCount > 0 && (
+            <span fg={colors.warning}> {pad(`${agg.warnCount} warn`, isCompact ? 7 : 7)}</span>
+          )}
+          {agg.errCount > 0 && (
+            <span fg={colors.error}> {pad(`${agg.errCount} err`, isCompact ? 6 : 6)}</span>
+          )}
           {agg.okCount === 0 && agg.warnCount === 0 && agg.errCount === 0 && (
             <span fg={colors.textSubtle}>no providers</span>
           )}
         </text>
 
-        <text fg={colors.textSubtle} height={1}>│</text>
+        <text fg={colors.textSubtle} height={1}>
+          │
+        </text>
 
         <text height={1}>
           <span fg={colors.textMuted}>TODAY </span>
-          <span fg={agg.costTodayEstimated ? colors.textMuted : colors.success}>{costTodayStr}</span>
+          <span fg={agg.costTodayEstimated ? colors.textMuted : colors.success}>
+            {costTodayStr}
+          </span>
         </text>
 
         {!isCompact && (
           <>
-            <text fg={colors.textSubtle} height={1}>│</text>
+            <text fg={colors.textSubtle} height={1}>
+              │
+            </text>
             <text height={1}>
               <span fg={colors.textMuted}>MTD </span>
-              <span fg={agg.costMtdEstimated ? colors.textMuted : colors.success}>{costMtdStr}</span>
+              <span fg={agg.costMtdEstimated ? colors.textMuted : colors.success}>
+                {costMtdStr}
+              </span>
             </text>
           </>
         )}
 
-        <text fg={colors.textSubtle} height={1}>│</text>
+        <text fg={colors.textSubtle} height={1}>
+          │
+        </text>
 
         <text height={1}>
           <span fg={colors.textMuted}>TOKENS </span>
@@ -173,18 +200,22 @@ export function ProviderAggregateStrip({ providers }: ProviderAggregateStripProp
 
       <box flexDirection="row" height={1} gap={2} paddingX={1}>
         {agg.hottestProvider && (
-          <text height={1}>
-            <span fg={colors.textMuted}>HOTTEST </span>
-            <span fg={agg.hottestPercent >= 80 ? colors.warning : colors.text}>
-              {pad(agg.hottestProvider, isCompact ? 10 : 14)}
-            </span>
-            <span fg={agg.hottestPercent >= 80 ? colors.warning : colors.textMuted}>
-              {` ${Math.round(agg.hottestPercent)}%`}
-            </span>
-          </text>
-        )}
+          <>
+            <text height={1}>
+              <span fg={colors.textMuted}>HOTTEST </span>
+              <span fg={agg.hottestPercent >= 80 ? colors.warning : colors.text}>
+                {pad(agg.hottestProvider, isCompact ? 10 : 14)}
+              </span>
+              <span fg={agg.hottestPercent >= 80 ? colors.warning : colors.textMuted}>
+                {` ${Math.round(agg.hottestPercent)}%`}
+              </span>
+            </text>
 
-        <text fg={colors.textSubtle} height={1}>│</text>
+            <text fg={colors.textSubtle} height={1}>
+              │
+            </text>
+          </>
+        )}
 
         <text height={1}>
           <span fg={colors.textMuted}>vs YESTERDAY </span>
@@ -193,7 +224,7 @@ export function ProviderAggregateStrip({ providers }: ProviderAggregateStripProp
       </box>
 
       <box height={1} overflow="hidden">
-        <text fg={colors.border}>{'─'.repeat(300)}</text>
+        <text fg={colors.border}>{"─".repeat(300)}</text>
       </box>
     </box>
   );