@checkstack/dashboard-frontend 0.7.7 → 0.8.0

package/src/components/DashboardAllClear.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  Card,
+  CardContent,
+  DynamicIcon,
+  AnimatedCounter,
+  cn,
+} from "@checkstack/ui";
+
+/**
+ * The dashboard's resting state: a calm, reassuring "all clear" hero shown when
+ * every monitored system is healthy. A soft success glow is used only when the
+ * device can afford it; low-power devices get a solid tint instead.
+ */
+export const DashboardAllClear: React.FC<{
+  systemsCount: number;
+  isLowPower: boolean;
+}> = ({ systemsCount, isLowPower }) => {
+  return (
+    <Card
+      className={cn(
+        "overflow-hidden border-success/30",
+        isLowPower
+          ? "bg-success/5"
+          : "bg-gradient-to-br from-success/10 via-transparent to-transparent",
+      )}
+    >
+      <CardContent className="flex flex-col items-center py-14 text-center">
+        <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-success/10 text-success">
+          <DynamicIcon name="ShieldCheck" className="h-7 w-7" />
+        </div>
+        <p className="text-lg font-semibold text-foreground">All clear</p>
+        <p className="mt-1 max-w-prose text-sm text-muted-foreground">
+          All <AnimatedCounter value={systemsCount} /> systems are healthy.
+          Nothing needs your attention right now.
+        </p>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/FleetHealthHeader.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import type { SystemSignalTone } from "@checkstack/catalog-common";
+import { DynamicIcon, cn, type IconName } from "@checkstack/ui";
+import type { SeverityCounts } from "../logic/systemSignals";
+
+interface ToneChip {
+  tone: SystemSignalTone;
+  label: string;
+  icon: IconName;
+  count: number;
+  activeClass: string;
+}
+
+const idleClass =
+  "border-border bg-card text-muted-foreground hover:bg-muted/50";
+
+/**
+ * Compact fleet-health strip: a one-line summary plus severity chips that
+ * double as filters for the problem list. Counts come straight from the
+ * aggregated signals so the strip is agnostic to which plugins produced them.
+ */
+export const FleetHealthHeader: React.FC<{
+  systemsCount: number;
+  problemsCount: number;
+  counts: SeverityCounts;
+  healthyCount: number;
+  activeTone: SystemSignalTone | null;
+  onToneSelect: (tone: SystemSignalTone | null) => void;
+  isLowPower: boolean;
+}> = ({
+  systemsCount,
+  problemsCount,
+  counts,
+  healthyCount,
+  activeTone,
+  onToneSelect,
+  isLowPower,
+}) => {
+  const chips: ToneChip[] = [
+    {
+      tone: "error",
+      label: "Critical",
+      icon: "OctagonAlert",
+      count: counts.error,
+      activeClass: "border-destructive bg-destructive/10 text-destructive",
+    },
+    {
+      tone: "warn",
+      label: "Degraded",
+      icon: "TriangleAlert",
+      count: counts.warn,
+      activeClass: "border-warning bg-warning/10 text-warning",
+    },
+    {
+      tone: "info",
+      label: "Watch",
+      icon: "Info",
+      count: counts.info,
+      activeClass: "border-info bg-info/10 text-info",
+    },
+  ];
+
+  const summary =
+    problemsCount === 0
+      ? "All systems healthy"
+      : `${problemsCount} of ${systemsCount} ${problemsCount === 1 ? "system needs" : "systems need"} attention`;
+
+  return (
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <p className="text-sm font-medium text-foreground">{summary}</p>
+      <div className="flex flex-wrap items-center gap-2">
+        {chips.map((chip) => {
+          const active = activeTone === chip.tone;
+          return (
+            <button
+              key={chip.tone}
+              type="button"
+              aria-pressed={active}
+              onClick={() => onToneSelect(active ? null : chip.tone)}
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                !isLowPower && "transition-colors",
+                active ? chip.activeClass : idleClass,
+              )}
+            >
+              <DynamicIcon name={chip.icon} className="h-3.5 w-3.5" />
+              <span className="tabular-nums">{chip.count}</span>
+              {chip.label}
+            </button>
+          );
+        })}
+        <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground">
+          <DynamicIcon name="ShieldCheck" className="h-3.5 w-3.5 text-success" />
+          <span className="tabular-nums">{healthyCount}</span>
+          Healthy
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/components/ProblemSystemCard.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { formatDistanceToNow } from "date-fns";
+import { resolveRoute } from "@checkstack/common";
+import {
+  catalogRoutes,
+  type System,
+  type SystemSignal,
+  type SystemSignalTone,
+} from "@checkstack/catalog-common";
+import { Card, CardContent, DynamicIcon, cn } from "@checkstack/ui";
+import { ChevronRight } from "lucide-react";
+import type { ProblemSystem } from "../logic/systemSignals";
+
+const chipBg: Record<SystemSignalTone, string> = {
+  error: "bg-destructive/10 text-destructive",
+  warn: "bg-warning/10 text-warning",
+  info: "bg-info/10 text-info",
+};
+
+const dotBg: Record<SystemSignalTone, string> = {
+  error: "bg-destructive",
+  warn: "bg-warning",
+  info: "bg-info",
+};
+
+const dotRing: Record<SystemSignalTone, string> = {
+  error: "ring-destructive/20",
+  warn: "ring-warning/20",
+  info: "ring-info/20",
+};
+
+const glow: Record<SystemSignalTone, string> = {
+  error: "from-destructive/[0.08]",
+  warn: "from-warning/[0.08]",
+  info: "from-info/[0.07]",
+};
+
+const SignalRow: React.FC<{ signal: SystemSignal; isLowPower: boolean }> = ({
+  signal,
+  isLowPower,
+}) => {
+  const body = (
+    <>
+      <span
+        className={cn(
+          "flex size-6 shrink-0 items-center justify-center rounded-md",
+          chipBg[signal.tone],
+        )}
+      >
+        <DynamicIcon name={signal.iconName} className="h-3.5 w-3.5" />
+      </span>
+      <span className="shrink-0 text-sm font-medium text-foreground">
+        {signal.label}
+      </span>
+      {signal.detail && (
+        <span className="min-w-0 truncate text-xs text-muted-foreground">
+          {signal.detail}
+        </span>
+      )}
+      {signal.href && (
+        <ChevronRight
+          className={cn(
+            "ml-auto h-4 w-4 shrink-0 text-muted-foreground/70 opacity-0 group-hover/row:opacity-100",
+            !isLowPower && "transition-opacity",
+          )}
+          aria-hidden="true"
+        />
+      )}
+    </>
+  );
+
+  if (!signal.href) {
+    return (
+      <li className="flex items-center gap-2.5 px-2 py-1.5">{body}</li>
+    );
+  }
+
+  return (
+    <li>
+      <Link
+        to={signal.href}
+        className={cn(
+          "group/row -mx-2 flex items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-muted/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          !isLowPower && "transition-colors",
+        )}
+      >
+        {body}
+      </Link>
+    </li>
+  );
+};
+
+/**
+ * One "needs attention" system in the dashboard overview: an elevated card whose
+ * name links to the system, with a tone-coded status dot, a "since" pill, and one
+ * row per contributed {@link SystemSignal} deep-linking to the page the issue
+ * originates from. Signals are pre-sorted worst-first by the aggregator.
+ */
+export const ProblemSystemCard: React.FC<{
+  system: System;
+  problem: ProblemSystem;
+  isLowPower: boolean;
+}> = ({ system, problem, isLowPower }) => {
+  return (
+    <Card
+      className={cn(
+        "group/card relative overflow-hidden border-border/70",
+        !isLowPower &&
+          "transition-all duration-200 hover:border-border hover:shadow-lg hover:shadow-black/5",
+      )}
+    >
+      {!isLowPower && (
+        <div
+          className={cn(
+            "pointer-events-none absolute inset-x-0 top-0 h-20 bg-gradient-to-b to-transparent",
+            glow[problem.worstTone],
+          )}
+          aria-hidden="true"
+        />
+      )}
+      <CardContent className="relative p-4">
+        <div className="flex items-center gap-2.5">
+          <span
+            className={cn(
+              "size-2.5 shrink-0 rounded-full",
+              dotBg[problem.worstTone],
+              !isLowPower && cn("ring-4", dotRing[problem.worstTone]),
+            )}
+            aria-hidden="true"
+          />
+          <Link
+            to={resolveRoute(catalogRoutes.routes.systemDetail, {
+              systemId: system.id,
+            })}
+            className={cn(
+              "min-w-0 flex-1 truncate text-[15px] font-semibold text-foreground",
+              !isLowPower && "transition-colors",
+              "hover:text-primary",
+            )}
+          >
+            {system.name}
+          </Link>
+          {problem.oldestSince && (
+            <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+              {formatDistanceToNow(new Date(problem.oldestSince), {
+                addSuffix: true,
+              })}
+            </span>
+          )}
+        </div>
+        <ul className="mt-3 space-y-0.5">
+          {problem.signals.map((signal, index) => (
+            <SignalRow
+              key={`${signal.source}-${index}`}
+              signal={signal}
+              isLowPower={isLowPower}
+            />
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+};

package/src/index.tsx

@@ -1,5 +1,4 @@
 import { FrontendPlugin, DashboardSlot } from "@checkstack/frontend-api";
-import { Dashboard } from "./Dashboard";
 import { pluginMetadata } from "./pluginMetadata";
 
 export const dashboardPlugin: FrontendPlugin = {
@@ -8,7 +7,12 @@ export const dashboardPlugin: FrontendPlugin = {
     {
       id: "dashboard-main",
       slot: DashboardSlot,
-      component: Dashboard as React.ComponentType<unknown>,
+      // Heavy dashboard (widgets/charts) — lazy so it stays out of the initial
+      // bundle; it renders only on the "/" dashboard route.
+      load: () =>
+        import("./Dashboard").then((m) => ({
+          default: m.Dashboard as React.ComponentType<unknown>,
+        })),
     },
   ],
 };

package/src/logic/systemSignals.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from "bun:test";
+import type { SystemSignal } from "@checkstack/catalog-common";
+import {
+  buildProblemSystems,
+  countByTone,
+  mergeSignalsBySystem,
+  sortSignals,
+  type SignalsBySource,
+} from "./systemSignals";
+
+const signal = (
+  source: string,
+  tone: SystemSignal["tone"],
+  label: string,
+  since?: string,
+): SystemSignal => ({ source, tone, label, since });
+
+describe("mergeSignalsBySystem", () => {
+  it("merges signals from multiple sources per system", () => {
+    const bySource: SignalsBySource = {
+      incident: { sysA: [signal("incident", "error", "Critical incident")] },
+      slo: {
+        sysA: [signal("slo", "warn", "SLO at risk")],
+        sysB: [signal("slo", "error", "SLO breaching")],
+      },
+    };
+    const merged = mergeSignalsBySystem(bySource);
+    expect(merged.sysA).toHaveLength(2);
+    expect(merged.sysB).toHaveLength(1);
+  });
+
+  it("drops empty signal arrays so a cleared source contributes nothing", () => {
+    const bySource: SignalsBySource = {
+      incident: { sysA: [] },
+      slo: { sysA: [signal("slo", "warn", "SLO at risk")] },
+    };
+    const merged = mergeSignalsBySystem(bySource);
+    expect(merged.sysA).toHaveLength(1);
+  });
+});
+
+describe("sortSignals", () => {
+  it("orders error before warn before info", () => {
+    const sorted = sortSignals([
+      signal("a", "info", "i"),
+      signal("b", "error", "e"),
+      signal("c", "warn", "w"),
+    ]);
+    expect(sorted.map((s) => s.tone)).toEqual(["error", "warn", "info"]);
+  });
+
+  it("orders oldest first within the same tone", () => {
+    const sorted = sortSignals([
+      signal("a", "warn", "newer", "2026-06-04T12:00:00.000Z"),
+      signal("b", "warn", "older", "2026-06-04T10:00:00.000Z"),
+    ]);
+    expect(sorted.map((s) => s.label)).toEqual(["older", "newer"]);
+  });
+});
+
+describe("buildProblemSystems", () => {
+  it("excludes systems with no signals and derives worst tone", () => {
+    const problems = buildProblemSystems({
+      sysA: [signal("slo", "warn", "SLO at risk"), signal("incident", "error", "Critical")],
+      sysB: [],
+    });
+    expect(problems).toHaveLength(1);
+    expect(problems[0].systemId).toBe("sysA");
+    expect(problems[0].worstTone).toBe("error");
+    expect(problems[0].signalCount).toBe(2);
+  });
+
+  it("sorts by worst tone, then signal count, then oldest", () => {
+    const problems = buildProblemSystems({
+      warnOne: [signal("slo", "warn", "w")],
+      errorOne: [signal("incident", "error", "e")],
+      errorTwo: [
+        signal("incident", "error", "e1"),
+        signal("slo", "error", "e2"),
+      ],
+    });
+    // errorTwo (2 signals) before errorOne (1 signal), both before warnOne.
+    expect(problems.map((p) => p.systemId)).toEqual([
+      "errorTwo",
+      "errorOne",
+      "warnOne",
+    ]);
+  });
+
+  it("computes the oldest since across a system's signals", () => {
+    const problems = buildProblemSystems({
+      sysA: [
+        signal("incident", "error", "newer", "2026-06-04T12:00:00.000Z"),
+        signal("maintenance", "info", "older", "2026-06-04T08:00:00.000Z"),
+      ],
+    });
+    expect(problems[0].oldestSince).toBe("2026-06-04T08:00:00.000Z");
+  });
+});
+
+describe("countByTone", () => {
+  it("counts each system once by its worst tone", () => {
+    const problems = buildProblemSystems({
+      a: [signal("incident", "error", "e"), signal("slo", "warn", "w")],
+      b: [signal("slo", "warn", "w")],
+      c: [signal("maintenance", "info", "i")],
+    });
+    expect(countByTone(problems)).toEqual({ error: 1, warn: 1, info: 1 });
+  });
+});

package/src/logic/systemSignals.ts

@@ -0,0 +1,106 @@
+import type { SystemSignal, SystemSignalTone } from "@checkstack/catalog-common";
+
+/**
+ * Severity sort weight. Lower sorts first, so a system's worst signal (and the
+ * problem cards themselves) read error -> warn -> info, matching the icon-only
+ * `StatusBadge` ordering used everywhere else.
+ */
+export const TONE_WEIGHT: Record<SystemSignalTone, number> = {
+  error: 0,
+  warn: 1,
+  info: 2,
+};
+
+/** A system that has at least one signal, with derived sort/grouping metadata. */
+export interface ProblemSystem {
+  systemId: string;
+  /** All signals for the system, sorted worst-first. */
+  signals: SystemSignal[];
+  /** The most severe tone present (drives the card accent + the header counts). */
+  worstTone: SystemSignalTone;
+  /** Number of distinct signals (tie-break: more problems sort higher). */
+  signalCount: number;
+  /** Earliest `since` across the system's signals (tie-break: longest-suffering first). */
+  oldestSince?: string;
+}
+
+/** Per-source signal maps, keyed by the source id reported through `onSignals`. */
+export type SignalsBySource = Record<
+  string,
+  Record<string, SystemSignal[]>
+>;
+
+/** Merge every source's per-system map into one per-system-id signal list. */
+export function mergeSignalsBySystem(
+  bySource: SignalsBySource,
+): Record<string, SystemSignal[]> {
+  const merged: Record<string, SystemSignal[]> = {};
+  for (const map of Object.values(bySource)) {
+    for (const [systemId, signals] of Object.entries(map)) {
+      if (!signals || signals.length === 0) continue;
+      (merged[systemId] ??= []).push(...signals);
+    }
+  }
+  return merged;
+}
+
+function sinceMs(since: string | undefined): number {
+  if (!since) return Number.POSITIVE_INFINITY;
+  const ms = Date.parse(since);
+  return Number.isNaN(ms) ? Number.POSITIVE_INFINITY : ms;
+}
+
+/** Sort a single system's signals worst-tone-first, then oldest-first. */
+export function sortSignals(signals: SystemSignal[]): SystemSignal[] {
+  return signals.toSorted((a, b) => {
+    const tone = TONE_WEIGHT[a.tone] - TONE_WEIGHT[b.tone];
+    if (tone !== 0) return tone;
+    return sinceMs(a.since) - sinceMs(b.since);
+  });
+}
+
+/**
+ * Turn the merged per-system signal map into a sorted list of problem systems.
+ * Sort order: worst tone first, then more signals first, then oldest first.
+ * Systems with no signals never appear (healthy systems are hidden).
+ */
+export function buildProblemSystems(
+  merged: Record<string, SystemSignal[]>,
+): ProblemSystem[] {
+  const problems: ProblemSystem[] = [];
+
+  for (const [systemId, rawSignals] of Object.entries(merged)) {
+    if (rawSignals.length === 0) continue;
+    const signals = sortSignals(rawSignals);
+    const oldest = Math.min(...signals.map((s) => sinceMs(s.since)));
+    problems.push({
+      systemId,
+      signals,
+      worstTone: signals[0].tone,
+      signalCount: signals.length,
+      oldestSince: Number.isFinite(oldest)
+        ? new Date(oldest).toISOString()
+        : undefined,
+    });
+  }
+
+  return problems.toSorted((a, b) => {
+    const tone = TONE_WEIGHT[a.worstTone] - TONE_WEIGHT[b.worstTone];
+    if (tone !== 0) return tone;
+    if (b.signalCount !== a.signalCount) return b.signalCount - a.signalCount;
+    return sinceMs(a.oldestSince) - sinceMs(b.oldestSince);
+  });
+}
+
+export interface SeverityCounts {
+  error: number;
+  warn: number;
+  info: number;
+}
+
+/** Count problem systems by their worst tone (each system counted once). */
+export function countByTone(problems: ProblemSystem[]): SeverityCounts {
+  const counts: SeverityCounts = { error: 0, warn: 0, info: 0 };
+  for (const problem of problems) counts[problem.worstTone] += 1;
+  return counts;
+}

package/tsconfig.json

@@ -4,12 +4,6 @@
     "src"
   ],
   "references": [
-    {
-      "path": "../anomaly-common"
-    },
-    {
-      "path": "../auth-frontend"
-    },
     {
       "path": "../catalog-common"
     },
@@ -37,12 +31,6 @@
     {
       "path": "../maintenance-common"
     },
-    {
-      "path": "../notification-common"
-    },
-    {
-      "path": "../notification-frontend"
-    },
     {
       "path": "../queue-frontend"
     },

package/src/components/AnomalyOverviewSheet.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetBody,
-  Badge,
-} from "@checkstack/ui";
-import { Link } from "react-router-dom";
-import {
-  catalogRoutes,
-  type System,
-} from "@checkstack/catalog-common";
-import { resolveRoute } from "@checkstack/common";
-import { type AnomalyDto } from "@checkstack/anomaly-common";
-import { formatDistanceToNow } from "date-fns";
-
-interface Props {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  anomalies: AnomalyDto[];
-  systems: System[];
-}
-
-export const AnomalyOverviewSheet: React.FC<Props> = ({
-  open,
-  onOpenChange,
-  anomalies,
-  systems,
-}) => {
-  // Map of systemId -> systemName
-  const systemMap = new Map(systems.map((s) => [s.id, s.name]));
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent>
-        <SheetHeader className="flex flex-row items-start justify-between gap-4 pt-6">
-          <div className="flex flex-col gap-1 text-left">
-            <SheetTitle>Active Anomalies</SheetTitle>
-            <p className="text-sm text-muted-foreground">
-              Overview of unusual system behavior
-            </p>
-          </div>
-        </SheetHeader>
-
-        <SheetBody className="flex flex-col gap-3 pb-8">
-          {anomalies.length === 0 ? (
-            <p className="text-sm text-muted-foreground text-center py-8">
-              No active anomalies
-            </p>
-          ) : (
-            anomalies.map((anomaly) => {
-              const systemName = systemMap.get(anomaly.systemId) || anomaly.systemId;
-              const deviationText = anomaly.deviation 
-                ? `${anomaly.deviation.toFixed(1)}σ`
-                : "unusual";
-
-              return (
-                <Link
-                  key={anomaly.id}
-                  to={resolveRoute(catalogRoutes.routes.systemDetail, { systemId: anomaly.systemId })}
-                  onClick={() => onOpenChange(false)}
-                  className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4 hover:border-primary/50 hover:shadow-sm transition-all text-left"
-                >
-                  <div className="flex items-start justify-between gap-4">
-                    <h4 className="font-medium text-foreground">
-                      {systemName}
-                    </h4>
-                    <Badge variant="warning" className="flex-shrink-0 font-mono">
-                      {deviationText}
-                    </Badge>
-                  </div>
-                  <div className="flex flex-col gap-1 mt-2">
-                    <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-                      Metric
-                    </span>
-                    <span className="text-sm font-mono text-foreground break-all">
-                      {anomaly.fieldPath}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between mt-2 pt-2 border-t border-border/50 text-xs text-muted-foreground">
-                    <span className="font-mono">
-                      Observed: {anomaly.observedValue} <span className="opacity-70">(~{anomaly.baselineValue})</span>
-                    </span>
-                    <span>
-                      {formatDistanceToNow(new Date(anomaly.startedAt), { addSuffix: true })}
-                    </span>
-                  </div>
-                </Link>
-              );
-            })
-          )}
-        </SheetBody>
-      </SheetContent>
-    </Sheet>
-  );
-};