@checkstack/healthcheck-frontend 0.4.10 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,128 @@
 # @checkstack/healthcheck-frontend
 
+## 0.6.0
+
+### Minor Changes
+
+- 11d2679: Add ability to pause health check configurations globally. When paused, health checks continue to be scheduled but execution is skipped for all systems using that configuration. Users with manage access can pause/resume from the Health Checks config page.
+
+### Patch 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
+
+- Updated dependencies [11d2679]
+- Updated dependencies [223081d]
+  - @checkstack/healthcheck-common@0.6.0
+  - @checkstack/ui@0.5.0
+  - @checkstack/auth-frontend@0.5.5
+  - @checkstack/dashboard-frontend@0.3.10
+
+## 0.5.0
+
+### Minor Changes
+
+- ac3a4cf: ### Dynamic Bucket Sizing for Health Check Visualization
+
+  Implements industry-standard dynamic bucket sizing for health check data aggregation, following patterns from Grafana/VictoriaMetrics.
+
+  **What changed:**
+
+  - Replaced fixed `bucketSize: "hourly" | "daily" | "auto"` with dynamic `targetPoints` parameter (default: 500)
+  - Bucket interval is now calculated as `(endDate - startDate) / targetPoints` with a minimum of 1 second
+  - Added `bucketIntervalSeconds` to aggregated response and individual buckets
+  - Updated chart components to use dynamic time formatting based on bucket interval
+
+  **Why:**
+
+  - A 24-hour view with 1-second health checks previously returned 86,400+ data points, causing lag
+  - Now returns ~500 data points regardless of timeframe, ensuring consistent chart performance
+  - Charts still preserve visual fidelity through proper aggregation
+
+  **Breaking Change:**
+
+  - `bucketSize` parameter removed from `getAggregatedHistory` and `getDetailedAggregatedHistory` endpoints
+  - Use `targetPoints` instead (defaults to 500 if not specified)
+
+  ***
+
+  ### Collector Aggregated Charts Fix
+
+  Fixed issue where collector auto-charts (like HTTP request response time charts) were not showing in aggregated data mode.
+
+  **What changed:**
+
+  - Added `aggregatedResultSchema` to `CollectorDtoSchema`
+  - Backend now returns collector aggregated schemas via `getCollectors` endpoint
+  - Frontend `useStrategySchemas` hook now merges collector aggregated schemas
+  - Service now calls each collector's `aggregateResult()` when building buckets
+  - Aggregated collector data stored in `aggregatedResult.collectors[uuid]`
+
+  **Why:**
+
+  - Previously only strategy-level aggregated results were computed
+  - Collectors like HTTP Request Collector have their own `aggregateResult` method
+  - Without calling these, fields like `avgResponseTimeMs` and `successRate` were missing from aggregated buckets
+
+### Patch Changes
+
+- 095cf4e: ### Cross-Tier Data Aggregation
+
+  Implements intelligent cross-tier querying for health check history, enabling seamless data retrieval across raw, hourly, and daily storage tiers.
+
+  **What changed:**
+
+  - `getAggregatedHistory` now queries all three tiers (raw, hourly, daily) in parallel
+  - Added `NormalizedBucket` type for unified bucket format across tiers
+  - Added `mergeTieredBuckets()` to merge data with priority (raw > hourly > daily)
+  - Added `combineBuckets()` and `reaggregateBuckets()` for re-aggregation to target bucket size
+  - Raw data preserves full granularity when available (uses target bucket interval)
+
+  **Why:**
+
+  - Previously, the API only queried raw runs, which are retained for a limited period (default 7 days)
+  - For longer time ranges, data was missing because hourly/daily aggregates weren't queried
+  - The retention job only runs periodically, so we can't assume tier boundaries based on config
+  - Querying all tiers ensures no gaps in data coverage
+
+  **Technical details:**
+
+  - Additive metrics (counts, latencySum) are summed correctly for accurate averages
+  - p95 latency uses max of source p95s as conservative upper-bound approximation
+  - `aggregatedResult` (strategy-specific) is preserved for raw-only buckets
+
+- 538e45d: Fixed 24-hour date range not returning correct data and improved chart display
+
+  - Fixed missing `endDate` parameter in raw data queries causing data to extend beyond selected time range
+  - Fixed incorrect 24-hour date calculation using `setHours()` - now uses `date-fns` `subHours()` for correct date math
+  - Refactored `DateRangePreset` from string union to enum for improved type safety and IDE support
+  - Exported `getPresetRange` function for reuse across components
+  - Changed chart x-axis domain from `["auto", "auto"]` to `["dataMin", "dataMax"]` to remove padding gaps
+
+- Updated dependencies [ac3a4cf]
+- Updated dependencies [db1f56f]
+- Updated dependencies [538e45d]
+  - @checkstack/healthcheck-common@0.5.0
+  - @checkstack/common@0.6.0
+  - @checkstack/ui@0.4.1
+  - @checkstack/dashboard-frontend@0.3.9
+  - @checkstack/auth-frontend@0.5.4
+  - @checkstack/catalog-common@1.2.4
+  - @checkstack/frontend-api@0.3.3
+  - @checkstack/signal-frontend@0.0.10
+
 ## 0.4.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.4.10",
