Counterfactual Block

Explainability

What-if scenario display showing how different inputs would affect AI model outputs. Features actual decision highlighting, alternative scenarios with probabilities, and clear if/then formatting.

Preview

Explore alternative outcomes based on different inputs

What-If Analysis

Actual Decision

Marked as high priority (AI suggestion)

If the deadline was next week instead of tomorrow

Then: Medium priority (auto-sorted)

Probability: 92%

If no dependent tasks were blocked

Then: Normal priority (manual review)

Probability: 78%

Examples

Various use cases for counterfactual analysis

What-If Analysis

Actual Decision

Scheduled for 2 focus blocks

If task had detailed subtasks instead of single item

Then: Scheduled for 4 focus blocks

Probability: 85%

If similar tasks historically took longer

Then: Scheduled for 3 focus blocks

Probability: 88%

What-If Analysis

Actual Decision

Needs your review before proceeding

If AI confidence was above 90%

Then: Auto-approved and scheduled

Probability: 95%

What-If Analysis

Actual Decision

Email sent to team at 9:00 AM

If recipient was in a different timezone

Then: Email scheduled for their 9:00 AM

Probability: 91%

If email contained urgent keywords

Then: Sent immediately with high-priority flag

Probability: 87%

Props

CounterfactualBlock component API reference

Prop	Type	Default	Description
`actual*`	`string`	—	The actual/current outcome or decision
`counterfactuals*`	`Counterfactual[]`	—	List of alternative scenarios
`className`	`string`	—	Additional CSS classes for the container

Counterfactual Type

Prop	Type	Default	Description
`condition*`	`string`	—	The hypothetical condition (what if...)
`outcome*`	`string`	—	The resulting outcome
`probability`	`number`	—	Probability percentage (0-100)

Usage

Import and implementation example

import { CounterfactualBlock } from '@/components/ui/counterfactual-block'

export default function Example() {
  return (
    <CounterfactualBlock
      actual="Marked as high priority (AI suggestion)"
      counterfactuals={[
        {
          condition: 'the deadline was next week',
          outcome: 'Medium priority (auto-sorted)',
          probability: 92
        },
        {
          condition: 'no dependent tasks were blocked',
          outcome: 'Normal priority (manual review)',
          probability: 78
        },
      ]}
    />
  )
}

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Actual decision highlight: Indigo-styled box shows current outcome
If/then formatting: Clear conditional structure for scenarios
Probability scores: Optional likelihood percentage for each alternative
Visual distinction: Color-coded original and alternative paths
Multiple scenarios: Support for any number of counterfactuals
Question mark icons: Visual cue for hypothetical scenarios
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Component uses semantic HTML structureActual decision and alternatives are visually distinctProbability is displayed as text percentage

Keyboard Navigation

Key	Action
`N/A`	Component is display-only, no interactive elements

Notes

If/then structure provides clear logical flow
Question mark icon is decorative
Probabilities are communicated numerically
Consider adding aria-label to section headers for screen readers

Related Components

Reasoning Display Panel Explanation Panel AI Confidence Indicator