Skip to content

Output Card Analysis Redesign

Goal: Unify the compliance view and Text Analysis into a single, always-on rendering model for generated output cards.

Current State

OutputCard has two modes: - Default: plain text - Analysis toggle: switches between compliance highlighting (violations red, include hits blue) and property-based highlighting (fetched from /api/text/analyze)

Problems: - Compliance toggle is an extra click — violations should be visible immediately - Compliance-only word profile card is nearly empty for compliant words ("Compliant" chip, nothing else) - Text Analysis and compliance are parallel systems that share a core (word lookup + property data) - No reuse between TextAnalysisTool and OutputCard rendering

Design

Always-visible violations

  • Red wavy underline on violation words (spell-checker pattern), always rendered
  • Hover tooltip shows violation details
  • No toggle needed — violations are always visible

Analysis mode = property overlay

  • Toggle switches from plain text to property-highlighted text
  • Same as TextAnalysisTool: pick a property from dropdown, see gradient highlighting
  • Uses the same /api/text/analyze endpoint, same color schemes, same rendering
  • Click any word → WordProfile dialog with full property data + compliance status

Data flow

  1. Generation completes → result has text, wordCompliance, boostCoverage
  2. When analysis mode toggled on, call /api/text/analyze on result.text (cached on the result)
  3. Merge: analyze response provides percentiles for highlighting, wordCompliance provides pass/fail for underlines
  4. Both render simultaneously — property gradient + violation underline

Shared rendering

Extract the word-level highlighting logic from TextAnalysisTool into a shared component: - WordHighlighter — takes text, word_details (from analyze), violations (from compliance), selected feature, color scheme - Used by both TextAnalysisTool and OutputCard - Same click-to-profile, same tooltips, same color logic

Files to change

  • OutputCard.tsx — remove compliance toggle, add always-on underlines, use WordHighlighter for analysis mode
  • TextAnalysisTool.tsx — extract highlighting into WordHighlighter
  • New: components/WordHighlighter.tsx — shared word-level rendering
  • types/governance.ts — no changes needed (types already support both)

What to remove

  • COMPLIANCE_FEATURE_ID constant and its special rendering path
  • renderComplianceText() function in OutputCard
  • The FormControlLabel/Switch toggle for "Analysis"

What to keep

  • Analysis mode as a toggle (but it's now "show property overlay" not "show compliance")
  • Click-to-profile on any word
  • Boost coverage stats display
  • Violation word highlighting (now always-on underline)