@checkstack/automation-frontend 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,165 @@
 # @checkstack/automation-frontend
 
+## 0.8.0
+
+### Minor Changes
+
+- 8cad340: feat: live run polling, optimistic automation toggle, and relative public-status freshness
+
+  Implements three loading/feedback UX findings from the read-only review.
+
+  - **Automation run detail goes live.** `RunDetailPage` now polls
+    `getRun` every 2s while the run is `running`/`waiting` and stops the
+    moment it reaches a terminal status, so a watched execution updates
+    its status badge and step timeline without a manual reload. A subtle
+    "Live" indicator shows in the header while polling.
+  - **Optimistic automation enable/disable.** The per-row toggle on
+    `AutomationListPage` now applies the documented optimistic pattern:
+    `onMutate` cancels in-flight refetches, snapshots, and flips the row
+    in the cache so the switch flips on click; `onError` rolls back from
+    the snapshot and surfaces an error toast; `onSettled` invalidates to
+    reconcile with server truth. The success toast is suppressed (the
+    switch flip is the feedback), per `optimistic-updates.md`.
+  - **Relative, visibly-live public-status freshness.** The public status
+    page renders "Updated x ago" as relative time (was a static absolute
+    timestamp) and ticks periodically so the wording stays honest. A small
+    refresh dot pulses on each successful 60s refetch (gated behind
+    `usePerformance().isLowPower`, falling back to a static dot on
+    low-power devices). The "auto-updates every minute" copy is unchanged.
+
+  BREAKING CHANGE: the automation enable/disable toggle no longer raises a
+  "<name> enabled/disabled" success toast; the optimistic switch flip is now
+  the sole success feedback (error toast retained on failure).
+
+- 8cad340: Make data-dense tables mobile-friendly and align status colors with semantic tokens.
+
+  - Migrated the remaining data-dense tables to the `ResponsiveTable` + `MobileCardList` dual-layout: catalog (Systems/Groups/Environments), incident config, maintenance config + system history, announcement management, notification delivery attempts, plugin manager (installed plugins + events), satellite list, automation list, healthcheck runs, OAuth applications, and the queue runtime panel. On viewports below `sm` these now render stacked cards surfacing the high-priority fields instead of an overflowing table. Genuinely narrow or runtime-diagnostic panels (cache runtime, healthcheck history, anomaly mute list) were intentionally left as plain tables.
+  - Swapped hardcoded semantic status colors for design tokens (`text-warning`, `text-success`, `text-destructive`, `text-muted-foreground`) in GitOps provenance status, healthcheck editor warnings, dependency canvas node status, automation run-step status, queue runtime tone map, and script-packages settings. Chart-series literals, syntax/terminal palettes, and intentional brand accents (tips lightbulb, SLO streak flame ramp) were left untouched.
+  - Extracted pure display/validation logic into sibling `.logic.ts` modules (SLO display + editor, maintenance editor + config summary, dependency display, incident sort + validation, gitops kind-registry YAML) so it can be unit-tested in isolation. These extractions are behavior-preserving.
+
+- 8cad340: Explain why Save is disabled and guard against losing unsaved edits in the
+  automation and health-check editors.
+
+  - A greyed-out Save is no longer a dead end: both editors now render a
+    "N issue(s) blocking" affordance next to the Save button. Opening it
+    lists every blocker, and clicking one jumps to the offending field/section
+    (the automation Name / Run-as fields or the visual definition editor; the
+    health-check tree node that owns the issue). The existing validation logic is
+    unchanged - the blockers are just surfaced and made actionable.
+  - The first field of a fresh automation (Name) now auto-focuses so keyboard-first
+    users can type immediately.
+  - Both editors now use the shared `useUnsavedChanges` hook for unsaved-changes
+    protection: a native prompt on tab close / refresh plus an in-app
+    "Discard unsaved changes?" confirmation when navigating away mid-edit. The
+    health-check editor's previous hand-rolled `beforeunload` listener is migrated
+    to the shared hook; the automation editor gains dirty tracking and the same
+    guard.
+
+### Patch Changes
+
+- 8cad340: Design-system rework: a premium, consistent UI language across the platform.
+
+  Foundation (`@checkstack/ui` + the shared Tailwind preset):
+
+  - A token system wired into the shared preset so it generates app-wide: a
+    surface elevation ramp (`surface` / `surface-2` / `surface-inset`), the
+    aurora gradient stops, a colorblind-safe `status` triad, and `grid-line`.
+  - A density model (`comfortable` / `compact`) via `--d-*` vars + `DensityProvider`
+    / `useDensity`, with a user-menu density toggle, plus the polished
+    skeleton / empty / error state set.
+  - Honest, token-driven chart primitives (`TimeSeriesChart`, `Sparkline`,
+    `RadialGauge` / aurora hero, `RequestWaterfall`, `UptimeRibbon`).
+  - A signature aurora moment per page: `PageHeader` paints its icon strokes with
+    the aurora gradient and adds a hairline; `Card` gains soft layered depth.
+
+  Shell + surfaces:
+
+  - The app shell adopts the elevation ramp (header `surface-2`, sidebar
+    `surface`, content on the ambient base).
+  - The system-health dashboard, health-check latency / single-run views, and the
+    SLO dashboard are reskinned onto the primitives (aurora confidence gauge,
+    honest p50/p95 latency, request waterfall, number-led status cards).
+
+  App-wide adoption + premium rework:
+
+  - Every plugin frontend adopts the tokens, status triad, density, and elevation.
+  - The highest-impact surfaces in each plugin are then redesigned to a premium
+    bar: real depth, number-led hierarchy, multi-encoded status (pill + dot +
+    accent stripe), and refined list/table density. Several plugins extract pure
+    tone/label/format logic into unit-tested modules.
+
+  Alerts:
+
+  - Every alert/callout is unified onto a single premium `Alert` (depth surface +
+    status-accent stripe + toned icon chip, variant-driven).
+
+  BREAKING CHANGE: the duplicate `InfoBanner` component (and its sub-components)
+  is removed; use `Alert` instead - it is a drop-in replacement with the same
+  variants and composable parts.
+
+- 8cad340: fix: make data tables responsive on narrow viewports
+
+  The users, teams, and roles management tables (auth-frontend), the automation
+  run-history table (automation-frontend), and the integration provider
+  connections table (integration-frontend) previously overflowed horizontally on
+  phone-width (~375px) viewports. Each now uses the `ResponsiveTable` +
+  `MobileCardList` dual-layout primitive from `@checkstack/ui`: the existing table
+  renders unchanged on `sm` and up, with a stacked per-row card surfacing the key
+  fields and action buttons below `sm`. Shared per-row rendering (role checkboxes,
+  team/role/connection action buttons, connection status) was lifted into small
+  local components so both layouts stay in sync.
+
+- 8cad340: Adopt the canonical `toastError` helper from `@checkstack/ui` for error toasts.
+
+  Error toasts that previously called `toast.error(extractErrorMessage(error, "Failed to X"))`
+  (or interpolated `Failed to X: ${extractErrorMessage(error)}` strings) now use
+  `toastError(toast, "Failed to X", error)`. This centralizes the
+  "Failed to <action>: <message>" voice and applies the shared 100-character
+  truncation. Error toasts that did not previously prefix the action now gain the
+  canonical prefix; success toasts and terse validation one-liners are unchanged.
+
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+  - @checkstack/auth-frontend@0.9.0
+  - @checkstack/ai-common@0.6.0
+  - @checkstack/ui@1.17.0
+  - @checkstack/gitops-frontend@0.6.0
+  - @checkstack/script-packages-frontend@0.4.0
+  - @checkstack/secrets-frontend@0.3.0
+  - @checkstack/common@0.17.0
+  - @checkstack/auth-common@0.11.0
+  - @checkstack/frontend-api@0.11.1
+  - @checkstack/catalog-common@2.4.2
+  - @checkstack/automation-common@0.7.1
+  - @checkstack/integration-common@0.9.2
+  - @checkstack/template-engine@0.4.6
+  - @checkstack/signal-frontend@0.2.6
+
 ## 0.7.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/automation-frontend",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,20 +13,20 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-common": "0.10.0",
