@checkstack/anomaly-frontend 0.5.13 → 0.5.14

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # @checkstack/anomaly-frontend
 
+## 0.5.14
+
+### Patch Changes
+
+- 8cad340: Design-system rework: a premium, consistent UI language across the platform.
+
+  Foundation (`@checkstack/ui` + the shared Tailwind preset):
+
+  - A token system wired into the shared preset so it generates app-wide: a
+    surface elevation ramp (`surface` / `surface-2` / `surface-inset`), the
+    aurora gradient stops, a colorblind-safe `status` triad, and `grid-line`.
+  - A density model (`comfortable` / `compact`) via `--d-*` vars + `DensityProvider`
+    / `useDensity`, with a user-menu density toggle, plus the polished
+    skeleton / empty / error state set.
+  - Honest, token-driven chart primitives (`TimeSeriesChart`, `Sparkline`,
+    `RadialGauge` / aurora hero, `RequestWaterfall`, `UptimeRibbon`).
+  - A signature aurora moment per page: `PageHeader` paints its icon strokes with
+    the aurora gradient and adds a hairline; `Card` gains soft layered depth.
+
+  Shell + surfaces:
+
+  - The app shell adopts the elevation ramp (header `surface-2`, sidebar
+    `surface`, content on the ambient base).
+  - The system-health dashboard, health-check latency / single-run views, and the
+    SLO dashboard are reskinned onto the primitives (aurora confidence gauge,
+    honest p50/p95 latency, request waterfall, number-led status cards).
+
+  App-wide adoption + premium rework:
+
+  - Every plugin frontend adopts the tokens, status triad, density, and elevation.
+  - The highest-impact surfaces in each plugin are then redesigned to a premium
+    bar: real depth, number-led hierarchy, multi-encoded status (pill + dot +
+    accent stripe), and refined list/table density. Several plugins extract pure
+    tone/label/format logic into unit-tested modules.
+
+  Alerts:
+
+  - Every alert/callout is unified onto a single premium `Alert` (depth surface +
+    status-accent stripe + toned icon chip, variant-driven).
+
+  BREAKING CHANGE: the duplicate `InfoBanner` component (and its sub-components)
+  is removed; use `Alert` instead - it is a drop-in replacement with the same
+  variants and composable parts.
+
+- 8cad340: Enlarge the per-field mute/unmute icon button in the anomaly field mute list to a
+  40px touch target (`h-10 w-10`) so it is reliably tappable on touch devices.
+- 8cad340: Adopt the canonical `toastError` helper from `@checkstack/ui` for error toasts.
+
+  Error toasts that previously called `toast.error(extractErrorMessage(error, "Failed to X"))`
+  (or interpolated `Failed to X: ${extractErrorMessage(error)}` strings) now use
+  `toastError(toast, "Failed to X", error)`. This centralizes the
+  "Failed to <action>: <message>" voice and applies the shared 100-character
+  truncation. Error toasts that did not previously prefix the action now gain the
+  canonical prefix; success toasts and terse validation one-liners are unchanged.
+
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+  - @checkstack/ui@1.17.0
+  - @checkstack/healthcheck-frontend@0.25.0
+  - @checkstack/notification-frontend@0.6.0
+  - @checkstack/notification-common@1.4.0
+  - @checkstack/healthcheck-common@1.8.0
+  - @checkstack/common@0.17.0
+  - @checkstack/frontend-api@0.11.1
+  - @checkstack/anomaly-common@1.5.2
+  - @checkstack/catalog-common@2.4.2
+  - @checkstack/signal-frontend@0.2.6
+
 ## 0.5.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/anomaly-frontend",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,16 +13,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.5.1",
