@checkstack/slo-frontend 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+# @checkstack/slo-frontend
+
+## 0.2.0
+
+### Minor Changes
+
+- 3c34b07: Complete SLO Reliability Engine frontend and backend
+
+  **Frontend** — 7 new visualization components:
+
+  - `StreakCounter`: Fire-themed compliance streak counter with color-coded flame and best-streak trophy
+  - `AchievementBadge`: Emoji-labeled badges for 9 achievement types with hover tooltip
+  - `AttributionChart`: Horizontal stacked bar showing error budget split (self/upstream/remaining)
+  - `DowntimeTimeline`: Dot-and-line timeline with attribution badges and timestamps
+  - `SloTrendChart`: Pure SVG availability trend line chart from daily snapshots
+  - `MilestoneFeed`: Organization-wide milestone feed on the SLO overview sidebar
+  - `DependencyExclusionConfig`: Interactive upstream dependency picker for SLO editor
+
+  **Backend** — Weekly digest scheduled integration event:
+
+  - `weekly-digest.ts`: Cron job (Monday 09:00 UTC) emitting SLO performance summary
+  - Top/worst performers, breach counts, and streak data delivered via configured notification channels
+  - New `sloWeeklyDigest` hook registered as integration event
+
+### Patch Changes
+
+- Updated dependencies [d1a2796]
+- Updated dependencies [3c34b07]
+  - @checkstack/common@0.6.5
+  - @checkstack/ui@1.2.1
+  - @checkstack/dashboard-frontend@0.3.26
+  - @checkstack/frontend-api@0.3.9
+  - @checkstack/slo-common@0.2.0
+  - @checkstack/catalog-common@1.3.1
+  - @checkstack/healthcheck-common@0.10.1
+  - @checkstack/dependency-common@0.2.1
+  - @checkstack/signal-frontend@0.0.15

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@checkstack/slo-frontend",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "src/index.tsx",
+  "checkstack": {
+    "type": "frontend"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkstack/catalog-common": "1.3.0",
+    "@checkstack/common": "0.6.4",
+    "@checkstack/dashboard-frontend": "0.3.25",
+    "@checkstack/frontend-api": "0.3.8",
+    "@checkstack/signal-frontend": "0.0.14",
+    "@checkstack/dependency-common": "0.2.0",
+    "@checkstack/healthcheck-common": "0.10.0",
+    "@checkstack/slo-common": "0.1.0",
+    "@checkstack/ui": "1.2.0",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkstack/tsconfig": "0.0.5",
+    "@checkstack/scripts": "0.1.2"
+  }
+}

package/src/api.ts

@@ -0,0 +1,13 @@
+// Re-export types for convenience
+export type {
+  SloObjective,
+  SloStatus,
+  SloDowntimeEvent,
+  SloStreak,
+  SloAchievement,
+  SloDailySnapshot,
+  DependencyExclusionMode,
+  AttributionType,
+} from "@checkstack/slo-common";
+// Client definition - use with usePluginClient
+export { SloApi } from "@checkstack/slo-common";

