@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/components/FooterHints.tsx

@@ -1,4 +1,4 @@
-import { useColors } from '../contexts/ThemeContext.tsx';
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 export interface HintItem {
   key: string;
@@ -15,7 +15,7 @@ export function FooterHints({ hints }: FooterHintsProps) {
   return (
     <box flexDirection="row" height={1} paddingLeft={1}>
       <text fg={colors.textSubtle}>
-        {hints.map((h, i) => `${h.key} ${h.action}${i < hints.length - 1 ? '  ' : ''}`).join('')}
+        {hints.map((h, i) => `${h.key} ${h.action}${i < hints.length - 1 ? "  " : ""}`).join("")}
       </text>
     </box>
   );

package/src/tui/components/GhostProviderCard.tsx

@@ -1,6 +1,6 @@
-import { forwardRef } from 'react';
-import type { BoxRenderable } from '@opentui/core';
-import { useColors } from '../contexts/ThemeContext.tsx';
+import type { BoxRenderable } from "@opentui/core";
+import { forwardRef } from "react";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface GhostProviderCardProps {
   name: string;
@@ -8,38 +8,40 @@ interface GhostProviderCardProps {
   onFocus?: () => void;
 }
 
-export const GhostProviderCard = forwardRef<BoxRenderable, GhostProviderCardProps>(({
-  name,
-  focused = false,
-  onFocus,
-}, ref) => {
-  const colors = useColors();
+export const GhostProviderCard = forwardRef<BoxRenderable, GhostProviderCardProps>(
+  ({ name, focused = false, onFocus }, ref) => {
+    const colors = useColors();
 
-  return (
-    <box
-      ref={ref}
-      border
-      borderStyle="rounded"
-      borderColor={focused ? colors.textSubtle : colors.textSubtle}
-      padding={1}
-      flexDirection="column"
-      gap={1}
-      width={44}
-      minHeight={8}
-      {...(onFocus ? { onMouseDown: onFocus } : {})}
-    >
-      <box flexDirection="row" justifyContent="space-between" alignItems="center">
-        <text fg={colors.textSubtle}>
-          {name}
-        </text>
-        <text fg={colors.textSubtle}>○</text>
-      </box>
+    return (
+      <box
+        ref={ref}
+        border
+        borderStyle="rounded"
+        borderColor={focused ? colors.textSubtle : colors.textSubtle}
+        padding={1}
+        flexDirection="column"
+        gap={1}
+        width={44}
+        minHeight={8}
+        {...(onFocus ? { onMouseDown: onFocus } : {})}
+      >
+        <box flexDirection="row" justifyContent="space-between" alignItems="center">
+          <text fg={colors.textSubtle}>{name}</text>
+          <text fg={colors.textSubtle}>○</text>
+        </box>
 
-      <box flexDirection="column" flexGrow={1} justifyContent="center" alignItems="center" gap={1}>
-        <text fg={colors.textSubtle}>Not configured</text>
-        <text fg={colors.textMuted}>Set API key to enable</text>
+        <box
+          flexDirection="column"
+          flexGrow={1}
+          justifyContent="center"
+          alignItems="center"
+          gap={1}
+        >
+          <text fg={colors.textSubtle}>Not configured</text>
+          <text fg={colors.textMuted}>Set API key to enable</text>
+        </box>
       </box>
-    </box>
-  );
-});
-GhostProviderCard.displayName = 'GhostProviderCard';
+    );
+  },
+);
+GhostProviderCard.displayName = "GhostProviderCard";

package/src/tui/components/Header.tsx

@@ -1,51 +1,56 @@
-import { useTerminalDimensions } from '@opentui/react';
-import { useColors, useTheme } from '../contexts/ThemeContext.tsx';
-import { VERSION } from '../../version.ts';
+import { useTerminalDimensions } from "@opentui/react";
+import { VERSION } from "../../version.ts";
+import { useColors, useTheme } from "../contexts/ThemeContext.tsx";
 
 interface HeaderProps {
   title?: string;
   subtitle?: string;
-  activeView?: 'dashboard' | 'providers' | 'trends' | 'projects';
+  activeView?: "dashboard" | "providers" | "trends" | "projects";
   demoMode?: boolean;
 }
 
 const ASCII_LOGO = [
-  '████████╗ ██████╗ ██╗  ██╗███████╗███╗   ██╗████████╗ ██████╗ ██████╗ ',
-  '╚══██╔══╝██╔═══██╗██║ ██╔╝██╔════╝████╗  ██║╚══██╔══╝██╔═══██╗██╔══██╗',
-  '   ██║   ██║   ██║█████╔╝ █████╗  ██╔██╗ ██║   ██║   ██║   ██║██████╔╝',
-  '   ██║   ██║   ██║██╔═██╗ ██╔══╝  ██║╚██╗██║   ██║   ██║   ██║██╔═══╝ ',
-  '   ██║   ╚██████╔╝██║  ██╗███████╗██║ ╚████║   ██║   ╚██████╔╝██║     ',
-  '   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝  ╚═══╝   ╚═╝    ╚═════╝ ╚═╝     ',
+  "████████╗ ██████╗ ██╗  ██╗███████╗███╗   ██╗████████╗ ██████╗ ██████╗ ",
+  "╚══██╔══╝██╔═══██╗██║ ██╔╝██╔════╝████╗  ██║╚══██╔══╝██╔═══██╗██╔══██╗",
+  "   ██║   ██║   ██║█████╔╝ █████╗  ██╔██╗ ██║   ██║   ██║   ██║██████╔╝",
+  "   ██║   ██║   ██║██╔═██╗ ██╔══╝  ██║╚██╗██║   ██║   ██║   ██║██╔═══╝ ",
+  "   ██║   ╚██████╔╝██║  ██╗███████╗██║ ╚████║   ██║   ╚██████╔╝██║     ",
+  "   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝  ╚═══╝   ╚═╝    ╚═════╝ ╚═╝     ",
 ];
 
 const MIN_HEIGHT_FOR_LARGE_LOGO = 35;
 
-export function Header({ title = 'tokentop', subtitle, activeView, demoMode = false }: HeaderProps) {
+export function Header({
+  title = "tokentop",
+  subtitle,
+  activeView,
+  demoMode = false,
+}: HeaderProps) {
   const colors = useColors();
   const { components } = useTheme();
   const { height } = useTerminalDimensions();
 
-  const isDashboard = activeView === 'dashboard';
-  const isProviders = activeView === 'providers';
-  const isTrends = activeView === 'trends';
-  const isProjects = activeView === 'projects';
+  const isDashboard = activeView === "dashboard";
+  const isProviders = activeView === "providers";
+  const isTrends = activeView === "trends";
+  const isProjects = activeView === "projects";
   const useLargeLogo = height >= MIN_HEIGHT_FOR_LARGE_LOGO;
 
   const titleColor = components.header?.titleColor;
   const titleAccentColor = components.header?.titleAccentColor;
-  const hasSplitTitle = titleColor && titleAccentColor && title === 'tokentop';
+  const hasSplitTitle = titleColor && titleAccentColor && title === "tokentop";
 
   const headerHeight = useLargeLogo ? 7 : 1;
 
   return (
-     <box
-       flexDirection="column"
-       backgroundColor={colors.foreground}
-       flexShrink={0}
-       height={headerHeight}
-       paddingX={1}
-       overflow="hidden"
-     >
+    <box
+      flexDirection="column"
+      backgroundColor={colors.foreground}
+      flexShrink={0}
+      height={headerHeight}
+      paddingX={1}
+      overflow="hidden"
+    >
       {useLargeLogo && (
         <box flexDirection="column" alignItems="center" height={6}>
           {ASCII_LOGO.map((line, idx) => {
@@ -58,7 +63,11 @@ export function Header({ title = 'tokentop', subtitle, activeView, demoMode = fa
                 </text>
               );
             }
-            return <text key={idx} height={1} fg={colors.primary}>{line}</text>;
+            return (
+              <text key={idx} height={1} fg={colors.primary}>
+                {line}
+              </text>
+            );
           })}
         </box>
       )}
@@ -67,8 +76,12 @@ export function Header({ title = 'tokentop', subtitle, activeView, demoMode = fa
           <box flexDirection="row" gap={1} alignItems="center" height={1}>
             {hasSplitTitle ? (
               <text height={1}>
-                <span fg={titleColor}><strong>token</strong></span>
-                <span fg={titleAccentColor}><strong>top</strong></span>
+                <span fg={titleColor}>
+                  <strong>token</strong>
+                </span>
+                <span fg={titleAccentColor}>
+                  <strong>top</strong>
+                </span>
               </text>
             ) : (
               <text height={1}>
@@ -78,47 +91,67 @@ export function Header({ title = 'tokentop', subtitle, activeView, demoMode = fa
               </text>
             )}
             {demoMode && (
-              <text height={1} fg={colors.warning}><strong>DEMO</strong></text>
+              <text height={1} fg={colors.warning}>
+                <strong>DEMO</strong>
+              </text>
             )}
             {subtitle && (
-              <text height={1} fg={colors.textMuted}>{subtitle}</text>
+              <text height={1} fg={colors.textMuted}>
+                {subtitle}
+              </text>
             )}
           </box>
         )}
         {useLargeLogo && <box width={10} />}
         {activeView && (
-          <box flexDirection="row" gap={useLargeLogo ? 1 : 0} marginLeft={useLargeLogo ? 0 : 2} alignItems="center" height={1}>
+          <box
+            flexDirection="row"
+            gap={useLargeLogo ? 1 : 0}
+            marginLeft={useLargeLogo ? 0 : 2}
+            alignItems="center"
+            height={1}
+          >
             <text height={1}>
               {isDashboard ? (
-                <span bg={colors.primary} fg={colors.background}><strong> 1 DASHBOARD </strong></span>
+                <span bg={colors.primary} fg={colors.background}>
+                  <strong> 1 DASHBOARD </strong>
+                </span>
               ) : (
                 <span fg={colors.textMuted}> 1 DASHBOARD </span>
               )}
             </text>
             <text height={1}>
               {isProviders ? (
-                <span bg={colors.primary} fg={colors.background}><strong> 2 PROVIDERS </strong></span>
+                <span bg={colors.primary} fg={colors.background}>
+                  <strong> 2 PROVIDERS </strong>
+                </span>
               ) : (
                 <span fg={colors.textMuted}> 2 PROVIDERS </span>
               )}
             </text>
             <text height={1}>
               {isTrends ? (
-                <span bg={colors.primary} fg={colors.background}><strong> 3 TRENDS </strong></span>
+                <span bg={colors.primary} fg={colors.background}>
+                  <strong> 3 TRENDS </strong>
+                </span>
               ) : (
                 <span fg={colors.textMuted}> 3 TRENDS </span>
               )}
             </text>
             <text height={1}>
               {isProjects ? (
-                <span bg={colors.primary} fg={colors.background}><strong> 4 PROJECTS </strong></span>
+                <span bg={colors.primary} fg={colors.background}>
+                  <strong> 4 PROJECTS </strong>
+                </span>
               ) : (
                 <span fg={colors.textMuted}> 4 PROJECTS </span>
               )}
             </text>
           </box>
         )}
-        <text height={1} fg={colors.textMuted}>v{VERSION}</text>
+        <text height={1} fg={colors.textMuted}>
+          v{VERSION}
+        </text>
       </box>
     </box>
   );

package/src/tui/components/HelpOverlay.tsx

@@ -1,6 +1,6 @@
-import { useTerminalDimensions } from '@opentui/react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import { ModalBackdrop, Z_INDEX } from './ModalBackdrop.tsx';
+import { useTerminalDimensions } from "@opentui/react";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import { ModalBackdrop, Z_INDEX } from "./ModalBackdrop.tsx";
 
 export function HelpOverlay() {
   const colors = useColors();
@@ -9,36 +9,106 @@ export function HelpOverlay() {
 
   return (
     <ModalBackdrop zIndex={Z_INDEX.MODAL}>
-      <box 
-        width={46} 
-        height={isCompact ? 18 : 20} 
-        border 
-        borderStyle="double" 
-        borderColor={colors.primary} 
-        flexDirection="column" 
+      <box
+        width={46}
+        height={isCompact ? 18 : 20}
+        border
+        borderStyle="double"
+        borderColor={colors.primary}
+        flexDirection="column"
         padding={1}
         backgroundColor={colors.background}
         overflow="hidden"
       >
-        <box justifyContent="center" height={1}><text height={1}><strong>Help</strong></text></box>
-        
-        <box height={1} marginTop={1}><text height={1} fg={colors.primary}><strong>Navigation</strong></text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>↑↓ j/k</text><text height={1}>Navigate</text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>Enter</text><text height={1}>View details</text></box>
-        
-        <box height={1} marginTop={1}><text height={1} fg={colors.primary}><strong>Actions</strong></text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>/</text><text height={1}>Filter</text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>s</text><text height={1}>Sort</text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>t</text><text height={1}>Time window</text></box>
-        
-        <box height={1} marginTop={1}><text height={1} fg={colors.primary}><strong>Global</strong></text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>1-4</text><text height={1}>Switch views</text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>,</text><text height={1}>Settings</text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>:</text><text height={1}>Command palette</text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>~</text><text height={1}>Debug panel</text></box>
-        <box flexDirection="row" height={1}><text width={10} height={1} fg={colors.textMuted}>q</text><text height={1}>Quit</text></box>
-        
-        <box justifyContent="center" height={1} marginTop={1}><text height={1} fg={colors.textMuted}>? or Esc to close</text></box>
+        <box justifyContent="center" height={1}>
+          <text height={1}>
+            <strong>Help</strong>
+          </text>
+        </box>
+
+        <box height={1} marginTop={1}>
+          <text height={1} fg={colors.primary}>
+            <strong>Navigation</strong>
+          </text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            ↑↓ j/k
+          </text>
+          <text height={1}>Navigate</text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            Enter
+          </text>
+          <text height={1}>View details</text>
+        </box>
+
+        <box height={1} marginTop={1}>
+          <text height={1} fg={colors.primary}>
+            <strong>Actions</strong>
+          </text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            /
+          </text>
+          <text height={1}>Filter</text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            s
+          </text>
+          <text height={1}>Sort</text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            t
+          </text>
+          <text height={1}>Time window</text>
+        </box>
+
+        <box height={1} marginTop={1}>
+          <text height={1} fg={colors.primary}>
+            <strong>Global</strong>
+          </text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            1-4
+          </text>
+          <text height={1}>Switch views</text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            ,
+          </text>
+          <text height={1}>Settings</text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            :
+          </text>
+          <text height={1}>Command palette</text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            ~
+          </text>
+          <text height={1}>Debug panel</text>
+        </box>
+        <box flexDirection="row" height={1}>
+          <text width={10} height={1} fg={colors.textMuted}>
+            q
+          </text>
+          <text height={1}>Quit</text>
+        </box>
+
+        <box justifyContent="center" height={1} marginTop={1}>
+          <text height={1} fg={colors.textMuted}>
+            ? or Esc to close
+          </text>
+        </box>
       </box>
     </ModalBackdrop>
   );

package/src/tui/components/InlineGauge.tsx

@@ -1,4 +1,4 @@
-import { useColors } from '../contexts/ThemeContext.tsx';
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface InlineGaugeProps {
   percent: number | null;
@@ -10,7 +10,7 @@ export function InlineGauge({ percent, width = 20, color }: InlineGaugeProps) {
   const colors = useColors();
 
   if (percent === null || percent === undefined) {
-    const emptyBar = '·'.repeat(width);
+    const emptyBar = "·".repeat(width);
     return <text fg={colors.textSubtle}>{emptyBar}</text>;
   }
 
@@ -18,12 +18,15 @@ export function InlineGauge({ percent, width = 20, color }: InlineGaugeProps) {
   const filledWidth = Math.round((clamped / 100) * width);
   const emptyWidth = width - filledWidth;
 
-  const fillColor = clamped >= 90 ? colors.gaugeDanger :
-                    clamped >= 70 ? colors.gaugeWarning :
-                    color ?? colors.gaugeFill;
+  const fillColor =
+    clamped >= 90
+      ? colors.gaugeDanger
+      : clamped >= 70
+        ? colors.gaugeWarning
+        : (color ?? colors.gaugeFill);
 
-  const filledBar = '█'.repeat(filledWidth);
-  const emptyBar = '·'.repeat(emptyWidth);
+  const filledBar = "█".repeat(filledWidth);
+  const emptyBar = "·".repeat(emptyWidth);
 
   return (
     <text>

package/src/tui/components/InlineSparkline.tsx

@@ -1,5 +1,5 @@
-import { useColors } from '../contexts/ThemeContext.tsx';
-import type { UsageSnapshot } from '../contexts/PluginContext.tsx';
+import type { UsageSnapshot } from "../contexts/PluginContext.tsx";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface InlineSparklineProps {
   history: UsageSnapshot[];
@@ -30,10 +30,10 @@ export function InlineSparkline({ history, width = 8 }: InlineSparklineProps) {
   const colors = useColors();
 
   if (history.length < 2) {
-    return <text fg={colors.textSubtle}>{'⣀'.repeat(width)}</text>;
+    return <text fg={colors.textSubtle}>{"⣀".repeat(width)}</text>;
   }
 
-  const values = history.map(s => s.usedPercent ?? 0);
+  const values = history.map((s) => s.usedPercent ?? 0);
   const effectiveWidth = width * 2;
   const displayData = values.slice(-effectiveWidth);
 
@@ -50,12 +50,16 @@ export function InlineSparkline({ history, width = 8 }: InlineSparklineProps) {
     const rightNorm = normalize(rightRaw);
 
     const dominantRaw = Math.max(leftRaw, rightRaw);
-    const color = dominantRaw >= 90 ? colors.error :
-                  dominantRaw >= 70 ? colors.warning :
-                  dominantRaw > 0 ? colors.success :
-                  colors.textSubtle;
+    const color =
+      dominantRaw >= 90
+        ? colors.error
+        : dominantRaw >= 70
+          ? colors.warning
+          : dominantRaw > 0
+            ? colors.success
+            : colors.textSubtle;
 
-    const char = dominantRaw <= 0 ? '⣀' : valueToBraille(leftNorm, rightNorm);
+    const char = dominantRaw <= 0 ? "⣀" : valueToBraille(leftNorm, rightNorm);
 
     if (groups.length > 0 && groups[groups.length - 1]!.color === color) {
       groups[groups.length - 1]!.chars += char;
@@ -69,9 +73,11 @@ export function InlineSparkline({ history, width = 8 }: InlineSparklineProps) {
 
   return (
     <text>
-      {padding > 0 && <span fg={colors.textSubtle}>{'⣀'.repeat(padding)}</span>}
+      {padding > 0 && <span fg={colors.textSubtle}>{"⣀".repeat(padding)}</span>}
       {groups.map((group, i) => (
-        <span key={i} fg={group.color}>{group.chars}</span>
+        <span key={i} fg={group.color}>
+          {group.chars}
+        </span>
       ))}
     </text>
   );