+  "version": "0.6.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/auto-charts/useStrategySchemas.ts

@@ -38,7 +38,7 @@ export function useStrategySchemas(strategyId: string): {
   // Fetch collectors with useQuery
   const { data: collectors } = healthCheckClient.getCollectors.useQuery(
     { strategyId },
-    { enabled: !!strategyId }
+    { enabled: !!strategyId },
   );
 
   useEffect(() => {
@@ -51,22 +51,34 @@ export function useStrategySchemas(strategyId: string): {
     if (strategy) {
       // Build collector schemas object for nesting under resultSchema.properties.collectors
       const collectorProperties: Record<string, unknown> = {};
+      const collectorAggregatedProperties: Record<string, unknown> = {};
+
       for (const collector of collectors) {
         // Use full ID so it matches stored data keys like "healthcheck-http.request"
         collectorProperties[collector.id] = collector.resultSchema;
+
+        // Also collect aggregated schemas if available
+        if (collector.aggregatedResultSchema) {
+          collectorAggregatedProperties[collector.id] =
+            collector.aggregatedResultSchema;
+        }
       }
 
       // Merge collector schemas into strategy result schema
       const mergedResultSchema = mergeCollectorSchemas(
         strategy.resultSchema as Record<string, unknown> | undefined,
-        collectorProperties
+        collectorProperties,
+      );
+
+      // Merge collector aggregated schemas into strategy aggregated schema
+      const mergedAggregatedSchema = mergeCollectorSchemas(
+        strategy.aggregatedResultSchema as Record<string, unknown> | undefined,
+        collectorAggregatedProperties,
       );
 
       setSchemas({
         resultSchema: mergedResultSchema,
-        aggregatedResultSchema:
-          (strategy.aggregatedResultSchema as Record<string, unknown>) ??
-          undefined,
+        aggregatedResultSchema: mergedAggregatedSchema,
       });
     }
 
@@ -85,7 +97,7 @@ export function useStrategySchemas(strategyId: string): {
  */
 function mergeCollectorSchemas(
   strategySchema: Record<string, unknown> | undefined,
-  collectorProperties: Record<string, unknown>
+  collectorProperties: Record<string, unknown>,
 ): Record<string, unknown> | undefined {
   // If no collectors, return original schema
   if (Object.keys(collectorProperties).length === 0) {

package/src/components/AggregatedDataBanner.tsx

@@ -1,24 +1,67 @@
 import { InfoBanner } from "@checkstack/ui";
 
 interface AggregatedDataBannerProps {
-  bucketSize: "hourly" | "daily";
-  rawRetentionDays: number;
+  /** Bucket interval in seconds */
+  bucketIntervalSeconds: number;
+  /** The configured check interval in seconds (optional, for comparison) */
+  checkIntervalSeconds?: number;
 }
 
+/**
+ * Format seconds into a human-readable duration string.
+ */
+function formatDuration(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`;
+  }
+  if (seconds < 3600) {
+    const mins = Math.round(seconds / 60);
+    return `${mins}min`;
+  }
+  const hours = Math.round(seconds / 3600);
+  return `${hours}h`;
+}
+
+/**
+ * Get resolution tier label based on bucket interval.
+ */
+function getResolutionTier(
+  bucketIntervalSeconds: number,
+): "high" | "medium" | "low" {
+  if (bucketIntervalSeconds >= 86_400) {
+    return "low"; // Daily aggregates
+  }
+  if (bucketIntervalSeconds >= 3600) {
+    return "medium"; // Hourly aggregates
+  }
+  return "high"; // Raw data
+}
+
+const TIER_LABELS: Record<"high" | "medium" | "low", string> = {
+  high: "High resolution",
+  medium: "Medium resolution",
+  low: "Low resolution",
+};
+
 /**
  * Banner shown when viewing aggregated health check data.
- * Informs users about the aggregation level and how to see detailed data.
+ * Informs users about the aggregation level due to high data volume.
  */
 export function AggregatedDataBanner({
-  bucketSize,
-  rawRetentionDays,
+  bucketIntervalSeconds,
+  checkIntervalSeconds,
 }: AggregatedDataBannerProps) {
-  const bucketLabel = bucketSize === "hourly" ? "hourly" : "daily";
+  // Only show if bucket interval is larger than check interval (data is being aggregated)
+  if (checkIntervalSeconds && bucketIntervalSeconds <= checkIntervalSeconds) {
+    return;
+  }
+
+  const tier = getResolutionTier(bucketIntervalSeconds);
 
   return (
     <InfoBanner variant="info">
-      Showing {bucketLabel} aggregates. For per-run data, select a range ≤{" "}
-      {rawRetentionDays} days.
+      {TIER_LABELS[tier]} • Data aggregated into{" "}
+      {formatDuration(bucketIntervalSeconds)} intervals
     </InfoBanner>
   );
 }

package/src/components/CollectorList.tsx

@@ -7,6 +7,7 @@ import {
   Card,
   CardContent,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   Label,
   Select,
@@ -157,62 +158,68 @@ export const CollectorList: React.FC<CollectorListProps> = ({
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle className="text-base">Check Items</CardTitle>
-        {addableCollectors.length > 0 && (
-          <Select value="" onValueChange={handleAdd}>
-            <SelectTrigger className="w-[200px]">
-              <Plus className="h-4 w-4 mr-2" />
-              <SelectValue placeholder="Add collector..." />
-            </SelectTrigger>
-            <SelectContent>
-              {/* Built-in collectors first */}
-              {builtInCollectors.length > 0 && (
-                <>
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                    Built-in
-                  </div>
-                  {builtInCollectors
-                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
-                    .map((collector) => (
-                      <SelectItem key={collector.id} value={collector.id}>
-                        <div className="flex items-center gap-2">
-                          <span>{collector.displayName}</span>
-                          {collector.allowMultiple && (
-                            <Badge variant="outline" className="text-xs">
-                              Multiple
-                            </Badge>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))}
-                </>
-              )}
-              {/* External collectors */}
-              {externalCollectors.length > 0 && (
-                <>
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                    External
-                  </div>
-                  {externalCollectors
-                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
-                    .map((collector) => (
-                      <SelectItem key={collector.id} value={collector.id}>
-                        <div className="flex items-center gap-2">
-                          <span>{collector.displayName}</span>
-                          {collector.allowMultiple && (
-                            <Badge variant="outline" className="text-xs">
-                              Multiple
-                            </Badge>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))}
-                </>
-              )}
-            </SelectContent>
-          </Select>
-        )}
+      <CardHeader>
+        <CardHeaderRow>
+          <CardTitle className="text-base">Check Items</CardTitle>
+          {addableCollectors.length > 0 && (
+            <Select value="" onValueChange={handleAdd}>
+              <SelectTrigger className="w-[200px]">
+                <Plus className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="Add collector..." />
+              </SelectTrigger>
+              <SelectContent>
+                {/* Built-in collectors first */}
+                {builtInCollectors.length > 0 && (
+                  <>
+                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                      Built-in
+                    </div>
+                    {builtInCollectors
+                      .filter((c) =>
+                        addableCollectors.some((a) => a.id === c.id),
+                      )
+                      .map((collector) => (
+                        <SelectItem key={collector.id} value={collector.id}>
+                          <div className="flex items-center gap-2">
+                            <span>{collector.displayName}</span>
+                            {collector.allowMultiple && (
+                              <Badge variant="outline" className="text-xs">
+                                Multiple
+                              </Badge>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))}
+                  </>
+                )}
+                {/* External collectors */}
+                {externalCollectors.length > 0 && (
+                  <>
+                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                      External
+                    </div>
+                    {externalCollectors
+                      .filter((c) =>
+                        addableCollectors.some((a) => a.id === c.id),
+                      )
+                      .map((collector) => (
+                        <SelectItem key={collector.id} value={collector.id}>
+                          <div className="flex items-center gap-2">
+                            <span>{collector.displayName}</span>
+                            {collector.allowMultiple && (
+                              <Badge variant="outline" className="text-xs">
+                                Multiple
+                              </Badge>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))}
+                  </>
+                )}
+              </SelectContent>
+            </Select>
+          )}
+        </CardHeaderRow>
       </CardHeader>
       <CardContent>
         {configuredCollectors.length === 0 ? (

package/src/components/HealthCheckDiagram.tsx

@@ -11,8 +11,10 @@ interface HealthCheckDiagramProps {
   context: HealthCheckDiagramSlotContext;
   /** Whether the data is aggregated (for showing the info banner) */
   isAggregated?: boolean;
-  /** Raw retention days (for the info banner) */
-  rawRetentionDays?: number;
+  /** The bucket interval in seconds (from aggregated response) */
+  bucketIntervalSeconds?: number;
+  /** The check interval in seconds (for comparison in banner) */
+  checkIntervalSeconds?: number;
 }
 
 /**
@@ -22,20 +24,15 @@ interface HealthCheckDiagramProps {
 export function HealthCheckDiagram({
   context,
   isAggregated = false,
-  rawRetentionDays = 7,
+  bucketIntervalSeconds,
+  checkIntervalSeconds,
 }: HealthCheckDiagramProps) {
-  // Determine bucket size from context for aggregated data info banner
-  const bucketSize =
-    context.type === "aggregated" && context.buckets.length > 0
-      ? context.buckets[0].bucketSize
-      : "hourly";
-
   return (
     <>
-      {isAggregated && (
+      {isAggregated && bucketIntervalSeconds && (
         <AggregatedDataBanner
-          bucketSize={bucketSize}
-          rawRetentionDays={rawRetentionDays}
+          bucketIntervalSeconds={bucketIntervalSeconds}
+          checkIntervalSeconds={checkIntervalSeconds}
         />
       )}
       <ExtensionSlot slot={HealthCheckDiagramSlot} context={context} />

package/src/components/HealthCheckLatencyChart.tsx

@@ -50,8 +50,11 @@ export const HealthCheckLatencyChart: React.FC<
         ? chartData.reduce((sum, d) => sum + d.latencyMs, 0) / chartData.length
         : 0;
 
+    // Use daily format for intervals >= 6 hours, otherwise include time
     const timeFormat =
-      buckets[0]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
+      (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
+        ? "MMM d"
+        : "MMM d HH:mm";
 
     return (
       <ResponsiveContainer width="100%" height={height}>
@@ -73,7 +76,7 @@ export const HealthCheckLatencyChart: React.FC<
           <XAxis
             dataKey="timestamp"
             type="number"
-            domain={["auto", "auto"]}
+            domain={["dataMin", "dataMax"]}
             tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
             stroke="hsl(var(--muted-foreground))"
             fontSize={12}
@@ -172,7 +175,7 @@ export const HealthCheckLatencyChart: React.FC<
         <XAxis
           dataKey="timestamp"
           type="number"
-          domain={["auto", "auto"]}
+          domain={["dataMin", "dataMax"]}
           tickFormatter={(ts: number) => format(new Date(ts), "HH:mm")}
           stroke="hsl(var(--muted-foreground))"
           fontSize={12}

package/src/components/HealthCheckList.tsx

@@ -11,14 +11,18 @@ import {
   TableHeader,
   TableRow,
   Button,
+  Badge,
 } from "@checkstack/ui";
-import { Trash2, Edit } from "lucide-react";
+import { Trash2, Edit, Pause, Play } from "lucide-react";
 
 interface HealthCheckListProps {
   configurations: HealthCheckConfiguration[];
   strategies: HealthCheckStrategyDto[];
   onEdit: (config: HealthCheckConfiguration) => void;
   onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage?: boolean;
 }
 
 export const HealthCheckList: React.FC<HealthCheckListProps> = ({
@@ -26,6 +30,9 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
   strategies,
   onEdit,
   onDelete,
+  onPause,
+  onResume,
+  canManage = true,
 }) => {
   const getStrategyName = (id: string) => {
     return strategies.find((s) => s.id === id)?.displayName || id;
@@ -39,24 +46,57 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
             <TableHead>Name</TableHead>
             <TableHead>Strategy</TableHead>
             <TableHead>Interval (s)</TableHead>
+            <TableHead>Status</TableHead>
             <TableHead className="text-right">Actions</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {configurations.length === 0 ? (
             <TableRow>
-              <TableCell colSpan={4} className="h-24 text-center">
+              <TableCell colSpan={5} className="h-24 text-center">
                 No health checks configured.
               </TableCell>
             </TableRow>
           ) : (
             configurations.map((config) => (
-              <TableRow key={config.id}>
+              <TableRow
+                key={config.id}
+                className={config.paused ? "opacity-60" : ""}
+              >
                 <TableCell className="font-medium">{config.name}</TableCell>
                 <TableCell>{getStrategyName(config.strategyId)}</TableCell>
                 <TableCell>{config.intervalSeconds}</TableCell>
+                <TableCell>
+                  {config.paused ? (
+                    <Badge variant="secondary">Paused</Badge>
+                  ) : (
+                    <Badge variant="default">Active</Badge>
+                  )}
+                </TableCell>
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
+                    {canManage &&
+                      onPause &&
+                      onResume &&
+                      (config.paused ? (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => onResume(config.id)}
+                          title="Resume health check"
+                        >
+                          <Play className="h-4 w-4" />
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => onPause(config.id)}
+                          title="Pause health check"
+                        >
+                          <Pause className="h-4 w-4" />
+                        </Button>
+                      ))}
                     <Button
                       variant="ghost"
                       size="icon"
@@ -64,14 +104,16 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
                     >
                       <Edit className="h-4 w-4" />
                     </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="text-destructive hover:text-destructive"
-                      onClick={() => onDelete(config.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
+                    {canManage && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="text-destructive hover:text-destructive"
+                        onClick={() => onDelete(config.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
                   </div>
                 </TableCell>
               </TableRow>

package/src/components/HealthCheckStatusTimeline.tsx

@@ -50,8 +50,11 @@ export const HealthCheckStatusTimeline: React.FC<
       total: d.runCount,
     }));
 
+    // Use daily format for intervals >= 6 hours, otherwise include time
     const timeFormat =
-      buckets[0]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
+      (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
+        ? "MMM d"
+        : "MMM d HH:mm";
 
     return (
       <ResponsiveContainer width="100%" height={height}>
@@ -59,7 +62,7 @@ export const HealthCheckStatusTimeline: React.FC<
           <XAxis
             dataKey="timestamp"
             type="number"
-            domain={["auto", "auto"]}
+            domain={["dataMin", "dataMax"]}
             tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
             stroke="hsl(var(--muted-foreground))"
             fontSize={10}
@@ -133,7 +136,7 @@ export const HealthCheckStatusTimeline: React.FC<
         <XAxis
           dataKey="timestamp"
           type="number"
-          domain={["auto", "auto"]}
+          domain={["dataMin", "dataMax"]}
           tickFormatter={(ts: number) => format(new Date(ts), "HH:mm")}
           stroke="hsl(var(--muted-foreground))"
           fontSize={10}

package/src/components/HealthCheckSystemOverview.tsx

@@ -20,6 +20,8 @@ import {
   usePagination,
   usePaginationSync,
   DateRangeFilter,
+  getPresetRange,
+  DateRangePreset,
 } from "@checkstack/ui";
 import { formatDistanceToNow } from "date-fns";
 import { ChevronDown, ChevronRight } from "lucide-react";
@@ -55,17 +57,10 @@ interface ExpandedRowProps {
 const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
 
-  // Date range state for filtering
-  const [dateRange, setDateRange] = useState<{
-    startDate: Date;
-    endDate: Date;
-  }>(() => {
-    // Default to last 24 hours
-    const end = new Date();
-    const start = new Date();
-    start.setHours(start.getHours() - 24);
-    return { startDate: start, endDate: end };
-  });
+  // Date range state for filtering - default to last 24 hours
+  const [dateRange, setDateRange] = useState(() =>
+    getPresetRange(DateRangePreset.Last24Hours),
+  );
 
   // Use shared hook for chart data - handles both raw and aggregated modes
   // and includes signal handling for automatic refresh
@@ -73,7 +68,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     context: chartContext,
     loading: chartLoading,
     isAggregated,
-    retentionConfig,
+    bucketIntervalSeconds,
   } = useHealthCheckData({
     systemId,
     configurationId: item.configurationId,
@@ -160,7 +155,8 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
         <HealthCheckDiagram
           context={chartContext}
           isAggregated={isAggregated}
-          rawRetentionDays={retentionConfig.rawRetentionDays}
+          bucketIntervalSeconds={bucketIntervalSeconds}
+          checkIntervalSeconds={item.intervalSeconds}
         />
       </div>
     );
@@ -184,10 +180,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
       </div>
 
       {/* Date Range Filter */}
-      <div className="flex items-center gap-2">
-        <span className="text-sm text-muted-foreground">Time Range:</span>
-        <DateRangeFilter value={dateRange} onChange={setDateRange} />
-      </div>
+      <DateRangeFilter value={dateRange} onChange={setDateRange} />
 
       {/* Charts Section */}
       {renderCharts()}
@@ -281,8 +274,8 @@ export function HealthCheckSystemOverview(props: SlotProps) {
           void refetch();
         }
       },
-      [systemId, refetch]
-    )
+      [systemId, refetch],
+    ),
   );
 
   if (initialLoading) {
@@ -305,28 +298,31 @@ export function HealthCheckSystemOverview(props: SlotProps) {
         return (
           <div key={item.configurationId} className="rounded-md border bg-card">
             <button
-              className="w-full flex items-center justify-between p-4 text-left hover:bg-muted/50 transition-colors"
+              className="w-full p-4 text-left hover:bg-muted/50 transition-colors"
               onClick={() =>
                 setExpandedRow(isExpanded ? undefined : item.configurationId)
               }
             >
+              {/* Header row: chevron, name, badge */}
               <div className="flex items-center gap-3">
                 {isExpanded ? (
-                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
                 ) : (
-                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
                 )}
-                <div>
-                  <div className="font-medium">{item.name}</div>
-                  <div className="text-sm text-muted-foreground">
-                    Last run:{" "}
-                    {item.lastRunAt
-                      ? formatDistanceToNow(item.lastRunAt, { addSuffix: true })
-                      : "never"}
-                  </div>
+                <div className="flex-1 min-w-0 flex items-center justify-between gap-2">
+                  <span className="font-medium truncate">{item.name}</span>
+                  <HealthBadge status={item.state} />
                 </div>
               </div>
-              <div className="flex items-center gap-4">
+              {/* Details row: last run + sparkline */}
+              <div className="ml-7 mt-1 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                <span className="text-sm text-muted-foreground">
+                  Last run:{" "}
+                  {item.lastRunAt
+                    ? formatDistanceToNow(item.lastRunAt, { addSuffix: true })
+                    : "never"}
+                </span>
                 {item.recentStatusHistory.length > 0 && (
                   <HealthCheckSparkline
                     runs={item.recentStatusHistory.map((status) => ({
@@ -334,7 +330,6 @@ export function HealthCheckSystemOverview(props: SlotProps) {
                     }))}
                   />
                 )}
-                <HealthBadge status={item.state} />
               </div>
             </button>
             {isExpanded && <ExpandedDetails item={item} systemId={systemId} />}

package/src/hooks/useHealthCheckData.ts

@@ -44,6 +44,8 @@ interface UseHealthCheckDataResult {
   hasAccess: boolean;
   /** Whether access is still loading */
   accessLoading: boolean;
+  /** Bucket interval in seconds (only for aggregated mode) */
+  bucketIntervalSeconds: number | undefined;
 }
 
 /**
@@ -67,14 +69,14 @@ export function useHealthCheckData({
 
   // Access state
   const { allowed: hasAccess, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.details
+    healthCheckAccess.details,
   );
 
   // Calculate date range in days
   const dateRangeDays = useMemo(() => {
     return Math.ceil(
       (dateRange.endDate.getTime() - dateRange.startDate.getTime()) /
-        (1000 * 60 * 60 * 24)
+        (1000 * 60 * 60 * 24),
     );
   }, [dateRange.startDate, dateRange.endDate]);
 
@@ -82,7 +84,7 @@ export function useHealthCheckData({
   const { data: retentionData, isLoading: retentionLoading } =
     healthCheckClient.getRetentionConfig.useQuery(
       { systemId, configurationId },
-      { enabled: !!systemId && !!configurationId && hasAccess }
+      { enabled: !!systemId && !!configurationId && hasAccess },
     );
 
   const retentionConfig =
@@ -101,6 +103,7 @@ export function useHealthCheckData({
       systemId,
       configurationId,
       startDate: dateRange.startDate,
+      endDate: dateRange.endDate,
       limit,
       offset,
     },
@@ -112,11 +115,10 @@ export function useHealthCheckData({
         !accessLoading &&
         !retentionLoading &&
         !isAggregated,
-    }
+    },
   );
 
   // Query: Fetch aggregated data (when in aggregated mode)
-  const bucketSize = dateRangeDays > 30 ? "daily" : "hourly";
   const { data: aggregatedData, isLoading: aggregatedLoading } =
     healthCheckClient.getDetailedAggregatedHistory.useQuery(
       {
@@ -124,7 +126,7 @@ export function useHealthCheckData({
         configurationId,
         startDate: dateRange.startDate,
         endDate: dateRange.endDate,
-        bucketSize,
+        targetPoints: 500,
       },
       {
         enabled:
@@ -134,7 +136,7 @@ export function useHealthCheckData({
           !accessLoading &&
           !retentionLoading &&
           isAggregated,
-      }
+      },
     );
 
   // Listen for realtime health check updates to refresh data silently
@@ -223,5 +225,6 @@ export function useHealthCheckData({
     retentionConfig,
     hasAccess,
     accessLoading,
+    bucketIntervalSeconds: aggregatedData?.bucketIntervalSeconds,
   };
 }

package/src/pages/HealthCheckConfigPage.tsx

@@ -21,7 +21,7 @@ import {
   PageLayout,
   useToast,
 } from "@checkstack/ui";
-import { Plus, History } from "lucide-react";
+import { Plus, History, Activity } from "lucide-react";
 import { Link } from "react-router-dom";
 import { resolveRoute } from "@checkstack/common";
 
@@ -31,10 +31,10 @@ const HealthCheckConfigPageContent = () => {
   const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
   const { allowed: canRead, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.configuration.read
+    healthCheckAccess.configuration.read,
   );
   const { allowed: canManage } = accessApi.useAccess(
-    healthCheckAccess.configuration.manage
+    healthCheckAccess.configuration.manage,
   );
 
   const [isEditorOpen, setIsEditorOpen] = useState(false);
@@ -52,7 +52,7 @@ const HealthCheckConfigPageContent = () => {
 
   // Fetch strategies with useQuery
   const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
-    {}
+    {},
   );
 
   const configurations = configurationsData?.configurations ?? [];
@@ -100,6 +100,24 @@ const HealthCheckConfigPageContent = () => {
     },
   });
 
+  const pauseMutation = healthCheckClient.pauseConfiguration.useMutation({
+    onSuccess: () => {
+      void refetchConfigurations();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to pause");
+    },
+  });
+
+  const resumeMutation = healthCheckClient.resumeConfiguration.useMutation({
+    onSuccess: () => {
+      void refetchConfigurations();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to resume");
+    },
+  });
+
   const handleCreate = () => {
     setEditingConfig(undefined);
     setIsEditorOpen(true);
@@ -137,6 +155,7 @@ const HealthCheckConfigPageContent = () => {
     <PageLayout
       title="Health Checks"
       subtitle="Manage health check configurations"
+      icon={Activity}
       loading={accessLoading}
       allowed={canRead}
       actions={
@@ -159,6 +178,9 @@ const HealthCheckConfigPageContent = () => {
         strategies={strategies}
         onEdit={handleEdit}
         onDelete={handleDelete}
+        onPause={(id) => pauseMutation.mutate(id)}
+        onResume={(id) => resumeMutation.mutate(id)}
+        canManage={canManage}
       />
 
       <HealthCheckEditor
@@ -184,5 +206,5 @@ const HealthCheckConfigPageContent = () => {
 };
 
 export const HealthCheckConfigPage = wrapInSuspense(
-  HealthCheckConfigPageContent
+  HealthCheckConfigPageContent,
 );

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -25,6 +25,7 @@ import {
   type DateRange,
 } from "@checkstack/ui";
 import { useParams } from "react-router-dom";
+import { History } from "lucide-react";
 import {
   HealthCheckRunsTable,
   type HealthCheckRunDetailed,
@@ -39,7 +40,7 @@ const HealthCheckHistoryDetailPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.configuration.manage
+    healthCheckAccess.configuration.manage,
   );
 
   const [dateRange, setDateRange] = useState<DateRange>(getDefaultDateRange);
@@ -67,8 +68,9 @@ const HealthCheckHistoryDetailPageContent = () => {
       title="Health Check Run History"
       subtitle={`System: ${systemId} • Configuration: ${configurationId?.slice(
         0,
-        8
+        8,
       )}...`}
+      icon={History}
       loading={accessLoading}
       allowed={canManage}
       actions={
@@ -100,5 +102,5 @@ const HealthCheckHistoryDetailPageContent = () => {
 };
 
 export const HealthCheckHistoryDetailPage = wrapInSuspense(
-  HealthCheckHistoryDetailPageContent
+  HealthCheckHistoryDetailPageContent,
 );

package/src/pages/HealthCheckHistoryPage.tsx

@@ -21,12 +21,13 @@ import {
   healthCheckAccess,
   HealthCheckApi,
 } from "@checkstack/healthcheck-common";
+import { History } from "lucide-react";
 
 const HealthCheckHistoryPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.configuration.manage
+    healthCheckAccess.configuration.manage,
   );
 
   // Pagination state
@@ -47,6 +48,7 @@ const HealthCheckHistoryPageContent = () => {
     <PageLayout
       title="Health Check History"
       subtitle="Detailed run history with full result data"
+      icon={History}
       loading={accessLoading}
       allowed={canManage}
     >
@@ -68,5 +70,5 @@ const HealthCheckHistoryPageContent = () => {
 };
 
 export const HealthCheckHistoryPage = wrapInSuspense(
-  HealthCheckHistoryPageContent
+  HealthCheckHistoryPageContent,
 );