web/src/components/SourceBadge.tsx

interface SourceBadgeProps {
  source: string
  confidence: number
}

const SOURCE_CONFIG: Record<string, { color: string; bg: string; label: string; icon: string }> = {
  direct:    { color: '#10b981', bg: 'rgba(16,185,129,0.12)',  label: 'Direct Match',   icon: '⚡' },
  chained:   { color: '#7c3aed', bg: 'rgba(124,58,237,0.12)',  label: 'Fact Chained',   icon: '🔗' },
  corrected: { color: '#f59e0b', bg: 'rgba(245,158,11,0.12)',  label: 'Corrected',      icon: '✏️' },
  curiosity: { color: '#06b6d4', bg: 'rgba(6,182,212,0.12)',   label: 'Curiosity',      icon: '🤔' },
  fallback:  { color: '#ef4444', bg: 'rgba(239,68,68,0.12)',   label: 'No Match',       icon: '❓' },
}

export function SourceBadge({ source, confidence }: SourceBadgeProps) {
  const cfg = SOURCE_CONFIG[source] || SOURCE_CONFIG.fallback
  const pct = Math.round(confidence * 100)

  return (
    <div className="flex items-center gap-2 flex-wrap">
      <div
        className="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold"
        style={{ color: cfg.color, background: cfg.bg }}
      >
        <span>{cfg.icon}</span>
        <span>{cfg.label}</span>
      </div>
      <div className="flex items-center gap-1.5">
        <div className="w-20 h-1.5 rounded-full bg-pal-border overflow-hidden">
          <div
            className="h-full rounded-full transition-all duration-700"
            style={{
              width: `${pct}%`,
              background: `linear-gradient(90deg, ${cfg.color}, ${cfg.color}cc)`,
              boxShadow: `0 0 6px ${cfg.color}80`,
            }}
          />
        </div>
        <span className="text-xs text-pal-muted font-mono">{pct}%</span>
      </div>
    </div>
  )
}