@countermeasure-platform/web-components 1.2.1-dev.4.1 → 1.2.1

package/src/styles/theme.css

@@ -139,6 +139,7 @@
   --color-accent-amber: hsl(var(--accent-amber));
   --color-accent-violet: hsl(var(--accent-violet));
   --color-accent-emerald: hsl(var(--accent-emerald));
+  --color-accent-orange: hsl(var(--accent-orange));
   --color-accent-primary: hsl(var(--accent-primary));
 
   --color-success: hsl(var(--success));

package/src/styles/tokens.css

@@ -128,6 +128,7 @@
   --accent-amber: var(--amber-400);
   --accent-violet: var(--violet-400);
   --accent-emerald: var(--emerald-400);
+  --accent-orange: var(--orange-400);
   --accent-primary: var(--primary);
 
   --background-elevated: var(--background-secondary);
@@ -145,6 +146,18 @@
   --low: hsl(var(--accent-cyan));
   --ok: hsl(var(--accent-emerald));
 
+  /* Score-level colors (0–100 confidence/coverage scores) */
+  --color-score-good: var(--ok);
+  --color-score-warning: var(--high);
+  --color-score-concerning: var(--brand);
+  --color-score-critical: var(--critical);
+
+  /* Validation state colors */
+  --color-validation-passed: var(--ok);
+  --color-validation-failed: var(--critical);
+  --color-validation-stale: var(--high);
+  --color-validation-untested: var(--text-3);
+
   /* Numbered text ladder */
   --text-1: hsl(var(--foreground));
   --text-2: hsl(var(--foreground-secondary));
@@ -177,6 +190,12 @@
 
   /* Density */
   --density-row: 36px;
+  --density-padding-y: 0.55rem;
+  --density-padding-x: 0.75rem;
+  --density-gap: 0.5rem;
+  --density-section-gap: 1rem;
+  --density-font: 0.875rem;
+  --density-icon: 2.25rem;
 
   /* Diff-viewer line tints (used by editors/diff-viewer.ts).
    * Default values track --ok / --critical for visibility in dark themes. */
