@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/components/SidebarBreakdown.tsx

@@ -1,10 +1,10 @@
-import { useMemo } from 'react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import type { AgentSessionAggregate, AgentSessionStream } from '../../agents/types.ts';
+import { useMemo } from "react";
+import type { AgentSessionAggregate, AgentSessionStream } from "../../agents/types.ts";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface SidebarBreakdownProps {
   sessions: AgentSessionAggregate[];
-  focusedPanel: 'sessions' | 'sidebar' | 'limits';
+  focusedPanel: "sessions" | "sidebar" | "limits";
   getProviderColor: (id: string) => string;
 }
 
@@ -22,21 +22,23 @@ export function SidebarBreakdown({
   const { modelStats, modelProviders } = useMemo(() => {
     const stats: Record<string, number> = {};
     const providers: Record<string, string> = {};
-    sessions.forEach(s => {
+    sessions.forEach((s) => {
       s.streams.forEach((st: AgentSessionStream) => {
         stats[st.modelId] = (stats[st.modelId] || 0) + (st.costUsd ?? 0);
         if (!providers[st.modelId]) providers[st.modelId] = st.providerId;
       });
     });
     return {
-      modelStats: Object.entries(stats).sort(([, a], [, b]) => b - a).slice(0, 5),
+      modelStats: Object.entries(stats)
+        .sort(([, a], [, b]) => b - a)
+        .slice(0, 5),
       modelProviders: providers,
     };
   }, [sessions]);
 
   const providerStats = useMemo(() => {
     const stats: Record<string, number> = {};
-    sessions.forEach(s => {
+    sessions.forEach((s) => {
       s.streams.forEach((st: AgentSessionStream) => {
         stats[st.providerId] = (stats[st.providerId] || 0) + (st.costUsd ?? 0);
       });
@@ -52,21 +54,27 @@ export function SidebarBreakdown({
       width={35}
       gap={1}
       border
-      borderStyle={focusedPanel === 'sidebar' ? 'double' : 'single'}
-      borderColor={focusedPanel === 'sidebar' ? colors.primary : colors.border}
+      borderStyle={focusedPanel === "sidebar" ? "double" : "single"}
+      borderColor={focusedPanel === "sidebar" ? colors.primary : colors.border}
       overflow="hidden"
     >
       <box flexDirection="column" padding={1} flexGrow={1} overflow="hidden">
-        <text height={1} fg={colors.textMuted} marginBottom={1}>MODEL BREAKDOWN</text>
+        <text height={1} fg={colors.textMuted} marginBottom={1}>
+          MODEL BREAKDOWN
+        </text>
         {modelStats.map(([modelId, cost]) => (
           <box key={modelId} flexDirection="column" marginBottom={1}>
             <box flexDirection="row" justifyContent="space-between" height={1}>
-              <text height={1} fg={colors.text}>{(modelId.length > 15 ? modelId.slice(0, 14) + '…' : modelId).padEnd(18)}</text>
-              <text height={1} fg={colors.textMuted}>{formatCurrency(cost).padStart(7)}</text>
+              <text height={1} fg={colors.text}>
+                {(modelId.length > 15 ? modelId.slice(0, 14) + "…" : modelId).padEnd(18)}
+              </text>
+              <text height={1} fg={colors.textMuted}>
+                {formatCurrency(cost).padStart(7)}
+              </text>
             </box>
             <box flexDirection="row" height={1}>
               <text height={1} fg={getProviderColor(modelProviders[modelId] ?? modelId)}>
-                {'█'.repeat(Math.ceil((cost / maxModelCost) * 20)).padEnd(20)}
+                {"█".repeat(Math.ceil((cost / maxModelCost) * 20)).padEnd(20)}
               </text>
             </box>
           </box>
@@ -74,11 +82,17 @@ export function SidebarBreakdown({
       </box>
 
       <box flexDirection="column" padding={1} flexGrow={1} overflow="hidden">
-        <text height={1} fg={colors.textMuted} marginBottom={1}>BY PROVIDER</text>
+        <text height={1} fg={colors.textMuted} marginBottom={1}>
+          BY PROVIDER
+        </text>
         {providerStats.map(([provider, cost]) => (
           <box key={provider} flexDirection="row" justifyContent="space-between" height={1}>
-            <text height={1} fg={getProviderColor(provider)}>{provider.padEnd(18)}</text>
-            <text height={1} fg={colors.text}>{formatCurrency(cost).padStart(7)}</text>
+            <text height={1} fg={getProviderColor(provider)}>
+              {provider.padEnd(18)}
+            </text>
+            <text height={1} fg={colors.text}>
+              {formatCurrency(cost).padStart(7)}
+            </text>
           </box>
         ))}
       </box>

package/src/tui/components/Skeleton.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import { interpolateColor } from '../hooks/useValueFlash.ts';
+import { useEffect, useState } from "react";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import { interpolateColor } from "../hooks/useValueFlash.ts";
 
 const SHIMMER_INTERVAL = 50;
 const SHIMMER_WAVE_LENGTH = 8;
@@ -25,18 +25,17 @@ function useShimmer(length: number, baseColor: string, highlightColor: string):
   for (let i = 0; i < length; i++) {
     const distFromWave = i - phase;
     let intensity = 0;
-    
+
     if (distFromWave >= 0 && distFromWave < SHIMMER_WAVE_LENGTH) {
       intensity = Math.sin((distFromWave / SHIMMER_WAVE_LENGTH) * Math.PI);
     }
-    
-    const color = intensity > 0 
-      ? interpolateColor(intensity, baseColor, highlightColor)
-      : baseColor;
-    
-    segments.push({ char: '█', color });
+
+    const color =
+      intensity > 0 ? interpolateColor(intensity, baseColor, highlightColor) : baseColor;
+
+    segments.push({ char: "█", color });
   }
-  
+
   return segments;
 }
 
@@ -47,11 +46,13 @@ interface SkeletonTextProps {
 export function SkeletonText({ width = 10 }: SkeletonTextProps) {
   const colors = useColors();
   const segments = useShimmer(width, colors.borderMuted, colors.border);
-  
+
   return (
     <text>
       {segments.map((seg, i) => (
-        <span key={i} fg={seg.color}>{seg.char}</span>
+        <span key={i} fg={seg.color}>
+          {seg.char}
+        </span>
       ))}
     </text>
   );
@@ -66,25 +67,31 @@ export function SkeletonGauge({ barWidth = 30 }: SkeletonGaugeProps) {
   const labelSegments = useShimmer(12, colors.borderMuted, colors.textSubtle);
   const barSegments = useShimmer(barWidth, colors.borderMuted, colors.border);
   const resetSegments = useShimmer(20, colors.borderMuted, colors.textSubtle);
-  
+
   return (
     <box flexDirection="column" width={40}>
       <box flexDirection="row" justifyContent="space-between">
         <text>
           {labelSegments.map((seg, i) => (
-            <span key={i} fg={seg.color}>{seg.char}</span>
+            <span key={i} fg={seg.color}>
+              {seg.char}
+            </span>
           ))}
         </text>
         <text fg={colors.textSubtle}>···</text>
       </box>
       <text>
         {barSegments.map((seg, i) => (
-          <span key={i} fg={seg.color}>{seg.char}</span>
+          <span key={i} fg={seg.color}>
+            {seg.char}
+          </span>
         ))}
       </text>
       <text>
         {resetSegments.map((seg, i) => (
-          <span key={i} fg={seg.color}>{seg.char}</span>
+          <span key={i} fg={seg.color}>
+            {seg.char}
+          </span>
         ))}
       </text>
     </box>