@tokentop/ttop 0.2.2

package/src/tui/components/ProviderLimitsPanel.tsx

@@ -0,0 +1,308 @@
+import { useMemo } from 'react';
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { useConfig } from '../contexts/ConfigContext.tsx';
+import { LimitGauge } from './LimitGauge.tsx';
+import { usePulse } from '../hooks/usePulse.ts';
+
+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')}`;
+}
+
+interface ProviderData {
+  id: string;
+  name: string;
+  usedPercent: number;
+  color: string;
+  error?: string;
+  resetTime?: string;
+  used?: number;
+  limit?: number;
+  limitType?: string;
+}
+
+interface BudgetData {
+  totalCost: number;
+  budgetCost: number;
+  limit: number | null;
+  budgetType: 'daily' | 'weekly' | 'monthly' | 'none';
+  budgetTypeLabel: string;
+  warningPercent: number;
+  criticalPercent: number;
+}
+
+interface ProviderLimitsPanelProps {
+  providers: ProviderData[];
+  focused?: boolean;
+  selectedIndex?: number;
+  budget?: BudgetData;
+  showBudgetBar?: boolean;
+}
+
+type LayoutMode = 'hidden' | 'compact' | 'normal' | 'wide';
+
+function getLayoutMode(width: number, height: number): LayoutMode {
+  if (height < 24) return 'hidden';
+  if (height < 30) return 'compact';
+  if (width >= 140) return 'wide';
+  return 'normal';
+}
+
+function sortByUrgency(
+  providers: ProviderData[], 
+  warningThreshold: number, 
+  criticalThreshold: number
+): ProviderData[] {
+  return [...providers].sort((a, b) => {
+    const aIsCritical = a.usedPercent >= criticalThreshold;
+    const bIsCritical = b.usedPercent >= criticalThreshold;
+    const aIsWarning = a.usedPercent >= warningThreshold;
+    const bIsWarning = b.usedPercent >= warningThreshold;
+    
+    if (aIsCritical && !bIsCritical) return -1;
+    if (!aIsCritical && bIsCritical) return 1;
+    if (aIsWarning && !bIsWarning) return -1;
+    if (!aIsWarning && bIsWarning) return 1;
+    
+    return b.usedPercent - a.usedPercent;
+  });
+}
+
+function formatCurrency(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 makeProgressBar(percent: number, width: number): string {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filledWidth = Math.round((clamped / 100) * width);
+  return '█'.repeat(filledWidth) + '·'.repeat(width - filledWidth);
+}
+
+export function ProviderLimitsPanel({ 
+  providers, 
+  focused = false, 
+  selectedIndex = 0,
+  budget,
+  showBudgetBar = false,
+}: ProviderLimitsPanelProps) {
+  const colors = useColors();
+  const { config } = useConfig();
+  const { width: termWidth, height: termHeight } = useTerminalDimensions();
+  
+  const warningThreshold = config.alerts.warningPercent;
+  const criticalThreshold = config.alerts.criticalPercent;
+  
+  const hasBudgetLimit = !!(budget?.limit && budget.budgetType !== 'none');
+  const budgetPercent = hasBudgetLimit && budget?.limit ? (budget.budgetCost / budget.limit) * 100 : 0;
+  const isBudgetCritical = hasBudgetLimit && budget && budgetPercent >= budget.criticalPercent;
+  const isBudgetWarning = hasBudgetLimit && budget && budgetPercent >= budget.warningPercent && !isBudgetCritical;
+  
+  const criticalPulseStep = usePulse({ enabled: !!isBudgetCritical, intervalMs: 80 });
+  const warningPulseStep = usePulse({ enabled: !!isBudgetWarning, intervalMs: 200 });
+  
+  const pulseIntensity = isBudgetCritical 
+    ? Math.abs(Math.sin(criticalPulseStep * 0.3)) 
+    : isBudgetWarning 
+      ? Math.abs(Math.sin(warningPulseStep * 0.25))
+      : 0;
+  
+  const getBudgetColor = () => {
+    if (!budget?.limit) return colors.textMuted;
+    if (isBudgetCritical) {
+      return interpolatePulseColor(pulseIntensity, colors.error, colors.background);
+    }
+    if (isBudgetWarning) {
+      return interpolatePulseColor(pulseIntensity, colors.warning, colors.background);
+    }
+    return colors.success;
+  };
+  
+  const budgetColor = getBudgetColor();
+  
+  const layoutMode = getLayoutMode(termWidth, termHeight);
+  const sortedProviders = useMemo(
+    () => sortByUrgency(providers, warningThreshold, criticalThreshold), 
+    [providers, warningThreshold, criticalThreshold]
+  );
+  
+  if (layoutMode === 'hidden' || sortedProviders.length === 0) {
+    return null;
+  }
+  
+  const safeSelectedIndex = Math.min(selectedIndex, sortedProviders.length - 1);
+  
+  if (layoutMode === 'compact') {
+    const baseMaxShow = 4;
+    const hasMore = sortedProviders.length > baseMaxShow;
+    const maxShow = hasMore ? baseMaxShow - 1 : baseMaxShow;
+    const startIndex = Math.max(0, Math.min(safeSelectedIndex - maxShow + 1, sortedProviders.length - maxShow));
+    const showLeftArrow = hasMore && startIndex > 0;
+    const showRightArrow = hasMore && startIndex + maxShow < sortedProviders.length;
+    const shown = sortedProviders.slice(startIndex, startIndex + maxShow);
+    const remaining = sortedProviders.length - startIndex - maxShow;
+    
+    return (
+      <box flexDirection="column" height={showBudgetBar && budget ? 2 : 1} overflow="hidden">
+           <box flexDirection="row" height={1} paddingX={1} gap={1} overflow="hidden">
+          <text fg={colors.textMuted} height={1}>LIMITS:</text>
+          {showLeftArrow && (
+            <text fg={colors.primary} height={1}>◀</text>
+          )}
+          {shown.map((p, idx) => (
+            <LimitGauge
+              key={p.id}
+              label={p.name}
+              usedPercent={p.usedPercent}
+              color={p.color}
+              {...(p.error ? { error: p.error } : {})}
+              compact={true}
+              selected={focused && (startIndex + idx) === safeSelectedIndex}
+              warningThreshold={warningThreshold}
+              criticalThreshold={criticalThreshold}
+            />
+          ))}
+          {showRightArrow && (
+            <text fg={colors.primary} height={1}>▶ +{remaining}</text>
+          )}
+        </box>
+        {showBudgetBar && budget && (
+          <box flexDirection="row" height={1} paddingX={1} gap={1} overflow="hidden">
+            <text fg={colors.textMuted} height={1}>{budget.budgetType === 'none' ? 'TOTAL:' : `${budget.budgetTypeLabel.toUpperCase()}:`}</text>
+            {hasBudgetLimit ? (
+              <>
+                <text fg={budgetColor} height={1}>{makeProgressBar(budgetPercent, 12)}</text>
+                <text fg={budgetColor} height={1}>{Math.round(budgetPercent)}%</text>
+                <text fg={colors.text} height={1}>{formatCurrency(budget.budgetCost)}</text>
+                <text fg={colors.textMuted} height={1}>/{formatCurrency(budget.limit!)}</text>
+              </>
+            ) : (
+              <text fg={colors.text} height={1}>{formatCurrency(budget.totalCost)}</text>
+            )}
+          </box>
+        )}
+      </box>
+    );
+  }
+  
+  if (layoutMode === 'wide') {
+    const baseMaxShow = 5;
+    const hasMore = sortedProviders.length > baseMaxShow;
+    const maxShow = hasMore ? baseMaxShow - 1 : baseMaxShow;
+    const startIndex = Math.max(0, Math.min(safeSelectedIndex - maxShow + 1, sortedProviders.length - maxShow));
+    const showLeftArrow = hasMore && startIndex > 0;
+    const showRightArrow = hasMore && startIndex + maxShow < sortedProviders.length;
+    const shown = sortedProviders.slice(startIndex, startIndex + maxShow);
+    
+    return (
+      <box 
+        flexDirection="column" 
+        border 
+        borderStyle={focused ? 'double' : 'single'}
+        borderColor={focused ? colors.primary : colors.border} 
+        overflow="hidden" 
+        height={4} 
+        flexShrink={0}
+      >
+        <box flexDirection="row" paddingLeft={2} height={1}>
+          <text fg={colors.textMuted} height={1}>
+            PROVIDER LIMITS {focused ? '(←→ navigate, Tab exit)' : ''}
+          </text>
+        </box>
+        <box flexDirection="row" gap={3} overflow="hidden" height={1} paddingLeft={2}>
+          {showLeftArrow && (
+            <text fg={colors.primary} height={1}>◀</text>
+          )}
+          {shown.map((p, idx) => (
+            <LimitGauge
+              key={p.id}
+              label={p.name}
+              usedPercent={p.usedPercent}
+              color={p.color}
+              {...(p.error ? { error: p.error } : {})}
+              {...(p.resetTime ? { resetTime: p.resetTime } : {})}
+              labelWidth={14}
+              barWidth={12}
+              selected={focused && (startIndex + idx) === safeSelectedIndex}
+              warningThreshold={warningThreshold}
+              criticalThreshold={criticalThreshold}
+            />
+          ))}
+          {showRightArrow && (
+            <text fg={colors.primary} height={1}>▶</text>
+          )}
+        </box>
+      </box>
+    );
+  }
+  
+  const baseMaxShow = 4;
+  const hasMore = sortedProviders.length > baseMaxShow;
+  const maxShow = hasMore ? baseMaxShow - 1 : baseMaxShow;
+  const startIndex = Math.max(0, Math.min(safeSelectedIndex - maxShow + 1, sortedProviders.length - maxShow));
+  const showLeftArrow = hasMore && startIndex > 0;
+  const showRightArrow = hasMore && startIndex + maxShow < sortedProviders.length;
+  const shown = sortedProviders.slice(startIndex, startIndex + maxShow);
+  
+  return (
+    <box 
+      flexDirection="column" 
+      border 
+      borderStyle={focused ? 'double' : 'single'}
+      borderColor={focused ? colors.primary : colors.border} 
+      overflow="hidden" 
+      height={4} 
+      flexShrink={0}
+    >
+      <box flexDirection="row" paddingLeft={2} height={1}>
+        <text fg={colors.textMuted} height={1}>
+          PROVIDER LIMITS {focused ? '(←→ navigate, Tab exit)' : ''}
+        </text>
+      </box>
+      <box flexDirection="row" gap={2} overflow="hidden" height={1} paddingLeft={2}>
+        {showLeftArrow && (
+          <text fg={colors.primary} height={1}>◀</text>
+        )}
+        {shown.map((p, idx) => (
+          <LimitGauge
+            key={p.id}
+            label={p.name}
+            usedPercent={p.usedPercent}
+            color={p.color}
+            {...(p.error ? { error: p.error } : {})}
+            {...(p.resetTime ? { resetTime: p.resetTime } : {})}
+            labelWidth={12}
+            barWidth={10}
+            selected={focused && (startIndex + idx) === safeSelectedIndex}
+            warningThreshold={warningThreshold}
+            criticalThreshold={criticalThreshold}
+          />
+        ))}
+        {showRightArrow && (
+          <text fg={colors.primary} height={1}>▶</text>
+        )}
+      </box>
+    </box>
+  );
+}

package/src/tui/components/ProvidersList.tsx

@@ -0,0 +1,380 @@
+import { useMemo } from 'react';
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import type { ProviderState } from '../contexts/PluginContext.tsx';
+import { InlineGauge } from './InlineGauge.tsx';
+import { InlineSparkline } from './InlineSparkline.tsx';
+import { ProviderDetailPanel } from './ProviderDetailPanel.tsx';
+
+type FieldState = 'actual' | 'estimated' | 'unavailable';
+
+interface FieldValue {
+  text: string;
+  state: FieldState;
+}
+
+function pad(str: string, len: number): string {
+  return str.length >= len ? str.slice(0, len) : str + ' '.repeat(len - str.length);
+}
+
+function padStart(str: string, len: number): string {
+  return str.length >= len ? str.slice(0, len) : ' '.repeat(len - str.length) + str;
+}
+
+function formatTokens(val: number | undefined | null): FieldValue {
+  if (val === undefined || val === null) return { text: '—', state: 'unavailable' };
+  const formatted = val >= 1_000_000 ? `${(val / 1_000_000).toFixed(1)}M` :
+                    val >= 1_000 ? `${(val / 1_000).toFixed(1)}K` :
+                    String(Math.round(val));
+  return { text: formatted, state: 'actual' };
+}
+
+type StatusGroup = 'error' | 'warn' | 'ok';
+
+function getStatusInfo(state: ProviderState, colors: ReturnType<typeof useColors>): {
+  icon: string;
+  color: string;
+  group: StatusGroup;
+} {
+  if (state.usage?.error) {
+    return { icon: '✗', color: colors.error, group: 'error' };
+  }
+  if (state.usage?.limitReached) {
+    return { icon: '⚠', color: colors.warning, group: 'warn' };
+  }
+  const maxUsage = getMaxUsage(state);
+  if (maxUsage >= 80) {
+    return { icon: '!', color: colors.warning, group: 'warn' };
+  }
+  if (state.loading) {
+    return { icon: '◌', color: colors.info, group: 'ok' };
+  }
+  return { icon: '●', color: colors.success, group: 'ok' };
+}
+
+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);
+}
+
+function getNextReset(state: ProviderState): string {
+  if (!state.usage?.limits) return '—';
+
+  const items = state.usage.limits.items ?? [];
+  let resetsAt: Date | null = null;
+
+  if (items.length > 0) {
+    const withReset = items.filter(i => i.resetsAt);
+    if (withReset.length > 0) {
+      resetsAt = new Date(Math.min(...withReset.map(i => new Date(i.resetsAt!).getTime())));
+    }
+  } else if (state.usage.limits.primary?.resetsAt) {
+    resetsAt = new Date(state.usage.limits.primary.resetsAt);
+  }
+
+  if (!resetsAt) return '—';
+
+  const now = Date.now();
+  const diff = resetsAt.getTime() - now;
+  if (diff <= 0) return 'now';
+
+  const hours = Math.floor(diff / (1000 * 60 * 60));
+  const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+  if (hours >= 24) {
+    const days = Math.floor(hours / 24);
+    return `${days}d ${hours % 24}h`;
+  }
+  return `${hours}h ${mins}m`;
+}
+
+function getCostToday(state: ProviderState): FieldValue {
+  if (!state.usage?.cost) return { text: '—', state: 'unavailable' };
+  const cost = state.usage.cost;
+  if (cost.actual) {
+    return { text: `$${cost.actual.total.toFixed(2)}`, state: 'actual' };
+  }
+  if (cost.estimated) {
+    return { text: `~$${cost.estimated.total.toFixed(2)}`, state: 'estimated' };
+  }
+  return { text: '—', state: 'unavailable' };
+}
+
+function getCostMtd(state: ProviderState): FieldValue {
+  if (!state.usage?.cost) return { text: '—', state: 'unavailable' };
+  const cost = state.usage.cost;
+  if (cost.actual) {
+    return { text: `$${cost.actual.total.toFixed(2)}`, state: 'actual' };
+  }
+  if (cost.estimated) {
+    return { text: `~$${cost.estimated.total.toFixed(2)}`, state: 'estimated' };
+  }
+  return { text: '—', state: 'unavailable' };
+}
+
+function getTotalTokens(state: ProviderState): FieldValue {
+  if (!state.usage?.tokens) return { text: '—', state: 'unavailable' };
+  const t = state.usage.tokens;
+  const total = t.input + t.output + (t.cacheRead ?? 0) + (t.cacheWrite ?? 0);
+  return formatTokens(total);
+}
+
+/** Responsive layout tiers based on terminal width */
+interface LayoutTier {
+  nameWidth: number;
+  planWidth: number;
+  gaugeWidth: number;
+  showPlan: boolean;
+  showToday: boolean;
+  showMtd: boolean;
+  showTokens: boolean;
+  showReset: boolean;
+  showTrend: boolean;
+  sparkWidth: number;
+}
+
+function getLayoutTier(termWidth: number): LayoutTier {
+  if (termWidth >= 140) {
+    return {
+      nameWidth: 20, planWidth: 18, gaugeWidth: 28,
+      showPlan: true, showToday: true, showMtd: true,
+      showTokens: true, showReset: true, showTrend: true, sparkWidth: 12,
+    };
+  }
+  if (termWidth >= 120) {
+    return {
+      nameWidth: 18, planWidth: 16, gaugeWidth: 24,
+      showPlan: true, showToday: true, showMtd: true,
+      showTokens: true, showReset: true, showTrend: true, sparkWidth: 10,
+    };
+  }
+  if (termWidth >= 100) {
+    return {
+      nameWidth: 16, planWidth: 12, gaugeWidth: 20,
+      showPlan: true, showToday: true, showMtd: true,
+      showTokens: true, showReset: true, showTrend: true, sparkWidth: 8,
+    };
+  }
+  if (termWidth >= 80) {
+    return {
+      nameWidth: 14, planWidth: 10, gaugeWidth: 18,
+      showPlan: true, showToday: true, showMtd: false,
+      showTokens: false, showReset: true, showTrend: false, sparkWidth: 0,
+    };
+  }
+  return {
+    nameWidth: 12, planWidth: 0, gaugeWidth: 14,
+    showPlan: false, showToday: true, showMtd: false,
+    showTokens: false, showReset: false, showTrend: false, sparkWidth: 0,
+  };
+}
+
+interface GroupedProvider {
+  state: ProviderState;
+  status: ReturnType<typeof getStatusInfo>;
+  originalIndex: number;
+}
+
+export interface ProvidersListProps {
+  providers: ProviderState[];
+  selectedIndex: number | null;
+  onSelect: (index: number) => void;
+  expandedIndex: number | null;
+}
+
+export function ProvidersList({ providers, selectedIndex, onSelect, expandedIndex }: ProvidersListProps) {
+  const colors = useColors();
+  const { width: termWidth } = useTerminalDimensions();
+
+  const layout = getLayoutTier(termWidth);
+  const {
+    nameWidth, planWidth, gaugeWidth, sparkWidth,
+    showPlan, showToday, showMtd, showTokens, showReset, showTrend,
+  } = layout;
+
+  const grouped = useMemo(() => {
+    const groups: Record<StatusGroup, GroupedProvider[]> = { error: [], warn: [], ok: [] };
+
+    providers.forEach((state, idx) => {
+      const status = getStatusInfo(state, colors);
+      groups[status.group].push({ state, status, originalIndex: idx });
+    });
+
+    return groups;
+  }, [providers, colors]);
+
+  const groupOrder: StatusGroup[] = ['error', 'warn', 'ok'];
+
+  const fieldColor = (fv: FieldValue): string => {
+    if (fv.state === 'estimated') return colors.textMuted;
+    if (fv.state === 'unavailable') return colors.textSubtle;
+    return colors.text;
+  };
+
+  const selBg = colors.selection;
+
+  const renderRow = (item: GroupedProvider) => {
+    const { state, status, originalIndex } = item;
+    const isSelected = originalIndex === selectedIndex;
+    const providerColor = state.plugin.meta?.brandColor ?? colors.primary;
+    const costToday = getCostToday(state);
+    const costMtd = getCostMtd(state);
+    const tokens = getTotalTokens(state);
+    const maxUsage = getMaxUsage(state);
+    const plan = state.usage?.planType ?? '—';
+    const reset = getNextReset(state);
+
+    const rowBg = isSelected ? selBg : undefined;
+    const bgProp = rowBg ? { bg: rowBg } : {};
+    const railChar = isSelected ? '▌' : ' ';
+
+    return (
+      <box
+        key={state.plugin.id}
+        flexDirection="row"
+        height={1}
+        flexGrow={1}
+        focusable
+        onMouseDown={() => onSelect(originalIndex)}
+        {...(rowBg ? { backgroundColor: rowBg } : {})}
+      >
+        <text width={2} fg={isSelected ? colors.primary : colors.textSubtle} height={1} {...bgProp}>
+          {railChar + ' '}
+        </text>
+        <text width={3} fg={status.color} height={1} {...bgProp}>
+          {pad(`${status.icon} `, 3)}
+        </text>
+        <text width={nameWidth} fg={providerColor} height={1} {...bgProp}>
+          {pad(state.plugin.name, nameWidth)}
+        </text>
+        {showPlan && (
+          <text width={planWidth} fg={colors.textMuted} height={1} {...bgProp}>
+            {pad(plan, planWidth)}
+          </text>
+        )}
+        <box width={gaugeWidth + 5} flexDirection="row" height={1}>
+          {isSelected ? (
+            <text width={gaugeWidth + 5} fg={colors.text} height={1} {...bgProp}>
+              {pad(
+                '█'.repeat(Math.round((maxUsage / 100) * gaugeWidth)) +
+                '·'.repeat(gaugeWidth - Math.round((maxUsage / 100) * gaugeWidth)) +
+                ' ' + (maxUsage > 0 ? `${Math.round(maxUsage)}%` : '—'),
+                gaugeWidth + 5,
+              )}
+            </text>
+          ) : (
+            <>
+              <InlineGauge percent={maxUsage > 0 ? maxUsage : null} width={gaugeWidth} color={providerColor} />
+              <text width={5} fg={maxUsage >= 80 ? colors.warning : colors.text} height={1}>
+                {padStart(maxUsage > 0 ? `${Math.round(maxUsage)}%` : '—', 5)}
+              </text>
+            </>
+          )}
+        </box>
+        {showToday && (
+          <text width={9} fg={fieldColor(costToday)} height={1} {...bgProp}>
+            {padStart(costToday.text, 9)}
+          </text>
+        )}
+        {showMtd && (
+          <text width={9} fg={fieldColor(costMtd)} height={1} {...bgProp}>
+            {padStart(costMtd.text, 9)}
+          </text>
+        )}
+        {showTokens && (
+          <text width={8} fg={fieldColor(tokens)} height={1} {...bgProp}>
+            {padStart(tokens.text, 8)}
+          </text>
+        )}
+        {showReset && (
+          <text width={9} fg={colors.textMuted} height={1} {...bgProp}>
+            {padStart(reset, 9)}
+          </text>
+        )}
+        {showTrend && (
+          <box width={sparkWidth + 1} height={1} overflow="hidden">
+            {isSelected ? (
+              <text width={sparkWidth + 1} fg={colors.textMuted} height={1} {...bgProp}>
+                {' ' + '⣀'.repeat(sparkWidth)}
+              </text>
+            ) : (
+              <>
+                <text width={1} height={1}>{' '}</text>
+                <InlineSparkline history={state.history} width={sparkWidth} />
+              </>
+            )}
+          </box>
+        )}
+      </box>
+    );
+  };
+
+  const renderSeparator = (label: string) => (
+    <box height={1} paddingX={1} key={`sep-${label}`}>
+      <text fg={colors.textSubtle} height={1}>
+        {'─'.repeat(3)} {label} {'─'.repeat(Math.max(0, termWidth - label.length - 10))}
+      </text>
+    </box>
+  );
+
+  const renderHeader = () => (
+    <box flexDirection="row" height={1}>
+      <text width={2} fg={colors.textMuted} height={1}>{pad('', 2)}</text>
+      <text width={3} fg={colors.textMuted} height={1}>{pad('', 3)}</text>
+      <text width={nameWidth} fg={colors.textMuted} height={1}>{pad('PROVIDER', nameWidth)}</text>
+      {showPlan && <text width={planWidth} fg={colors.textMuted} height={1}>{pad('PLAN', planWidth)}</text>}
+      <text width={gaugeWidth + 5} fg={colors.textMuted} height={1}>{pad('HEADROOM', gaugeWidth + 5)}</text>
+      {showToday && <text width={9} fg={colors.textMuted} height={1}>{padStart('$TODAY', 9)}</text>}
+      {showMtd && <text width={9} fg={colors.textMuted} height={1}>{padStart('$MTD', 9)}</text>}
+      {showTokens && <text width={8} fg={colors.textMuted} height={1}>{padStart('TOKENS', 8)}</text>}
+      {showReset && <text width={9} fg={colors.textMuted} height={1}>{padStart('RESET', 9)}</text>}
+      {showTrend && <text width={sparkWidth + 1} fg={colors.textMuted} height={1}>{' ' + pad('TREND', sparkWidth)}</text>}
+    </box>
+  );
+
+  const rows: JSX.Element[] = [];
+  let isFirst = true;
+
+  for (const group of groupOrder) {
+    const items = grouped[group];
+    if (items.length === 0) continue;
+
+    if (!isFirst) {
+      const label = group === 'error' ? 'ERRORS' : group === 'warn' ? 'WARNINGS' : 'OK';
+      rows.push(renderSeparator(label));
+    } else if (group !== 'ok' && items.length > 0) {
+      const label = group === 'error' ? 'ERRORS' : 'WARNINGS';
+      rows.push(renderSeparator(label));
+    }
+
+    for (const item of items) {
+      rows.push(renderRow(item));
+      if (expandedIndex !== null && item.originalIndex === expandedIndex) {
+        rows.push(
+          <box key={`detail-${item.state.plugin.id}`} paddingX={1}>
+            <ProviderDetailPanel provider={item.state} />
+          </box>
+        );
+      }
+    }
+
+    isFirst = false;
+  }
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      {renderHeader()}
+      <scrollbox flexGrow={1}>
+        <box flexDirection="column">
+          {rows}
+        </box>
+      </scrollbox>
+    </box>
+  );
+}