@checkstack/ui 1.3.5 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @checkstack/ui
 
+## 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
+
+- 4b0934d: Refactored UserMenu to use a responsive grid layout, improved menu item alignment, and implemented a full-screen scrollable portal for mobile devices. Fixed an issue where the UserMenu would instantly close and reopen when clicking the trigger while the menu was open.
+
 ## 1.3.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
@@ -21,18 +21,20 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0",
     "react-day-picker": "^9.13.0",
+    "react-dom": "^19.2.5",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.20.0",
     "recharts": "^3.6.0",
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
-    "typescript": "^5.0.0",
-    "@types/react": "^18.2.0",
-    "@testing-library/react": "^16.0.0",
+    "@checkstack/scripts": "0.1.2",
     "@checkstack/test-utils-frontend": "0.0.4",
     "@checkstack/tsconfig": "0.0.5",
-    "@checkstack/scripts": "0.1.2"
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.0.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

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/DropdownMenu.tsx

@@ -1,11 +1,43 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, createContext, useContext, useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
 import { cn } from "../utils";
 import { usePerformance } from "./PerformanceProvider";
 
+export const DropdownMenuContext = createContext<{ onClose?: () => void }>({});
+
+/**
+ * Custom hook to detect mobile viewport.
+ */
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Initial check
+    const mql = globalThis.matchMedia("(max-width: 640px)");
+    setIsMobile(mql.matches);
+
+    // Listener for changes
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  return isMobile;
+}
+
+
+export const DropdownMenuRootContext = createContext<{ rootRef?: React.RefObject<HTMLDivElement> }>({});
+
 export const DropdownMenu: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  return <div className="relative inline-block text-left">{children}</div>;
+  const rootRef = useRef<HTMLDivElement>(null);
+  return (
+    <DropdownMenuRootContext.Provider value={{ rootRef }}>
+      <div ref={rootRef} className="relative inline-block text-left">{children}</div>
+    </DropdownMenuRootContext.Provider>
+  );
 };
 
 export const DropdownMenuTrigger: React.FC<{
@@ -25,44 +57,83 @@ export const DropdownMenuContent: React.FC<{
   isOpen: boolean;
   onClose: () => void;
   className?: string;
-}> = ({ children, isOpen, onClose, className }) => {
+  innerClassName?: string;
+}> = ({ children, isOpen, onClose, className, innerClassName }) => {
   const { isLowPower } = usePerformance();
   const contentRef = useRef<HTMLDivElement>(null);
+  const { rootRef } = useContext(DropdownMenuRootContext);
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        contentRef.current &&
-        !contentRef.current.contains(event.target as Node)
-      ) {
-        onClose();
+      // Don't auto-close if clicking outside on mobile (full screen modal style)
+      if (isMobile) return;
+      
+      const target = event.target as Node;
+      
+      // Don't close if clicking inside the menu content
+      if (contentRef.current && contentRef.current.contains(target)) {
+        return;
+      }
+      
+      // Don't close if clicking inside the wrapper (e.g. the trigger button)
+      // This allows the trigger's onClick to handle toggling the menu without conflict.
+      if (rootRef?.current && rootRef.current.contains(target)) {
+        return;
       }
+      
+      onClose();
     };
 
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
+      // Lock body scroll on mobile
+      if (isMobile) {
+        document.body.style.overflow = "hidden";
+      }
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      if (isMobile) {
+        document.body.style.overflow = "";
+      }
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, isMobile, rootRef]);
 
   if (!isOpen) return <React.Fragment />;
 
-  return (
+  const content = (
     <div
       ref={contentRef}
       className={cn(
-        "absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-popover shadow-lg ring-1 ring-border focus:outline-none z-[100]",
+        isMobile
+          ? "fixed inset-0 z-[100] bg-background w-full h-full p-4 overflow-y-auto"
+          : "absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-popover shadow-lg ring-1 ring-border focus:outline-none z-[100] max-h-[calc(100vh-4rem)] overflow-y-auto",
         !isLowPower && "animate-in fade-in zoom-in-95 duration-100",
         className
       )}
     >
-      <div className="py-1" role="none">
-        {children}
-      </div>
+      <DropdownMenuContext.Provider value={{ onClose }}>
+        <div className={cn(isMobile ? "flex flex-col pt-4 pb-12" : "py-1", innerClassName)} role="none">
+          {isMobile && (
+            <div className="flex justify-between items-center mb-6 col-span-full px-2">
+              <h2 className="text-xl font-bold text-foreground">Menu</h2>
+              <button 
+                onClick={onClose} 
+                className="p-2 rounded-full hover:bg-accent text-muted-foreground transition-colors"
+                aria-label="Close menu"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+          )}
+          {children}
+        </div>
+      </DropdownMenuContext.Provider>
     </div>
   );
+
+  return isMobile ? createPortal(content, document.body) : content;
 };
 
 export const DropdownMenuItem: React.FC<{
@@ -70,30 +141,47 @@ export const DropdownMenuItem: React.FC<{
   onClick?: () => void;
   className?: string;
   icon?: React.ReactNode;
-}> = ({ children, onClick, className, icon }) => {
+  description?: React.ReactNode;
+  closeOnClick?: boolean;
+}> = ({ children, onClick, className, icon, description, closeOnClick = true }) => {
+  const { onClose } = useContext(DropdownMenuContext);
+
+  const handleClick = () => {
+    if (onClick) onClick();
+    if (closeOnClick && onClose) onClose();
+  };
+
   return (
     <button
-      onClick={onClick}
+      onClick={handleClick}
       className={cn(
-        "flex items-center w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+        "flex flex-col items-start w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground transition-colors rounded-sm overflow-hidden",
         className
       )}
       role="menuitem"
     >
-      {icon && <span className="mr-3 text-muted-foreground">{icon}</span>}
-      {children}
+      <div className="flex items-center w-full overflow-hidden">
+        {icon && <span className="mr-3 text-muted-foreground shrink-0">{icon}</span>}
+        <span className="flex-1 text-left truncate">{children}</span>
+      </div>
+      {description && (
+        <span className={cn("text-[10px] text-muted-foreground mt-1 leading-tight text-left truncate w-full", icon ? "pl-7" : "")}>
+          {description}
+        </span>
+      )}
     </button>
   );
 };
 
-export const DropdownMenuSeparator: React.FC = () => (
-  <div className="my-1 h-px bg-border" />
+export const DropdownMenuSeparator: React.FC<{ className?: string }> = ({ className }) => (
+  <div className={cn("my-1 h-px bg-border col-span-full", className)} />
 );
 
-export const DropdownMenuLabel: React.FC<{ children: React.ReactNode }> = ({
+export const DropdownMenuLabel: React.FC<{ children: React.ReactNode; className?: string }> = ({
   children,
+  className
 }) => (
-  <div className="px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+  <div className={cn("px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider col-span-full", className)}>
     {children}
   </div>
 );

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/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/components/UserMenu.tsx

@@ -60,7 +60,12 @@ export const UserMenu: React.FC<UserMenuProps> = ({
         </button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent isOpen={isOpen} onClose={() => setIsOpen(false)}>
+      <DropdownMenuContent 
+        isOpen={isOpen} 
+        onClose={() => setIsOpen(false)}
+        className="w-full sm:w-[400px] md:w-[460px]"
+        innerClassName="grid grid-cols-1 sm:grid-cols-2 p-2 gap-2 sm:gap-1"
+      >
         <DropdownMenuLabel>
           <div className="flex flex-col">
             <span className="text-sm font-bold text-foreground truncate">

package/src/index.ts

@@ -55,3 +55,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";