@tokentop/ttop 0.2.2

package/src/tui/components/LimitGauge.tsx

@@ -0,0 +1,186 @@
+import type { ReactNode } from 'react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { usePulse } from '../hooks/usePulse.ts';
+
+interface LimitGaugeProps {
+  label: string;
+  usedPercent: number | null;
+  color: string;
+  ghost?: boolean;
+  error?: string;
+  resetTime?: string;
+  compact?: boolean;
+  labelWidth?: number;
+  barWidth?: number;
+  selected?: boolean;
+  warningThreshold?: number;
+  criticalThreshold?: number;
+}
+
+const FRACTIONAL_BLOCKS = [' ', '▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'];
+
+function renderFractionalBar(percent: number, width: number, filledColor: string, emptyColor: string): ReactNode[] {
+  const totalSegments = width * 8;
+  const filledSegments = Math.round((percent / 100) * totalSegments);
+  const fullBlocks = Math.floor(filledSegments / 8);
+  const remainder = filledSegments % 8;
+  const emptyBlocks = width - fullBlocks - (remainder > 0 ? 1 : 0);
+  
+  const elements: ReactNode[] = [];
+  
+  if (fullBlocks > 0) {
+    elements.push(<span key="full" fg={filledColor}>{'█'.repeat(fullBlocks)}</span>);
+  }
+  
+  if (remainder > 0) {
+    elements.push(<span key="partial" fg={filledColor}>{FRACTIONAL_BLOCKS[remainder]}</span>);
+  }
+  
+  if (emptyBlocks > 0) {
+    elements.push(<span key="empty" fg={emptyColor}>{'─'.repeat(emptyBlocks)}</span>);
+  }
+  
+  return elements;
+}
+
+function interpolatePulseColor(intensity: number, baseColor: string, dimColor: string): string {
+  const dimAmount = 0.4;
+  const t = intensity * dimAmount;
+  
+  const parseHex = (hex: string) => {
+    const h = hex.replace('#', '');
+    return {
+      r: parseInt(h.substring(0, 2), 16),
+      g: parseInt(h.substring(2, 4), 16),
+      b: parseInt(h.substring(4, 6), 16),
+    };
+  };
+  
+  const base = parseHex(baseColor);
+  const dim = parseHex(dimColor);
+  
+  const r = Math.round(base.r + (dim.r - base.r) * t);
+  const g = Math.round(base.g + (dim.g - base.g) * t);
+  const b = Math.round(base.b + (dim.b - base.b) * t);
+  
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+export function LimitGauge({ 
+  label, 
+  usedPercent, 
+  color,
+  ghost = false,
+  error,
+  resetTime,
+  compact = false,
+  labelWidth = 12,
+  barWidth = 10,
+  selected = false,
+  warningThreshold = 90,
+  criticalThreshold = 95,
+}: LimitGaugeProps) {
+  const colors = useColors();
+  
+  const percent = usedPercent ?? 0;
+  const isCritical = percent >= criticalThreshold;
+  const isWarning = percent >= warningThreshold && percent < criticalThreshold;
+  
+  // Critical: fast, intense pulse (80ms interval)
+  // Warning: moderate pulse (200ms interval) to draw attention
+  const criticalPulseStep = usePulse({ enabled: isCritical, intervalMs: 80 });
+  const warningPulseStep = usePulse({ enabled: isWarning, intervalMs: 200 });
+  
+  const pulseIntensity = isCritical 
+    ? Math.abs(Math.sin(criticalPulseStep * 0.3)) 
+    : isWarning 
+      ? Math.abs(Math.sin(warningPulseStep * 0.25))
+      : 0;
+  
+  const truncateLabel = (lbl: string, maxLen: number): string => {
+    if (lbl.length <= maxLen) return lbl.padEnd(maxLen);
+    return lbl.slice(0, maxLen - 1) + '…';
+  };
+  
+  if (compact) {
+    const shortLabel = truncateLabel(label, 10);
+    const percentStr = usedPercent !== null ? `${Math.round(percent)}%` : '--';
+    const statusIcon = isCritical ? '!!' : isWarning ? '!' : '';
+    const statusColor = isCritical ? colors.error : isWarning ? color : colors.textMuted;
+    const textColor = isCritical ? colors.error : isWarning ? color : colors.text;
+    
+    return (
+      <text height={1}>
+        {selected && <span fg={colors.primary}>▌</span>}
+        <span fg={selected ? colors.text : textColor}>{shortLabel}</span>
+        <span fg={statusColor}> {percentStr}</span>
+        {statusIcon && <span fg={statusColor}> {statusIcon}</span>}
+      </text>
+    );
+  }
+  
+  if (ghost) {
+    const ghostLabel = truncateLabel(label, labelWidth);
+    return (
+      <box height={1} overflow="hidden">
+        <text height={1}>
+          <span fg={colors.textSubtle}>○ </span>
+          <span fg={colors.textSubtle}>{ghostLabel} </span>
+          <span fg={colors.textSubtle}>{'─'.repeat(barWidth)}</span>
+          <span fg={colors.textSubtle}>  --</span>
+        </text>
+      </box>
+    );
+  }
+  
+  if (error) {
+    const displayLabel = truncateLabel(label, labelWidth);
+    const errorIcon = selected ? '▌' : '✗';
+    return (
+      <box height={1} overflow="hidden" {...(selected ? { backgroundColor: colors.borderMuted } : {})}>
+        <text height={1}>
+          <span fg={selected ? colors.primary : colors.error}>{errorIcon} </span>
+          <span fg={selected ? colors.text : colors.text}>{displayLabel} </span>
+          <span fg={colors.error}>{'─'.repeat(barWidth)}</span>
+          <span fg={colors.error}> ERR</span>
+        </text>
+      </box>
+    );
+  }
+  
+  const barColor = isCritical 
+    ? interpolatePulseColor(pulseIntensity, colors.error, colors.background)
+    : isWarning 
+      ? interpolatePulseColor(pulseIntensity, color, colors.background)
+      : color;
+  
+  const statusIcon = isCritical ? '!!' : isWarning ? '!' : '●';
+  const statusColor = isCritical ? colors.error : isWarning ? color : colors.success;
+  
+  const displayLabel = truncateLabel(label, labelWidth);
+  const percentStr = usedPercent !== null ? `${Math.round(percent)}%`.padStart(4) : '  --';
+  
+  const percentDisplay = isCritical ? (
+    <span fg={colors.background} bg={colors.error}>{percentStr}</span>
+  ) : (
+    <span fg={isWarning ? color : colors.textMuted}>{percentStr}</span>
+  );
+  
+  const resetDisplay = resetTime ? (
+    <span fg={colors.textSubtle}> {resetTime}</span>
+  ) : null;
+  
+  const selectionIndicator = selected ? '▌' : statusIcon;
+  
+  return (
+    <box height={1} overflow="hidden" {...(selected ? { backgroundColor: colors.borderMuted } : {})}>
+      <text height={1}>
+        <span fg={selected ? colors.primary : statusColor}>{selectionIndicator} </span>
+        <span fg={selected ? colors.text : (isCritical ? colors.error : isWarning ? color : colors.textMuted)}>{displayLabel} </span>
+        {renderFractionalBar(percent, barWidth, barColor, colors.border)}
+        {percentDisplay}
+        {resetDisplay}
+      </text>
+    </box>
+  );
+}

package/src/tui/components/ModalBackdrop.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { RGBA } from '@opentui/core';
+
+/** Standardized z-index tiers for overlay layering */
+export const Z_INDEX = {
+  HUD: 10,
+  MODAL: 50,
+  MODAL_HIGH: 100,
+  TOAST: 200,
+} as const;
+
+/** 50% black overlay for modal dimming */
+export const OVERLAY_BG = RGBA.fromValues(0.0, 0.0, 0.0, 0.5);
+
+interface ModalBackdropProps {
+  children: ReactNode;
+  zIndex?: number;
+  onBackdropClick?: () => void;
+}
+
+export function ModalBackdrop({ 
+  children, 
+  zIndex = Z_INDEX.MODAL,
+  onBackdropClick,
+}: ModalBackdropProps) {
+  return (
+    <box
+      position="absolute"
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      zIndex={zIndex}
+      backgroundColor={OVERLAY_BG}
+      {...(onBackdropClick ? { onClick: onBackdropClick } : {})}
+    >
+      {children}
+    </box>
+  );
+}

package/src/tui/components/ProviderAggregateStrip.tsx

@@ -0,0 +1,200 @@
+import { useMemo } from 'react';
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import type { ProviderState } from '../contexts/PluginContext.tsx';
+
+function pad(str: string, len: number): string {
+  return str.length >= len ? str.slice(0, len) : str + ' '.repeat(len - str.length);
+}
+
+function formatCost(val: number): string {
+  if (val >= 1000) return `$${(val / 1000).toFixed(1)}k`;
+  if (val >= 100) return `$${Math.round(val)}`;
+  if (val >= 10) return `$${val.toFixed(1)}`;
+  return `$${val.toFixed(2)}`;
+}
+
+function formatTokens(val: number): string {
+  if (val >= 1_000_000_000) return `${(val / 1_000_000_000).toFixed(1)}B`;
+  if (val >= 1_000_000) return `${(val / 1_000_000).toFixed(1)}M`;
+  if (val >= 1_000) return `${(val / 1_000).toFixed(1)}K`;
+  return String(Math.round(val));
+}
+
+export interface ProviderAggregates {
+  okCount: number;
+  warnCount: number;
+  errCount: number;
+  costToday: number;
+  costTodayEstimated: boolean;
+  costMtd: number;
+  costMtdEstimated: boolean;
+  totalTokens24h: number;
+  tokens24hEstimated: boolean;
+  hottestProvider: string | null;
+  hottestPercent: number;
+  trendVsYesterday: number | null;
+}
+
+export function computeAggregates(providers: ProviderState[]): ProviderAggregates {
+  let okCount = 0;
+  let warnCount = 0;
+  let errCount = 0;
+  let costToday = 0;
+  let costMtd = 0;
+  let costTodayEstimated = false;
+  let costMtdEstimated = false;
+  let totalTokens24h = 0;
+  let tokens24hEstimated = false;
+  let hottestProvider: string | null = null;
+  let hottestPercent = 0;
+
+  for (const p of providers) {
+    if (!p.configured) continue;
+
+    if (p.usage?.error) {
+      errCount++;
+    } else if (p.usage?.limitReached || getMaxUsage(p) >= 80) {
+      warnCount++;
+    } else {
+      okCount++;
+    }
+
+    if (p.usage?.cost) {
+      const cost = p.usage.cost;
+      const todayTotal = cost.actual?.total ?? cost.estimated?.total ?? 0;
+      costToday += todayTotal;
+      costMtd += todayTotal;
+      if (cost.source === 'estimated') {
+        costTodayEstimated = true;
+        costMtdEstimated = true;
+      }
+    }
+
+    if (p.usage?.tokens) {
+      const t = p.usage.tokens;
+      totalTokens24h += t.input + t.output + (t.cacheRead ?? 0) + (t.cacheWrite ?? 0);
+      tokens24hEstimated = true;
+    }
+
+    const maxUsage = getMaxUsage(p);
+    if (maxUsage > hottestPercent) {
+      hottestPercent = maxUsage;
+      hottestProvider = p.plugin.name;
+    }
+  }
+
+  return {
+    okCount,
+    warnCount,
+    errCount,
+    costToday,
+    costTodayEstimated,
+    costMtd,
+    costMtdEstimated,
+    totalTokens24h,
+    tokens24hEstimated,
+    hottestProvider,
+    hottestPercent,
+    trendVsYesterday: null,
+  };
+}
+
+function getMaxUsage(state: ProviderState): number {
+  if (!state.usage?.limits) return 0;
+  const items = state.usage.limits.items ?? [];
+  if (items.length > 0) {
+    return Math.max(...items.map((item) => item.usedPercent ?? 0));
+  }
+  const primary = state.usage.limits.primary?.usedPercent || 0;
+  const secondary = state.usage.limits.secondary?.usedPercent || 0;
+  return Math.max(primary, secondary);
+}
+
+interface ProviderAggregateStripProps {
+  providers: ProviderState[];
+}
+
+export function ProviderAggregateStrip({ providers }: ProviderAggregateStripProps) {
+  const colors = useColors();
+  const { width: termWidth } = useTerminalDimensions();
+  const isCompact = termWidth < 100;
+
+  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;
+
+  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 && agg.warnCount === 0 && agg.errCount === 0 && (
+            <span fg={colors.textSubtle}>no providers</span>
+          )}
+        </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>
+        </text>
+
+        {!isCompact && (
+          <>
+            <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>
+            </text>
+          </>
+        )}
+
+        <text fg={colors.textSubtle} height={1}>│</text>
+
+        <text height={1}>
+          <span fg={colors.textMuted}>TOKENS </span>
+          <span fg={agg.tokens24hEstimated ? colors.textMuted : colors.primary}>{tokensStr}</span>
+        </text>
+      </box>
+
+      <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 fg={colors.textSubtle} height={1}>│</text>
+
+        <text height={1}>
+          <span fg={colors.textMuted}>vs YESTERDAY </span>
+          <span fg={trendColor}>{trendStr}</span>
+        </text>
+      </box>
+
+      <box height={1} overflow="hidden">
+        <text fg={colors.border}>{'─'.repeat(300)}</text>
+      </box>
+    </box>
+  );
+}