@checkstack/healthcheck-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,135 @@
+# @checkstack/healthcheck-frontend
+
+## 0.0.2
+
+### Patch Changes
+
+- d20d274: Initial release of all @checkstack packages. Rebranded from Checkmate to Checkstack with new npm organization @checkstack and domain checkstack.dev.
+- Updated dependencies [d20d274]
+  - @checkstack/catalog-common@0.0.2
+  - @checkstack/common@0.0.2
+  - @checkstack/frontend-api@0.0.2
+  - @checkstack/healthcheck-common@0.0.2
+  - @checkstack/signal-frontend@0.0.2
+  - @checkstack/ui@0.0.2
+
+## 0.2.0
+
+### Minor Changes
+
+- a65e002: Add command palette commands and deep-linking support
+
+  **Backend Changes:**
+
+  - `healthcheck-backend`: Add "Manage Health Checks" (⇧⌘H) and "Create Health Check" commands
+  - `catalog-backend`: Add "Manage Systems" (⇧⌘S) and "Create System" commands
+  - `integration-backend`: Add "Manage Integrations" (⇧⌘G), "Create Integration Subscription", and "View Integration Logs" commands
+  - `auth-backend`: Add "Manage Users" (⇧⌘U), "Create User", "Manage Roles", and "Manage Applications" commands
+  - `command-backend`: Auto-cleanup command registrations when plugins are deregistered
+
+  **Frontend Changes:**
+
+  - `HealthCheckConfigPage`: Handle `?action=create` URL parameter
+  - `CatalogConfigPage`: Handle `?action=create` URL parameter
+  - `IntegrationsPage`: Handle `?action=create` URL parameter
+  - `AuthSettingsPage`: Handle `?tab=` and `?action=create` URL parameters
+
+### Patch Changes
+
+- 0afa204: Subscribe health check charts and history table to real-time signal updates. Charts now display the full data for the selected time range independently from the paginated history table, and both update automatically when a health check run completes.
+- 32ea706: ### User Menu Loading State Fix
+
+  Fixed user menu items "popping in" one after another due to independent async permission checks.
+
+  **Changes:**
+
+  - Added `UserMenuItemsContext` interface with `permissions` and `hasCredentialAccount` to `@checkstack/frontend-api`
+  - `LoginNavbarAction` now pre-fetches all permissions and credential account info before rendering the menu
+  - All user menu item components now use the passed context for synchronous permission checks instead of async hooks
+  - Uses `qualifyPermissionId` helper for fully-qualified permission IDs
+
+  **Result:** All menu items appear simultaneously when the user menu opens.
+
+- Updated dependencies [52231ef]
+- Updated dependencies [b0124ef]
+- Updated dependencies [54cc787]
+- Updated dependencies [a65e002]
+- Updated dependencies [ae33df2]
+- Updated dependencies [32ea706]
+  - @checkstack/ui@0.1.2
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/catalog-common@0.1.2
+  - @checkstack/healthcheck-common@0.1.1
+  - @checkstack/signal-frontend@0.1.1
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [0f8cc7d]
+  - @checkstack/frontend-api@0.0.3
+  - @checkstack/catalog-common@0.1.1
+  - @checkstack/ui@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- ae19ff6: Add configurable state thresholds for health check evaluation
+
+  **@checkstack/backend-api:**
+
+  - Added `VersionedData<T>` generic interface as base for all versioned data structures
+  - `VersionedConfig<T>` now extends `VersionedData<T>` and adds `pluginId`
+  - Added `migrateVersionedData()` utility function for running migrations on any `VersionedData` subtype
+
+  **@checkstack/backend:**
+
+  - Refactored `ConfigMigrationRunner` to use the new `migrateVersionedData` utility
+
+  **@checkstack/healthcheck-common:**
+
+  - Added state threshold schemas with two evaluation modes (consecutive, window)
+  - Added `stateThresholds` field to `AssociateHealthCheckSchema`
+  - Added `getSystemHealthStatus` RPC endpoint contract
+
+  **@checkstack/healthcheck-backend:**
+
+  - Added `stateThresholds` column to `system_health_checks` table
+  - Added `state-evaluator.ts` with health status evaluation logic
+  - Added `state-thresholds-migrations.ts` with migration infrastructure
+  - Added `getSystemHealthStatus` RPC handler
+
+  **@checkstack/healthcheck-frontend:**
+
+  - Updated `SystemHealthBadge` to use new backend endpoint
+
+- 0babb9c: Add public health status access and detailed history for admins
+
+  **Permission changes:**
+
+  - Added `healthcheck.status.read` permission with `isPublicDefault: true` for anonymous access
+  - `getSystemHealthStatus`, `getSystemHealthOverview`, and `getHistory` now public
+  - `getHistory` no longer returns `result` field (security)
+
+  **New features:**
+
+  - Added `getDetailedHistory` endpoint with `healthcheck.manage` permission
+  - New `/healthcheck/history` page showing paginated run history with expandable result JSON
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [4dd644d]
+- Updated dependencies [ae19ff6]
+- Updated dependencies [0babb9c]
+- Updated dependencies [b55fae6]
+- Updated dependencies [b354ab3]
+  - @checkstack/ui@0.1.0
+  - @checkstack/common@0.1.0
+  - @checkstack/catalog-common@0.1.0
+  - @checkstack/healthcheck-common@0.1.0
+  - @checkstack/signal-frontend@0.1.0
+  - @checkstack/frontend-api@0.0.2

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@checkstack/healthcheck-frontend",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "src/index.tsx",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkstack/catalog-common": "workspace:*",
+    "@checkstack/common": "workspace:*",
+    "@checkstack/frontend-api": "workspace:*",
+    "@checkstack/healthcheck-common": "workspace:*",
+    "@checkstack/signal-frontend": "workspace:*",
+    "@checkstack/ui": "workspace:*",
+    "@types/prismjs": "^1.26.5",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.344.0",
+    "prismjs": "^1.30.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "react-simple-code-editor": "^0.14.1",
+    "recharts": "^3.6.0",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkstack/tsconfig": "workspace:*",
+    "@checkstack/scripts": "workspace:*"
+  }
+}

