@tokentop/ttop 0.2.2

package/src/tui/components/GhostProviderCard.tsx

@@ -0,0 +1,45 @@
+import { forwardRef } from 'react';
+import type { BoxRenderable } from '@opentui/core';
+import { useColors } from '../contexts/ThemeContext.tsx';
+
+interface GhostProviderCardProps {
+  name: string;
+  focused?: boolean;
+  onFocus?: () => void;
+}
+
+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>
+
+      <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>
+  );
+});
+GhostProviderCard.displayName = 'GhostProviderCard';

package/src/tui/components/Header.tsx

@@ -0,0 +1,125 @@
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors, useTheme } from '../contexts/ThemeContext.tsx';
+import { VERSION } from '../../version.ts';
+
+interface HeaderProps {
+  title?: string;
+  subtitle?: string;
+  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) {
+  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 useLargeLogo = height >= MIN_HEIGHT_FOR_LARGE_LOGO;
+
+  const titleColor = components.header?.titleColor;
+  const titleAccentColor = components.header?.titleAccentColor;
+  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"
+     >
+      {useLargeLogo && (
+        <box flexDirection="column" alignItems="center" height={6}>
+          {ASCII_LOGO.map((line, idx) => {
+            if (hasSplitTitle) {
+              const splitAt = 44;
+              return (
+                <text key={idx} height={1}>
+                  <span fg={titleColor}>{line.slice(0, splitAt)}</span>
+                  <span fg={titleAccentColor}>{line.slice(splitAt)}</span>
+                </text>
+              );
+            }
+            return <text key={idx} height={1} fg={colors.primary}>{line}</text>;
+          })}
+        </box>
+      )}
+      <box flexDirection="row" justifyContent="space-between" alignItems="center" height={1}>
+        {!useLargeLogo && (
+          <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>
+              </text>
+            ) : (
+              <text height={1}>
+                <span fg={colors.primary}>
+                  <strong>{title}</strong>
+                </span>
+              </text>
+            )}
+            {demoMode && (
+              <text height={1} fg={colors.warning}><strong>DEMO</strong></text>
+            )}
+            {subtitle && (
+              <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}>
+            <text height={1}>
+              {isDashboard ? (
+                <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 fg={colors.textMuted}> 2 PROVIDERS </span>
+              )}
+            </text>
+            <text height={1}>
+              {isTrends ? (
+                <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 fg={colors.textMuted}> 4 PROJECTS </span>
+              )}
+            </text>
+          </box>
+        )}
+        <text height={1} fg={colors.textMuted}>v{VERSION}</text>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/HelpOverlay.tsx

@@ -0,0 +1,45 @@
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { ModalBackdrop, Z_INDEX } from './ModalBackdrop.tsx';
+
+export function HelpOverlay() {
+  const colors = useColors();
+  const { height: termHeight } = useTerminalDimensions();
+  const isCompact = termHeight < 28;
+
+  return (
+    <ModalBackdrop zIndex={Z_INDEX.MODAL}>
+      <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>
+    </ModalBackdrop>
+  );
+}

package/src/tui/components/InlineGauge.tsx

@@ -0,0 +1,34 @@
+import { useColors } from '../contexts/ThemeContext.tsx';
+
+interface InlineGaugeProps {
+  percent: number | null;
+  width?: number;
+  color?: string;
+}
+
+export function InlineGauge({ percent, width = 20, color }: InlineGaugeProps) {
+  const colors = useColors();
+
+  if (percent === null || percent === undefined) {
+    const emptyBar = '·'.repeat(width);
+    return <text fg={colors.textSubtle}>{emptyBar}</text>;
+  }
+
+  const clamped = Math.max(0, Math.min(100, percent));
+  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 filledBar = '█'.repeat(filledWidth);
+  const emptyBar = '·'.repeat(emptyWidth);
+
+  return (
+    <text>
+      <span fg={fillColor}>{filledBar}</span>
+      <span fg={colors.gaugeBackground}>{emptyBar}</span>
+    </text>
+  );
+}

package/src/tui/components/InlineSparkline.tsx

