@checkstack/healthcheck-frontend 0.17.1 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @checkstack/healthcheck-frontend
 
+## 0.18.0
+
+### Minor Changes
+
+- a914b31: Streamline system → healthcheck assignment flow by allowing in-context creation in both directions.
+
+  - Adds an "Assign to systems" multi-select section to the healthcheck create flow (new "Systems" tree node), so a fresh check can be wired to one or more systems in a single save.
+  - Adds a "+ Create new check" button on the system assignment IDE that opens the create flow pre-targeted at that system; on save, the new check is auto-assigned and the user is returned to the assignment IDE.
+  - Pre-selects the originating system when the create flow is entered with a `?systemId=` query param, and forwards that param through the strategy picker.
+  - Includes an info banner noting that health checks are reusable templates and can be assigned to additional systems at any time, to preserve the "configs are reusable" mental model.
+
+- ac1e5d4: Refactor Status Timeline and Assertion charts to use Recharts with cursor-tracking tooltips, downsampling, and proportional pass/fail stacking.
+
+  - Replaces div-based bar strips with Recharts `BarChart`, so hovering anywhere over the chart resolves the closest bucket.
+  - Adds a lightweight time x-axis with smart tick formatting based on the bucket interval.
+  - Caps bar count (60 for Status Timeline, 50 for Assertion) by aggregating adjacent buckets, so individual bars stay clickable on dense ranges.
+  - Each downsampled Assertion bar is now stacked proportionally — green height shows passed runs and red height shows failed runs across the aggregated window, instead of a worst-case binary color.
+
+### Patch Changes
+
+- 208ad71: Centralize realtime cache invalidation: signals now carry their owning `pluginId` end-to-end, and a single `SignalAutoInvalidator` mounted near the React Query client invalidates `[[pluginId]]` for every incoming signal automatically.
+
+  **Breaking change to `createSignal`** (`@checkstack/signal-common`): the factory now takes a single object argument with `pluginMetadata`, `event`, and `payloadSchema`. The signal id is constructed as `${pluginMetadata.pluginId}.${event}` and the resulting `Signal` carries a `pluginId` field. The `SignalMessage` wire envelope and `ServerToClientMessage` `signal` variant gained a `pluginId` field so the frontend can route invalidations without parsing the id.
+
+  ```ts
+  // Before
+  export const ANOMALY_STATE_CHANGED = createSignal(
+    "anomaly.state_changed",
+    z.object({ ... }),
+  );
+
+  // After
+  export const ANOMALY_STATE_CHANGED = createSignal({
+    pluginMetadata,
+    event: "state_changed",
+    payloadSchema: z.object({ ... }),
+  });
+  ```
+
+  **New plugin field**: `FrontendPlugin.foreignSignals?: Signal<unknown>[]` lets a plugin opt its `[[pluginId]]` cache into invalidation when another plugin's signal fires (e.g. `dependency-frontend` declares `[SYSTEM_STATUS_CHANGED]` because dependency payloads embed system status). Same-plugin signals must NOT be listed — they are always auto-invalidated.
+
+  **Removed boilerplate**: per-component `useSignal(X, () => refetch())` and `useSignal(X, () => queryClient.invalidateQueries(...))` calls have been removed across `incident-frontend`, `maintenance-frontend`, `healthcheck-frontend`, `slo-frontend`, `dependency-frontend`, `satellite-frontend`, `announcement-frontend`, `notification-frontend`, and `dashboard-frontend`. The `NotificationBell` unread count is now derived directly from the `getUnreadCount` query (auto-invalidated) instead of a local state mirror.
+
+  **User-visible bug fix**: the system detail page anomaly widget (`SystemAnomalyWidget`) now updates in real-time when anomalies change, with no per-widget signal subscription required. The dashboard status page also stays fresh on `ANOMALY_STATE_CHANGED`, `ANOMALY_BASELINE_UPDATED`, and `ANOMALY_TREND_DETECTED`.
+
+  UI-state consumers that legitimately need a `useSignal` (the dashboard activity terminal, the queue lag alert, and the rolling-preset date refresh in `useHealthCheckData`) keep their handlers; the auto-invalidator runs alongside them.
+
+- Updated dependencies [208ad71]
+  - @checkstack/signal-frontend@0.1.0
+  - @checkstack/frontend-api@0.4.0
+  - @checkstack/anomaly-common@0.3.0
+  - @checkstack/healthcheck-common@0.13.0
+  - @checkstack/satellite-common@0.3.0
+  - @checkstack/dashboard-frontend@0.5.1
+  - @checkstack/auth-frontend@0.5.31
+  - @checkstack/catalog-common@1.5.3
+  - @checkstack/gitops-frontend@0.3.6
+  - @checkstack/ui@1.6.1
+
 ## 0.17.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,16 +12,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "0.1.0",
