[frontend] AuditPanel — render knowability class as a colored badge

[gapilongo]

Problem

frontend/src/components/chat/AuditPanel.tsx currently surfaces the knowability class as a raw string. Operators can't visually distinguish between a verifiable_fact answer (trust the tool output) and an unverifiable_prediction answer (verify before acting) at a glance.

The 4 knowability classes are meaningfully different in the stance operators should take. They should be visually distinct.

Acceptance criteria

• Build a <KnowabilityBadge> component in frontend/src/components/chat/ with semantic color tokens:
  • verifiable_fact → green (tool-grounded, trust)
  • time_decaying_documented → blue (cited, check freshness)
  • pure_reasoning → amber (operator judgment, may decline to rank)
  • unverifiable_prediction → red (must hedge, verify independently)
  • unknown / missing → gray
• Use Tailwind's dark: variants so it works in dark mode (once dark mode lands — track in separate issue)
• Tooltip on hover explaining what the class means + how to interpret
• ARIA: role="status" + aria-label matching the tooltip text
• Replace the raw-string render in AuditPanel.tsx with the new badge
• Add a Storybook-style demo or a screenshot in the PR

Constraints

• Use existing project Tailwind config; no new dependencies
• Color choices should be accessible (contrast ratio AA on both light + dark)
• Don't hardcode the class list — drive from a KNOWABILITY_CLASSES const so adding a 5th class later is a one-line change

Pointers

• Current AuditPanel: frontend/src/components/chat/AuditPanel.tsx
• Knowability class definitions: src/agent/knowability_router.py (the 4 classes are formally defined there)
• Project stack: React 18 + Tailwind 3 + lucide-react (icons)

Difficulty

S (2-3 hours) — focused component work.