@checkstack/ui 0.4.1 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @checkstack/ui
 
+## 0.5.1
+
+### Patch Changes
+
+- 090143b: ### Health Check Aggregation & UI Fixes
+
+  **Backend (`healthcheck-backend`):**
+
+  - Fixed tail-end bucket truncation where the last aggregated bucket was cut off at the interval boundary instead of extending to the query end date
+  - Added `rangeEnd` parameter to `reaggregateBuckets()` to properly extend the last bucket
+  - Fixed cross-tier merge logic (`mergeTieredBuckets`) to prevent hourly aggregates from blocking fresh raw data
+
+  **Schema (`healthcheck-common`):**
+
+  - Added `bucketEnd` field to `AggregatedBucketBaseSchema` so frontends know the actual end time of each bucket
+
+  **Frontend (`healthcheck-frontend`):**
+
+  - Updated all components to use `bucket.bucketEnd` instead of calculating from `bucketIntervalSeconds`
+  - Fixed aggregation mode detection: changed `>` to `>=` so 7-day queries use aggregated data when `rawRetentionDays` is 7
+  - Added ref-based memoization in `useHealthCheckData` to prevent layout shift during signal-triggered refetches
+  - Exposed `isFetching` state to show loading spinner during background refetches
+  - Added debounced custom date range with Apply button to prevent fetching on every field change
+  - Added validation preventing start date >= end date in custom ranges
+  - Added sparkline downsampling: when there are 60+ data points, they are aggregated into buckets with informative tooltips
+
+  **UI (`ui`):**
+
+  - Fixed `DateRangeFilter` presets to use true sliding windows (removed `startOfDay` from 7-day and 30-day ranges)
+  - Added `disabled` prop to `DateRangeFilter` and `DateTimePicker` components
+  - Added `onCustomChange` prop to `DateRangeFilter` for debounced custom date handling
+  - Improved layout: custom date pickers now inline with preset buttons on desktop
+  - Added responsive mobile layout: date pickers stack vertically with down arrow
+  - Added validation error display for invalid date ranges
+
+## 0.5.0
+
+### Minor Changes
+
+- 223081d: Add icon support to PageLayout and improve mobile responsiveness
+
+  **PageLayout Icons:**
+
+  - Added required `icon` prop to `PageLayout` and `PageHeader` components that accepts a Lucide icon component reference
+  - Icons are rendered with consistent `h-6 w-6 text-primary` styling
+  - Updated all page components to include appropriate icons in their headers
+
+  **Mobile Layout Improvements:**
+
+  - Standardized responsive padding in main app shell (`p-3` on mobile, `p-6` on desktop)
+  - Added `CardHeaderRow` component for mobile-safe card headers with proper wrapping
+  - Improved `DateRangeFilter` responsive behavior with vertical stacking on mobile
+  - Migrated pages to use `PageLayout` for consistent responsive behavior
+
 ## 0.4.1
 
 ### Patch Changes

package/package.json

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

package/src/components/Card.tsx

