ScoreBreakdownPopoverComponent

Detailed score breakdown popover showing all evidence dimensions, flags, and explanations.

Overview

The ScoreBreakdownPopoverComponent displays a comprehensive breakdown of an evidence-weighted score, including dimension bars, active flags, guardrails, and human-readable explanations.

Selector

<stella-score-breakdown-popover />

Inputs

Input	Type	Default	Description
`scoreResult`	`EvidenceWeightedScoreResult`	required	Full score result object
`position`	`PopoverPosition`	`'bottom'`	Popover placement

Position Options

type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';

Score Result Structure

interface EvidenceWeightedScoreResult {
  findingId: string;
  score: number;           // 0-100
  bucket: ScoreBucket;     // 'ActNow' | 'ScheduleNext' | 'Investigate' | 'Watchlist'
  inputs: {
    rch: number;           // Reachability (0-1)
    rts: number;           // Runtime signals (0-1)
    bkp: number;           // Backport availability (0-1)
    xpl: number;           // Exploitability (0-1)
    src: number;           // Source trust (0-1)
    mit: number;           // Mitigations (0-1)
  };
  weights: {
    rch: number;
    rts: number;
    bkp: number;
    xpl: number;
    src: number;
    mit: number;
  };
  flags: ScoreFlag[];
  explanations: string[];
  caps: {
    speculativeCap: boolean;
    notAffectedCap: boolean;
    runtimeFloor: boolean;
  };
  policyDigest: string;
  calculatedAt: string;    // ISO 8601

  // Sprint: SPRINT_20260112_004_FE_attested_score_ui
  // Reduction profile, hard-fail, and anchor fields
  reductionProfile?: ReductionProfile;
  shortCircuitReason?: ShortCircuitReason;
  hardFailStatus?: HardFailStatus;
  isHardFail?: boolean;
  proofAnchor?: ScoreProofAnchor;
}

interface ReductionProfile {
  mode: 'none' | 'light' | 'standard' | 'aggressive' | 'custom';
  originalScore: number;
  reductionAmount: number;
  reductionFactor: number;
  contributingEvidence: string[];
  cappedByPolicy: boolean;
}

interface ScoreProofAnchor {
  anchored: boolean;
  dsseDigest?: string;
  rekorLogIndex?: number;
  rekorEntryId?: string;
  rekorLogId?: string;
  attestationUri?: string;
  verifiedAt?: string;
  verificationStatus?: 'verified' | 'pending' | 'failed' | 'offline';
  verificationError?: string;
}

Dimension Labels

Key	Label	Description
`rch`	Reachability	Path to vulnerable code exists
`rts`	Runtime Signals	Active usage detected in production
`bkp`	Backport	Fix backported to current version
`xpl`	Exploitability	EPSS probability, known exploits
`src`	Source Trust	Advisory source reliability
`mit`	Mitigations	Active mitigations reduce risk

Usage Examples

Basic Usage

<stella-score-breakdown-popover [scoreResult]="scoreResult" />

With Position

<stella-score-breakdown-popover
  [scoreResult]="scoreResult"
  position="right"
/>

Triggered from Score Pill

<div class="score-container">
  <stella-score-pill
    [score]="score"
    (scoreClick)="showPopover = true"
  />

  @if (showPopover) {
    <stella-score-breakdown-popover
      [scoreResult]="scoreResult"
      (close)="showPopover = false"
    />
  }
</div>

In a Dialog

@Component({
  template: `
    <div class="dialog-content">
      <h2>Score Details</h2>
      <stella-score-breakdown-popover
        [scoreResult]="scoreResult"
      />
    </div>
  `
})
export class ScoreDialogComponent {
  scoreResult = input.required<EvidenceWeightedScoreResult>();
}

Displays the overall score with bucket label and color.

2. Hard Fail Alert (Conditional)

If isHardFail is true, displays a prominent red warning section with the hard-fail reason (KEV, exploited, critical reachable, or policy override).

3. Dimensions Chart

Horizontal bar chart showing all six dimensions with their normalized values (0-100%).

4. Reduction Profile (Conditional)

When a reduction profile is present, shows:

Reduction mode (light, standard, aggressive, custom)
Original vs reduced score
Contributing evidence types
Policy cap indicator

5. Short-Circuit Info (Conditional)

When the score was short-circuited, shows the reason (vendor not affected, VEX not affected, runtime confirmed, anchor verified).

6. Flags Section

Active flags displayed as badges. See ScoreBadge for flag types including:

anchored - Cryptographic attestation present
hard-fail - Policy hard-fail triggered

7. Guardrails Section

Applied caps and floors:

Speculative Cap: Score limited due to unconfirmed evidence
Not Affected Cap: Score reduced due to vendor VEX
Runtime Floor: Score elevated due to active runtime signals

8. Proof Anchor Details (Conditional)

When anchored, shows attestation details:

DSSE envelope digest (truncated)
Rekor log index and entry ID
Verification status and timestamp
Attestation URI link

9. Explanations

Human-readable explanations of factors affecting the score.

Policy digest (truncated SHA-256)
Calculation timestamp

Accessibility

Uses role="dialog" with aria-labelledby
Focus trapped within popover when open
Escape key closes popover
Click outside closes popover
Screen reader announces dimension values

Styling

stella-score-breakdown-popover {
  --popover-max-width: 360px;
  --popover-background: white;
  --popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

ScorePill - Compact score display
ScoreBadge - Evidence flag badges