spb/claude-remote

1import { cn } from '@/lib/cn';2import { DASH } from '@/lib/format';34/** Compact bar with the exact numbers beside it. A null value renders "—" and an empty track. */5export function MetricBar({ label, fraction, value, className }: { label: string; fraction: number | null; value: string; className?: string }) {6  const pct = fraction == null || !Number.isFinite(fraction) ? null : Math.max(0, Math.min(1, fraction));7  const tone = pct == null ? 'bg-faint' : pct > 0.9 ? 'bg-error-vivid' : pct > 0.75 ? 'bg-warning-vivid' : 'bg-accent';8  return (9    <div className={cn('flex flex-col gap-1', className)}>10      <div className="flex items-baseline justify-between gap-3 text-xs">11        <span className="text-text-2">{label}</span>12        <span className="tnum text-text">{pct == null && !value ? DASH : value}</span>13      </div>14      <div className="h-1.5 overflow-hidden rounded-full bg-surface-2" role="meter" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct == null ? undefined : Math.round(pct * 100)} aria-valuetext={value}>15        {pct != null && <div className={cn('h-full rounded-full', tone)} style={{ width: `${pct * 100}%` }} />}16      </div>17    </div>18  );19}20