ScoreBadgeComponent

Score badge component displaying evidence flags with icons and labels.

Overview

The ScoreBadgeComponent displays evidence quality flags that provide context about score reliability and data sources.

Selector

<stella-score-badge />

Inputs

Flag Types

Usage Examples

Basic Usage

<stella-score-badge type="live-signal" />

All Flag Types

<stella-score-badge type="live-signal" />
<stella-score-badge type="proven-path" />
<stella-score-badge type="vendor-na" />
<stella-score-badge type="speculative" />
<stella-score-badge type="anchored" />
<stella-score-badge type="hard-fail" />

Size Variants

<stella-score-badge type="proven-path" size="sm" />
<stella-score-badge type="proven-path" size="md" />

Icon-Only Mode

<stella-score-badge type="live-signal" [showLabel]="false" />

With Score Pill

<div class="score-display">
  <stella-score-pill [score]="92" />
  <div class="flags">
    <stella-score-badge type="live-signal" size="sm" />
    <stella-score-badge type="proven-path" size="sm" />
  </div>
</div>

Rendering from Flags Array

@for (flag of scoreResult.flags; track flag) {
  <stella-score-badge [type]="flag" size="sm" />
}

In a Table

<td class="flags-column">
  @for (flag of finding.score?.flags; track flag) {
    <stella-score-badge
      [type]="flag"
      size="sm"
      [showLabel]="false"
    />
  }
</td>

Flag Significance

live-signal (Green - High Confidence)

Indicates the vulnerability affects code that is actively being executed in production. This is the highest confidence indicator and typically elevates priority.

Sources:

• Runtime telemetry from deployed containers
• Function call traces
• Code coverage data from production

proven-path (Blue - Confirmed)

A verified call path from application entry points to the vulnerable function has been confirmed through static or dynamic analysis.

Sources:

• Static reachability analysis
• Dynamic call graph analysis
• Fuzzing results

vendor-na (Gray - Vendor Override)

The software vendor has issued a VEX statement indicating this vulnerability does not affect their product configuration or version.

Sources:

• Vendor VEX documents
• CSAF advisories
• Distro security teams

speculative (Orange - Unconfirmed)

The evidence for this vulnerability is speculative or based on incomplete analysis. Score caps are typically applied.

Sources:

• Incomplete static analysis
• Heuristic-based detection
• Unverified reports

anchored (Violet - Attested)

The score calculation has been cryptographically anchored via DSSE attestation and/or inclusion in a Rekor transparency log. This provides verifiable proof of the score at a specific point in time.

Attestation Types:

• DSSE envelope with signed payload
• Rekor log index and entry ID
• Offline ledger verification

Visual Behavior:

• Subtle violet glow effect via anchored-glow CSS class

hard-fail (Red - Immediate Action)

A policy hard-fail condition has been triggered. This indicates the vulnerability meets criteria for mandatory immediate remediation, bypassing normal triage workflow.

Triggers:

• Known Exploited Vulnerability (KEV) list inclusion
• Active exploitation confirmed
• Critical severity with confirmed reachability
• Policy override by security team

Visual Behavior:

• Red alert pulse animation via alert CSS class
• Row highlighting in findings lists

Accessibility

• Uses role="img" with descriptive aria-label
• Tooltip shown on focus for keyboard users
• Icon colors meet WCAG AA contrast requirements
• Screen reader announces full flag description

Styling

stella-score-badge {
  --badge-font-size: 12px;
  --badge-padding: 4px 8px;
  --badge-border-radius: 4px;
}

Live Signal Animation

The live-signal badge features a subtle pulse animation to draw attention:

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.live-signal-badge {
  animation: pulse 2s ease-in-out infinite;
}

Related Components

• ScorePill - Compact score display
• ScoreBreakdownPopover - Full breakdown with flags section