@checkstack/ui 1.3.6 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @checkstack/ui
 
+## 1.5.0
+
+### Minor Changes
+
+- 3da7582: Fix favicon not loading in production container and add NotFound page
+
+  - **Backend**: Fix static file serving so root-level files like `/favicon.svg` are served from the dist directory before the SPA fallback catches them
+  - **UI**: Add `NotFound` component with stacked-checkmark logo, physics-inspired falling "4" animation, and low-power device fallback
+  - **Frontend**: Add catch-all `*` route to display the NotFound page for unmatched routes, and add the Checkstack logo to the navbar
+  - **Favicon**: Redesign with stacked checkmarks in the brand purple/indigo palette
+
+## 1.4.0
+
+### Minor Changes
+
+- bb1fea0: Redesign system detail page with hero banner, two-column layout, plugin metric tiles, and health check slide-over drawer.
+
+  ### New Components
+
+  - **MetricTile** (`@checkstack/ui`): Compact stat tile with icon, label, value, variant coloring
+  - **Sheet** (`@checkstack/ui`): Slide-over drawer built on Radix Dialog primitives
+
+  ### New Extension Slot
+
+  - **SystemOverviewMetricsSlot** (`@checkstack/catalog-common`): Plugin-contributed at-a-glance metric tiles in the system detail hero banner
+
+  ### Layout Changes
+
+  - System detail page now uses a hero banner with breadcrumb, status badges, and metric tile strip
+  - Two-column layout: monitoring content (left) and system context (right)
+  - Health checks rendered as compact card rows instead of heavy accordions
+  - Clicking a health check opens a slide-over drawer with summary tiles, timeline charts, and recent runs
+  - Right column uses lightweight borderless sections with dividers instead of heavy Card wrappers
+
+  ### Plugin Extensions
+
+  - Health check, SLO, Incident, and Maintenance plugins each contribute a metric tile to the hero banner
+
+### Patch Changes
+
+- bb1fea0: feat: implement active incident and maintenance overview sheets on dashboard
+
+  - Replaces direct routing on status cards with slide-out overview sheets to gracefully degrade for users without manage permissions
+  - Refactors dashboard system groups into a clean table-style list layout for better density
+  - Makes global status cards more compact
+
 ## 1.3.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.3.6",
+  "version": "1.5.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/DateRangeFilter.tsx

@@ -27,7 +27,7 @@ export interface DateRangeFilterProps {
   className?: string;
 }
 