-    "@checkstack/auth-frontend": "0.8.1",
-    "@checkstack/automation-common": "0.7.0",
-    "@checkstack/ai-common": "0.5.0",
-    "@checkstack/catalog-common": "2.4.1",
-    "@checkstack/common": "0.16.0",
-    "@checkstack/frontend-api": "0.11.0",
-    "@checkstack/gitops-frontend": "0.5.9",
-    "@checkstack/integration-common": "0.9.1",
-    "@checkstack/script-packages-frontend": "0.3.13",
-    "@checkstack/secrets-frontend": "0.2.8",
-    "@checkstack/signal-frontend": "0.2.5",
-    "@checkstack/template-engine": "0.4.5",
-    "@checkstack/ui": "1.16.2",
+    "@checkstack/auth-common": "0.11.0",
+    "@checkstack/auth-frontend": "0.9.0",
+    "@checkstack/automation-common": "0.7.1",
+    "@checkstack/ai-common": "0.6.0",
+    "@checkstack/catalog-common": "2.4.2",
+    "@checkstack/common": "0.17.0",
+    "@checkstack/frontend-api": "0.11.1",
+    "@checkstack/gitops-frontend": "0.6.0",
+    "@checkstack/integration-common": "0.9.2",
+    "@checkstack/script-packages-frontend": "0.4.0",
+    "@checkstack/secrets-frontend": "0.3.0",
+    "@checkstack/signal-frontend": "0.2.6",
+    "@checkstack/template-engine": "0.4.6",
+    "@checkstack/ui": "1.17.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -40,6 +40,6 @@
     "typescript": "^5.0.0",
     "@types/react": "^19.0.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.6.2"
