@tokentop/ttop 0.2.2

package/src/tui/components/ProviderCard.tsx

@@ -0,0 +1,309 @@
+import { useState, useEffect, useCallback, forwardRef } from 'react';
+import type { BoxRenderable } from '@opentui/core';
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { UsageGauge } from './UsageGauge.tsx';
+import { useSpinner } from './Spinner.tsx';
+import { SkeletonProviderContent } from './Skeleton.tsx';
+import type { ProviderUsageData } from '@/plugins/types/provider.ts';
+
+interface CompactGaugeProps {
+  label: string;
+  usedPercent: number | null;
+  windowMinutes?: number | undefined;
+  resetsAt?: number | undefined;
+  color?: string | undefined;
+}
+
+function CompactGauge({ label, usedPercent, resetsAt, color }: CompactGaugeProps) {
+  const colors = useColors();
+  const providerColor = color ?? colors.primary;
+  const percent = usedPercent ?? 0;
+  
+  const barWidth = 20;
+  const filledWidth = Math.round((percent / 100) * barWidth);
+  const emptyWidth = barWidth - filledWidth;
+  
+  const fillColor = percent >= 90 ? colors.gaugeDanger :
+                    percent >= 70 ? colors.gaugeWarning :
+                    providerColor;
+  
+  const filledBar = '█'.repeat(filledWidth);
+  const emptyBar = '·'.repeat(emptyWidth);
+  
+  const resetText = resetsAt ? formatResetTime(resetsAt) : '';
+  
+  return (
+    <box flexDirection="column">
+      <text fg={providerColor}>{label}</text>
+      <text>
+        <span fg={fillColor}>{filledBar}</span>
+        <span fg={colors.gaugeBackground}>{emptyBar}</span>
+        <span fg={colors.text}> {percent !== null ? `${Math.round(percent)}%` : '--'}</span>
+      </text>
+      {resetText && <text fg={colors.textMuted}>{resetText}</text>}
+    </box>
+  );
+}
+
+interface ProviderCardProps {
+  name: string;
+  configured: boolean;
+  loading: boolean;
+  usage: ProviderUsageData | null;
+  color?: string | undefined;
+  focused?: boolean | undefined;
+  onFocus?: (() => void) | undefined;
+}
+
+export const ProviderCard = forwardRef<BoxRenderable, ProviderCardProps>(({
+  name,
+  configured,
+  loading,
+  usage,
+  color,
+  focused = false,
+  onFocus,
+}, ref) => {
+  const colors = useColors();
+  const { width: termWidth } = useTerminalDimensions();
+  const providerColor = color ?? colors.primary;
+  const spinnerFrame = useSpinner();
+
+  const [pulseStep, setPulseStep] = useState(0);
+
+  const rawItems = usage?.limits?.items;
+  const hasItems = rawItems && rawItems.length > 0;
+  
+  const sortedItems = hasItems 
+    ? [...rawItems].sort((a, b) => (b.usedPercent ?? 0) - (a.usedPercent ?? 0))
+    : [];
+  
+  const maxVisibleGauges = 3;
+  const hiddenGaugeCount = sortedItems.length > maxVisibleGauges ? sortedItems.length - maxVisibleGauges : 0;
+  const visibleItems = sortedItems.length > maxVisibleGauges ? sortedItems.slice(0, maxVisibleGauges) : sortedItems;
+  const useCompactMode = visibleItems.length > 3;
+
+  useEffect(() => {
+    if (!usage?.limitReached) {
+      setPulseStep(0);
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setPulseStep((p) => (p + 1) % 12);
+    }, 150);
+
+    return () => clearInterval(timer);
+  }, [usage?.limitReached]);
+
+  const handleClick = useCallback(() => {
+    if (onFocus) {
+      onFocus();
+    }
+  }, [onFocus]);
+
+  const statusColor = !configured ? colors.textSubtle :
+                      loading ? colors.info :
+                      usage?.error ? colors.error :
+                      usage?.limitReached ? colors.warning :
+                      colors.success;
+
+  const statusIcon = !configured ? '○' :
+                     usage?.error ? '✗' :
+                     usage?.limitReached ? '!' :
+                     '●';
+
+  const isInitialLoad = loading && !usage;
+
+  const getWarningBorderColor = (step: number, baseColor: string): string => {
+    const intensity = Math.sin((step / 12) * Math.PI);
+    const base = hexToRgb(baseColor);
+    const warn = hexToRgb(colors.warning);
+    if (!base || !warn) return baseColor;
+    const r = Math.round(base.r + (warn.r - base.r) * intensity);
+    const g = Math.round(base.g + (warn.g - base.g) * intensity);
+    const b = Math.round(base.b + (warn.b - base.b) * intensity);
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+  };
+
+  const baseBorderColor = focused ? providerColor : colors.border;
+  const borderColor = usage?.limitReached
+    ? getWarningBorderColor(pulseStep, baseBorderColor)
+    : baseBorderColor;
+
+  const numColumns = termWidth >= 160 ? 3 : termWidth >= 100 ? 2 : 1;
+  const cardPadding = 4;
+  const gaps = numColumns - 1;
+  const cardWidth = Math.max(40, Math.min(60, Math.floor((termWidth - cardPadding - gaps) / numColumns)));
+
+  return (
+    <box
+      ref={ref}
+      border
+      borderStyle="rounded"
+      borderColor={borderColor}
+      padding={1}
+      flexDirection="column"
+      gap={1}
+      width={cardWidth}
+      focusable
+      onMouseDown={handleClick}
+    >
+      <box flexDirection="row" justifyContent="space-between" alignItems="center">
+        <text>
+          <span fg={providerColor}>
+            <strong>{name}</strong>
+          </span>
+        </text>
+        <text fg={statusColor}>
+          {configured && loading ? spinnerFrame : statusIcon}
+        </text>
+      </box>
+
+      {!configured && (
+        <text fg={colors.textSubtle}>Not configured</text>
+      )}
+
+      {configured && isInitialLoad && (
+        <SkeletonProviderContent />
+      )}
+
+      {configured && !isInitialLoad && usage?.error && (
+        <text fg={colors.error}>{usage.error}</text>
+      )}
+
+      {configured && !isInitialLoad && usage && !usage.error && (
+        <box flexDirection="column" flexGrow={1} justifyContent="space-between">
+          <box flexDirection="column" gap={1}>
+            {usage.planType && (
+              <text fg={colors.textMuted}>{usage.planType}</text>
+            )}
+
+            {hasItems ? (
+              <>
+                {useCompactMode ? (
+                  visibleItems.map((limit, idx) => (
+                    <CompactGauge
+                      key={idx}
+                      label={limit.label ?? 'Usage'}
+                      usedPercent={limit.usedPercent}
+                      color={providerColor}
+                      {...(limit.windowMinutes ? { windowMinutes: limit.windowMinutes } : {})}
+                      {...(limit.resetsAt ? { resetsAt: limit.resetsAt } : {})}
+                    />
+                  ))
+                ) : (
+                  visibleItems.map((limit, idx) => {
+                    const labelText = limit.label ?? 'Usage';
+                    const labelHasWindow = labelText.toLowerCase().includes('window') || 
+                                           labelText.toLowerCase().includes('hour') ||
+                                           labelText.toLowerCase().includes('day');
+                    return (
+                      <UsageGauge
+                        key={idx}
+                        label={labelText}
+                        usedPercent={limit.usedPercent}
+                        color={providerColor}
+                        {...(limit.windowMinutes && !labelHasWindow ? { windowLabel: formatWindow(limit.windowMinutes) } : {})}
+                        {...(limit.resetsAt ? { resetsAt: limit.resetsAt } : {})}
+                      />
+                    );
+                  })
+                )}
+                {hiddenGaugeCount > 0 && (
+                  <text fg={colors.textSubtle}>+{hiddenGaugeCount} more limit{hiddenGaugeCount > 1 ? 's' : ''}</text>
+                )}
+              </>
+            ) : (
+              <>
+                {usage.limits?.primary && (() => {
+                  const labelText = usage.limits.primary.label ?? 'Usage';
+                  const labelHasWindow = labelText.toLowerCase().includes('window') || 
+                                         labelText.toLowerCase().includes('hour') ||
+                                         labelText.toLowerCase().includes('day');
+                  return (
+                    <UsageGauge
+                      label={labelText}
+                      usedPercent={usage.limits.primary.usedPercent}
+                      color={providerColor}
+                      {...(usage.limits.primary.windowMinutes && !labelHasWindow ? { windowLabel: formatWindow(usage.limits.primary.windowMinutes) } : {})}
+                      {...(usage.limits.primary.resetsAt ? { resetsAt: usage.limits.primary.resetsAt } : {})}
+                    />
+                  );
+                })()}
+
+                {usage.limits?.secondary && (() => {
+                  const labelText = usage.limits.secondary.label ?? 'Secondary';
+                  const labelHasWindow = labelText.toLowerCase().includes('window') || 
+                                         labelText.toLowerCase().includes('hour') ||
+                                         labelText.toLowerCase().includes('day');
+                  return (
+                    <UsageGauge
+                      label={labelText}
+                      usedPercent={usage.limits.secondary.usedPercent}
+                      color={providerColor}
+                      {...(usage.limits.secondary.windowMinutes && !labelHasWindow ? { windowLabel: formatWindow(usage.limits.secondary.windowMinutes) } : {})}
+                      {...(usage.limits.secondary.resetsAt ? { resetsAt: usage.limits.secondary.resetsAt } : {})}
+                    />
+                  );
+                })()}
+              </>
+            )}
+
+            {usage.credits && (
+              <box flexDirection="row" gap={1}>
+                <text fg={colors.textMuted}>Credits:</text>
+                <text fg={usage.credits.unlimited ? colors.success : colors.text}>
+                  {usage.credits.unlimited ? 'Unlimited' : usage.credits.balance ?? 'Unknown'}
+                </text>
+              </box>
+            )}
+          </box>
+        </box>
+      )}
+    </box>
+  );
+});
+ProviderCard.displayName = 'ProviderCard';
+
+function formatWindow(minutes: number): string {
+  if (minutes >= 1440) {
+    const days = Math.round(minutes / 1440);
+    return `${days}-day window`;
+  }
+  if (minutes >= 60) {
+    const hours = Math.round(minutes / 60);
+    return `${hours}-hour window`;
+  }
+  return `${minutes}-minute window`;
+}
+
+function formatResetTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = timestamp - now;
+
+  if (diff <= 0) return 'soon';
+
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return `${days}d ${hours % 24}h`;
+  }
+  if (hours > 0) {
+    return `${hours}h ${minutes % 60}m`;
+  }
+  return `${minutes}m`;
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!match) return null;
+  return {
+    r: parseInt(match[1]!, 16),
+    g: parseInt(match[2]!, 16),
+    b: parseInt(match[3]!, 16),
+  };
+}