-const PRESETS: Array<{
+export const PRESETS: Array<{
   id: DateRangePreset;
   label: string;
   shortLabel: string;
@@ -56,7 +56,7 @@ export function getPresetRange(preset: DateRangePreset): DateRange {
   }
 }
 
-function detectPreset(range: DateRange): DateRangePreset {
+export function detectPreset(range: DateRange): DateRangePreset {
   const now = new Date();
   const diffMs = now.getTime() - range.startDate.getTime();
   const diffHours = diffMs / (1000 * 60 * 60);

package/src/components/MetricTile.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils";
+
+const metricTileVariants = cva(
+  "flex items-center gap-3 rounded-lg border bg-card p-3 min-w-0",
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        success: "border-success/30 bg-success/5",
+        warning: "border-warning/30 bg-warning/5",
+        destructive: "border-destructive/30 bg-destructive/5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface MetricTileProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof metricTileVariants> {
+  icon: React.ElementType;
+  label: string;
+  value: string;
+  subtitle?: string;
+}
+
+export const MetricTile: React.FC<MetricTileProps> = ({
+  icon: Icon,
+  label,
+  value,
+  subtitle,
+  variant,
+  className,
+  ...props
+}) => (
+  <div className={cn(metricTileVariants({ variant }), className)} {...props}>
+    <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+    <div className="min-w-0">
+      <p className="text-xs text-muted-foreground truncate">{label}</p>
+      <p className="text-sm font-semibold truncate">{value}</p>
+      {subtitle && (
+        <p className="text-xs text-muted-foreground truncate">{subtitle}</p>
+      )}
+    </div>
+  </div>
+);

package/src/components/NotFound.tsx

@@ -0,0 +1,154 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
+
+/** Rotating tech-insider quips shown on the 404 page. */
+const NOT_FOUND_QUIPS = [
+  // DevOps / infra humor
+  "Looks like this route didn't pass the health check.",
+  "This endpoint has an uptime of exactly 0%.",
+  "We checked the stack. This page isn't in it.",
+  "Our monitoring confirms: this page is down. Permanently.",
+  "This page was last seen in a git stash from 2019.",
+  String.raw`Incident report: page not found. Severity: ¯\_(ツ)_/¯`,
+  "DNS resolved. TCP connected. Page? Gone.",
+  "kubectl get page — error: resource not found.",
+  "This page is in a pending state. It may never resolve.",
+  "The deployment was successful. The page was not.",
+  "This route has been deprecated without notice.",
+  "Alert triggered: page_exists = false.",
+  // Programming jokes
+  "The page you're looking for is in another castle.",
+  "404: The page was found, then garbage collected.",
+  "Segfault at 0x00000404.",
+  "The page exists in the dev environment, we promise.",
+  "Works on my machine ™",
+  "Have you tried turning the URL off and on again?",
+  "This page is not a bug, it's an undocumented feature.",
+  "Error 404: Coffee not found. Page also missing.",
+  "git log --all --oneline | grep 'this page' → no results.",
+  // Pop culture references
+  "These aren't the pages you're looking for. — Obi-Wan Kenobi",
+  "I am inevitable. This page is not. — Thanos",
+  "One does not simply navigate to a page that doesn't exist.",
+  "In case I don't see ya: good afternoon, good evening, and good 404.",
+  "It's a feature, not a bug. — Every PM ever",
+  "Ah yes, the 404. The page that lived… briefly.",
+  "I've seen things you people wouldn't believe. But not this page.",
+  "To 404, or not to 404. That is the question.",
+  "Houston, we have a 404.",
+] as const;
+
+export const NotFound: React.FC<{
+  message?: string;
+  className?: string;
+}> = ({ message, className }) => {
+  const { isLowPower } = usePerformance();
+  const navigate = useNavigate();
+  const [hasFallen, setHasFallen] = useState(false);
+
+  const quip = useMemo(
+    () =>
+      message ??
+      NOT_FOUND_QUIPS[Math.floor(Math.random() * NOT_FOUND_QUIPS.length)],
+    [message],
+  );
+
+  useEffect(() => {
+    if (isLowPower) return;
+    const timer = setTimeout(() => setHasFallen(true), 1800);
+    return () => clearTimeout(timer);
+  }, [isLowPower]);
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center min-h-[60vh] p-8 select-none overflow-hidden",
+        className,
+      )}
+    >
+      {/* Physics keyframes for the falling "4" */}
+      {!isLowPower && (
+        <style>{`
+          @keyframes wobble-fall {
+            0%   { transform: rotate(0deg) translateY(0); }
+            15%  { transform: rotate(-2deg) translateY(0); }
+            30%  { transform: rotate(3deg) translateY(0); }
+            42%  { transform: rotate(6deg) translateY(2px); }
+            65%  { transform: rotate(55deg) translateY(30px); }
+            78%  { transform: rotate(80deg) translateY(50px); }
+            86%  { transform: rotate(72deg) translateY(45px); }
+            93%  { transform: rotate(78deg) translateY(52px); }
+            100% { transform: rotate(76deg) translateY(50px); opacity: 0.25; }
+          }
+        `}</style>
+      )}
+
+      {/* 404 display */}
+      <div className="relative mb-8">
+        {/* Glow effect */}
+        {!isLowPower && (
+          <div
+            className="absolute inset-0 blur-3xl opacity-15 bg-primary rounded-full scale-150"
+            aria-hidden="true"
+          />
+        )}
+        <div className="relative grid grid-cols-[1fr_auto_1fr] items-center">
+          <span className="text-center text-[8rem] md:text-[12rem] font-black leading-none tabular-nums text-muted-foreground/50">
+            4
+          </span>
+          {/* Checkstack logo as the "0" */}
+          <div className="flex items-center justify-center w-28 h-28 md:w-44 md:h-44 mx-1 md:mx-3">
+            <img
+              src="/favicon.svg"
+              alt=""
+              aria-hidden="true"
+              className="w-full h-full"
+            />
+          </div>
+          <span
+            className="text-center text-[8rem] md:text-[12rem] font-black leading-none tabular-nums text-muted-foreground/50"
+            style={
+              !isLowPower && hasFallen
+                ? {
+                    animation:
+                      "wobble-fall 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards",
+                    transformOrigin: "bottom left",
+                  }
+                : undefined
+            }
+          >
+            4
+          </span>
+        </div>
+      </div>
+
+      {/* Text content */}
+      <div className="text-center space-y-3 max-w-md">
+        <h2 className="text-xl md:text-2xl font-semibold text-foreground">
+          Route not found
+        </h2>
+        <p className="text-sm md:text-base text-muted-foreground leading-relaxed">
+          {quip}
+        </p>
+      </div>
+
+      {/* Action */}
+      <button
+        type="button"
+        onClick={() => navigate("/")}
+        className={cn(
+          "mt-8 inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium cursor-pointer",
+          "bg-primary/10 text-primary border border-primary/20",
+          "hover:bg-primary/20 hover:border-primary/30",
+          !isLowPower && "transition-colors duration-200",
+        )}
+      >
+        <ArrowLeft className="w-4 h-4" />
+        Back to Dashboard
+      </button>
+    </div>
+  );
+};