@@ -0,0 +1,78 @@
+import { useColors } from '../contexts/ThemeContext.tsx';
+import type { UsageSnapshot } from '../contexts/PluginContext.tsx';
+
+interface InlineSparklineProps {
+  history: UsageSnapshot[];
+  width?: number;
+}
+
+function valueToBraille(left: number, right: number): string {
+  const leftDots = Math.min(4, Math.max(0, Math.floor(left)));
+  const rightDots = Math.min(4, Math.max(0, Math.floor(right)));
+
+  let code = 0x2800;
+  const leftBits = [0x40, 0x04, 0x02, 0x01];
+  const rightBits = [0x80, 0x20, 0x10, 0x08];
+
+  code |= 0x40 | 0x80;
+
+  for (let i = 0; i < leftDots; i++) {
+    code |= leftBits[i]!;
+  }
+  for (let i = 0; i < rightDots; i++) {
+    code |= rightBits[i]!;
+  }
+
+  return String.fromCharCode(code);
+}
+
+export function InlineSparkline({ history, width = 8 }: InlineSparklineProps) {
+  const colors = useColors();
+
+  if (history.length < 2) {
+    return <text fg={colors.textSubtle}>{'⣀'.repeat(width)}</text>;
+  }
+
+  const values = history.map(s => s.usedPercent ?? 0);
+  const effectiveWidth = width * 2;
+  const displayData = values.slice(-effectiveWidth);
+
+  const max = Math.max(...displayData, 1);
+  const normalize = (v: number): number => (v / max) * 4;
+
+  const groups: { color: string; chars: string }[] = [];
+
+  for (let i = 0; i < displayData.length; i += 2) {
+    const leftRaw = displayData[i] ?? 0;
+    const rightRaw = displayData[i + 1] ?? leftRaw;
+
+    const leftNorm = normalize(leftRaw);
+    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 char = dominantRaw <= 0 ? '⣀' : valueToBraille(leftNorm, rightNorm);
+
+    if (groups.length > 0 && groups[groups.length - 1]!.color === color) {
+      groups[groups.length - 1]!.chars += char;
+    } else {
+      groups.push({ color, chars: char });
+    }
+  }
+
+  const charCount = Math.ceil(displayData.length / 2);
+  const padding = width - charCount;
+
+  return (
+    <text>
+      {padding > 0 && <span fg={colors.textSubtle}>{'⣀'.repeat(padding)}</span>}
+      {groups.map((group, i) => (
+        <span key={i} fg={group.color}>{group.chars}</span>
+      ))}
+    </text>
+  );
+}

package/src/tui/components/KpiStrip.tsx