package/src/components/AchievementBadge.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { Award } from "lucide-react";
+import { Badge } from "@checkstack/ui";
+
+interface AchievementBadgeProps {
+  achievement: string;
+  unlockedAt: Date;
+}
+
+const ACHIEVEMENT_META: Record<
+  string,
+  { label: string; emoji: string; description: string }
+> = {
+  first_steps: {
+    label: "First Steps",
+    emoji: "🎯",
+    description: "First SLO defined",
+  },
+  iron_uptime: {
+    label: "Iron Uptime",
+    emoji: "🛡️",
+    description: "30-day compliance streak",
+  },
+  diamond_uptime: {
+    label: "Diamond Uptime",
+    emoji: "💎",
+    description: "90-day compliance streak",
+  },
+  budget_miser: {
+    label: "Budget Miser",
+    emoji: "💰",
+    description: ">90% budget remaining at window end",
+  },
+  clean_sheet: {
+    label: "Clean Sheet",
+    emoji: "✨",
+    description: "Zero breaches in a quarter",
+  },
+  nines_club: {
+    label: "Nines Club",
+    emoji: "🏆",
+    description: "99.99% over 365 days",
+  },
+  cascade_breaker: {
+    label: "Cascade Breaker",
+    emoji: "🛑",
+    description: "Upstream resolved before SLO impact",
+  },
+  full_coverage: {
+    label: "Full Coverage",
+    emoji: "🔒",
+    description: "All systems in group have SLOs",
+  },
+  rapid_recovery: {
+    label: "Rapid Recovery",
+    emoji: "⚡",
+    description: "SLO compliance restored within 5 min",
+  },
+};
+
+/**
+ * Renders an achievement badge with emoji, label, and tooltip description.
+ */
+export const AchievementBadge: React.FC<AchievementBadgeProps> = ({
+  achievement,
+  unlockedAt,
+}) => {
+  const meta = ACHIEVEMENT_META[achievement];
+  const label = meta?.label ?? achievement;
+  const emoji = meta?.emoji ?? "🏅";
+  const description = meta?.description ?? "";
+
+  return (
+    <div className="group relative inline-flex" title={description}>
+      <Badge variant="outline" className="gap-1.5 cursor-default">
+        <span>{emoji}</span>
+        <span>{label}</span>
+      </Badge>
+      {/* Tooltip on hover */}
+      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block z-10">
+        <div className="bg-popover border border-border rounded-md shadow-md px-3 py-2 text-xs whitespace-nowrap">
+          <div className="font-medium">{label}</div>
+          <div className="text-muted-foreground">{description}</div>
+          <div className="text-muted-foreground mt-1">
+            {new Date(unlockedAt).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Renders a placeholder for systems with no achievements yet.
+ */
+export const NoAchievements: React.FC = () => (
+  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+    <Award className="w-4 h-4" />
+    <span>No achievements unlocked yet</span>
+  </div>
+);

package/src/components/AttributionChart.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+
+interface AttributionChartProps {
+  attribution: Array<{
+    sourceType: "self" | "upstream";
+    systemId?: string;
+    systemName?: string;
+    minutes: number;
+  }>;
+  totalBudgetMinutes: number;
+}
+
+/**
+ * Horizontal stacked bar showing error budget consumption split by attribution.
+ * Self-caused downtime in red, upstream-attributed in amber, remaining in green.
+ */
+export const AttributionChart: React.FC<AttributionChartProps> = ({
+  attribution,
+  totalBudgetMinutes,
+}) => {
+  if (totalBudgetMinutes <= 0) return;
+
+  const selfMinutes = attribution
+    .filter((a) => a.sourceType === "self")
+    .reduce((sum, a) => sum + a.minutes, 0);
+
+  const upstreamMinutes = attribution
+    .filter((a) => a.sourceType === "upstream")
+    .reduce((sum, a) => sum + a.minutes, 0);
+
+  const selfPercent = Math.min(
+    (selfMinutes / totalBudgetMinutes) * 100,
+    100,
+  );
+  const upstreamPercent = Math.min(
+    (upstreamMinutes / totalBudgetMinutes) * 100,
+    100 - selfPercent,
+  );
+  const remainingPercent = Math.max(
+    100 - selfPercent - upstreamPercent,
+    0,
+  );
+
+  return (
+    <div className="space-y-2">
+      {/* Stacked bar */}
+      <div className="h-6 rounded-full overflow-hidden flex bg-muted/30 border border-border">
+        {selfPercent > 0 && (
+          <div
+            className="bg-destructive/80 transition-all duration-500"
+            style={{ width: `${selfPercent}%` }}
+            title={`Self: ${selfMinutes.toFixed(1)} min`}
+          />
+        )}
+        {upstreamPercent > 0 && (
+          <div
+            className="bg-amber-500/80 transition-all duration-500"
+            style={{ width: `${upstreamPercent}%` }}
+            title={`Upstream: ${upstreamMinutes.toFixed(1)} min`}
+          />
+        )}
+        {remainingPercent > 0 && (
+          <div
+            className="bg-emerald-500/30 transition-all duration-500"
+            style={{ width: `${remainingPercent}%` }}
+            title={`Remaining: ${(totalBudgetMinutes - selfMinutes - upstreamMinutes).toFixed(1)} min`}
+          />
+        )}
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-4 text-xs">
+        <div className="flex items-center gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-destructive/80" />
+          <span className="text-muted-foreground">
+            Self: {selfMinutes.toFixed(1)} min
+          </span>
+        </div>
+        {upstreamMinutes > 0 && (
+          <div className="flex items-center gap-1.5">
+            <div className="w-2.5 h-2.5 rounded-full bg-amber-500/80" />
+            <span className="text-muted-foreground">
+              Upstream: {upstreamMinutes.toFixed(1)} min
+            </span>
+          </div>
+        )}
+        <div className="flex items-center gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/30" />
+          <span className="text-muted-foreground">
+            Remaining:{" "}
+            {(totalBudgetMinutes - selfMinutes - upstreamMinutes).toFixed(1)}{" "}
+            min
+          </span>
+        </div>
+      </div>
+
+      {/* Per-upstream breakdown */}
+      {attribution.some((a) => a.sourceType === "upstream") && (
+        <div className="text-xs text-muted-foreground space-y-0.5 pt-1">
+          {attribution
+            .filter((a) => a.sourceType === "upstream")
+            .map((a) => (
+              <div key={a.systemId ?? "unknown"} className="flex justify-between">
+                <span>↳ {a.systemName ?? a.systemId ?? "Unknown"}</span>
+                <span>{a.minutes.toFixed(1)} min</span>
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/BurnRateIndicator.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+
+interface BurnRateIndicatorProps {
+  burnRate: number | null;
+}
+
+/**
+ * Visual burn rate indicator.
+ * Shows how fast the error budget is being consumed relative to the window.
+ * - < 1.0: consuming slower than expected (good)
+ * - 1.0: on pace
+ * - > 1.0: consuming faster than expected (bad)
+ */
+export const BurnRateIndicator: React.FC<BurnRateIndicatorProps> = ({
+  burnRate,
+}) => {
+  if (burnRate === null || burnRate === undefined) {
+    return (
+      <span className="inline-flex items-center gap-1 text-sm text-muted-foreground">
+        <Minus className="w-3.5 h-3.5" />
+        <span>N/A</span>
+      </span>
+    );
+  }
+
+  const isGood = burnRate < 1;
+  const isBad = burnRate > 1.5;
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 text-sm font-medium ${
+        isGood
+          ? "text-success"
+          : isBad
+            ? "text-destructive"
+            : "text-muted-foreground"
+      }`}
+    >
+      {isGood ? (
+        <TrendingDown className="w-3.5 h-3.5" />
+      ) : isBad ? (
+        <TrendingUp className="w-3.5 h-3.5" />
+      ) : (
+        <Minus className="w-3.5 h-3.5" />
+      )}
+      <span>{burnRate.toFixed(2)}x</span>
+    </span>
+  );
+};

package/src/components/DependencyExclusionConfig.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { DependencyApi } from "@checkstack/dependency-common";
+import { CatalogApi } from "@checkstack/catalog-common";
+import type { DependencyExclusionMode } from "@checkstack/slo-common";
+import {
+  Label,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@checkstack/ui";
+import { ShieldCheck, ShieldAlert, ShieldOff } from "lucide-react";
+
+interface DependencyExclusionConfigProps {
+  systemId: string;
+  mode: DependencyExclusionMode;
+  onModeChange: (mode: DependencyExclusionMode) => void;
+  excludedIds: string[];
+  onExcludedIdsChange: (ids: string[]) => void;
+}
+
+/**
+ * Configuration component for SLO dependency exclusion.
+ * Shows mode selector and auto-discovered upstream dependency checklist.
+ */
+export const DependencyExclusionConfig: React.FC<
+  DependencyExclusionConfigProps
+> = ({ systemId, mode, onModeChange, excludedIds, onExcludedIdsChange }) => {
+  const depClient = usePluginClient(DependencyApi);
+  const catalogClient = usePluginClient(CatalogApi);
+
+  // Fetch upstream dependencies for this system
+  const { data: depData } = depClient.getDependencies.useQuery(
+    { systemId, direction: "upstream" },
+    { enabled: !!systemId },
+  );
+
+  // Fetch system names for display
+  const { data: systemsData } = catalogClient.getSystems.useQuery({});
+
+  const upstreamDeps = depData?.dependencies ?? [];
+  const systemNameMap = new Map(
+    systemsData?.systems.map((s) => [s.id, s.name]),
+  );
+
+  const handleToggle = (depSystemId: string) => {
+    if (excludedIds.includes(depSystemId)) {
+      onExcludedIdsChange(excludedIds.filter((id) => id !== depSystemId));
+    } else {
+      onExcludedIdsChange([...excludedIds, depSystemId]);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Mode selector */}
+      <div className="grid gap-2">
+        <Label>Dependency Exclusion Mode</Label>
+        <Select
+          value={mode}
+          onValueChange={(v) => onModeChange(v as DependencyExclusionMode)}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="strict">
+              <div className="flex items-center gap-2">
+                <ShieldAlert className="w-4 h-4 text-destructive" />
+                Strict — All downtime counts
+              </div>
+            </SelectItem>
+            <SelectItem value="self-only">
+              <div className="flex items-center gap-2">
+                <ShieldCheck className="w-4 h-4 text-emerald-500" />
+                Self-Only — Exclude upstream-attributed downtime
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          {mode === "strict"
+            ? "All downtime counts against the error budget, regardless of root cause."
+            : "Only self-caused downtime counts. Upstream failures are attributed but excluded from budget consumption."}
+        </p>
+      </div>
+
+      {/* Upstream dependency exclusion list */}
+      {mode === "self-only" && upstreamDeps.length > 0 && (
+        <div className="grid gap-2">
+          <Label className="flex items-center gap-2">
+            <ShieldOff className="w-4 h-4" />
+            Excluded Dependencies
+          </Label>
+          <p className="text-xs text-muted-foreground">
+            Check dependencies to exclude from upstream attribution. Downtime
+            from excluded upstreams will count as self-caused.
+          </p>
+          <div className="space-y-2 rounded-md border border-border p-3">
+            {upstreamDeps.map((dep) => {
+              const upstreamId =
+                dep.sourceSystemId === systemId
+                  ? dep.targetSystemId
+                  : dep.sourceSystemId;
+              const isExcluded = excludedIds.includes(upstreamId);
+              const name =
+                systemNameMap.get(upstreamId) ?? upstreamId;
+
+              return (
+                <label
+                  key={dep.id}
+                  className="flex items-center gap-2 cursor-pointer text-sm hover:bg-muted/50 rounded px-2 py-1 transition-colors"
+                >
+                  <input
+                    type="checkbox"
+                    checked={isExcluded}
+                    onChange={() => handleToggle(upstreamId)}
+                    className="rounded border-border"
+                  />
+                  <span className={isExcluded ? "line-through text-muted-foreground" : ""}>
+                    {name}
+                  </span>
+                  {isExcluded && (
+                    <span className="text-xs text-muted-foreground">
+                      (treated as self)
+                    </span>
+                  )}
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {mode === "self-only" && upstreamDeps.length === 0 && (
+        <p className="text-xs text-muted-foreground">
+          No upstream dependencies configured for this system.
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/DowntimeTimeline.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Badge } from "@checkstack/ui";
+import { Clock } from "lucide-react";
+import { formatDistanceToNow, format } from "date-fns";
+
+interface DowntimeEvent {
+  id: string;
+  startTime: Date;
+  endTime: Date | null;
+  durationSeconds: number | null;
+  attributionType: "self" | "upstream";
+  upstreamSystemId: string | null;
+  upstreamSystemName: string | null;
+}
+
+interface DowntimeTimelineProps {
+  events: DowntimeEvent[];
+}
+
+/**
+ * Visual timeline of downtime events with attribution coloring.
+ * Shows a chronological list with duration, attribution badge, and timestamps.
+ */
+export const DowntimeTimeline: React.FC<DowntimeTimelineProps> = ({
+  events,
+}) => {
+  if (events.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-4">
+        No downtime events in the current window
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      {/* Timeline line */}
+      <div className="absolute left-[11px] top-2 bottom-2 w-px bg-border" />
+
+      <div className="space-y-3">
+        {events.map((event) => {
+          const isOngoing = event.endTime === null;
+          const isSelf = event.attributionType === "self";
+          const durationMinutes = event.durationSeconds
+            ? Math.round(event.durationSeconds / 60)
+            : undefined;
+
+          return (
+            <div key={event.id} className="flex gap-3 relative">
+              {/* Timeline dot */}
+              <div
+                className={`mt-1.5 w-[9px] h-[9px] rounded-full border-2 z-10 shrink-0 ${
+                  isOngoing
+                    ? "bg-destructive border-destructive animate-pulse"
+                    : isSelf
+                      ? "bg-destructive/60 border-destructive/60"
+                      : "bg-amber-500/60 border-amber-500/60"
+                }`}
+              />
+
+              {/* Event details */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge
+                    variant={isSelf ? "destructive" : "warning"}
+                  >
+                    {isSelf
+                      ? "Self"
+                      : `Upstream: ${event.upstreamSystemName ?? event.upstreamSystemId}`}
+                  </Badge>
+                  {isOngoing && (
+                    <Badge variant="destructive">Ongoing</Badge>
+                  )}
+                  {durationMinutes !== undefined && (
+                    <span className="text-xs text-muted-foreground tabular-nums">
+                      {durationMinutes < 60
+                        ? `${durationMinutes} min`
+                        : `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m`}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-1.5 mt-1 text-xs text-muted-foreground">
+                  <Clock className="w-3 h-3" />
+                  <span>
+                    {format(new Date(event.startTime), "MMM d, HH:mm")}
+                    {event.endTime
+                      ? ` → ${format(new Date(event.endTime), "HH:mm")}`
+                      : ""}
+                  </span>
+                  <span className="text-muted-foreground/50">·</span>
+                  <span>
+                    {formatDistanceToNow(new Date(event.startTime), {
+                      addSuffix: true,
+                    })}
+                  </span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/ErrorBudgetBar.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+interface ErrorBudgetBarProps {
+  consumedPercent: number;
+  warningThreshold: number;
+  criticalThreshold: number;
+  label?: string;
+}
+
+/**
+ * Visual error budget consumption bar.
+ * Shows green → amber → red progression as budget is consumed.
+ */
+export const ErrorBudgetBar: React.FC<ErrorBudgetBarProps> = ({
+  consumedPercent,
+  warningThreshold,
+  criticalThreshold,
+  label,
+}) => {
+  const remainingPercent = Math.max(0, 100 - consumedPercent);
+  const getBarColor = () => {
+    if (consumedPercent >= criticalThreshold) return "var(--destructive)";
+    if (consumedPercent >= warningThreshold) return "var(--warning)";
+    return "var(--success)";
+  };
+
+  return (
+    <div className="space-y-1.5">
+      {label && (
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>{label}</span>
+          <span className="font-medium tabular-nums">
+            {remainingPercent.toFixed(1)}% remaining
+          </span>
+        </div>
+      )}
+      <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-300"
+          style={{
+            width: `${Math.min(consumedPercent, 100)}%`,
+            backgroundColor: getBarColor(),
+          }}
+        />
+      </div>
+    </div>
+  );
+};