Anomaly Card

Monitoring

Block

Alert card for unusual patterns requiring attention. Highlights deviations from typical work patterns with severity indicators and actionable recommendations.

Preview

Critical anomaly with full details

Critical

4/16/2026, 11:55:50 AM

Unusually high task volume detected

You have 18 tasks due this week, 3x your typical workload. This represents a significant spike that may affect your productivity.

This Week

18 tasks

Typical

6 tasks

Increase

3x normal

High Priority

8 tasks

Impact Assessment

High risk of burnout and missed deadlines. Consider redistributing work or rescheduling lower-priority items.

Recommended Action

Review task priorities, consider rescheduling 6-8 lower-priority tasks to next week, or delegate to team members.

Severity Variants

All severity levels with appropriate visual indicators

Critical

4/16/2026, 11:55:50 AM

Database latency spike

Response times have increased 400% in the last 5 minutes.

Current

2.4s

Normal

0.6s

Impact Assessment

User experience severely degraded. Potential data loss risk.

High

4/16/2026, 11:55:50 AM

AI suggestion accuracy declining

Your acceptance rate for AI suggestions has dropped from 78% to 45% over the past week.

Current Rate

45%

Usual Rate

78%

Impact Assessment

AI suggestions may not be matching your current work style.

Recommended Action

Review recent declined suggestions to help AI learn.

Medium

4/16/2026, 11:55:50 AM

Different completion pattern

You're completing tasks earlier in the day than usual, shifting from afternoon to morning productivity.

Current Peak

8:00 AM

Usual Peak

2:00 PM

Recommended Action

AI can optimize future scheduling for your morning productivity.

Low

4/16/2026, 11:55:50 AM

Calendar sync delay detected

Calendar events are syncing 15% slower than usual. No impact on task management.

Sync Time

3.2s

Usual

2.8s

Anomaly Types

Different types of anomalies with context-specific icons

High

4/16/2026, 11:55:50 AM

Traffic spike detected

Incoming requests increased by 300%.

Current

15k/min

Normal

5k/min

High

4/16/2026, 11:55:50 AM

Conversion rate drop

Checkout completion rate decreased significantly.

Current

1.2%

Normal

3.8%

Medium

4/16/2026, 11:55:50 AM

Usage pattern deviation

User behavior differs from established patterns.

Sessions

45min

Expected

20min

Medium

4/16/2026, 11:55:50 AM

System health anomaly

Multiple minor issues detected across services.

Issues

Affected

3 services

Props

AnomalyCard component API reference

Prop	Type	Default	Description
`severity`	`'low' \| 'medium' \| 'high' \| 'critical'`	`'medium'`	Severity level affecting visual styling and urgency
`title*`	`string`	—	Main heading describing the anomaly
`description*`	`string`	—	Detailed explanation of what was detected
`anomalyType`	`'deviation' \| 'spike' \| 'drop' \| 'general'`	`'general'`	Type of anomaly determining the icon shown
`metrics`	`Record<string, string \| number>`	`{}`	Key-value pairs of metrics to display in a grid
`impact`	`string`	—	Business impact assessment of the anomaly
`recommendation`	`string`	—	Suggested action to resolve the issue
`timestamp`	`string`	`new Date().toISOString()`	ISO date string for when the anomaly was detected
`onInvestigate`	`() => void`	—	Callback when the Investigate button is clicked
`onAcknowledge`	`() => void`	—	Callback when the Acknowledge button is clicked
`onDismiss`	`() => void`	—	Callback when the dismiss (X) button is clicked
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { AnomalyCard } from '@/blocks/monitoring/anomaly-card'

export default function Example() {
 return (
 <AnomalyCard
 severity="critical"
 title="Unusually high task volume detected"
 description="You have 18 tasks due this week, 3x your typical workload."
 anomalyType="spike"
 metrics={{
 'This Week': '18 tasks',
 'Typical': '6 tasks',
 'Increase': '3x normal',
 'High Priority': '8 tasks',
 }}
 impact="High risk of burnout and missed deadlines."
 recommendation="Consider rescheduling lower-priority tasks."
 onInvestigate={() => console.log('Investigating')}
 onAcknowledge={() => console.log('Acknowledged')}
 onDismiss={() => console.log('Dismissed')}
 />
 )
}

Built With

3 components

This block uses the following UI components from the design system:

Button Badge Collapsible

Features

Built-in functionality

Severity indicators: Color-coded borders and badges for critical, high, medium, and low levels
Anomaly type icons: Context-specific icons for spikes, drops, deviations, and general anomalies
Key metrics display: Responsive grid layout for important numerical data
Impact assessment: Clear explanation of business impact with highlighted styling
Recommendations: Actionable next steps for resolution
Technical details: Expandable section with JSON metrics and detection information
Quick actions: Investigate, acknowledge, and dismiss buttons
Critical animation: Pulsing top indicator for critical severity alerts
Dark mode: Full dark mode support with proper color contrast

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="article" on containeraria-labelledby for title associationaria-describedby for descriptionaria-live="polite" for dynamic content

Keyboard Navigation

Key	Action
`Tab`	Navigate between buttons and expandable section
`Enter / Space`	Activate buttons or toggle technical details
`Escape`	Close expanded technical details

Notes

Severity levels use semantic color coding for visual indication
Critical alerts have pulsing animation that can be disabled via prefers-reduced-motion
All interactive elements have visible focus states
Icons are decorative and hidden from screen readers

Related Components

Alert AlertSystem ExceptionDashboard ThresholdConfigurator