@@ -560,65 +579,80 @@
 [data-theme="monokai"] {
   color-scheme: dark;
 
-  --background: 70 8.108% 14.51%;
-  --background-secondary: 70 6.383% 18.431%;
-  --background-tertiary: 75 6.667% 11.765%;
-  --foreground: 60 30% 96.078%;
-  --foreground-secondary: 60 8.197% 76.078%;
-  --foreground-tertiary: 50 10.9% 41.373%;
-
-  --surface: 69 8.235% 16.667%;
-  --surface-alt: 69 7.071% 19.412%;
-  --surface-hover: 69 6.306% 21.765%;
+  /* Monokai background: #272822 warm dark olive */
+  --background: 70 8% 15%;
+  --background-secondary: 70 6% 19%;
+  --background-tertiary: 70 8% 10%;
+  /* Monokai foreground: #F8F8F2 warm white */
+  --foreground: 60 30% 96%;
+  --foreground-secondary: 55 12% 73%;
+  --foreground-tertiary: 50 8% 44%;
+  --foreground-muted: 50 5% 30%;
+
+  /* Surfaces follow the warm olive tint */
+  --surface: 70 8% 17%;
+  --surface-alt: 70 7% 20%;
+  --surface-hover: 70 6% 23%;
 
   --card: var(--surface);
   --card-foreground: var(--foreground);
   --popover: var(--surface);
   --popover-foreground: var(--foreground);
 
-  --primary: 32 98.23% 55.686%;
-  --primary-hover: 42 93.407% 64.314%;
+  /* Primary: Monokai green #A6E22E */
+  --primary: 80 76% 53%;
+  --primary-hover: 80 76% 60%;
+  --primary-foreground: var(--background-tertiary);
   --secondary: var(--background-secondary);
   --secondary-foreground: var(--foreground);
   --muted: var(--background-secondary);
   --muted-foreground: var(--foreground-secondary);
-  --accent: var(--emerald-400);
-  --accent-foreground: var(--background);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
 
-  --success: 80 75.63% 53.333%;
+  /* Monokai semantic colors */
+  --success: 80 76% 53%;
   --success-foreground: var(--background);
-  --warning: var(--primary);
+  /* Monokai orange #FD971F */
+  --warning: 32 98% 55%;
   --warning-foreground: var(--background);
-  --danger: 338 94.619% 56.275%;
+  /* Monokai pink #F92672 */
+  --danger: 338 95% 56%;
   --danger-foreground: var(--foreground);
-  --info: 190 81.065% 66.863%;
+  /* Monokai blue #66D9EF */
+  --info: 190 81% 67%;
   --info-foreground: var(--background);
   --destructive: var(--danger);
   --destructive-foreground: var(--danger-foreground);
 
-  --border: 70 4.286% 27.451%;
+  --border: 70 4% 27%;
   --input: var(--background-secondary);
   --ring: var(--primary);
   --focus-ring: var(--primary);
   --border-default: var(--border);
   --border-glass: var(--border);
-  --border-subtle: 70 6.383% 24%;
+  --border-subtle: 70 6% 24%;
 
   --text-primary: var(--foreground);
   --text-secondary: var(--foreground-secondary);
   --text-tertiary: var(--foreground-tertiary);
 
-  --accent-cyan: 190 81.065% 66.863%;
-  --accent-rose: 338 94.619% 56.275%;
-  --accent-amber: var(--primary);
-  --accent-violet: 261 100% 75.294%;
-  --accent-emerald: 80 75.63% 53.333%;
+  /* Monokai accent palette */
+  --accent-cyan: 190 81% 67%;
+  --accent-rose: 338 95% 56%;
+  --accent-amber: 32 98% 55%;
+  --accent-violet: 261 100% 75%;
+  --accent-emerald: 80 76% 53%;
+  --accent-orange: 22 92% 58%;
   --accent-primary: var(--primary);
 
-  --emerald-400: 80 75.63% 53.333%;
-  --rose-400: 338 94.619% 56.275%;
-  --violet-400: 261 100% 75.294%;
-  --blue-400: 190 81.065% 66.863%;
+  /* Override color palette to match Monokai tones */
+  --emerald-400: 80 76% 53%;
+  --rose-400: 338 95% 56%;
+  --violet-400: 261 100% 75%;
+  --blue-400: 190 81% 67%;
+  --amber-400: 32 98% 55%;
+  --orange-400: 32 98% 55%;
 
   --background-elevated: var(--background-secondary);
   --background-surface: var(--surface);
@@ -644,15 +678,16 @@
   --shadow-lg: 0 14px 30px -18px rgb(0 0 0 / 0.7);
   --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
 
-  /* Theme.jsx-parity overrides for monokai theme */
+  /* Monokai severity — pink for critical, orange for high, yellow for medium */
   --critical: hsl(var(--accent-rose));
   --high: hsl(var(--accent-amber));
-  --medium: hsl(var(--accent-amber));
+  --medium: hsl(48 96% 53%);
   --low: hsl(var(--accent-cyan));
   --ok: hsl(var(--accent-emerald));
-  --bg-glass: rgba(255, 255, 255, 0.02);
-  --bg-glass-2: rgba(255, 255, 255, 0.04);
-  --bg-glass-3: rgba(255, 255, 255, 0.07);
+  /* Monokai glass — warm-tinted transparency */
+  --bg-glass: rgba(248, 248, 242, 0.02);
+  --bg-glass-2: rgba(248, 248, 242, 0.04);
+  --bg-glass-3: rgba(248, 248, 242, 0.07);
   --bg-base: hsl(var(--background));
   --bg-app: hsl(var(--background));
   --bg-elev-1: hsl(var(--background-secondary));

package/src/styles/ui.css

@@ -218,12 +218,12 @@
 }
 
 .cmm-toast {
-  padding: 0.75rem 1rem;
+  padding: var(--density-padding-y) var(--density-padding-x);
   border-radius: 0.5rem;
-  font-size: 0.875rem;
+  font-size: var(--density-font);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--density-gap);
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   animation: cmm-toast-in 0.3s ease-out;
 }