package/src/api.ts

@@ -0,0 +1,17 @@
+import { createApiRef } from "@checkstack/frontend-api";
+import { HealthCheckApi } from "@checkstack/healthcheck-common";
+import type { InferClient } from "@checkstack/common";
+
+// Re-export types for convenience
+export type {
+  HealthCheckConfiguration,
+  HealthCheckStrategyDto,
+  HealthCheckRun,
+  HealthCheckRunPublic,
+} from "@checkstack/healthcheck-common";
+
+// HealthCheckApiClient type inferred from the client definition
+export type HealthCheckApiClient = InferClient<typeof HealthCheckApi>;
+
+export const healthCheckApiRef =
+  createApiRef<HealthCheckApiClient>("healthcheck-api");

package/src/auto-charts/AutoChartGrid.tsx

@@ -0,0 +1,383 @@
+/**
+ * AutoChartGrid - Renders auto-generated charts based on schema metadata.
+ *
+ * Parses the strategy's result/aggregated schemas to extract chart metadata
+ * and renders appropriate visualizations for each annotated field.
+ */
+
+import type { ChartField } from "./schema-parser";
+import { extractChartFields, getFieldValue } from "./schema-parser";
+import { useStrategySchemas } from "./useStrategySchemas";
+import type { HealthCheckDiagramSlotContext } from "../slots";
+import type { StoredHealthCheckResult } from "@checkstack/healthcheck-common";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@checkstack/ui";
+
+interface AutoChartGridProps {
+  context: HealthCheckDiagramSlotContext;
+}
+
+/**
+ * Main component that renders a grid of auto-generated charts.
+ */
+export function AutoChartGrid({ context }: AutoChartGridProps) {
+  const { schemas, loading } = useStrategySchemas(context.strategyId);
+
+  if (loading) {
+    return; // Don't show loading state, let custom charts render first
+  }
+
+  if (!schemas) {
+    return;
+  }
+
+  // Choose schema based on context type
+  const schema =
+    context.type === "raw"
+      ? schemas.resultSchema
+      : schemas.aggregatedResultSchema;
+
+  if (!schema) {
+    return;
+  }
+
+  const fields = extractChartFields(schema);
+  if (fields.length === 0) {
+    return;
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mt-4">
+      {fields.map((field) => (
+        <AutoChartCard key={field.name} field={field} context={context} />
+      ))}
+    </div>
+  );
+}
+
+interface AutoChartCardProps {
+  field: ChartField;
+  context: HealthCheckDiagramSlotContext;
+}
+
+/**
+ * Individual chart card that renders based on field type.
+ */
+function AutoChartCard({ field, context }: AutoChartCardProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium">{field.label}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ChartRenderer field={field} context={context} />
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ChartRendererProps {
+  field: ChartField;
+  context: HealthCheckDiagramSlotContext;
+}
+
+/**
+ * Dispatches to appropriate chart renderer based on chart type.
+ */
+function ChartRenderer({ field, context }: ChartRendererProps) {
+  switch (field.chartType) {
+    case "line": {
+      return <LineChartRenderer field={field} context={context} />;
+    }
+    case "gauge": {
+      return <GaugeRenderer field={field} context={context} />;
+    }
+    case "counter": {
+      return <CounterRenderer field={field} context={context} />;
+    }
+    case "bar": {
+      return <BarChartRenderer field={field} context={context} />;
+    }
+    case "boolean": {
+      return <BooleanRenderer field={field} context={context} />;
+    }
+    case "text": {
+      return <TextRenderer field={field} context={context} />;
+    }
+    case "status": {
+      return <StatusRenderer field={field} context={context} />;
+    }
+    default: {
+      return;
+    }
+  }
+}
+
+// =============================================================================
+// CHART RENDERERS
+// =============================================================================
+
+/**
+ * Renders a large counter value with optional trend.
+ */
+function CounterRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const displayValue = typeof value === "number" ? value : "—";
+  const unit = field.unit ?? "";
+
+  return (
+    <div className="text-2xl font-bold">
+      {displayValue}
+      {unit && (
+        <span className="text-sm font-normal text-muted-foreground ml-1">
+          {unit}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Renders a percentage gauge visualization.
+ */
+function GaugeRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const numValue =
+    typeof value === "number" ? Math.min(100, Math.max(0, value)) : 0;
+  const unit = field.unit ?? "%";
+
+  // Determine color based on value (for rates: higher is better)
+  const colorClass =
+    numValue >= 90
+      ? "text-green-500"
+      : numValue >= 70
+      ? "text-yellow-500"
+      : "text-red-500";
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative w-16 h-16">
+        <svg className="w-16 h-16 transform -rotate-90" viewBox="0 0 36 36">
+          <circle
+            cx="18"
+            cy="18"
+            r="15.5"
+            fill="none"
+            className="stroke-muted"
+            strokeWidth="3"
+          />
+          <circle
+            cx="18"
+            cy="18"
+            r="15.5"
+            fill="none"
+            className={colorClass.replace("text-", "stroke-")}
+            strokeWidth="3"
+            strokeDasharray={`${numValue} 100`}
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+      <div className={`text-2xl font-bold ${colorClass}`}>
+        {numValue.toFixed(1)}
+        {unit}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders a boolean indicator (success/failure).
+ */
+function BooleanRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const isTrue = value === true;
+
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className={`w-3 h-3 rounded-full ${
+          isTrue ? "bg-green-500" : "bg-red-500"
+        }`}
+      />
+      <span className={isTrue ? "text-green-600" : "text-red-600"}>
+        {isTrue ? "Yes" : "No"}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Renders text value.
+ */
+function TextRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const displayValue = formatTextValue(value);
+
+  return (
+    <div
+      className="text-sm font-mono text-muted-foreground truncate"
+      title={displayValue}
+    >
+      {displayValue || "—"}
+    </div>
+  );
+}
+
+/**
+ * Renders error/status badge.
+ */
+function StatusRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const hasValue = value !== undefined && value !== null && value !== "";
+
+  if (!hasValue) {
+    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>
+  );
+}
+
+/**
+ * Renders a simple line chart visualization.
+ * For now, shows min/avg/max summary. Full charts can be added later.
+ */
+function LineChartRenderer({ field, context }: ChartRendererProps) {
+  const values = getAllValues(field.name, context);
+  const unit = field.unit ?? "";
+
+  if (values.length === 0) {
+    return <div className="text-muted-foreground">No data</div>;
+  }
+
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const avg = values.reduce((a, b) => a + b, 0) / values.length;
+
+  return (
+    <div className="space-y-1">
+      <div className="text-2xl font-bold">
+        {avg.toFixed(1)}
+        {unit && (
+          <span className="text-sm font-normal text-muted-foreground ml-1">
+            {unit}
+          </span>
+        )}
+      </div>
+      <div className="text-xs text-muted-foreground">
+        Min: {min.toFixed(1)}
+        {unit} · Max: {max.toFixed(1)}
+        {unit}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders a bar chart for record values.
+ */
+function BarChartRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+
+  if (!value || typeof value !== "object") {
+    return <div className="text-muted-foreground">No data</div>;
+  }
+
+  const entries = Object.entries(value as Record<string, number>).slice(0, 5);
+  const maxValue = Math.max(...entries.map(([, v]) => v), 1);
+
+  return (
+    <div className="space-y-2">
+      {entries.map(([key, val]) => (
+        <div key={key} className="flex items-center gap-2">
+          <span className="text-xs w-12 text-right text-muted-foreground">
+            {key}
+          </span>
+          <div className="flex-1 h-4 bg-muted rounded overflow-hidden">
+            <div
+              className="h-full bg-primary"
+              style={{ width: `${(val / maxValue) * 100}%` }}
+            />
+          </div>
+          <span className="text-xs w-8">{val}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+/**
+ * Get the latest value for a field from the context.
+ *
+ * For raw runs, the strategy-specific data is inside result.metadata.
+ * For aggregated buckets, the data is directly in aggregatedResult.
+ */
+function getLatestValue(
+  fieldName: string,
+  context: HealthCheckDiagramSlotContext
+): unknown {
+  if (context.type === "raw") {
+    const runs = context.runs;
+    if (runs.length === 0) return undefined;
+    // result is typed as StoredHealthCheckResult with { status, latencyMs, message, metadata }
+    const result = runs.at(-1)?.result as StoredHealthCheckResult | undefined;
+    return getFieldValue(result?.metadata, fieldName);
+  } else {
+    const buckets = context.buckets;
+    if (buckets.length === 0) return undefined;
+    return getFieldValue(
+      buckets.at(-1)?.aggregatedResult as Record<string, unknown>,
+      fieldName
+    );
+  }
+}
+
+/**
+ * Get all numeric values for a field from the context.
+ *
+ * For raw runs, the strategy-specific data is inside result.metadata.
+ * For aggregated buckets, the data is directly in aggregatedResult.
+ */
+function getAllValues(
+  fieldName: string,
+  context: HealthCheckDiagramSlotContext
+): number[] {
+  if (context.type === "raw") {
+    return context.runs
+      .map((run) => {
+        // result is typed as StoredHealthCheckResult with { status, latencyMs, message, metadata }
+        const result = run.result as StoredHealthCheckResult;
+        return getFieldValue(result?.metadata, fieldName);
+      })
+      .filter((v): v is number => typeof v === "number");
+  }
+  return context.buckets
+    .map((bucket) =>
+      getFieldValue(
+        bucket.aggregatedResult as Record<string, unknown>,
+        fieldName
+      )
+    )
+    .filter((v): v is number => typeof v === "number");
+}
+
+/**
+ * Format a value for text display.
+ */
+function formatTextValue(value: unknown): string {
+  if (value === undefined || value === null) return "";
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value);
+}

package/src/auto-charts/extension.tsx

@@ -0,0 +1,27 @@
+/**
+ * Auto-chart slot extension registration.
+ *
+ * Registers the AutoChartGrid as a diagram extension that renders
+ * for all strategies that have schema metadata.
+ */
+
+import { createSlotExtension } from "@checkstack/frontend-api";
+import {
+  HealthCheckDiagramSlot,
+  type HealthCheckDiagramSlotContext,
+} from "../slots";
+import { AutoChartGrid } from "./AutoChartGrid";
+
+/**
+ * Extension that renders auto-generated charts for any strategy.
+ *
+ * Unlike custom chart extensions that filter by strategy ID, this extension
+ * renders for all strategies and lets AutoChartGrid decide what to display
+ * based on the schema metadata.
+ */
+export const autoChartExtension = createSlotExtension(HealthCheckDiagramSlot, {
+  id: "healthcheck.auto-charts",
+  component: (context: HealthCheckDiagramSlotContext) => {
+    return <AutoChartGrid context={context} />;
+  },
+});

package/src/auto-charts/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Auto-chart components for rendering schema-driven visualizations.
+ *
+ * These components render charts based on x-chart-type metadata in JSON schemas,
+ * eliminating the need for custom chart components for standard metrics.
+ */
+
+export { extractChartFields, getFieldValue } from "./schema-parser";
+export type { ChartField, ChartType } from "./schema-parser";
+export { AutoChartGrid } from "./AutoChartGrid";
+export { useStrategySchemas } from "./useStrategySchemas";
+export { autoChartExtension } from "./extension";