package/src/tui/components/ProviderDetailPanel.tsx

@@ -0,0 +1,237 @@
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { UsageGauge } from './UsageGauge.tsx';
+import { Sparkline } from './Sparkline.tsx';
+import type { ProviderState } from '../contexts/PluginContext.tsx';
+import type { UsageLimit } from '@/plugins/types/provider.ts';
+
+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 formatTokenCount(val: number): string {
+  if (val >= 1_000_000) return `${(val / 1_000_000).toFixed(2)}M`;
+  if (val >= 1_000) return `${(val / 1_000).toFixed(1)}K`;
+  return String(Math.round(val));
+}
+
+function formatCost(val: number): string {
+  if (val >= 100) return `$${Math.round(val)}`;
+  if (val >= 1) return `$${val.toFixed(2)}`;
+  return `$${val.toFixed(4)}`;
+}
+
+function formatTimestamp(ts: number): string {
+  const d = new Date(ts);
+  const h = d.getHours().toString().padStart(2, '0');
+  const m = d.getMinutes().toString().padStart(2, '0');
+  const s = d.getSeconds().toString().padStart(2, '0');
+  return `${h}:${m}:${s}`;
+}
+
+function formatWindow(minutes: number): string {
+  if (minutes >= 1440) {
+    const days = Math.round(minutes / 1440);
+    return `${days}d window`;
+  }
+  if (minutes >= 60) {
+    const hours = Math.round(minutes / 60);
+    return `${hours}h window`;
+  }
+  return `${minutes}m window`;
+}
+
+interface ProviderDetailPanelProps {
+  provider: ProviderState;
+}
+
+export function ProviderDetailPanel({ provider }: ProviderDetailPanelProps) {
+  const colors = useColors();
+  const usage = provider.usage;
+  const providerColor = provider.plugin.meta?.brandColor ?? colors.primary;
+
+  if (!usage) {
+    return (
+      <box border borderColor={colors.border} borderStyle="rounded" padding={1} flexShrink={0}>
+        <text fg={colors.textMuted}>No usage data available</text>
+      </box>
+    );
+  }
+
+  const allLimits: UsageLimit[] = [];
+  if (usage.limits?.items && usage.limits.items.length > 0) {
+    allLimits.push(...usage.limits.items);
+  } else {
+    if (usage.limits?.primary) allLimits.push(usage.limits.primary);
+    if (usage.limits?.secondary) allLimits.push(usage.limits.secondary);
+  }
+
+  const historyValues = provider.history.map(s => s.usedPercent ?? 0);
+  const peak = historyValues.length > 0 ? Math.max(...historyValues) : 0;
+  const avg = historyValues.length > 0
+    ? historyValues.reduce((a, b) => a + b, 0) / historyValues.length
+    : 0;
+
+  const tokens = usage.tokens;
+  const cost = usage.cost;
+  const credits = usage.credits;
+  const lastRefreshed = usage.fetchedAt;
+
+  return (
+    <box
+      border
+      borderColor={providerColor}
+      borderStyle="rounded"
+      flexDirection="column"
+      paddingX={1}
+      gap={0}
+      flexShrink={0}
+    >
+      <box flexDirection="row" justifyContent="space-between" height={1}>
+        <text fg={providerColor} height={1}>
+          <strong>{provider.plugin.name}</strong>
+          {usage.planType ? ` · ${usage.planType}` : ''}
+        </text>
+        <text fg={colors.textMuted} height={1}>
+          {`Last: ${formatTimestamp(lastRefreshed)}`}
+        </text>
+      </box>
+
+      <box flexDirection="row" gap={2} paddingTop={1}>
+        <box flexDirection="column" flexGrow={1} gap={1}>
+          {allLimits.length > 0 && (
+            <box flexDirection="column" gap={1}>
+              {allLimits.map((limit, idx) => {
+                const label = limit.label ?? 'Usage';
+                const windowStr = limit.windowMinutes ? formatWindow(limit.windowMinutes) : undefined;
+                const labelHasWindow = label.toLowerCase().includes('window') ||
+                  label.toLowerCase().includes('hour') ||
+                  label.toLowerCase().includes('day');
+                return (
+                  <box key={idx} flexDirection="column">
+                    <UsageGauge
+                      label={label}
+                      usedPercent={limit.usedPercent}
+                      color={providerColor}
+                      width={40}
+                      {...(windowStr && !labelHasWindow ? { windowLabel: windowStr } : {})}
+                      {...(limit.resetsAt ? { resetsAt: limit.resetsAt } : {})}
+                    />
+                  </box>
+                );
+              })}
+            </box>
+          )}
+
+          {tokens && (
+            <box flexDirection="column">
+              <text fg={colors.textMuted} height={1}>TOKEN BREAKDOWN</text>
+              <box flexDirection="column">
+                <text height={1}>
+                  <span fg={colors.textMuted}>{pad('Input:', 14)}</span>
+                  <span fg={colors.text}>{padStart(formatTokenCount(tokens.input), 10)}</span>
+                </text>
+                <text height={1}>
+                  <span fg={colors.textMuted}>{pad('Output:', 14)}</span>
+                  <span fg={colors.text}>{padStart(formatTokenCount(tokens.output), 10)}</span>
+                </text>
+                {tokens.cacheRead !== undefined && tokens.cacheRead > 0 && (
+                  <text height={1}>
+                    <span fg={colors.textMuted}>{pad('Cache Read:', 14)}</span>
+                    <span fg={colors.text}>{padStart(formatTokenCount(tokens.cacheRead), 10)}</span>
+                  </text>
+                )}
+                {tokens.cacheWrite !== undefined && tokens.cacheWrite > 0 && (
+                  <text height={1}>
+                    <span fg={colors.textMuted}>{pad('Cache Write:', 14)}</span>
+                    <span fg={colors.text}>{padStart(formatTokenCount(tokens.cacheWrite), 10)}</span>
+                  </text>
+                )}
+              </box>
+            </box>
+          )}
+        </box>
+
+        <box flexDirection="column" flexGrow={1} gap={1}>
+          {cost && (
+            <box flexDirection="column">
+              <text fg={colors.textMuted} height={1}>COST BREAKDOWN</text>
+              {cost.actual && (
+                <box flexDirection="column">
+                  <text height={1}>
+                    <span fg={colors.textMuted}>{pad('Total:', 14)}</span>
+                    <span fg={colors.success}>{padStart(formatCost(cost.actual.total), 10)}</span>
+                  </text>
+                  {cost.actual.input !== undefined && (
+                    <text height={1}>
+                      <span fg={colors.textMuted}>{pad('Input:', 14)}</span>
+                      <span fg={colors.text}>{padStart(formatCost(cost.actual.input), 10)}</span>
+                    </text>
+                  )}
+                  {cost.actual.output !== undefined && (
+                    <text height={1}>
+                      <span fg={colors.textMuted}>{pad('Output:', 14)}</span>
+                      <span fg={colors.text}>{padStart(formatCost(cost.actual.output), 10)}</span>
+                    </text>
+                  )}
+                </box>
+              )}
+              {!cost.actual && cost.estimated && (
+                <box flexDirection="column">
+                  <text height={1}>
+                    <span fg={colors.textMuted}>{pad('Total:', 14)}</span>
+                    <span fg={colors.textMuted}>{padStart(`~${formatCost(cost.estimated.total)}`, 10)}</span>
+                  </text>
+                  {cost.estimated.input !== undefined && (
+                    <text height={1}>
+                      <span fg={colors.textMuted}>{pad('Input:', 14)}</span>
+                      <span fg={colors.textMuted}>{padStart(`~${formatCost(cost.estimated.input)}`, 10)}</span>
+                    </text>
+                  )}
+                  {cost.estimated.output !== undefined && (
+                    <text height={1}>
+                      <span fg={colors.textMuted}>{pad('Output:', 14)}</span>
+                      <span fg={colors.textMuted}>{padStart(`~${formatCost(cost.estimated.output)}`, 10)}</span>
+                    </text>
+                  )}
+                </box>
+              )}
+            </box>
+          )}
+
+          {credits && (
+            <box flexDirection="row" gap={1} height={1}>
+              <text fg={colors.textMuted} height={1}>Credits:</text>
+              <text fg={credits.unlimited ? colors.success : colors.text} height={1}>
+                {credits.unlimited ? 'Unlimited' : credits.balance ?? '—'}
+              </text>
+            </box>
+          )}
+        </box>
+      </box>
+
+      {historyValues.length >= 2 && (
+        <box flexDirection="column" paddingTop={1}>
+          <box flexDirection="row" justifyContent="space-between" height={1}>
+            <text fg={colors.textMuted} height={1}>USAGE TREND</text>
+            <text fg={colors.textSubtle} height={1}>
+              {`peak:${Math.round(peak)}%  avg:${Math.round(avg)}%`}
+            </text>
+          </box>
+          <Sparkline
+            data={historyValues}
+            width={30}
+            fixedMax={100}
+            thresholds={{ warning: 70, error: 90 }}
+            style="braille"
+            orientation="up"
+            showBaseline={true}
+          />
+        </box>
+      )}
+    </box>
+  );
+}