+    "@checkstack/scripts": "0.6.3"
   }
 }

package/src/components/RunAsServiceAccountPicker.tsx

@@ -11,10 +11,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  InfoBanner,
-  InfoBannerIcon,
-  InfoBannerContent,
-  InfoBannerDescription,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertDescription,
   EmptyState,
   Button,
 } from "@checkstack/ui";
@@ -143,12 +143,12 @@ export const RunAsServiceAccountPicker: React.FC<
           }
         />
       ) : (
-        <InfoBanner variant="info">
-          <InfoBannerIcon>
+        <Alert variant="info">
+          <AlertIcon>
             <ShieldCheck className="h-4 w-4" />
-          </InfoBannerIcon>
-          <InfoBannerContent>
-            <InfoBannerDescription>
+          </AlertIcon>
+          <AlertContent>
+            <AlertDescription>
               A service account is an application the automation runs as. It
               executes with that account's permissions (assigned via roles), so
               picking one is required.{" "}
@@ -161,9 +161,9 @@ export const RunAsServiceAccountPicker: React.FC<
                 Learn more
                 <ExternalLink className="h-3 w-3" />
               </a>
-            </InfoBannerDescription>
-          </InfoBannerContent>
-        </InfoBanner>
+            </AlertDescription>
+          </AlertContent>
+        </Alert>
       )}
     </div>
   );

