@checkstack/healthcheck-frontend 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # @checkstack/healthcheck-frontend
 
+## 0.11.1
+
+### Patch Changes
+
+- Updated dependencies [0ebbe56]
+- Updated dependencies [a340781]
+- Updated dependencies [8d2660d]
+  - @checkstack/common@0.6.3
+  - @checkstack/ui@1.1.1
+  - @checkstack/dashboard-frontend@0.3.17
+  - @checkstack/auth-frontend@0.5.11
+  - @checkstack/catalog-common@1.2.8
+  - @checkstack/frontend-api@0.3.6
+  - @checkstack/healthcheck-common@0.8.3
+  - @checkstack/signal-frontend@0.0.13
+
+## 0.11.0
+
+### Minor Changes
+
+- 84dd430: ## Single Run Auto-Charts
+
+  Added `SingleRunChartGrid` component to display auto-generated charts for individual health check runs when viewing run history details.
+
+  ### Features
+
+  - Renders charts based on the strategy's `resultSchema` metadata (same as aggregated charts)
+  - Supports all chart types: gauge, counter, boolean, text, status
+  - Groups fields by collector instance with assertion status display
+  - Updated `useStrategySchemas` hook to also return `resultSchema` for single-run visualization
+
+  ### Changes
+
+  - Simplified `ExpandedResultView` to show only basic run metadata (status, latency, connection)
+  - Collector results and detailed data now displayed via `SingleRunChartGrid`
+
+### Patch Changes
+
+- c842373: ## Animated Numbers & Availability Stats Live Updates
+
+  ### Features
+
+  - **AnimatedNumber component** (`@checkstack/ui`): New reusable component that displays numbers with a smooth "rolling" animation when values change. Uses `requestAnimationFrame` with eased interpolation for a polished effect.
+  - **useAnimatedNumber hook** (`@checkstack/ui`): Underlying hook for the animation logic, can be used directly for custom implementations.
+  - **Live availability updates**: Availability stats (31-day and 365-day) now automatically refresh when new health check runs are received via signals.
+
+  ### Usage
+
+  ```tsx
+  import { AnimatedNumber } from "@checkstack/ui";
+
+  <AnimatedNumber
+    value={99.95}
+    suffix="%"
+    decimals={2}
+    duration={500}
+    className="text-2xl font-bold text-green-500"
+  />;
+  ```
+
+- c842373: ## Fix Counter Chart Multiplier Display
+
+  Hide redundant "(1×)" multiplier suffix for single-value counters in auto-charts. For aggregated counter values like "Errors", the displayed value itself represents the count, so showing "(1×)" adds no information and is confusing.
+
+- Updated dependencies [c842373]
+  - @checkstack/ui@1.1.0
+  - @checkstack/auth-frontend@0.5.10
+  - @checkstack/dashboard-frontend@0.3.16
+
 ## 0.10.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -9,14 +9,14 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-frontend": "0.5.8",
-    "@checkstack/catalog-common": "1.2.6",
-    "@checkstack/common": "0.6.1",
-    "@checkstack/dashboard-frontend": "0.3.14",
-    "@checkstack/frontend-api": "0.3.4",
-    "@checkstack/healthcheck-common": "0.8.1",
-    "@checkstack/signal-frontend": "0.0.11",
-    "@checkstack/ui": "0.5.3",
+    "@checkstack/auth-frontend": "0.5.10",
+    "@checkstack/catalog-common": "1.2.7",
+    "@checkstack/common": "0.6.2",
+    "@checkstack/dashboard-frontend": "0.3.16",
+    "@checkstack/frontend-api": "0.3.5",
+    "@checkstack/healthcheck-common": "0.8.2",
+    "@checkstack/signal-frontend": "0.0.12",
+    "@checkstack/ui": "1.1.0",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",

package/src/auto-charts/AutoChartGrid.tsx