@@ -0,0 +1,246 @@
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { useTimeWindow, type TimeWindow } from '../contexts/TimeWindowContext.tsx';
+import { useConfig } from '../contexts/ConfigContext.tsx';
+import { Sparkline } from './Sparkline.tsx';
+import { useValueFlash, interpolateColor } from '../hooks/useValueFlash.ts';
+import { useAnimatedValue } from '../hooks/useAnimatedValue.ts';
+
+type MetricType = 'cost' | 'tokens' | 'requests' | 'rate' | 'default';
+
+interface KPICardProps {
+  title: string;
+  value: string;
+  delta?: string;
+  subValue?: string;
+  metric?: MetricType;
+  flashIntensity?: number;
+}
+
+const TIME_WINDOW_EXPANDED: Record<TimeWindow, string> = {
+  '5m': 'Last 5 Minutes',
+  '15m': 'Last 15 Minutes',
+  '1h': 'Last Hour',
+  '24h': 'Last 24 Hours',
+  '7d': 'Last 7 Days',
+  '30d': 'Last 30 Days',
+  'all': 'All Time',
+};
+
+interface TimeWindowCardProps {
+  isCompact: boolean;
+}
+
+function TimeWindowCard({ isCompact }: TimeWindowCardProps) {
+  const colors = useColors();
+  const { window: timeWindow } = useTimeWindow();
+
+  const title = isCompact ? 'WINDOW' : 'TIME WINDOW (t)';
+  const value = isCompact ? timeWindow.toUpperCase() : TIME_WINDOW_EXPANDED[timeWindow];
+  const hint = isCompact ? '(t)' : "Press 't' to change";
+
+   return (
+     <box 
+       flexDirection="column" 
+       paddingX={1}
+       flexShrink={0}
+       width={isCompact ? 9 : 22}
+     >
+      <text fg={colors.textMuted} height={1}>{title}</text>
+      <text fg={colors.info} height={1}><strong>{value}</strong></text>
+      <text fg={colors.textSubtle} height={1}>{hint}</text>
+    </box>
+  );
+}
+
+function KPICard({ title, value, delta, subValue, metric = 'default', flashIntensity = 0 }: KPICardProps) {
+  const colors = useColors();
+  
+  const getBaseMetricColor = (m: MetricType): string => {
+    switch (m) {
+      case 'cost': return colors.success;
+      case 'tokens': return colors.primary;
+      case 'requests': return colors.secondary;
+      case 'rate': return colors.warning;
+      default: return colors.text;
+    }
+  };
+  
+  const baseColor = getBaseMetricColor(metric);
+  const flashHighlight = '#ffffff';
+  const valueColor = flashIntensity > 0 
+    ? interpolateColor(flashIntensity, baseColor, flashHighlight)
+    : baseColor;
+  
+  const deltaColor = colors.success;
+  
+  return (
+    <box 
+      flexDirection="column" 
+      paddingLeft={1}
+      paddingRight={2}
+      flexGrow={1}
+    >
+      <text fg={colors.textMuted} height={1}>{title}</text>
+      <text fg={valueColor} height={1}><strong>{value}</strong></text>
+      {delta && <text fg={deltaColor} height={1}>{delta}</text>}
+      {subValue && <text fg={colors.textMuted} height={1}>{subValue}</text>}
+    </box>
+  );
+}
+
+export interface ActivityStatus {
+  label: string;
+  color: string;
+}
+
+export interface BudgetInfo {
+  limit: number | null;
+  budgetCost: number;
+  budgetType: 'daily' | 'weekly' | 'monthly' | 'none';
+  budgetTypeLabel: string;
+  warningPercent: number;
+  criticalPercent: number;
+}
+
+export interface KpiStripProps {
+  totalCost: number;
+  totalTokens: number;
+  totalRequests: number;
+  activeCount: number;
+  deltaCost: number;
+  deltaTokens: number;
+  windowSec: number;
+  activity: { instantRate: number; avgRate: number; isSpike: boolean };
+  sparkData: number[];
+  budget?: BudgetInfo;
+}
+
+export function KpiStrip({
+  totalCost,
+  totalTokens,
+  totalRequests,
+  activeCount,
+  deltaCost,
+  deltaTokens,
+  windowSec,
+  activity,
+  sparkData,
+}: KpiStripProps) {
+  const colors = useColors();
+  const { width: terminalWidth } = useTerminalDimensions();
+  const { config } = useConfig();
+  const { sparkline: sparklineConfig } = config.display;
+  
+  const animatedCost = useAnimatedValue(totalCost, { durationMs: 400, precision: 2 });
+  const animatedTokens = useAnimatedValue(totalTokens, { durationMs: 400, precision: 0 });
+  const animatedRequests = useAnimatedValue(totalRequests, { durationMs: 300, precision: 0 });
+  
+  const { intensity: costFlashIntensity } = useValueFlash(totalCost, { 
+    durationMs: 500, 
+    increaseOnly: true,
+    threshold: 0.001 
+  });
+  const { intensity: tokenFlashIntensity } = useValueFlash(totalTokens, { 
+    durationMs: 400, 
+    increaseOnly: true,
+    threshold: 10 
+  });
+  
+  const formatCurrency = (val: number) => `$${val.toFixed(2)}`;
+  const formatTokens = (val: number) => val > 1000000 ? `${(val/1000000).toFixed(1)}M` : `${(val/1000).toFixed(1)}K`;
+  const formatRate = (val: number) => val >= 1000 ? `${(val/1000).toFixed(1)}k` : `${Math.round(val)}`;
+  const formatBurnTokens = (val: number) => val >= 1000 ? `${(val/1000).toFixed(1)}k` : `${Math.round(val)}`;
+  
+  const formatWindowLabel = (sec: number): string => {
+    if (sec < 60) return `${Math.round(sec)}s`;
+    if (sec < 3600) return `${Math.round(sec / 60)}m`;
+    return `${(sec / 3600).toFixed(1)}h`;
+  };
+  
+  const hasEnoughHistory = windowSec >= 30;
+  const burnRateCostPerHour = hasEnoughHistory ? deltaCost * (3600 / windowSec) : 0;
+  const burnRateTokensPerMin = hasEnoughHistory ? deltaTokens * (60 / windowSec) : 0;
+  const windowLabel = formatWindowLabel(windowSec);
+  
+  const getActivityStatus = (): ActivityStatus => {
+    const { instantRate, avgRate, isSpike } = activity;
+    if (isSpike || instantRate >= 500) return { label: 'SPIKE', color: colors.error };
+    if (avgRate >= 150) return { label: 'HOT', color: colors.warning };
+    if (avgRate >= 50) return { label: 'BUSY', color: colors.success };
+    if (avgRate >= 10) return { label: 'LOW', color: colors.textMuted };
+    return { label: 'IDLE', color: colors.textSubtle };
+  };
+
+  const activityStatus = getActivityStatus();
+  
+  const isCompact = terminalWidth < 100;
+  const sparklineWidth = isCompact 
+    ? Math.min(25, Math.max(15, Math.floor(terminalWidth * 0.2)))
+    : Math.min(50, Math.max(20, Math.floor(terminalWidth * 0.25)));
+
+  // Fixed max based on thresholds so bar HEIGHT reflects actual activity level
+  // This ensures green (low), yellow (medium), red (high) show distinct bar sizes
+  // 600 = 1.2x the SPIKE threshold (500), giving headroom for extreme spikes
+  const sparkMax = 600;
+
+  return (
+    <>
+      <box flexDirection="row" gap={0} height={4} flexShrink={0}>
+        <TimeWindowCard isCompact={isCompact} />
+        <KPICard 
+          title="COST" 
+          value={formatCurrency(animatedCost)} 
+          delta={hasEnoughHistory ? `+${formatCurrency(deltaCost)} (${windowLabel})` : 'gathering...'} 
+          metric="cost"
+          flashIntensity={costFlashIntensity}
+        />
+        <KPICard 
+          title="TOKENS" 
+          value={formatTokens(animatedTokens)} 
+          delta={hasEnoughHistory ? `+${formatTokens(deltaTokens)} (${windowLabel})` : 'gathering...'}
+          metric="tokens"
+          flashIntensity={tokenFlashIntensity}
+        />
+        <KPICard 
+          title="REQUESTS" 
+          value={Math.round(animatedRequests).toLocaleString()} 
+          subValue={`${activeCount} active`}
+          metric="requests"
+        />
+        {!isCompact && (
+          <KPICard 
+            title="BURN RATE" 
+            value={hasEnoughHistory ? `${formatCurrency(burnRateCostPerHour)}/hr` : '--'}
+            subValue={hasEnoughHistory ? `${formatBurnTokens(burnRateTokensPerMin)} tok/min` : 'gathering...'}
+            metric="rate"
+          />
+        )}
+        
+         <box flexDirection="column" flexGrow={1} paddingX={1} overflow="hidden">
+          <box flexDirection="row" justifyContent="space-between">
+            <text fg={colors.textMuted}>ACTIVITY</text>
+            <text>
+              <span fg={activityStatus.color}>{activityStatus.label}</span>
+              <span fg={colors.textMuted}> {formatRate(activity.instantRate)}/s</span>
+            </text>
+          </box>
+          <Sparkline 
+            data={sparkData} 
+            width={sparklineWidth} 
+            label="tok/s" 
+            fixedMax={sparkMax}
+            thresholds={{ warning: 150, error: 500 }}
+            style={sparklineConfig.style}
+            orientation={sparklineConfig.orientation}
+            showBaseline={sparklineConfig.showBaseline}
+          />
+        </box>
+      </box>
+      
+      <box height={1} overflow="hidden">
+        <text fg={colors.border}>{'─'.repeat(300)}</text>
+      </box>
+    </>
+  );
+}