@@ -289,9 +289,9 @@
 .cmm-dropdown__item {
   display: block;
   width: 100%;
-  padding: 0.5rem 1rem;
+  padding: var(--density-padding-y) var(--density-padding-x);
   text-align: left;
-  font-size: 0.875rem;
+  font-size: var(--density-font);
   color: var(--cmm-text-secondary);
   background: transparent;
   border: none;

package/src/types/confidence.ts

@@ -0,0 +1,72 @@
+/**
+ * Shared Confidence Types
+ *
+ * Types used by confidence-related components across multiple applications
+ * (tenant-ui, threat-library, etc.) for Defense Confidence Overview,
+ * Threat Confidence, and related views.
+ */
+
+export interface TacticCoverage {
+  tacticId: string
+  tacticName: string
+  shortName: string
+  coverageScore: number
+  detectionCount: number
+  totalTechniques: number
+}
+
+export interface TechniqueGap {
+  id: string
+  name: string
+  tactic: string
+  coverage: 'none' | 'partial'
+  intelCount: number
+  priority: 'critical' | 'high' | 'medium'
+}
+
+export interface DetectionSource {
+  id: string
+  name: string
+  shortName: string
+  ruleCount: number
+  coverage: number
+  trend: 'up' | 'down' | 'stable'
+}
+
+export interface EnvironmentVisibility {
+  id: string
+  name: string
+  shortName: string
+  platform: 'windows' | 'linux' | 'macos' | 'cloud'
+  assetCount: number
+  coverage: number
+  trend: 'up' | 'down' | 'stable'
+}
+
+export interface VisibilityGap {
+  id: string
+  environment: string
+  dataSource: string
+  coverage: number
+  impact: 'critical' | 'high' | 'medium'
+}
+
+export interface ValidationBySource {
+  id: string
+  name: string
+  shortName: string
+  totalRules: number
+  tested: number
+  passed: number
+  failed: number
+  stale: number
+}
+
+export interface ValidationIssue {
+  id: string
+  ruleName: string
+  source: string
+  issue: 'untested' | 'failed' | 'stale'
+  priority: 'critical' | 'high' | 'medium'
+  daysSinceTest?: number
+}

package/src/types/index.ts

@@ -0,0 +1,9 @@
+export type {
+  TacticCoverage,
+  TechniqueGap,
+  DetectionSource,
+  EnvironmentVisibility,
+  VisibilityGap,
+  ValidationBySource,
+  ValidationIssue,
+} from './confidence'

package/src/utils/__tests__/sage-analysis.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { generateSageAnalysis } from '../sage-analysis'
+
+const thresholds = {
+  excellent: 'Excellent coverage.',
+  good: 'Good coverage.',
+  moderate: 'Moderate coverage.',
+  poor: 'Poor coverage.',
+  critical: 'Critical issues detected.',
+}
+
+describe('generateSageAnalysis', () => {
+  it('returns excellent for score >= 80', () => {
+    expect(generateSageAnalysis(80, thresholds)).toBe('Excellent coverage.')
+    expect(generateSageAnalysis(100, thresholds)).toBe('Excellent coverage.')
+  })
+
+  it('returns good for score >= 60', () => {
+    expect(generateSageAnalysis(60, thresholds)).toBe('Good coverage.')
+    expect(generateSageAnalysis(79, thresholds)).toBe('Good coverage.')
+  })
+
+  it('returns moderate for score >= 40', () => {
+    expect(generateSageAnalysis(40, thresholds)).toBe('Moderate coverage.')
+    expect(generateSageAnalysis(59, thresholds)).toBe('Moderate coverage.')
+  })
+
+  it('returns poor for score < 40', () => {
+    expect(generateSageAnalysis(39, thresholds)).toBe('Poor coverage.')
+    expect(generateSageAnalysis(0, thresholds)).toBe('Poor coverage.')
+  })
+
+  it('returns critical override when flagged', () => {
+    expect(generateSageAnalysis(90, thresholds, true)).toBe('Critical issues detected.')
+  })
+
+  it('ignores critical flag when no critical message defined', () => {
+    const noCtx = { excellent: 'A', good: 'B', moderate: 'C', poor: 'D' }
+    expect(generateSageAnalysis(90, noCtx, true)).toBe('A')
+  })
+})

package/src/utils/__tests__/score.test.ts

@@ -0,0 +1,232 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getScoreLevel,
+  scoreToColor,
+  scoreToTextColor,
+  scoreColors,
+  getScoreBgClass,
+  getScoreTextClass,
+  getScoreBorderClass,
+  getScoreBgColor,
+  getScoreTextColor,
+  getScoreHexColor,
+  getScoreColorClasses,
+} from '../score'
+
+describe('getScoreLevel', () => {
+  it('returns critical for 0', () => {
+    expect(getScoreLevel(0)).toBe('critical')
+  })
+
+  it('returns critical for 39', () => {
+    expect(getScoreLevel(39)).toBe('critical')
+  })
+
+  it('returns concerning for 40', () => {
+    expect(getScoreLevel(40)).toBe('concerning')
+  })
+
+  it('returns concerning for 59', () => {
+    expect(getScoreLevel(59)).toBe('concerning')
+  })
+
+  it('returns warning for 60', () => {
+    expect(getScoreLevel(60)).toBe('warning')
+  })
+
+  it('returns warning for 79', () => {
+    expect(getScoreLevel(79)).toBe('warning')
+  })
+
+  it('returns good for 80', () => {
+    expect(getScoreLevel(80)).toBe('good')
+  })
+
+  it('returns good for 100', () => {
+    expect(getScoreLevel(100)).toBe('good')
+  })
+
+  it('returns critical for negative values', () => {
+    expect(getScoreLevel(-1)).toBe('critical')
+    expect(getScoreLevel(-100)).toBe('critical')
+  })
+
+  it('returns good for values above 100', () => {
+    expect(getScoreLevel(101)).toBe('good')
+    expect(getScoreLevel(999)).toBe('good')
+  })
+})
+
+describe('scoreColors', () => {
+  it('has entries for all four levels', () => {
+    expect(scoreColors.good.bg).toBe('bg-score-good')
+    expect(scoreColors.good.text).toBe('text-score-good')
+    expect(scoreColors.good.hex).toBe('var(--color-score-good)')
+
+    expect(scoreColors.warning.bg).toBe('bg-score-warning')
+    expect(scoreColors.concerning.bg).toBe('bg-score-concerning')
+    expect(scoreColors.critical.bg).toBe('bg-score-critical')
+  })
+})
+
+describe('scoreToColor', () => {
+  it('returns correct CSS var for critical score (0)', () => {
+    expect(scoreToColor(0)).toBe('var(--color-score-critical)')
+  })
+
+  it('returns correct CSS var for concerning score (40)', () => {
+    expect(scoreToColor(40)).toBe('var(--color-score-concerning)')
+  })
+
+  it('returns correct CSS var for warning score (60)', () => {
+    expect(scoreToColor(60)).toBe('var(--color-score-warning)')
+  })
+
+  it('returns correct CSS var for good score (80)', () => {
+    expect(scoreToColor(80)).toBe('var(--color-score-good)')
+  })
+
+  it('returns correct CSS var for boundary value 39', () => {
+    expect(scoreToColor(39)).toBe('var(--color-score-critical)')
+  })
+
+  it('returns correct CSS var for boundary value 59', () => {
+    expect(scoreToColor(59)).toBe('var(--color-score-concerning)')
+  })
+
+  it('returns correct CSS var for boundary value 79', () => {
+    expect(scoreToColor(79)).toBe('var(--color-score-warning)')
+  })
+
+  it('returns correct CSS var for 100', () => {
+    expect(scoreToColor(100)).toBe('var(--color-score-good)')
+  })
+
+  it('handles negative values', () => {
+    expect(scoreToColor(-5)).toBe('var(--color-score-critical)')
+  })
+
+  it('handles values above 100', () => {
+    expect(scoreToColor(150)).toBe('var(--color-score-good)')
+  })
+})
+
+describe('scoreToTextColor', () => {
+  it('returns same result as scoreToColor for critical score', () => {
+    expect(scoreToTextColor(0)).toBe(scoreToColor(0))
+  })
+
+  it('returns same result as scoreToColor for concerning score', () => {
+    expect(scoreToTextColor(40)).toBe(scoreToColor(40))
+  })
+
+  it('returns same result as scoreToColor for warning score', () => {
+    expect(scoreToTextColor(60)).toBe(scoreToColor(60))
+  })
+
+  it('returns same result as scoreToColor for good score', () => {
+    expect(scoreToTextColor(80)).toBe(scoreToColor(80))
+  })
+
+  it('returns correct CSS var string for boundary values', () => {
+    expect(scoreToTextColor(39)).toBe('var(--color-score-critical)')
+    expect(scoreToTextColor(59)).toBe('var(--color-score-concerning)')
+    expect(scoreToTextColor(79)).toBe('var(--color-score-warning)')
+    expect(scoreToTextColor(100)).toBe('var(--color-score-good)')
+  })
+})
+
+describe('getScoreBgClass', () => {
+  it('returns bg-score-critical for low scores', () => {
+    expect(getScoreBgClass(10)).toBe('bg-score-critical')
+  })
+
+  it('returns bg-score-concerning for mid-low scores', () => {
+    expect(getScoreBgClass(45)).toBe('bg-score-concerning')
+  })
+
+  it('returns bg-score-warning for mid-high scores', () => {
+    expect(getScoreBgClass(65)).toBe('bg-score-warning')
+  })
+
+  it('returns bg-score-good for high scores', () => {
+    expect(getScoreBgClass(90)).toBe('bg-score-good')
+  })
+})
+
+describe('getScoreTextClass', () => {
+  it('returns text-score-critical for low scores', () => {
+    expect(getScoreTextClass(10)).toBe('text-score-critical')
+  })
+
+  it('returns text-score-good for high scores', () => {
+    expect(getScoreTextClass(90)).toBe('text-score-good')
+  })
+})
+
+describe('getScoreBorderClass', () => {
+  it('returns border-score-critical for low scores', () => {
+    expect(getScoreBorderClass(10)).toBe('border-score-critical')
+  })
+
+  it('returns border-score-good for high scores', () => {
+    expect(getScoreBorderClass(90)).toBe('border-score-good')
+  })
+})
+
+describe('getScoreBgColor', () => {
+  it('returns Tailwind bg class from scoreColors map', () => {
+    expect(getScoreBgColor(90)).toBe('bg-score-good')
+    expect(getScoreBgColor(65)).toBe('bg-score-warning')
+    expect(getScoreBgColor(45)).toBe('bg-score-concerning')
+    expect(getScoreBgColor(10)).toBe('bg-score-critical')
+  })
+})
+
+describe('getScoreTextColor', () => {
+  it('returns Tailwind text class from scoreColors map', () => {
+    expect(getScoreTextColor(90)).toBe('text-score-good')
+    expect(getScoreTextColor(65)).toBe('text-score-warning')
+    expect(getScoreTextColor(45)).toBe('text-score-concerning')
+    expect(getScoreTextColor(10)).toBe('text-score-critical')
+  })
+})
+
+describe('getScoreHexColor', () => {
+  it('returns CSS variable reference from scoreColors map', () => {
+    expect(getScoreHexColor(90)).toBe('var(--color-score-good)')
+    expect(getScoreHexColor(65)).toBe('var(--color-score-warning)')
+    expect(getScoreHexColor(45)).toBe('var(--color-score-concerning)')
+    expect(getScoreHexColor(10)).toBe('var(--color-score-critical)')
+  })
+})
+
+describe('getScoreColorClasses', () => {
+  it('returns composite classes for good score', () => {
+    const classes = getScoreColorClasses(90)
+    expect(classes.text).toBe('text-score-good')
+    expect(classes.bg).toBe('bg-score-good/10')
+    expect(classes.border).toBe('border-score-good/20')
+  })
+
+  it('returns composite classes for warning score', () => {
+    const classes = getScoreColorClasses(65)
+    expect(classes.text).toBe('text-score-warning')
+    expect(classes.bg).toBe('bg-score-warning/10')
+    expect(classes.border).toBe('border-score-warning/20')
+  })
+
+  it('returns composite classes for concerning score', () => {
+    const classes = getScoreColorClasses(45)
+    expect(classes.text).toBe('text-score-concerning')
+    expect(classes.bg).toBe('bg-score-concerning/10')
+    expect(classes.border).toBe('border-score-concerning/20')
+  })
+
+  it('returns composite classes for critical score', () => {
+    const classes = getScoreColorClasses(10)
+    expect(classes.text).toBe('text-score-critical')
+    expect(classes.bg).toBe('bg-score-critical/10')
+    expect(classes.border).toBe('border-score-critical/20')
+  })
+})