303a558432
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface ConfidenceIndicatorProps {
|
|
tier: string
|
|
score: number
|
|
className?: string
|
|
}
|
|
|
|
const TIER_CONFIG = {
|
|
guided: {
|
|
color: 'bg-emerald-400',
|
|
label: 'Proven path',
|
|
description: 'FlowPilot is following a known resolution path with high confidence.',
|
|
},
|
|
exploring: {
|
|
color: 'bg-amber-400',
|
|
label: 'Investigating',
|
|
description: 'FlowPilot is narrowing down the issue based on your responses.',
|
|
},
|
|
discovery: {
|
|
color: 'bg-violet-400',
|
|
label: 'New territory',
|
|
description: 'FlowPilot is exploring this issue — your responses help build the knowledge base.',
|
|
},
|
|
} as const
|
|
|
|
export function ConfidenceIndicator({ tier, score, className }: ConfidenceIndicatorProps) {
|
|
const config = TIER_CONFIG[tier as keyof typeof TIER_CONFIG] ?? TIER_CONFIG.discovery
|
|
|
|
return (
|
|
<div className={cn('group relative inline-flex items-center gap-2', className)}>
|
|
<span className={cn('h-2 w-2 rounded-full', config.color)} />
|
|
<span className="font-sans text-xs text-xs text-muted-foreground">{config.label}</span>
|
|
|
|
{/* Tooltip */}
|
|
<div className="pointer-events-none absolute left-0 top-full z-50 mt-2 w-56 rounded-lg border border-border bg-card p-3 opacity-0 shadow-lg transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
|
|
<p className="text-xs text-muted-foreground">{config.description}</p>
|
|
<p className="mt-1 font-sans text-xs text-[0.625rem] text-text-muted">
|
|
Confidence: {Math.round(score * 100)}%
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|