-    "@checkstack/catalog-common": "2.4.1",
-    "@checkstack/common": "0.16.0",
-    "@checkstack/frontend-api": "0.11.0",
-    "@checkstack/healthcheck-common": "1.7.1",
-    "@checkstack/healthcheck-frontend": "0.24.1",
-    "@checkstack/notification-common": "1.3.4",
-    "@checkstack/notification-frontend": "0.5.9",
-    "@checkstack/signal-frontend": "0.2.5",
-    "@checkstack/ui": "1.16.2",
+    "@checkstack/anomaly-common": "1.5.2",
+    "@checkstack/catalog-common": "2.4.2",
+    "@checkstack/common": "0.17.0",
+    "@checkstack/frontend-api": "0.11.1",
+    "@checkstack/healthcheck-common": "1.8.0",
+    "@checkstack/healthcheck-frontend": "0.25.0",
+    "@checkstack/notification-common": "1.4.0",
+    "@checkstack/notification-frontend": "0.6.0",
+    "@checkstack/signal-frontend": "0.2.6",
+    "@checkstack/ui": "1.17.0",
     "date-fns": "^4.4.0",
     "lucide-react": "^1.17.0",
     "react": "19.2.7",
@@ -30,7 +30,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.6.2",
+    "@checkstack/scripts": "0.6.3",
     "@checkstack/tsconfig": "0.0.7",
     "@types/react": "^19.0.0",
     "typescript": "^5.0.0"

package/src/components/AnomalyFieldMuteList.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { Bell, BellOff } from "lucide-react";
-import { Button, useToast } from "@checkstack/ui";
+import { Button, useToast, toastError } from "@checkstack/ui";
 import { usePluginClient, useApi, accessApiRef } from "@checkstack/frontend-api";
 import { AnomalyApi } from "@checkstack/anomaly-common";
-import { extractErrorMessage } from "@checkstack/common";
 
 /**
  * Sub-controls panel rendered inside the generic SubscriptionRow when a
@@ -50,12 +49,12 @@ export const AnomalyFieldMuteList: React.FC<{
   const muteMutation = anomalyClient.muteAnomalyNotification.useMutation({
     onSuccess: () => void refetchMutes(),
     onError: (error) =>
-      toast.error(extractErrorMessage(error, "Failed to mute notifications")),
+      toastError(toast, "Failed to mute notifications", error),
   });
   const unmuteMutation = anomalyClient.unmuteAnomalyNotification.useMutation({
     onSuccess: () => void refetchMutes(),
     onError: (error) =>
-      toast.error(extractErrorMessage(error, "Failed to unmute notifications")),
+      toastError(toast, "Failed to unmute notifications", error),
   });
 
   const isPending = muteMutation.isPending || unmuteMutation.isPending;
@@ -109,11 +108,11 @@ export const AnomalyFieldMuteList: React.FC<{
 
       {fieldPaths.length === 0 ? (
         <div className="text-xs text-muted-foreground italic">
-          No tracked fields yet — mute will become available once anomalies
+          No tracked fields yet - mute will become available once anomalies
           are observed.
         </div>
       ) : (
-        <div className="flex flex-col divide-y rounded-md border">
+        <div className="flex flex-col divide-y rounded-md border bg-surface">
           {fieldPaths.map((fp) => {
             const muted = mutedFields.has(fp) || isSystemMuted;
             return (
@@ -127,7 +126,7 @@ export const AnomalyFieldMuteList: React.FC<{
                     type="button"
                     variant="ghost"
                     size="icon"
-                    className="h-6 w-6"
+                    className="h-10 w-10 shrink-0"
                     disabled={isPending || isSystemMuted}
                     title={muted ? "Unmute this field" : "Mute this field"}
                     onClick={() => handleToggle(fp, mutedFields.has(fp))}

package/src/components/AnomalyFieldOverridesEditor.tsx

@@ -107,7 +107,7 @@ const PRESET_COPY: Record<
   balanced: {
     label: "Balanced",
     description:
-      "Recommended. Uses the plugin's tuned defaults — alerts on sustained, meaningful deviations.",
+      "Recommended. Uses the plugin's tuned defaults - alerts on sustained, meaningful deviations.",
   },
   relaxed: {
     label: "Relaxed",
@@ -465,12 +465,12 @@ function FieldAccordionItem({
       <AccordionContent className="px-5 pt-2 pb-5 border-t border-border/30">
         <div className="mt-4 space-y-5">
           {/* Plain-language summary of effective config */}
-          <p className="text-xs leading-relaxed text-muted-foreground bg-muted/30 border border-border/40 rounded-md px-3 py-2">
+          <p className="text-xs leading-relaxed text-muted-foreground bg-surface-inset border border-border/40 rounded-md px-3 py-2">
             {summary}
           </p>
 
           {/* Enable/disable */}