@@ -8,7 +8,7 @@ export const Card = ({
   <div
     className={cn(
       "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
@@ -21,6 +21,23 @@ export const CardHeader = ({
   <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
 );
 
+/**
+ * A row layout for card headers with title and actions.
+ * Provides mobile-friendly defaults with flex-wrap and gap.
+ */
+export const CardHeaderRow = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-wrap items-center justify-between gap-3",
+      className,
+    )}
+    {...props}
+  />
+);
+
 export const CardTitle = ({
   className,
   ...props
@@ -28,7 +45,7 @@ export const CardTitle = ({
   <h3
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

package/src/components/DateRangeFilter.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { subDays, subHours, startOfDay } from "date-fns";
+import { subDays, subHours } from "date-fns";
 import { DateTimePicker } from "./DateTimePicker";
 import { Button } from "./Button";
 import { Calendar } from "lucide-react";
@@ -18,15 +18,24 @@ export enum DateRangePreset {
 
 export interface DateRangeFilterProps {
   value: DateRange;
+  /** Called when a preset is clicked (immediate) */
   onChange: (range: DateRange) => void;
+  /** Optional: Called when custom date picker values change (for debounced Apply pattern) */
+  onCustomChange?: (range: DateRange) => void;
+  /** Disable all interactions (buttons and date pickers) */
+  disabled?: boolean;
   className?: string;
 }
 
-const PRESETS: Array<{ id: DateRangePreset; label: string }> = [
-  { id: DateRangePreset.Last24Hours, label: "Last 24h" },
-  { id: DateRangePreset.Last7Days, label: "Last 7 days" },
-  { id: DateRangePreset.Last30Days, label: "Last 30 days" },
-  { id: DateRangePreset.Custom, label: "Custom" },
+const PRESETS: Array<{
+  id: DateRangePreset;
+  label: string;
+  shortLabel: string;
+}> = [
+  { id: DateRangePreset.Last24Hours, label: "Last 24h", shortLabel: "24h" },
+  { id: DateRangePreset.Last7Days, label: "Last 7 days", shortLabel: "7d" },
+  { id: DateRangePreset.Last30Days, label: "Last 30 days", shortLabel: "30d" },
+  { id: DateRangePreset.Custom, label: "Custom", shortLabel: "Custom" },
 ];
 
 export function getPresetRange(preset: DateRangePreset): DateRange {
@@ -36,13 +45,13 @@ export function getPresetRange(preset: DateRangePreset): DateRange {
       return { startDate: subHours(now, 24), endDate: now };
     }
     case DateRangePreset.Last7Days: {
-      return { startDate: startOfDay(subDays(now, 7)), endDate: now };
+      return { startDate: subDays(now, 7), endDate: now };
     }
     case DateRangePreset.Last30Days: {
-      return { startDate: startOfDay(subDays(now, 30)), endDate: now };
+      return { startDate: subDays(now, 30), endDate: now };
     }
     case DateRangePreset.Custom: {
-      return { startDate: startOfDay(subDays(now, 7)), endDate: now };
+      return { startDate: subDays(now, 7), endDate: now };
     }
   }
 }
@@ -65,6 +74,8 @@ function detectPreset(range: DateRange): DateRangePreset {
 export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
   value,
   onChange,
+  onCustomChange,
+  disabled = false,
   className,
 }) => {
   const activePreset = useMemo(() => detectPreset(value), [value]);
@@ -73,6 +84,7 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
   );
 
   const handlePresetClick = (preset: DateRangePreset) => {
+    if (disabled) return;
     if (preset === DateRangePreset.Custom) {
       setShowCustom(true);
     } else {
@@ -81,14 +93,20 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
     }
   };
 
+  // Use onCustomChange if provided, otherwise fall back to onChange
+  const handleCustomDateChange = onCustomChange ?? onChange;
+
+  // Validate date range
+  const isInvalidRange = showCustom && value.startDate >= value.endDate;
+
   return (
-    <div className={`space-y-3 ${className ?? ""}`}>
+    <div className={className}>
       <div className="flex items-center gap-2 flex-wrap">
-        <Calendar className="h-4 w-4 text-muted-foreground" />
-        <span className="text-sm font-medium text-muted-foreground">
+        <Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
+        <span className="text-sm font-medium text-muted-foreground shrink-0">
           Time range:
         </span>
-        <div className="flex gap-1">
+        <div className="flex gap-1 flex-wrap">
           {PRESETS.map((preset) => (
             <Button
               key={preset.id}
@@ -101,37 +119,73 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
               }
               size="sm"
               onClick={() => handlePresetClick(preset.id)}
+              disabled={disabled}
             >
-              {preset.label}
+              <span className="sm:hidden">{preset.shortLabel}</span>
+              <span className="hidden sm:inline">{preset.label}</span>
             </Button>
           ))}
         </div>
+        {showCustom && (
+          <>
+            <div className="w-px h-5 bg-border hidden sm:block" />
+            {/* Desktop: inline with right arrow */}
+            <div className="hidden sm:flex items-center gap-2">
+              <DateTimePicker
+                value={value.startDate}
+                onChange={(startDate) => {
+                  if (startDate && !disabled) {
+                    handleCustomDateChange({ ...value, startDate });
+                  }
+                }}
+                maxDate={value.endDate}
+                disabled={disabled}
+              />
+              <span className="text-sm text-muted-foreground">→</span>
+              <DateTimePicker
+                value={value.endDate}
+                onChange={(endDate) => {
+                  if (endDate && !disabled) {
+                    handleCustomDateChange({ ...value, endDate });
+                  }
+                }}
+                minDate={value.startDate}
+                maxDate={new Date()}
+                disabled={disabled}
+              />
+            </div>
+            {/* Mobile: stacked vertically with down arrow, centered */}
+            <div className="flex sm:hidden flex-col items-center gap-1 w-full">
+              <DateTimePicker
+                value={value.startDate}
+                onChange={(startDate) => {
+                  if (startDate && !disabled) {
+                    handleCustomDateChange({ ...value, startDate });
+                  }
+                }}
+                maxDate={value.endDate}
+                disabled={disabled}
+              />
+              <span className="text-sm text-muted-foreground">↓</span>
+              <DateTimePicker
+                value={value.endDate}
+                onChange={(endDate) => {
+                  if (endDate && !disabled) {
+                    handleCustomDateChange({ ...value, endDate });
+                  }
+                }}
+                minDate={value.startDate}
+                maxDate={new Date()}
+                disabled={disabled}
+              />
+            </div>
+          </>
+        )}
       </div>
-
-      {showCustom && (
-        <div className="flex items-center gap-2 flex-wrap">
-          <span className="text-sm text-muted-foreground">From:</span>
-          <DateTimePicker
-            value={value.startDate}
-            onChange={(startDate) => {
-              if (startDate) {
-                onChange({ ...value, startDate });
-              }
-            }}
-            maxDate={value.endDate}
-          />
-          <span className="text-sm text-muted-foreground">To:</span>
-          <DateTimePicker
-            value={value.endDate}
-            onChange={(endDate) => {
-              if (endDate) {
-                onChange({ ...value, endDate });
-              }
-            }}
-            minDate={value.startDate}
-            maxDate={new Date()}
-          />
-        </div>
+      {isInvalidRange && (
+        <p className="text-sm text-destructive mt-2">
+          Start date must be before end date
+        </p>
       )}
     </div>
   );

package/src/components/DateTimePicker.tsx

@@ -10,6 +10,8 @@ export interface DateTimePickerProps {
   onChange: (date: Date | undefined) => void;
   minDate?: Date;
   maxDate?: Date;
+  /** Disable all interactions */
+  disabled?: boolean;
   className?: string;
 }
 
@@ -37,6 +39,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   onChange,
   minDate,
   maxDate,
+  disabled = false,
   className,
 }) => {
   const isValidDate = value instanceof Date && !Number.isNaN(value.getTime());
@@ -258,6 +261,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               size="icon"
               className="h-9 w-9 rounded-none border-r"
               type="button"
+              disabled={disabled}
             >
               <Calendar className="h-4 w-4" />
             </Button>
@@ -271,8 +275,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               onChange={(e) => handleFieldChange("day", e.target.value)}
               onBlur={() => handleFieldBlur("day")}
               placeholder="DD"
-              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono"
+              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
               maxLength={2}
+              disabled={disabled}
             />
             <span className="text-muted-foreground">/</span>
             <input
@@ -282,8 +287,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               onChange={(e) => handleFieldChange("month", e.target.value)}
               onBlur={() => handleFieldBlur("month")}
               placeholder="MM"
-              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono"
+              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
               maxLength={2}
+              disabled={disabled}
             />
             <span className="text-muted-foreground">/</span>
             <input
@@ -293,8 +299,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               onChange={(e) => handleFieldChange("year", e.target.value)}
               onBlur={() => handleFieldBlur("year")}
               placeholder="YYYY"
-              className="w-11 text-center bg-transparent border-none outline-none text-sm font-mono"
+              className="w-11 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
               maxLength={4}
+              disabled={disabled}
             />
           </div>
 
@@ -337,8 +344,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             onChange={(e) => handleFieldChange("hour", e.target.value)}
             onBlur={() => handleFieldBlur("hour")}
             placeholder="HH"
-            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono"
+            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
             maxLength={2}
+            disabled={disabled}
           />
           <span className="text-muted-foreground">:</span>
           <input
@@ -348,8 +356,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             onChange={(e) => handleFieldChange("minute", e.target.value)}
             onBlur={() => handleFieldBlur("minute")}
             placeholder="MM"
-            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono"
+            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
             maxLength={2}
+            disabled={disabled}
           />
         </div>
       </div>

package/src/components/Page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { LucideIcon } from "lucide-react";
 import { cn } from "../utils";
 
 interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,33 +15,37 @@ export const Page = React.forwardRef<HTMLDivElement, PageProps>(
     >
       {children}
     </div>
-  )
+  ),
 );
 Page.displayName = "Page";
 
 interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   subtitle?: string;
+  icon: LucideIcon;
   actions?: React.ReactNode;
 }
 
 export const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
-  ({ className, title, subtitle, actions, ...props }, ref) => (
+  ({ className, title, subtitle, icon: Icon, actions, ...props }, ref) => (
     <div
       ref={ref}
       className={cn(
-        "flex flex-col md:flex-row items-center justify-between p-6 pb-2",
-        className
+        "flex flex-col md:flex-row items-center justify-between py-3 pb-2 md:py-6 md:pb-2",
+        className,
       )}
       {...props}
     >
       <div className="space-y-1">
-        <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+        <div className="flex items-center gap-3">
+          <Icon className="h-6 w-6 text-primary" />
+          <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+        </div>
         {subtitle && <p className="text-muted-foreground">{subtitle}</p>}
       </div>
       {actions && <div className="flex items-center space-x-2">{actions}</div>}
     </div>
-  )
+  ),
 );
 PageHeader.displayName = "PageHeader";
 
@@ -50,9 +55,13 @@ interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const PageContent = React.forwardRef<HTMLDivElement, PageContentProps>(
   ({ className, children, ...props }, ref) => (
-    <div ref={ref} className={cn("flex-1 p-6 pt-2", className)} {...props}>
+    <div
+      ref={ref}
+      className={cn("flex-1 py-3 pt-2 md:py-6 md:pt-2", className)}
+      {...props}
+    >
       {children}
     </div>
-  )
+  ),
 );
 PageContent.displayName = "PageContent";

package/src/components/PageLayout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { LucideIcon } from "lucide-react";
 import {
   Page,
   PageHeader,
@@ -10,6 +11,7 @@ import {
 interface PageLayoutProps {
   title: string;
   subtitle?: string;
+  icon: LucideIcon;
   actions?: React.ReactNode;
   loading?: boolean;
   allowed?: boolean;
@@ -31,6 +33,7 @@ interface PageLayoutProps {
 export const PageLayout: React.FC<PageLayoutProps> = ({
   title,
   subtitle,
+  icon,
   actions,
   loading,
   allowed,
@@ -46,7 +49,12 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
   if (isLoading) {
     return (
       <Page>
-        <PageHeader title={title} subtitle={subtitle} actions={actions} />
+        <PageHeader
+          title={title}
+          subtitle={subtitle}
+          icon={icon}
+          actions={actions}
+        />
         <PageContent>
           <div className="flex justify-center py-12">
             <LoadingSpinner />
@@ -60,7 +68,12 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
   if (allowed === false) {
     return (
       <Page>
-        <PageHeader title={title} subtitle={subtitle} actions={actions} />
+        <PageHeader
+          title={title}
+          subtitle={subtitle}
+          icon={icon}
+          actions={actions}
+        />
         <PageContent>
           <AccessDenied />
         </PageContent>
@@ -70,10 +83,17 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
 
   return (
     <Page>
-      <PageHeader title={title} subtitle={subtitle} actions={actions} />
+      <PageHeader
+        title={title}
+        subtitle={subtitle}
+        icon={icon}
+        actions={actions}
+      />
       <PageContent>
         <div
-          className={maxWidth === "full" ? "" : `max-w-${maxWidth} space-y-6`}
+          className={
+            maxWidth === "full" ? "space-y-6" : `max-w-${maxWidth} space-y-6`
+          }
         >
           {children}
         </div>