-    "@checkstack/auth-frontend": "0.5.29",
-    "@checkstack/catalog-common": "1.5.1",
-    "@checkstack/common": "0.6.5",
-    "@checkstack/dashboard-frontend": "0.4.6",
-    "@checkstack/frontend-api": "0.3.10",
-    "@checkstack/gitops-frontend": "0.3.4",
-    "@checkstack/healthcheck-common": "0.11.0",
-    "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.1",
+    "@checkstack/anomaly-common": "0.2.0",
+    "@checkstack/auth-frontend": "0.5.30",
+    "@checkstack/catalog-common": "1.5.2",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/dashboard-frontend": "0.5.0",
+    "@checkstack/frontend-api": "0.3.11",
+    "@checkstack/gitops-frontend": "0.3.5",
+    "@checkstack/healthcheck-common": "0.12.0",
+    "@checkstack/signal-frontend": "0.0.16",
+    "@checkstack/ui": "1.6.0",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -31,7 +31,7 @@
     "recharts": "^3.6.0",
     "uuid": "^13.0.0",
     "zod": "^4.2.1",
-    "@checkstack/satellite-common": "0.2.0"
+    "@checkstack/satellite-common": "0.2.1"
   },
   "devDependencies": {
     "@checkstack/scripts": "0.1.2",

package/src/auto-charts/AutoChartGrid.tsx

@@ -10,7 +10,14 @@ import { extractChartFields, getFieldValue } from "./schema-parser";
 import { useStrategySchemas } from "./useStrategySchemas";
 import type { HealthCheckDiagramSlotContext } from "../slots";
 import { SparklineTooltip } from "../components/SparklineTooltip";
-import { Badge, Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  usePerformance,
+} from "@checkstack/ui";
 import {
   PieChart,
   Pie,
@@ -83,7 +90,7 @@ export function AutoChartGrid({ context }: AutoChartGridProps) {
   const collectorGroups = buildCollectorGroups(schemaFields, instanceMap);
 
   return (
-    <div className="space-y-6 mt-4">
+    <div className="mt-4 space-y-6">
       {/* Strategy-level fields */}
       {strategyFields.length > 0 && (
         <div className="space-y-4">
@@ -186,7 +193,7 @@ function CollectorGroup({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-2 flex-wrap border-b pb-2">
+      <div className="flex flex-wrap items-center gap-2 pb-2 border-b">
         <h3 className="text-lg font-semibold capitalize">
           {group.displayName}
         </h3>
@@ -233,20 +240,28 @@ function CollectorGroup({
  * Returns array of results with timestamps/time spans in chronological order.
  * Uses bucket counts with time span from aggregated data.
  */
+interface AssertionResult {
+  passedCount: number;
+  failedCount: number;
+  errorMessage?: string;
+  timeLabel: string;
+  bucketStart: number;
+  bucketIntervalSeconds: number;
+}
+
 function getAllAssertionResults(
   context: HealthCheckDiagramSlotContext,
   _instanceKey: string,
-): { passed: boolean; errorMessage?: string; timeLabel?: string }[] {
+): AssertionResult[] {
   return context.buckets.map((bucket) => {
     const failedCount = bucket.degradedCount + bucket.unhealthyCount;
-    const passed = failedCount === 0;
+    const passedCount = bucket.healthyCount;
     const bucketStart = new Date(bucket.bucketStart);
     const bucketEnd = new Date(bucket.bucketEnd);
     const timeSpan = `${format(bucketStart, "MMM d, HH:mm")} - ${format(bucketEnd, "HH:mm")}`;
 
-    // Build detailed error message showing breakdown by type
     let errorMessage: string | undefined;
-    if (!passed) {
+    if (failedCount > 0) {
       const parts: string[] = [];
       if (bucket.unhealthyCount > 0) {
         parts.push(`${bucket.unhealthyCount} unhealthy`);
@@ -258,13 +273,183 @@ function getAllAssertionResults(
     }
 
     return {
-      passed,
+      passedCount,
+      failedCount,
       errorMessage,
       timeLabel: timeSpan,
+      bucketStart: bucketStart.getTime(),
+      bucketIntervalSeconds: bucket.bucketIntervalSeconds,
     };
   });
 }
 
+interface AssertionDatum {
+  bucketStart: number;
+  passed: number;
+  failed: number;
+  total: number;
+  timeLabel: string;
+  errorMessage?: string;
+}
+
+const MAX_ASSERTION_BARS = 50;
+
+function downsampleAssertion(results: AssertionResult[]): AssertionDatum[] {
+  if (results.length === 0) return [];
+
+  const groupSize = Math.max(1, Math.ceil(results.length / MAX_ASSERTION_BARS));
+  const out: AssertionDatum[] = [];
+
+  for (let i = 0; i < results.length; i += groupSize) {
+    const slice = results.slice(i, i + groupSize);
+    const first = slice[0];
+    let passed = 0;
+    let failed = 0;
+    const failureMessages: string[] = [];
+    for (const r of slice) {
+      passed += r.passedCount;
+      failed += r.failedCount;
+      if (r.errorMessage) failureMessages.push(r.errorMessage);
+    }
+    const startLabel = first.timeLabel.split(" - ")[0];
+    const endLabel = slice.at(-1)?.timeLabel.split(" - ").pop() ?? startLabel;
+    const timeLabel =
+      slice.length === 1 ? first.timeLabel : `${startLabel} – ${endLabel}`;
+
+    out.push({
+      bucketStart: first.bucketStart,
+      passed,
+      failed,
+      total: passed + failed,
+      timeLabel,
+      errorMessage:
+        failed > 0
+          ? failureMessages.length === 1
+            ? failureMessages[0]
+            : `${failed} of ${passed + failed} runs failed`
+          : undefined,
+    });
+  }
+
+  return out;
+}
+
+function AssertionSparkline({
+  results,
+  isLowPower,
+}: {
+  results: AssertionResult[];
+  isLowPower: boolean;
+}) {
+  const data = downsampleAssertion(results);
+  if (data.length === 0) return <></>;
+
+  const intervalSeconds = results[0]?.bucketIntervalSeconds ?? 3600;
+  const effectiveInterval =
+    intervalSeconds *
+    Math.max(1, Math.ceil(results.length / MAX_ASSERTION_BARS));
+  const tickFmt =
+    effectiveInterval >= 86_400
+      ? "MMM d"
+      : effectiveInterval >= 3600
+        ? "MMM d HH:mm"
+        : "HH:mm";
+
+  return (
+    <div className="w-full h-12">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={data}
+          margin={{ top: 2, right: 2, left: 2, bottom: 0 }}
+          barCategoryGap={2}
+        >
+          <XAxis
+            dataKey="bucketStart"
+            tickFormatter={(value: number) => format(new Date(value), tickFmt)}
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={10}
+            minTickGap={48}
+            tickLine={false}
+            axisLine={false}
+            interval="preserveStartEnd"
+          />
+          <YAxis hide domain={[0, "dataMax"]} />
+          <Tooltip
+            cursor={{ fill: "hsl(var(--muted))", fillOpacity: 0.3 }}
+            content={(props) => (
+              <AssertionTooltip
+                active={props.active}
+                payload={
+                  props.payload as unknown as
+                    | { payload: AssertionDatum }[]
+                    | undefined
+                }
+              />
+            )}
+          />
+          <Bar
+            dataKey="passed"
+            stackId="assertion"
+            fill="hsl(var(--success))"
+            isAnimationActive={!isLowPower}
+          />
+          <Bar
+            dataKey="failed"
+            stackId="assertion"
+            fill="hsl(var(--destructive))"
+            isAnimationActive={!isLowPower}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+function AssertionTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: { payload: AssertionDatum }[];
+}) {
+  if (!active || !payload?.length) return <></>;
+  const datum = payload[0].payload;
+  const passRate =
+    datum.total > 0 ? Math.round((datum.passed / datum.total) * 100) : 0;
+  return (
+    <div
+      className="p-2 text-xs rounded-md shadow-md"
+      style={{
+        backgroundColor: "hsl(var(--popover))",
+        border: "1px solid hsl(var(--border))",
+        color: "hsl(var(--popover-foreground))",
+      }}
+    >
+      <p className="mb-1 text-muted-foreground">{datum.timeLabel}</p>
+      <div className="space-y-0.5">
+        <p>
+          <span style={{ color: "hsl(var(--success))" }}>●</span> Passed:{" "}
+          {datum.passed}
+        </p>
+        {datum.failed > 0 && (
+          <p>
+            <span style={{ color: "hsl(var(--destructive))" }}>●</span> Failed:{" "}
+            {datum.failed}
+          </p>
+        )}
+        {datum.total > 0 && (
+          <p className="pt-0.5 text-muted-foreground">{passRate}% passed</p>
+        )}
+        {datum.errorMessage && (
+          <p className="italic text-muted-foreground max-w-[240px] truncate">
+            {datum.errorMessage}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
 /**
  * Card showing assertion pass/fail status with historical sparkline.
  */
@@ -275,6 +460,7 @@ function AssertionStatusCard({
   context: HealthCheckDiagramSlotContext;
   instanceKey: string;
 }) {
+  const { isLowPower } = usePerformance();
   const results = getAllAssertionResults(context, instanceKey);
 
   if (results.length === 0) {
@@ -293,22 +479,28 @@ function AssertionStatusCard({
   }
 
   const latestResult = results.at(-1)!;
-  const passCount = results.filter((r) => r.passed).length;
-  const passRate = Math.round((passCount / results.length) * 100);
-  const allPassed = results.every((r) => r.passed);
-  const allFailed = results.every((r) => !r.passed);
+  const latestPassed = latestResult.failedCount === 0;
+  let totalPassed = 0;
+  let totalFailed = 0;
+  for (const r of results) {
+    totalPassed += r.passedCount;
+    totalFailed += r.failedCount;
+  }
+  const totalRuns = totalPassed + totalFailed;
+  const passRate =
+    totalRuns > 0 ? Math.round((totalPassed / totalRuns) * 100) : 100;
+  const allPassed = totalFailed === 0;
+  const allFailed = totalPassed === 0 && totalFailed > 0;
 
   return (
     <Card
-      className={
-        latestResult.passed ? "" : "border-red-200 dark:border-red-900"
-      }
+      className={latestPassed ? "" : "border-red-200 dark:border-red-900"}
     >
       <CardHeader className="pb-2">
         <CardTitle
-          className={`text-sm font-medium text-center ${latestResult.passed ? "" : "text-red-600"}`}
+          className={`text-sm font-medium text-center ${latestPassed ? "" : "text-red-600"}`}
         >
-          {latestResult.passed ? "Assertion" : "Assertion Failed"}
+          {latestPassed ? "Assertion" : "Assertion Failed"}
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-2 text-center">
@@ -316,13 +508,11 @@ function AssertionStatusCard({
         <div className="flex items-center justify-center gap-2">
           <div
             className={`w-3 h-3 rounded-full ${
-              latestResult.passed ? "bg-green-500" : "bg-red-500"
+              latestPassed ? "bg-green-500" : "bg-red-500"
             }`}
           />
-          <span
-            className={latestResult.passed ? "text-green-600" : "text-red-600"}
-          >
-            {latestResult.passed ? "Passed" : "Failed"}
+          <span className={latestPassed ? "text-green-600" : "text-red-600"}>
+            {latestPassed ? "Passed" : "Failed"}
           </span>
           {!allPassed && !allFailed && (
             <span className="text-xs text-muted-foreground">
@@ -332,29 +522,14 @@ function AssertionStatusCard({
         </div>
 
         {/* Error message if failed */}
-        {!latestResult.passed && latestResult.errorMessage && (
-          <div className="text-sm text-red-600 bg-red-50 dark:bg-red-950 px-2 py-1 rounded truncate">
+        {!latestPassed && latestResult.errorMessage && (
+          <div className="px-2 py-1 text-sm text-red-600 truncate rounded bg-red-50 dark:bg-red-950">
             {latestResult.errorMessage}
           </div>
         )}
 
-        {/* Sparkline timeline - render each bucket as a bar */}
-        <div className="flex h-2 gap-px rounded">
-          {results.map((result, index) => {
-            const tooltip = result.timeLabel
-              ? `${result.timeLabel}\n${result.passed ? "Passed" : result.errorMessage || "Failed"}`
-              : result.passed
-                ? "Passed"
-                : "Failed";
-            return (
-              <SparklineTooltip key={index} content={tooltip}>
-                <div
-                  className={`flex-1 h-full ${result.passed ? "bg-green-500" : "bg-red-500"} hover:opacity-80`}
-                />
-              </SparklineTooltip>
-            );
-          })}
-        </div>
+        {/* Sparkline timeline - one bar per bucket, with cursor-tracking tooltip */}
+        <AssertionSparkline results={results} isLowPower={isLowPower} />
       </CardContent>
     </Card>
   );
@@ -556,7 +731,7 @@ function CounterRenderer({ field, context }: ChartRendererProps) {
       <div className="text-2xl font-bold">
         {value}
         {count > 1 && (
-          <span className="text-sm font-normal text-muted-foreground ml-2">
+          <span className="ml-2 text-sm font-normal text-muted-foreground">
             ({count}×)
           </span>
         )}
@@ -570,7 +745,7 @@ function CounterRenderer({ field, context }: ChartRendererProps) {
       {entries.slice(0, 5).map(([value, count]) => (
         <div key={value} className="flex items-center justify-between">
           <span className="font-mono text-sm">{value}</span>
-          <span className="text-muted-foreground text-sm">{count}×</span>
+          <span className="text-sm text-muted-foreground">{count}×</span>
         </div>
       ))}
       {entries.length > 5 && (
@@ -602,7 +777,7 @@ function GaugeRenderer({ field, context, baseline }: ChartRendererProps) {
   const data = [{ name: field.label, value: numValue, fill: fillColor }];
 
   return (
-    <div className="flex flex-col gap-2 items-center">
+    <div className="flex flex-col items-center gap-2">
       <div className="flex items-center justify-center gap-3">
         <ResponsiveContainer width={80} height={80}>
           <RadialBarChart
@@ -634,13 +809,21 @@ function GaugeRenderer({ field, context, baseline }: ChartRendererProps) {
             baseline.dominantValue !== null
           ) {
             let expectedNum = Number(baseline.dominantValue);
-            if (baseline.dominantValue === "true" || baseline.dominantValue === "false") {
-              const ratio = baseline.dominantRatio ?? (baseline.dominantValue === "true" ? 1 : 0);
-              expectedNum = baseline.dominantValue === "true" ? (ratio * 100) : ((1 - ratio) * 100);
+            if (
+              baseline.dominantValue === "true" ||
+              baseline.dominantValue === "false"
+            ) {
+              const ratio =
+                baseline.dominantRatio ??
+                (baseline.dominantValue === "true" ? 1 : 0);
+              expectedNum =
+                baseline.dominantValue === "true"
+                  ? ratio * 100
+                  : (1 - ratio) * 100;
             }
             if (!Number.isNaN(expectedNum)) {
               return (
-                <div className="text-xs text-muted-foreground mt-1">
+                <div className="mt-1 text-xs text-muted-foreground">
                   Expected: {expectedNum.toFixed(1)}
                   {unit}
                 </div>
@@ -652,7 +835,7 @@ function GaugeRenderer({ field, context, baseline }: ChartRendererProps) {
             const min = Math.max(0, baseline.mean - baseline.stdDev * 3);
             const max = baseline.mean + baseline.stdDev * 3;
             return (
-              <div className="text-xs text-muted-foreground mt-1">
+              <div className="mt-1 text-xs text-muted-foreground">
                 Expected: {baseline.mean.toFixed(1)}
                 {unit} (±{(baseline.stdDev * 3).toFixed(1)}) [{min.toFixed(1)} -{" "}
                 {max.toFixed(1)}]
@@ -764,7 +947,7 @@ function TextRenderer({ field, context, baseline }: ChartRendererProps) {
     <div className="space-y-2">
       {/* Current value with count */}
       <div className="flex items-center justify-center gap-2">
-        <span className="text-sm font-mono">{latestValue || "—"}</span>
+        <span className="font-mono text-sm">{latestValue || "—"}</span>
         {!allSame && (
           <span className="text-xs text-muted-foreground">
             ({latestCount}/{valuesWithTime.length}×)
@@ -866,7 +1049,7 @@ function StatusRenderer({ field, context }: ChartRendererProps) {
   }
 
   return (
-    <div className="text-sm text-red-600 bg-red-50 dark:bg-red-950 px-2 py-1 rounded truncate">
+    <div className="px-2 py-1 text-sm text-red-600 truncate rounded bg-red-50 dark:bg-red-950">
       {String(value)}
     </div>
   );
@@ -907,11 +1090,14 @@ function LineChartRenderer({ field, context, baseline }: ChartRendererProps) {
   // — the same scalar the drift evaluator uses. Surfaced as a header chip rather
   // than a diagonal line because it's a rate, not an absolute value, and shares
   // no natural axis with the data series.
-  const projectedChange = baseline ? baseline.trendSlope * baseline.sampleCount : 0;
-  const showTrend = !!baseline && Math.abs(projectedChange) > 0.01;
-  const driftSigmas = baseline && baseline.stdDev > 0
-    ? Math.abs(projectedChange) / baseline.stdDev
+  const projectedChange = baseline
+    ? baseline.trendSlope * baseline.sampleCount
     : 0;
+  const showTrend = !!baseline && Math.abs(projectedChange) > 0.01;
+  const driftSigmas =
+    baseline && baseline.stdDev > 0
+      ? Math.abs(projectedChange) / baseline.stdDev
+      : 0;
   const isDrifting = driftSigmas >= 2;
 
   const chartData = valuesWithTime.map((item, index) => ({
@@ -923,25 +1109,37 @@ function LineChartRenderer({ field, context, baseline }: ChartRendererProps) {
   return (
     <div className="space-y-2">
       {baseline ? (
-        <div className="flex items-center justify-between text-xs px-1 gap-3">
-          <span className="text-warning font-medium">
-            Expected: {baseline.mean.toFixed(1)}{unit} (±{((baseline.stdDev / Math.sqrt(avgRunCount)) * 3).toFixed(1)})
+        <div className="flex items-center justify-between gap-3 px-1 text-xs">
+          <span className="font-medium text-warning">
+            Expected: {baseline.mean.toFixed(1)}
+            {unit} (±
+            {((baseline.stdDev / Math.sqrt(avgRunCount)) * 3).toFixed(1)})
           </span>
           <div className="flex items-center gap-3">
             {showTrend && (
-              <span className={isDrifting ? "text-warning font-medium" : "text-muted-foreground"}>
-                Trend: {projectedChange >= 0 ? "↑ +" : "↓ "}{projectedChange.toFixed(1)}{unit}
+              <span
+                className={
+                  isDrifting
+                    ? "text-warning font-medium"
+                    : "text-muted-foreground"
+                }
+              >
+                Trend: {projectedChange >= 0 ? "↑ +" : "↓ "}
+                {projectedChange.toFixed(1)}
+                {unit}
               </span>
             )}
             <span className="text-muted-foreground">
-              Avg: {avg.toFixed(1)}{unit}
+              Avg: {avg.toFixed(1)}
+              {unit}
             </span>
           </div>
         </div>
       ) : (
-        <div className="flex items-center justify-end text-xs px-1">
+        <div className="flex items-center justify-end px-1 text-xs">
           <span className="text-muted-foreground">
-            Avg: {avg.toFixed(1)}{unit}
+            Avg: {avg.toFixed(1)}
+            {unit}
           </span>
         </div>
       )}
@@ -992,8 +1190,7 @@ function LineChartRenderer({ field, context, baseline }: ChartRendererProps) {
             <ReferenceArea
               y1={Math.max(
                 0,
-                baseline.mean -
-                  (baseline.stdDev / Math.sqrt(avgRunCount)) * 3,
+                baseline.mean - (baseline.stdDev / Math.sqrt(avgRunCount)) * 3,
               )}
               y2={
                 baseline.mean + (baseline.stdDev / Math.sqrt(avgRunCount)) * 3
@@ -1021,13 +1218,13 @@ function LineChartRenderer({ field, context, baseline }: ChartRendererProps) {
               };
               return (
                 <div
-                  className="rounded-md border bg-popover p-2 text-sm shadow-md"
+                  className="p-2 text-sm border rounded-md shadow-md bg-popover"
                   style={{
                     backgroundColor: "hsl(var(--popover))",
                     border: "1px solid hsl(var(--border))",
                   }}
                 >
-                  <p className="text-xs text-muted-foreground mb-1">
+                  <p className="mb-1 text-xs text-muted-foreground">
                     {data.timeLabel}
                   </p>
                   <p className="font-medium">
@@ -1082,7 +1279,7 @@ function BarChartRenderer({ field, context }: ChartRendererProps) {
             const data = payload[0].payload as { name: string; value: number };
             return (
               <div
-                className="rounded-md border bg-popover p-2 text-sm shadow-md"
+                className="p-2 text-sm border rounded-md shadow-md bg-popover"
                 style={{
                   backgroundColor: "hsl(var(--popover))",
                   border: "1px solid hsl(var(--border))",
@@ -1172,7 +1369,7 @@ function PieChartRenderer({ field, context }: ChartRendererProps) {
               };
               return (
                 <div
-                  className="rounded-md border bg-popover p-2 text-sm shadow-md"
+                  className="p-2 text-sm border rounded-md shadow-md bg-popover"
                   style={{
                     backgroundColor: "hsl(var(--popover))",
                     border: "1px solid hsl(var(--border))",