-          <div className="flex items-center justify-between p-3 border rounded-lg bg-muted/30">
+          <div className="flex items-center justify-between p-3 border rounded-lg bg-surface-inset">
             <div className="space-y-0.5">
               <Label className="text-sm font-medium">
                 Monitor this field
@@ -554,7 +554,7 @@ function PresetSelector({ value, onChange, disabled }: PresetSelectorProps) {
   const options: Preset[] = ["strict", "balanced", "relaxed", "custom"];
   const description =
     value === "custom"
-      ? "Custom — fine-tuned values that don't match a preset. Edit them in the advanced section below."
+      ? "Custom - fine-tuned values that don't match a preset. Edit them in the advanced section below."
       : PRESET_COPY[value].description;
 
   return (
@@ -565,7 +565,7 @@ function PresetSelector({ value, onChange, disabled }: PresetSelectorProps) {
         </Label>
         <Tooltip content="Presets bundle sensitivity, confirmation window, and noise floors into one choice. Pick Custom to fine-tune each value." />
       </div>
-      <div className="inline-flex items-stretch p-1 border rounded-lg bg-muted/30 gap-0.5">
+      <div className="inline-flex items-stretch p-1 border rounded-lg bg-surface-inset gap-0.5">
         {options.map((opt) => {
           const selected = value === opt;
           return (
@@ -578,7 +578,7 @@ function PresetSelector({ value, onChange, disabled }: PresetSelectorProps) {
                 "px-4 py-1.5 text-xs font-semibold rounded-md",
                 !isLowPower && "transition-all",
                 selected
-                  ? "bg-background text-foreground shadow-sm"
+                  ? "bg-surface-2 text-foreground shadow-sm"
                   : "text-muted-foreground hover:text-foreground",
                 "disabled:opacity-50 disabled:cursor-not-allowed capitalize",
               )}
@@ -625,7 +625,7 @@ function BehaviorSelector({
         onValueChange={(val) => onChange(val as AnomalyDirection | "auto")}
         disabled={disabled}
       >
-        <SelectTrigger className="h-10 transition-colors bg-background/50 focus:bg-background">
+        <SelectTrigger className="h-10 transition-colors bg-surface focus:bg-surface-2">
           <SelectValue placeholder="Auto-detect">
             <div className="flex items-center gap-2 min-w-0">
               <Icon className="w-4 h-4 text-muted-foreground shrink-0" />
@@ -674,7 +674,7 @@ function AdvancedDisclosure({
 }: AdvancedDisclosureProps) {
   const { isLowPower } = usePerformance();
   return (
-    <div className="border border-border/40 rounded-md bg-background/30">
+    <div className="border border-border/40 rounded-md bg-surface-inset">
       <button
         type="button"
         onClick={onToggle}
@@ -813,7 +813,7 @@ function AdvancedControls({
                 onChange(field, "minAbsoluteDelta", next);
               }}
               disabled={disabled}
-              className="h-10 transition-colors bg-background/50 focus:bg-background"
+              className="h-10 transition-colors bg-surface focus:bg-surface-2"
             />
             <p className="text-[10.5px] text-muted-foreground leading-relaxed">
               Anomaly only fires when the value differs from the recent average
@@ -856,7 +856,7 @@ function AdvancedControls({
                 onChange(field, "minRelativeDelta", next);
               }}
               disabled={disabled}
-              className="h-10 transition-colors bg-background/50 focus:bg-background"
+              className="h-10 transition-colors bg-surface focus:bg-surface-2"
             />
             <p className="text-[10.5px] text-muted-foreground leading-relaxed">
               Anomaly only fires when the proportional change exceeds this
@@ -883,7 +883,7 @@ function AdvancedControls({
               </Label>
               <Tooltip content="Catches gradual degradation that never triggers a single-spike alert." />
             </div>
-            <div className="flex items-center justify-between p-2 border rounded-md bg-muted/30">
+            <div className="flex items-center justify-between p-2 border rounded-md bg-surface-inset">
               <span className="text-xs text-muted-foreground">
                 {effective.driftEnabled ? "Detecting drift" : "Drift muted"}
               </span>

package/src/components/AnomalySettingsForm.tsx

@@ -103,7 +103,7 @@ export function AnomalySettingsForm({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between p-4 border rounded-md">
+      <div className="flex items-center justify-between rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface p-[var(--d-pad)] shadow-[0_1px_2px_hsl(var(--foreground)/0.04)]">
         <div className="space-y-0.5">
           <Label className="text-base font-medium">{copy.enabledLabel}</Label>
           <div className="text-sm text-muted-foreground">
@@ -122,7 +122,7 @@ export function AnomalySettingsForm({
         </div>
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2 p-4 border rounded-md">
+      <div className="grid gap-6 md:grid-cols-2 rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface p-[var(--d-pad)] shadow-[0_1px_2px_hsl(var(--foreground)/0.04)]">
         <div className="space-y-2">
           <Label htmlFor="baselineWindow" className="text-sm font-medium">
             Baseline window

package/src/components/SystemAnomalyWidget.tsx

@@ -18,8 +18,8 @@ import {
   CardHeader,
   CardTitle,
   CardContent,
-  Badge,
   Button,
+  cn,
   useToast,
 } from "@checkstack/ui";
 import {
@@ -36,6 +36,11 @@ import {
 } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import { Link } from "react-router-dom";
+import {
+  anomalyToneStyles,
+  toneForState,
+  widgetTone,
+} from "./anomalyTone.logic";
 
 type Props = SlotContext<typeof SystemDetailsSlot>;
 
@@ -144,6 +149,8 @@ function AnomalyRow({
   const deviationValue = anomaly.deviation?.toFixed(1) ?? "—";
   const isAbove = anomaly.direction === "above";
 
+  const tone = anomalyToneStyles(toneForState(anomaly.state));
+
   const detailLink = resolveRoute(healthcheckRoutes.routes.historyDetail, {
     systemId,
     configurationId: anomaly.configurationId,
@@ -155,19 +162,30 @@ function AnomalyRow({
       ? HelpCircle
       : AlertTriangle;
 
+  const stateLabel = isDrift
+    ? "drift"
+    : isSuspicious
+      ? "suspicious"
+      : "confirmed";
+
+  const DirectionIcon = isAbove ? TrendingUp : TrendingDown;
+
   return (
     <Link
       to={detailLink}
-      className="group flex items-center gap-3 px-4 py-3 hover:bg-muted/50 transition-colors cursor-pointer"
+      className="group flex items-center gap-4 px-4 py-3 hover:bg-surface-inset transition-colors cursor-pointer"
     >
-      {/* State icon */}
-      <div className={`shrink-0 rounded-full p-1.5 ${
-        isSuspicious
-          ? "bg-warning/10 text-warning/70"
-          : "bg-warning/15 text-warning"
-      }`}>
-        <StateIcon className="h-3.5 w-3.5" />
-      </div>
+      {/* Status column — multi-encoded: hue + dot + icon + label. */}
+      <span
+        className={cn(
+          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+          tone.pill,
+        )}
+      >
+        <span className={cn("size-1.5 rounded-full", tone.dot)} aria-hidden />
+        <StateIcon className="h-3 w-3" />
+        {stateLabel}
+      </span>
 
       {/* Content */}
       <div className="flex-1 min-w-0">
@@ -176,15 +194,10 @@ function AnomalyRow({
             {parsed.label}
           </span>
           {parsed.source ? (
-            <span className="text-[10px] text-muted-foreground bg-muted/80 px-1.5 py-0.5 rounded font-medium shrink-0">
+            <span className="text-xs text-muted-foreground shrink-0">
               {parsed.source}
             </span>
           ) : undefined}
-          {isDrift && (
-            <span className="text-[10px] text-muted-foreground bg-muted/40 px-1.5 py-0.5 rounded font-medium shrink-0">
-              drift
-            </span>
-          )}
           {isMuted && (
             <span className="text-[10px] text-muted-foreground bg-muted/60 px-1.5 py-0.5 rounded font-medium shrink-0 inline-flex items-center gap-0.5">
               <BellOff className="h-2.5 w-2.5" />
@@ -216,27 +229,28 @@ function AnomalyRow({
         </div>
       </div>
 
-      {/* Deviation badge + mute toggle + arrow */}
-      <div className="flex items-center gap-2 shrink-0">
-        <Badge
-          variant={isSuspicious ? "outline" : "warning"}
-          className={`text-[10px] h-5 px-1.5 font-mono tabular-nums gap-1 ${
-            isSuspicious ? "border-warning/40 text-warning" : ""
-          }`}
-        >
-          {isAbove ? (
-            <TrendingUp className="h-2.5 w-2.5" />
-          ) : (
-            <TrendingDown className="h-2.5 w-2.5" />
-          )}
-          {deviationValue}σ
-        </Badge>
+      {/* Deviation hero figure */}
+      <div className="flex shrink-0 flex-col items-end leading-none">
+        <span className="flex items-baseline gap-0.5">
+          <span className={cn("text-2xl font-bold tabular-nums", tone.text)}>
+            {deviationValue}
+          </span>
+          <span className={cn("text-sm font-semibold", tone.text)}>σ</span>
+        </span>
+        <span className="mt-1 inline-flex items-center gap-0.5 text-[11px] text-muted-foreground">
+          <DirectionIcon className="h-3 w-3" />
+          vs baseline
+        </span>
+      </div>
+
+      {/* Row actions — calm at rest, revealed on hover. */}
+      <div className="flex items-center gap-1 shrink-0">
         {canMute && (
           <Button
             type="button"
             variant="ghost"
             size="icon"
-            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
             disabled={isToggling}
             title={
               isMuted
@@ -261,7 +275,7 @@ function AnomalyRow({
             type="button"
             variant="ghost"
             size="icon"
-            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
             disabled={isSuppressing}
             title="Suppress this anomaly until it changes again"
             onClick={(event) => {
@@ -367,7 +381,7 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
 
   if (isLoading) {
     return (
-      <Card>
+      <Card className="relative overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)]">
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-base">
             <Activity className="h-4 w-4" />
@@ -389,32 +403,67 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
 
   const confirmedCount = confirmedAnomalies.length;
   const suspiciousCount = suspiciousAnomalies.length;
+  const activeCount = activeAnomalies.length;
 
   const isToggling = muteMutation.isPending || unmuteMutation.isPending;
 
+  const accent = anomalyToneStyles(widgetTone({ confirmedCount }));
+  const confirmedStyles = anomalyToneStyles("warn");
+  const suspiciousStyles = anomalyToneStyles("unknown");
+
   return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2 text-base">
-            <Activity className="h-4 w-4 text-warning" />
-            System Anomalies
-          </CardTitle>
-          <div className="flex items-center gap-1.5">
+    <Card className="relative overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)] transition-all">
+      {/* Status accent stripe: worst active state encoded by hue + position. */}
+      <span
+        className={cn("absolute inset-y-0 left-0 w-1", accent.accent)}
+        aria-hidden
+      />
+      <CardHeader className="pl-6">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <span className="text-3xl font-bold tabular-nums leading-none text-foreground">
+              {activeCount}
+            </span>
+            <div className="min-w-0">
+              <CardTitle className="flex items-center gap-1.5 text-base">
+                <Activity className="h-4 w-4 text-status-warn" />
+                System Anomalies
+              </CardTitle>
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                active signals
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center justify-end gap-1.5">
             {confirmedCount > 0 && (
-              <Badge variant="warning" className="text-[10px] h-5 px-1.5 gap-1">
-                <AlertTriangle className="h-2.5 w-2.5" />
+              <span
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+                  confirmedStyles.pill,
+                )}
+              >
+                <span
+                  className={cn("size-1.5 rounded-full", confirmedStyles.dot)}
+                  aria-hidden
+                />
+                <AlertTriangle className="h-3 w-3" />
                 {confirmedCount}
-              </Badge>
+              </span>
             )}
             {suspiciousCount > 0 && (
-              <Badge
-                variant="outline"
-                className="text-[10px] h-5 px-1.5 gap-1 border-warning/40 text-warning"
+              <span
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+                  suspiciousStyles.pill,
+                )}
               >
-                <HelpCircle className="h-2.5 w-2.5" />
+                <span
+                  className={cn("size-1.5 rounded-full", suspiciousStyles.dot)}
+                  aria-hidden
+                />
+                <HelpCircle className="h-3 w-3" />
                 {suspiciousCount}
-              </Badge>
+              </span>
             )}
             {canMute && (
               <Button
@@ -447,7 +496,7 @@ export const SystemAnomalyWidget: React.FC<Props> = ({ system }) => {
         </div>
       </CardHeader>
       <CardContent className="p-0">
-        <div className="flex flex-col divide-y">
+        <div className="flex flex-col divide-y divide-border/60">
           {activeAnomalies.map((anomaly) => (
             <AnomalyRow
               key={anomaly.id}

package/src/components/anomalyTone.logic.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "bun:test";
+import {
+  anomalyToneStyles,
+  toneForState,
+  widgetTone,
+} from "./anomalyTone.logic";
+
+describe("toneForState", () => {
+  it("maps suspicious to unknown", () => {
+    expect(toneForState("suspicious")).toBe("unknown");
+  });
+
+  it("maps confirmed (anomaly) to warn", () => {
+    expect(toneForState("anomaly")).toBe("warn");
+    expect(toneForState("confirmed")).toBe("warn");
+  });
+});
+
+describe("widgetTone", () => {
+  it("is warn when any confirmed anomaly is present", () => {
+    expect(widgetTone({ confirmedCount: 1 })).toBe("warn");
+    expect(widgetTone({ confirmedCount: 5 })).toBe("warn");
+  });
+
+  it("falls back to unknown when only suspicious rows exist", () => {
+    expect(widgetTone({ confirmedCount: 0 })).toBe("unknown");
+  });
+});
+
+describe("anomalyToneStyles", () => {
+  it("returns the warn triad classes", () => {
+    const styles = anomalyToneStyles("warn");
+    expect(styles.accent).toContain("bg-status-warn");
+    expect(styles.pill).toContain("text-status-warn");
+    expect(styles.dot).toBe("bg-status-warn");
+  });
+
+  it("returns the unknown triad classes", () => {
+    const styles = anomalyToneStyles("unknown");
+    expect(styles.accent).toContain("bg-status-unknown");
+    expect(styles.pill).toContain("text-status-unknown");
+    expect(styles.dot).toBe("bg-status-unknown");
+  });
+});

package/src/components/anomalyTone.logic.ts

@@ -0,0 +1,51 @@
+/**
+ * Maps anomaly states to the colorblind-safe status triad used across the
+ * design system. Confirmed anomalies read as `warn`; suspicious (not yet
+ * confirmed) ones read as `unknown`. Spelled out as full literal class strings
+ * (not interpolated) so Tailwind's JIT keeps them.
+ */
+export type AnomalyTone = "warn" | "unknown";
+
+export interface AnomalyToneStyles {
+  pill: string;
+  dot: string;
+  accent: string;
+  text: string;
+}
+
+const TONE_STYLES: Record<AnomalyTone, AnomalyToneStyles> = {
+  warn: {
+    pill: "bg-status-warn/10 text-status-warn",
+    dot: "bg-status-warn",
+    accent: "bg-status-warn",
+    text: "text-status-warn",
+  },
+  unknown: {
+    pill: "bg-status-unknown/10 text-status-unknown",
+    dot: "bg-status-unknown",
+    accent: "bg-status-unknown",
+    text: "text-status-unknown",
+  },
+};
+
+/** The tone for a single anomaly state string. */
+export function toneForState(state: string): AnomalyTone {
+  return state === "suspicious" ? "unknown" : "warn";
+}
+
+/** Resolve the full class-set for a tone. */
+export function anomalyToneStyles(tone: AnomalyTone): AnomalyToneStyles {
+  return TONE_STYLES[tone];
+}
+
+/**
+ * The accent stripe / overall card tone for the widget: `warn` when any
+ * confirmed anomaly is present, otherwise `unknown` (only suspicious rows).
+ */
+export function widgetTone({
+  confirmedCount,
+}: {
+  confirmedCount: number;
+}): AnomalyTone {
+  return confirmedCount > 0 ? "warn" : "unknown";
+}