@@ -465,15 +465,18 @@ function CounterRenderer({ field, context }: ChartRendererProps) {
   // Sort by count (descending) then by value
   entries.sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
 
-  // If there's only one unique value, show it prominently with count
+  // If there's only one unique value, show it prominently
+  // Only show count multiplier if > 1 (avoids confusing "(1×)" for aggregated counters)
   if (entries.length === 1) {
     const [value, count] = entries[0];
     return (
       <div className="text-2xl font-bold">
         {value}
-        <span className="text-sm font-normal text-muted-foreground ml-2">
-          ({count}×)
-        </span>
+        {count > 1 && (
+          <span className="text-sm font-normal text-muted-foreground ml-2">
+            ({count}×)
+          </span>
+        )}
       </div>
     );
   }

package/src/auto-charts/SingleRunChartGrid.tsx

@@ -0,0 +1,359 @@
+/**
+ * SingleRunChartGrid - Renders auto-generated charts for a single health check run.
+ *
+ * Unlike AutoChartGrid which shows time series data, this component displays
+ * static values from a single run's result/metadata.
+ */
+
+import type { ChartField } from "./schema-parser";
+import { extractChartFields, getFieldValue } from "./schema-parser";
+import { useStrategySchemas } from "./useStrategySchemas";
+import { Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
+import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
+
+interface SingleRunChartGridProps {
+  /** Strategy ID (qualified, e.g., "healthcheck-http-backend.http") */
+  strategyId: string;
+  /** The run's result data containing metadata */
+  result: Record<string, unknown>;
+}
+
+/**
+ * Main component that renders a grid of charts for a single run.
+ */
+export function SingleRunChartGrid({
+  strategyId,
+  result,
+}: SingleRunChartGridProps) {
+  const { schemas, loading } = useStrategySchemas(strategyId);
+
+  if (loading) {
+    return;
+  }
+
+  if (!schemas) {
+    return;
+  }
+
+  // Use result schema for per-run data
+  const schema = schemas.resultSchema;
+
+  const schemaFields = extractChartFields(schema);
+  if (schemaFields.length === 0) {
+    return;
+  }
+
+  // Get the metadata from the result
+  const metadata = result.metadata as Record<string, unknown> | undefined;
+  if (!metadata) {
+    return;
+  }
+
+  // Discover collector instances from result data
+  const collectors = metadata.collectors as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  const collectorEntries = collectors ? Object.entries(collectors) : [];
+
+  // Separate strategy-level fields from collector fields
+  const strategyFields = schemaFields.filter((f) => !f.collectorId);
+
+  return (
+    <div className="space-y-6">
+      {/* Strategy-level fields */}
+      {strategyFields.length > 0 && (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {strategyFields.map((field) => (
+            <SingleValueCard
+              key={field.name}
+              field={field}
+              value={getFieldValue(metadata, field.name)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Collector groups */}
+      {collectorEntries
+        .filter(([, collectorData]) => {
+          const collectorId = collectorData._collectorId as string | undefined;
+          if (!collectorId) return false;
+          const collectorFields = schemaFields.filter(
+            (f) => f.collectorId === collectorId,
+          );
+          return collectorFields.length > 0;
+        })
+        .map(([instanceId, collectorData]) => {
+          const collectorId = collectorData._collectorId as string;
+          const collectorFields = schemaFields.filter(
+            (f) => f.collectorId === collectorId,
+          );
+          return (
+            <CollectorSection
+              key={instanceId}
+              instanceId={instanceId}
+              collectorId={collectorId}
+              fields={collectorFields}
+              data={collectorData}
+            />
+          );
+        })}
+    </div>
+  );
+}
+
+interface CollectorSectionProps {
+  instanceId: string;
+  collectorId: string;
+  fields: ChartField[];
+  data: Record<string, unknown>;
+}
+
+/**
+ * Section for a single collector instance.
+ */
+function CollectorSection({
+  instanceId,
+  collectorId,
+  fields,
+  data,
+}: CollectorSectionProps) {
+  const displayName = collectorId.split(".").pop() || collectorId;
+  const assertionFailed = data._assertionFailed as string | undefined;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+          {displayName}
+        </h4>
+        <span className="text-xs text-muted-foreground">
+          ({instanceId.slice(0, 8)})
+        </span>
+      </div>
+
+      {/* Assertion status if present */}
+      {assertionFailed && (
+        <Card className="border-red-200 dark:border-red-900">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-red-600">
+              Assertion Failed
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-sm text-red-600 bg-red-50 dark:bg-red-950 px-2 py-1 rounded">
+              {assertionFailed}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {fields.map((field) => (
+          <SingleValueCard
+            key={field.name}
+            field={field}
+            value={getFieldValue(data, field.name)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface SingleValueCardProps {
+  field: ChartField;
+  value: unknown;
+}
+
+/**
+ * Card displaying a single value based on its chart type.
+ */
+function SingleValueCard({ field, value }: SingleValueCardProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium">{field.label}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <SingleValueRenderer field={field} value={value} />
+      </CardContent>
+    </Card>
+  );
+}
+
+interface SingleValueRendererProps {
+  field: ChartField;
+  value: unknown;
+}
+
+/**
+ * Dispatches to appropriate renderer based on chart type.
+ */
+function SingleValueRenderer({ field, value }: SingleValueRendererProps) {
+  switch (field.chartType) {
+    case "line":
+    case "counter": {
+      return <NumberRenderer value={value} unit={field.unit} />;
+    }
+    case "gauge": {
+      return <GaugeRenderer value={value} unit={field.unit} />;
+    }
+    case "boolean": {
+      return <BooleanRenderer value={value} />;
+    }
+    case "text": {
+      return <TextRenderer value={value} />;
+    }
+    case "status": {
+      return <StatusRenderer value={value} />;
+    }
+    case "bar":
+    case "pie": {
+      // For bar/pie, just show the value since we can't do distributions with a single point
+      return <TextRenderer value={value} />;
+    }
+    default: {
+      return <TextRenderer value={value} />;
+    }
+  }
+}
+
+/**
+ * Renders a numeric value with optional unit.
+ */
+function NumberRenderer({ value, unit }: { value: unknown; unit?: string }) {
+  if (value === undefined || value === null) {
+    return <div className="text-muted-foreground">—</div>;
+  }
+
+  const numValue = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(numValue)) {
+    return <div className="text-muted-foreground">{String(value)}</div>;
+  }
+
+  const formatted = Number.isInteger(numValue)
+    ? String(numValue)
+    : numValue.toFixed(2);
+
+  return (
+    <div className="text-2xl font-bold">
+      {formatted}
+      {unit && (
+        <span className="text-sm font-normal text-muted-foreground ml-1">
+          {unit}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Renders a percentage gauge visualization.
+ */
+function GaugeRenderer({ value, unit }: { value: unknown; unit?: string }) {
+  if (value === undefined || value === null) {
+    return <div className="text-muted-foreground">—</div>;
+  }
+
+  const numValue = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(numValue)) {
+    return <div className="text-muted-foreground">{String(value)}</div>;
+  }
+
+  const clampedValue = Math.min(100, Math.max(0, numValue));
+  const displayUnit = unit ?? "%";
+
+  // Determine color based on value
+  const fillColor =
+    clampedValue >= 90
+      ? "hsl(var(--success))"
+      : clampedValue >= 70
+        ? "hsl(var(--warning))"
+        : "hsl(var(--destructive))";
+
+  const data = [{ name: "value", value: clampedValue, fill: fillColor }];
+
+  return (
+    <div className="flex items-center gap-3">
+      <ResponsiveContainer width={80} height={80}>
+        <RadialBarChart
+          cx="50%"
+          cy="50%"
+          innerRadius="60%"
+          outerRadius="100%"
+          barSize={8}
+          data={data}
+          startAngle={90}
+          endAngle={-270}
+        >
+          <RadialBar
+            dataKey="value"
+            cornerRadius={4}
+            background={{ fill: "hsl(var(--muted))" }}
+          />
+        </RadialBarChart>
+      </ResponsiveContainer>
+      <div className="text-2xl font-bold" style={{ color: fillColor }}>
+        {clampedValue.toFixed(1)}
+        {displayUnit}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders a boolean indicator.
+ */
+function BooleanRenderer({ value }: { value: unknown }) {
+  if (value === undefined || value === null) {
+    return <div className="text-muted-foreground">—</div>;
+  }
+
+  const boolValue = Boolean(value);
+
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className={`w-3 h-3 rounded-full ${
+          boolValue ? "bg-green-500" : "bg-red-500"
+        }`}
+      />
+      <span className={boolValue ? "text-green-600" : "text-red-600"}>
+        {boolValue ? "Yes" : "No"}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Renders a text value.
+ */
+function TextRenderer({ value }: { value: unknown }) {
+  if (value === undefined || value === null || value === "") {
+    return <div className="text-muted-foreground">—</div>;
+  }
+
+  const strValue = String(value);
+
+  return (
+    <div className="text-sm font-mono truncate" title={strValue}>
+      {strValue}
+    </div>
+  );
+}
+
+/**
+ * Renders an error/status badge.
+ */
+function StatusRenderer({ value }: { value: unknown }) {
+  if (value === undefined || value === null || value === "") {
+    return <div className="text-sm text-muted-foreground">No errors</div>;
+  }
+
+  return (
+    <div className="text-sm text-red-600 bg-red-50 dark:bg-red-950 px-2 py-1 rounded truncate">
+      {String(value)}
+    </div>
+  );
+}

package/src/auto-charts/index.ts

@@ -8,5 +8,6 @@
 export { extractChartFields, getFieldValue } from "./schema-parser";
 export type { ChartField } from "./schema-parser";
 export { AutoChartGrid } from "./AutoChartGrid";
+export { SingleRunChartGrid } from "./SingleRunChartGrid";
 export { useStrategySchemas } from "./useStrategySchemas";
 export { autoChartExtension } from "./extension";

package/src/auto-charts/useStrategySchemas.ts

@@ -11,6 +11,7 @@ import { usePluginClient } from "@checkstack/frontend-api";
 import { HealthCheckApi } from "../api";
 
 interface StrategySchemas {
+  resultSchema: Record<string, unknown> | undefined;
   aggregatedResultSchema: Record<string, unknown> | undefined;
 }
 
@@ -65,7 +66,23 @@ export function useStrategySchemas(strategyId: string): {
         collectorAggregatedProperties,
       );
 
+      // Build collector result schemas for nesting under resultSchema.properties.collectors
+      const collectorResultProperties: Record<string, unknown> = {};
+
+      for (const collector of collectors) {
+        if (collector.resultSchema) {
+          collectorResultProperties[collector.id] = collector.resultSchema;
+        }
+      }
+
+      // Merge collector result schemas into strategy result schema
+      const mergedResultSchema = mergeCollectorSchemas(
+        strategy.resultSchema as Record<string, unknown> | undefined,
+        collectorResultProperties,
+      );
+
       setSchemas({
+        resultSchema: mergedResultSchema,
         aggregatedResultSchema: mergedAggregatedSchema,
       });
     }

package/src/components/ExpandedResultView.tsx

@@ -1,5 +1,8 @@
 /**
- * ExpandedResultView - Displays health check result data in a structured format.
+ * ExpandedResultView - Displays basic health check result metadata.
+ *
+ * Shows status, latency, and connection time. Collector results and
+ * detailed visualizations are handled by SingleRunChartGrid.
  */
 
 interface ExpandedResultViewProps {
@@ -7,134 +10,28 @@ interface ExpandedResultViewProps {
 }
 
 /**
- * Displays the result data in a structured format.
- * Shows collector results as cards with key-value pairs.
+ * Displays basic run metadata (status, latency, connection time).
  */
 export function ExpandedResultView({ result }: ExpandedResultViewProps) {
   const metadata = result.metadata as Record<string, unknown> | undefined;
-  const rawCollectors = metadata?.collectors;
-
-  // Type guard for collectors object
-  const collectors: Record<string, Record<string, unknown>> | undefined =
-    rawCollectors &&
-    typeof rawCollectors === "object" &&
-    !Array.isArray(rawCollectors)
-      ? (rawCollectors as Record<string, Record<string, unknown>>)
-      : undefined;
-
-  // Check if we have collectors to display
-  const collectorEntries = collectors ? Object.entries(collectors) : [];
-
-  // Extract connection time as typed value
   const connectionTimeMs = metadata?.connectionTimeMs as number | undefined;
 
   return (
-    <div className="space-y-4">
-      <div className="flex gap-4 text-sm">
-        <div>
-          <span className="text-muted-foreground">Status: </span>
-          <span className="font-medium">{String(result.status)}</span>
-        </div>
-        <div>
-          <span className="text-muted-foreground">Latency: </span>
-          <span className="font-medium">{String(result.latencyMs)}ms</span>
-        </div>
-        {connectionTimeMs !== undefined && (
-          <div>
-            <span className="text-muted-foreground">Connection: </span>
-            <span className="font-medium">{connectionTimeMs}ms</span>
-          </div>
-        )}
+    <div className="flex flex-wrap gap-4 text-sm">
+      <div>
+        <span className="text-muted-foreground">Status: </span>
+        <span className="font-medium">{String(result.status)}</span>
       </div>
-
-      {collectorEntries.length > 0 && (
-        <div className="space-y-3">
-          <h4 className="text-sm font-medium">Collector Results</h4>
-          <div className="grid gap-3 md:grid-cols-2">
-            {collectorEntries.map(([collectorId, collectorResult]) => (
-              <CollectorResultCard
-                key={collectorId}
-                collectorId={collectorId}
-                result={collectorResult}
-              />
-            ))}
-          </div>
+      <div>
+        <span className="text-muted-foreground">Latency: </span>
+        <span className="font-medium">{String(result.latencyMs)}ms</span>
+      </div>
+      {connectionTimeMs !== undefined && (
+        <div>
+          <span className="text-muted-foreground">Connection: </span>
+          <span className="font-medium">{connectionTimeMs}ms</span>
         </div>
       )}
-
-      {result.message ? (
-        <div className="text-sm text-muted-foreground">
-          {String(result.message)}
-        </div>
-      ) : undefined}
-    </div>
-  );
-}
-
-interface CollectorResultCardProps {
-  collectorId: string;
-  result: Record<string, unknown>;
-}
-
-/**
- * Card displaying a single collector's result values.
- */
-function CollectorResultCard({
-  collectorId,
-  result,
-}: CollectorResultCardProps) {
-  if (!result || typeof result !== "object") {
-    return;
-  }
-
-  // Filter out null/undefined values
-  const entries = Object.entries(result).filter(
-    ([, value]) => value !== null && value !== undefined,
-  );
-
-  return (
-    <div className="rounded-md border bg-card p-3 space-y-2">
-      <h5 className="text-sm font-medium text-primary">{collectorId}</h5>
-      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
-        {entries.map(([key, value]) => (
-          <div key={key} className="contents">
-            <span className="text-muted-foreground truncate">
-              {formatKey(key)}
-            </span>
-            <span className="font-mono text-xs truncate" title={String(value)}>
-              {formatValue(value)}
-            </span>
-          </div>
-        ))}
-      </div>
     </div>
   );
 }
-
-/**
- * Format a camelCase key to a readable label.
- */
-function formatKey(key: string): string {
-  return key
-    .replaceAll(/([a-z])([A-Z])/g, "$1 $2")
-    .replace(/^./, (c) => c.toUpperCase());
-}
-
-/**
- * Format a value for display.
- */
-function formatValue(value: unknown): string {
-  if (value === null || value === undefined) return "—";
-  if (typeof value === "boolean") return value ? "Yes" : "No";
-  if (typeof value === "number") {
-    return Number.isInteger(value) ? String(value) : value.toFixed(2);
-  }
-  if (Array.isArray(value)) {
-    return value.length > 3
-      ? `[${value.slice(0, 3).join(", ")}…]`
-      : `[${value.join(", ")}]`;
-  }
-  if (typeof value === "object") return JSON.stringify(value);
-  const str = String(value);
-  return str.length > 50 ? `${str.slice(0, 47)}…` : str;
-}

package/src/components/HealthCheckSystemOverview.tsx

@@ -36,6 +36,7 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  AnimatedNumber,
 } from "@checkstack/ui";
 import { formatDistanceToNow } from "date-fns";
 import { ChevronDown, ChevronRight } from "lucide-react";
@@ -70,28 +71,21 @@ interface ExpandedRowProps {
   systemId: string;
 }
 
-// Helper to format availability percentage with color
-const formatAvailability = (
+// Helper to get color class for availability percentage
+const getAvailabilityColorClass = (
   value: number | null,
   totalRuns: number,
-): { text: string; className: string } => {
+): string => {
   if (value === null || totalRuns === 0) {
-    return { text: "N/A", className: "text-muted-foreground" };
+    return "text-muted-foreground";
   }
-  const formatted = value.toFixed(2) + "%";
   if (value >= 99.9) {
-    return {
-      text: formatted,
-      className: "text-green-600 dark:text-green-400",
-    };
+    return "text-green-600 dark:text-green-400";
   }
   if (value >= 99) {
-    return {
-      text: formatted,
-      className: "text-yellow-600 dark:text-yellow-400",
-    };
+    return "text-yellow-600 dark:text-yellow-400";
   }
-  return { text: formatted, className: "text-red-600 dark:text-red-400" };
+  return "text-red-600 dark:text-red-400";
 };
 
 const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
@@ -199,11 +193,12 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   }
   const runs = displayRuns;
 
-  // Listen for realtime health check updates to refresh history table
+  // Listen for realtime health check updates to refresh history table and availability stats
   // Charts are refreshed automatically by useHealthCheckData
   useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
     if (changedId === systemId) {
       void refetch();
+      void refetchAvailability();
     }
   });
 
@@ -214,7 +209,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     : "Using default thresholds";
 
   // Fetch availability stats
-  const { data: availabilityData } =
+  const { data: availabilityData, refetch: refetchAvailability } =
     healthCheckClient.getAvailabilityStats.useQuery({
       systemId,
       configurationId: item.configurationId,
@@ -302,16 +297,11 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
               31-Day Availability
             </span>
             <div className="flex items-baseline gap-2">
-              <span
-                className={`text-2xl font-bold ${formatAvailability(availabilityData.availability31Days, availabilityData.totalRuns31Days).className}`}
-              >
-                {
-                  formatAvailability(
-                    availabilityData.availability31Days,
-                    availabilityData.totalRuns31Days,
-                  ).text
-                }
-              </span>
+              <AnimatedNumber
+                value={availabilityData.availability31Days ?? undefined}
+                suffix="%"
+                className={`text-2xl font-bold ${getAvailabilityColorClass(availabilityData.availability31Days, availabilityData.totalRuns31Days)}`}
+              />
               {availabilityData.totalRuns31Days > 0 && (
                 <span className="text-sm text-muted-foreground">
                   ({availabilityData.totalRuns31Days.toLocaleString()} runs)
@@ -324,16 +314,11 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
               365-Day Availability
             </span>
             <div className="flex items-baseline gap-2">
-              <span
-                className={`text-2xl font-bold ${formatAvailability(availabilityData.availability365Days, availabilityData.totalRuns365Days).className}`}
-              >
-                {
-                  formatAvailability(
-                    availabilityData.availability365Days,
-                    availabilityData.totalRuns365Days,
-                  ).text
-                }
-              </span>
+              <AnimatedNumber
+                value={availabilityData.availability365Days ?? undefined}
+                suffix="%"
+                className={`text-2xl font-bold ${getAvailabilityColorClass(availabilityData.availability365Days, availabilityData.totalRuns365Days)}`}
+              />
               {availabilityData.totalRuns365Days > 0 && (
                 <span className="text-sm text-muted-foreground">
                   ({availabilityData.totalRuns365Days.toLocaleString()} runs)

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -33,6 +33,7 @@ import {
   type HealthCheckRunDetailed,
 } from "../components/HealthCheckRunsTable";
 import { ExpandedResultView } from "../components/ExpandedResultView";
+import { SingleRunChartGrid } from "../auto-charts";
 
 const HealthCheckHistoryDetailPageContent = () => {
   const { systemId, configurationId, runId } = useParams<{
@@ -63,6 +64,17 @@ const HealthCheckHistoryDetailPageContent = () => {
     },
   );
 
+  // Fetch configurations to get strategyId
+  const { data: configurations } = healthCheckClient.getConfigurations.useQuery(
+    {},
+    {
+      enabled: !!configurationId,
+    },
+  );
+  const configuration = configurations?.configurations.find(
+    (c) => c.id === configurationId,
+  );
+
   // Fetch data with useQuery - newest first for table display
   const { data, isLoading } = healthCheckClient.getDetailedHistory.useQuery({
     systemId,
@@ -127,8 +139,14 @@ const HealthCheckHistoryDetailPageContent = () => {
               {format(new Date(specificRun.timestamp), "PPpp")}
             </p>
           </CardHeader>
-          <CardContent>
+          <CardContent className="space-y-4">
             <ExpandedResultView result={specificRun.result} />
+            {configuration?.strategyId && (
+              <SingleRunChartGrid
+                strategyId={configuration.strategyId}
+                result={specificRun.result}
+              />
+            )}
           </CardContent>
         </Card>
       )}