package/src/components/PageLayout.tsx

@@ -38,7 +38,7 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
   loading,
   allowed,
   children,
-  maxWidth = "3xl",
+  maxWidth = "7xl",
 }) => {
   // If loading is explicitly true, show loading state
   // If loading is undefined and allowed is false, also show loading state

package/src/components/Sheet.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
+
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  const { isLowPower } = usePerformance();
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50",
+        !isLowPower &&
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SheetOverlay.displayName = "SheetOverlay";
+
+const sheetContentVariants = cva(
+  "fixed z-50 flex flex-col bg-background shadow-lg border-l border-border",
+  {
+    variants: {
+      size: {
+        default: "w-full sm:max-w-lg",
+        lg: "w-full sm:max-w-2xl",
+        xl: "w-full sm:max-w-4xl",
+        full: "w-full",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof sheetContentVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(({ className, children, size, ...props }, ref) => {
+  const { isLowPower } = usePerformance();
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          sheetContentVariants({ size }),
+          "inset-y-0 right-0 h-full",
+          !isLowPower &&
+            "duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  );
+});
+SheetContent.displayName = "SheetContent";
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col gap-1.5 p-6 pb-4 border-b border-border",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = "SheetTitle";
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = "SheetDescription";
+
+const SheetBody = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex-1 overflow-y-auto p-6", className)} {...props} />
+);
+SheetBody.displayName = "SheetBody";
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetBody,
+  SheetTitle,
+  SheetDescription,
+};

package/src/components/StatusCard.tsx

@@ -32,22 +32,22 @@ export const StatusCard: React.FC<StatusCardProps> = ({
       )}
       {...props}
     >
-      <CardHeader className="pb-2">
+      <CardHeader className="p-4 pb-2">
         <CardTitle
           className={cn(
-            "text-lg font-medium",
+            "text-sm font-medium",
             isGradient ? "opacity-90 text-white" : "text-muted-foreground"
           )}
         >
           {title}
         </CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="p-4 pt-0">
         <div className="flex items-baseline gap-2">
           <span
             className={cn(
-              "text-2xl font-semibold",
-              isGradient ? "text-3xl font-bold" : "text-foreground"
+              "text-2xl font-bold tracking-tight",
+              isGradient ? "text-white" : "text-foreground"
             )}
           >
             {value}
@@ -65,7 +65,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
         {description && (
           <p
             className={cn(
-              "mt-1 text-sm",
+              "mt-1 text-xs",
               isGradient ? "opacity-80" : "text-muted-foreground"
             )}
           >

package/src/index.ts

@@ -4,6 +4,7 @@ export * from "./components/Card";
 export * from "./components/Label";
 export * from "./components/NavItem";
 export * from "./components/AccessDenied";
+export * from "./components/NotFound";
 export * from "./components/AccessGate";
 export * from "./components/SectionHeader";
 export * from "./components/StatusCard";
@@ -55,3 +56,5 @@ export * from "./components/CodeEditor";
 export * from "./components/AnimatedNumber";
 export * from "./hooks/useAnimatedNumber";
 export * from "./components/IDELayout";
+export * from "./components/MetricTile";
+export * from "./components/Sheet";