package/src/components/SaveBlockersSummary.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { AlertCircle } from "lucide-react";
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@checkstack/ui";
+import type { BlockingIssue } from "../editor/blocking-issues";
+
+export interface SaveBlockersSummaryProps {
+  /** Ordered list of everything blocking the Save button. */
+  blockers: BlockingIssue[];
+  /**
+   * Navigate to / focus the surface that owns a blocker. Wired by the page to
+   * focus the offending field or reveal the definition editor.
+   */
+  onResolve: (blocker: BlockingIssue) => void;
+}
+
+/**
+ * Compact "N issue(s) blocking save" affordance shown next to the Save button
+ * when the automation is invalid. Each row links to the offending field /
+ * section so a greyed-out Save is never a dead end.
+ *
+ * Renders nothing when there are no blockers, so the page can drop it next to
+ * Save unconditionally.
+ */
+export const SaveBlockersSummary: React.FC<SaveBlockersSummaryProps> = ({
+  blockers,
+  onResolve,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  if (blockers.length === 0) return null;
+
+  const count = blockers.length;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="border-destructive/50 text-destructive hover:text-destructive"
+        >
+          <AlertCircle className="mr-1 h-4 w-4" />
+          {count} {count === 1 ? "issue" : "issues"} blocking
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-80 p-0">
+        <div className="border-b px-3 py-2 text-xs font-medium text-muted-foreground">
+          Fix these to save
+        </div>
+        <ul className="max-h-64 overflow-y-auto py-1">
+          {blockers.map((blocker, index) => (
+            <li key={`${blocker.message}-${index}`}>
+              <button
+                type="button"
+                onClick={() => {
+                  setOpen(false);
+                  onResolve(blocker);
+                }}
+                className="flex w-full items-start gap-2 px-3 py-1.5 text-left text-sm transition-colors hover:bg-muted/50"
+              >
+                <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-destructive" />
+                <span className="break-words">{blocker.message}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/editor/RunReplayPicker.tsx

@@ -83,7 +83,7 @@ export const RunReplayPicker: React.FC<RunReplayPickerProps> = ({
       <SelectContent>
         {runs.map((run) => (
           <SelectItem key={run.id} value={run.id}>
-            {new Date(run.startedAt).toLocaleString()} — {run.status}
+            {new Date(run.startedAt).toLocaleString()} - {run.status}
           </SelectItem>
         ))}
       </SelectContent>

package/src/editor/blocking-issues.test.ts

@@ -0,0 +1,77 @@
+/**
+ * Tests for the save-blockers summary that explains why the automation Save
+ * button is disabled. The list must mirror the page's `canSave` predicate
+ * (name + run-as + definition validation) so the count and the disabled state
+ * never disagree.
+ */
+import { describe, expect, it } from "bun:test";
+import { summarizeBlockingIssues } from "./blocking-issues";
+
+describe("summarizeBlockingIssues", () => {
+  it("returns no blockers when everything is valid", () => {
+    expect(
+      summarizeBlockingIssues({ definitionIssues: [] }),
+    ).toEqual([]);
+  });
+
+  it("includes the name error targeting the name field", () => {
+    const blockers = summarizeBlockingIssues({
+      nameError: "Name is required",
+      definitionIssues: [],
+    });
+    expect(blockers).toEqual([
+      { message: "Name is required", target: { kind: "field", field: "name" } },
+    ]);
+  });
+
+  it("includes the run-as error targeting the run-as field", () => {
+    const blockers = summarizeBlockingIssues({
+      runAsError: "A service account is required",
+      definitionIssues: [],
+    });
+    expect(blockers).toEqual([
+      {
+        message: "A service account is required",
+        target: { kind: "field", field: "runAs" },
+      },
+    ]);
+  });
+
+  it("formats a definition issue as `path: message`", () => {
+    const blockers = summarizeBlockingIssues({
+      definitionIssues: [
+        { path: ["triggers", 0, "kind"], message: "Required" },
+      ],
+    });
+    expect(blockers).toEqual([
+      { message: "triggers.0.kind: Required", target: { kind: "definition" } },
+    ]);
+  });
+
+  it("renders a top-level (pathless) definition issue as just its message", () => {
+    const blockers = summarizeBlockingIssues({
+      definitionIssues: [
+        { path: [], message: "An automation needs at least one trigger." },
+      ],
+    });
+    expect(blockers).toEqual([
+      {
+        message: "An automation needs at least one trigger.",
+        target: { kind: "definition" },
+      },
+    ]);
+  });
+
+  it("orders blockers name → run-as → definition issues", () => {
+    const blockers = summarizeBlockingIssues({
+      nameError: "Name is required",
+      runAsError: "A service account is required",
+      definitionIssues: [{ path: ["actions"], message: "bad" }],
+    });
+    expect(blockers.map((b) => b.target)).toEqual([
+      { kind: "field", field: "name" },
+      { kind: "field", field: "runAs" },
+      { kind: "definition" },
+    ]);
+  });
+});

package/src/editor/blocking-issues.ts

@@ -0,0 +1,68 @@
+import type { DefinitionIssue } from "./editor-validation";
+
+/**
+ * Where a blocking issue can be "fixed" from. Drives the click affordance in
+ * the save-blockers summary: metadata-field targets focus their input, while
+ * definition targets reveal the validated definition (visual editor).
+ */
+export type BlockingIssueTarget =
+  | { kind: "field"; field: "name" | "runAs" }
+  | { kind: "definition" };
+
+export interface BlockingIssue {
+  /** Human-readable, one-line description of what is incomplete. */
+  message: string;
+  /** Where the user should go to resolve it. */
+  target: BlockingIssueTarget;
+}
+
+/**
+ * Summarize everything currently blocking a save into a flat, ordered list of
+ * actionable items. Mirrors the `canSave` predicate in `AutomationEditPage`
+ * (name + run-as + definition validation), so the count shown next to the Save
+ * button always matches whether Save is enabled.
+ *
+ * Pure and DOM-free so it can be unit-tested in isolation; the page wires the
+ * resulting `target`s to focus/tab navigation.
+ */
+export function summarizeBlockingIssues({
+  nameError,
+  runAsError,
+  definitionIssues,
+}: {
+  nameError?: string;
+  runAsError?: string;
+  definitionIssues: DefinitionIssue[];
+}): BlockingIssue[] {
+  const blockers: BlockingIssue[] = [];
+
+  if (nameError) {
+    blockers.push({ message: nameError, target: { kind: "field", field: "name" } });
+  }
+  if (runAsError) {
+    blockers.push({
+      message: runAsError,
+      target: { kind: "field", field: "runAs" },
+    });
+  }
+
+  for (const issue of definitionIssues) {
+    blockers.push({
+      message: formatDefinitionIssue(issue),
+      target: { kind: "definition" },
+    });
+  }
+
+  return blockers;
+}
+
+/**
+ * Render a definition validation issue as a single `path: message` line,
+ * matching how the visual editor surfaces unattributed issues. A pathless
+ * (top-level) issue shows just its message.
+ */
+function formatDefinitionIssue(issue: DefinitionIssue): string {
+  return issue.path.length > 0
+    ? `${issue.path.join(".")}: ${issue.message}`
+    : issue.message;
+}

package/src/editor/condition-kind.ts

@@ -79,7 +79,7 @@ export const CONDITION_KIND_META: Record<ConditionKind, ConditionKindMeta> = {
   expr: {
     kind: "expr",
     label: "expression",
-    description: "Raw boolean expression — the escape hatch.",
+    description: "Raw boolean expression - the escape hatch.",
     icon: "Braces",
     group: "Advanced",
   },