@checkstack/automation-frontend 0.2.0 → 0.3.0

package/src/editor/script-actions.ts

@@ -0,0 +1,146 @@
+import type {
+  ActionInfo,
+  ActionInput,
+  ActionPath,
+  ActionPathStep,
+  AutomationDefinition,
+} from "@checkstack/automation-common";
+import type { EditorType } from "@checkstack/common";
+import { actionPathToDefPath, defPathKey } from "./editor-validation";
+import { secretEnvEnvNames } from "../script-context";
+
+/**
+ * A single inline-script action found in a definition, with everything the
+ * headless validator + issue mapping need - independent of whether the action's
+ * editor card is mounted/expanded. `collectScriptActions` walks the whole
+ * action tree (including collapsed and nested actions) so every script is
+ * validated, not just the one on screen.
+ */
+export interface ScriptActionRef {
+  /** Stable key (the issue-path joined) used to correlate validator results. */
+  id: string;
+  /** Editor path to this action - drives `generateAutomationContextTypes`. */
+  path: ActionPath;
+  /** Definition path of the script field, e.g. `["actions",0,"config","script"]`. */
+  issuePath: Array<string | number>;
+  /** The script source. */
+  source: string;
+  language: "typescript" | "javascript";
+  /** Declared `secretEnv` var names, for the `process.env.*` augmentation. */
+  secretEnvNames: string[];
+}
+
+/** Narrow an `unknown` to a plain (non-array) object record. */
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    // The lone cast: `typeof === "object"` cannot itself produce the index
+    // signature, and re-validating an arbitrary JSON-schema/config record with
+    // zod here would be wasteful. Mirrors the same helper in `script-context`.
+    return value as Record<string, unknown>;
+  }
+  return undefined;
+}
+
+/**
+ * Find the script field in an action's config JSON schema by the
+ * `x-editor-types` annotation (NOT a hard-coded field name) and report the
+ * field key + the TS/JS language it should validate as. Returns undefined for
+ * actions with no typescript/javascript editor field (e.g. a shell action, or
+ * a non-script provider action).
+ */
+function scriptFieldOf(
+  configSchema: Record<string, unknown>,
+): { fieldKey: string; language: "typescript" | "javascript" } | undefined {
+  const properties = asRecord(configSchema.properties);
+  if (!properties) return undefined;
+  for (const [key, prop] of Object.entries(properties)) {
+    const editorTypes = asRecord(prop)?.["x-editor-types"];
+    if (!Array.isArray(editorTypes)) continue;
+    const types = new Set(
+      editorTypes.filter((t): t is EditorType => typeof t === "string"),
+    );
+    if (types.has("typescript")) {
+      return { fieldKey: key, language: "typescript" };
+    }
+    if (types.has("javascript")) {
+      return { fieldKey: key, language: "javascript" };
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Walk an automation definition's whole action tree and return every inline
+ * TS/JS script action with a non-empty source. The `actions` registry supplies
+ * each action's config schema (so the script field + secretEnv mapping are
+ * located by annotation, never by a hard-coded key).
+ *
+ * The walk mirrors the editor's `ActionPath` slot grammar exactly, so the
+ * derived definition paths line up with both the backend validator's issue
+ * paths and `useActionIssues` card lookups.
+ */
+export function collectScriptActions({
+  definition,
+  actions,
+}: {
+  definition: AutomationDefinition;
+  actions: ActionInfo[];
+}): ScriptActionRef[] {
+  const infoById = new Map(actions.map((action) => [action.qualifiedId, action]));
+  const refs: ScriptActionRef[] = [];
+
+  const visit = (
+    list: ActionInput[],
+    parentPath: ActionPath,
+    slot: ActionPathStep["slot"],
+    whenIndex?: number,
+  ): void => {
+    for (const [index, action] of list.entries()) {
+      const step: ActionPathStep =
+        whenIndex === undefined ? { slot, index } : { slot, whenIndex, index };
+      const path: ActionPath = [...parentPath, step];
+
+      if ("action" in action) {
+        const info = infoById.get(action.action);
+        const field = info ? scriptFieldOf(info.configSchema) : undefined;
+        if (info && field) {
+          const config = asRecord(action.config) ?? {};
+          const raw = config[field.fieldKey];
+          const source = typeof raw === "string" ? raw : "";
+          if (source.trim() !== "") {
+            const issuePath = [
+              ...actionPathToDefPath(path),
+              "config",
+              field.fieldKey,
+            ];
+            refs.push({
+              id: defPathKey(issuePath),
+              path,
+              issuePath,
+              source,
+              language: field.language,
+              secretEnvNames: secretEnvEnvNames({
+                configSchema: info.configSchema,
+                config: action.config,
+              }),
+            });
+          }
+        }
+      } else if ("choose" in action) {
+        for (const [whenIdx, branch] of action.choose.entries()) {
+          visit(branch.sequence, path, "choose-when", whenIdx);
+        }
+        if (action.else) visit(action.else, path, "choose-else");
+      } else if ("parallel" in action) {
+        visit(action.parallel, path, "parallel");
+      } else if ("repeat" in action) {
+        visit(action.repeat.sequence, path, "repeat");
+      } else if ("sequence" in action) {
+        visit(action.sequence, path, "sequence");
+      }
+    }
+  };
+
+  visit(definition.actions, [], "root");
+  return refs;
+}

package/src/editor/system-entity-picker.logic.ts

@@ -0,0 +1,23 @@
+/**
+ * Pure logic for {@link SystemEntityPicker}, extracted so the manual-entry
+ * fallback decision can be unit-tested without rendering the catalog-backed
+ * picker (which pulls in `@checkstack/ui` / Monaco).
+ */
+
+/**
+ * Decides whether the picker should open in manual-entry mode for a given
+ * `entity` value and the set of known catalog system ids. Templates and ids
+ * that aren't in the catalog drop to manual entry so they still round-trip;
+ * a blank value or a known system id uses the live picker.
+ */
+export function shouldStartManual({
+  value,
+  knownSystemIds,
+}: {
+  value: string;
+  knownSystemIds: ReadonlySet<string>;
+}): boolean {
+  if (value.length === 0) return false;
+  if (value.includes("{{")) return true;
+  return !knownSystemIds.has(value);
+}

package/src/editor/template-completion.test.ts

@@ -216,10 +216,29 @@ describe("createTemplateCompletionProvider — expression mode", () => {
   it("treats the whole value as an expression (no {{ needed)", () => {
     const result = provider({ value: "trigger.payload.sev", cursor: 19 });
     expect(result!.heading).toBe("Fields");
-    // Field insert in expression mode never appends braces, but does
-    // append a trailing space to advance to the operator stage.
+    // Field insert in expression mode inserts the BARE path with NO trailing
+    // space and no braces — a path is a complete expression on its own. The
+    // operator stage only fires after a MANUAL space, so picking a field
+    // doesn't pop comparators/filters and imply a comparison is required.
     const severity = result!.items.find((i) => i.label.includes("severity"));
-    expect(severity?.insertText).toBe("trigger.payload.severity ");
+    expect(severity?.insertText).toBe("trigger.payload.severity");
+  });
+
+  it("does NOT auto-advance to operators after a field is inserted", () => {
+    // No trailing space (as the field insert now leaves it) → still the field
+    // stage, not the operator stage. Operators require a manual space.
+    const noSpace = provider({
+      value: "trigger.payload.severity",
+      cursor: "trigger.payload.severity".length,
+    });
+    expect(noSpace!.heading).toBe("Fields");
+
+    // A manual trailing space advances to the operator stage.
+    const withSpace = provider({
+      value: "trigger.payload.severity ",
+      cursor: "trigger.payload.severity ".length,
+    });
+    expect(withSpace!.heading).toBe("Operators");
   });
 
   it("suggests enum values after a comparator", () => {

package/src/editor/template-completion.ts

@@ -494,6 +494,7 @@ export function createTemplateCompletionProvider(
           replaceStart,
           replaceEnd,
           appendClose: mode === "template" && !window.closed,
+          mode,
         });
       }
       case "operator": {
@@ -515,8 +516,9 @@ function fieldResult(args: {
   replaceStart: number;
   replaceEnd: number;
   appendClose: boolean;
+  mode: "template" | "expression";
 }): TemplateCompletionResult | null {
-  const { stage, fields, replaceStart, replaceEnd, appendClose } = args;
+  const { stage, fields, replaceStart, replaceEnd, appendClose, mode } = args;
   const q = stage.query.toLowerCase();
   // Match + insert in templateRef space (what gets written into `{{ }}`).
   // Also match against the canonical `path` so typing the dotted form
@@ -533,13 +535,11 @@ function fieldResult(args: {
     replaceStart,
     replaceEnd,
     items: matches.map((f) => {
-      // Always append a trailing space so the caret lands in
-      // whitespace after the field — that re-opens completion in the
-      // operator stage (comparators / filters) automatically, the same
-      // way picking a comparator advances to the value stage.
       if (appendClose) {
-        // Unclosed `{{` — also append the closing braces, and land the
-        // caret after the space but before `}}` (offset -2 into ` }}`).
+        // Unclosed `{{` (template mode) — append a space + the closing
+        // braces and land the caret after the space but before `}}`
+        // (offset -2 into ` }}`); the space re-opens the operator stage,
+        // the natural next step inside an interpolation.
         return {
           label: f.templateRef,
           detail: f.type,
@@ -548,11 +548,19 @@ function fieldResult(args: {
           caretOffset: -2,
         } satisfies TemplateCompletionItem;
       }
+      // Expression mode (bare condition / filter / partitionBy): a path is a
+      // complete expression on its own, so DON'T auto-append a trailing space.
+      // The operator stage only requires whitespace, so auto-spacing would pop
+      // comparators/filters at the user the instant they pick a field and imply
+      // a comparison is mandatory. Inserting the bare path closes completion;
+      // the user types a space MANUALLY only when they actually want an operator
+      // (then the operator stage fires). Template mode keeps the auto-space
+      // field → operator flow.
       return {
         label: f.templateRef,
         detail: f.type,
         description: f.description,
-        insertText: `${f.templateRef} `,
+        insertText: mode === "expression" ? f.templateRef : `${f.templateRef} `,
         caretOffset: 0,
       } satisfies TemplateCompletionItem;
     }),

package/src/editor/template-helpers.ts

@@ -25,6 +25,10 @@ export const TEMPLATE_FILTERS: readonly CompletionFilter[] = [
   { name: "join", signature: "separator", description: 'Join an array (default ", ").', hasArgs: true },
   { name: "replace", signature: "search, replacement", description: "Replace every occurrence.", hasArgs: true },
   { name: "not", description: "Negate truthiness." },
+  { name: "minutes", description: "A number of minutes, as milliseconds (e.g. 30 | minutes)." },
+  { name: "hours", description: "A number of hours, as milliseconds (e.g. 2 | hours)." },
+  { name: "duration_since", description: "Milliseconds elapsed since an ISO timestamp." },
+  { name: "older_than", signature: "thresholdMs", description: "True when an ISO timestamp is at least N ms in the past (e.g. ts | older_than(30 | minutes)).", hasArgs: true },
 ];
 
 /**

package/src/editor/trigger-helpers.test.ts

@@ -4,6 +4,7 @@ import {
   assignDefaultTriggerIds,
   collectTriggerIds,
   defaultTriggerId,
+  makeTrigger,
 } from "./trigger-helpers";
 
 describe("trigger-helpers", () => {
@@ -55,4 +56,31 @@ describe("trigger-helpers", () => {
     expect(out[0]!.id).toBe("incident_created");
     expect(out[1]!.id).toBe("incident_created_2");
   });
+
+  // The trigger type picker builds a trigger via `makeTrigger`; it must carry
+  // the picked event and a default id that is unique against existing siblings.
+  it("makeTrigger sets the picked event and a derived default id", () => {
+    expect(makeTrigger({ event: "incident.created", taken: new Set() })).toEqual(
+      { event: "incident.created", id: "incident_created" },
+    );
+  });
+
+  it("makeTrigger dedupes its default id against existing trigger ids", () => {
+    const out = makeTrigger({
+      event: "incident.created",
+      taken: new Set(["incident_created"]),
+    });
+    expect(out.event).toBe("incident.created");
+    expect(out.id).toBe("incident_created_2");
+  });
+
+  // Regression for the editor-load fix: a stored/seeded definition (e.g. the
+  // "Auto-incident: ... flapping" seed) whose trigger carries no `id` must be
+  // materialized to its derived id on load, so the Id field shows it without
+  // the operator focusing + blurring the input first.
+  it("materializes the derived id for an id-less seeded trigger on load", () => {
+    const stored: Trigger[] = [{ event: "healthcheck.flapping_detected" }];
+    const out = assignDefaultTriggerIds(stored);
+    expect(out[0]!.id).toBe("healthcheck_flapping_detected");
+  });
 });

package/src/editor/trigger-helpers.ts

@@ -48,6 +48,23 @@ export function defaultTriggerId(
   return uniqueTriggerId(suggestTriggerIdBase(trigger), taken);
 }
 
+/**
+ * Build a fresh trigger subscribed to `event` with a unique, log-friendly
+ * default `id` (deduped against `taken`). Used by the trigger type picker so a
+ * newly-added trigger is immediately referenceable as `trigger.id` rather than
+ * appearing blank.
+ */
+export function makeTrigger({
+  event,
+  taken,
+}: {
+  event: string;
+  taken: Set<string>;
+}): Trigger {
+  const base: Trigger = { event };
+  return { ...base, id: defaultTriggerId(base, taken) };
+}
+
 /**
  * Return a copy of `triggers` with a stable, unique id assigned to every
  * trigger that does not already have one. Existing ids are preserved and seed

package/src/editor/useScriptDiagnostics.ts

@@ -0,0 +1,108 @@
+import React from "react";
+import type { AutomationDefinition } from "@checkstack/automation-common";
+import { onVscodeServicesReady, validateTypeScriptSources } from "@checkstack/ui";
+import {
+  generateAutomationContextTypes,
+  generateSecretEnvTypes,
+} from "../script-context";
+import { useAutomationRegistry } from "./registry-context";
+import { collectScriptActions } from "./script-actions";
+import type { DefinitionIssue } from "./editor-validation";
+
+/**
+ * Continuously type-check every inline TS/JS script action in `definition`
+ * against its generated `context` types - even the ones whose editor cards are
+ * collapsed or never opened - and surface the results as `DefinitionIssue`s so
+ * they flow through the same `ValidationProvider` / per-card badge path as
+ * structural validation.
+ *
+ * The check runs in the browser via the headless `validateTypeScriptSources`
+ * (the same standalone TS worker the editor uses), so it needs no backend
+ * round-trip. It is debounced and generation-guarded so a burst of edits
+ * collapses to one pass and a stale async result never overwrites a newer one.
+ *
+ * NOTE: this only covers the automation currently open in the editor. Scripts
+ * in OTHER automations, or definitions authored via YAML/API, are not seen here
+ * - that platform-wide coverage is the (deferred) backend typecheck's job.
+ */
+export function useScriptDiagnostics({
+  definition,
+}: {
+  definition: AutomationDefinition;
+}): DefinitionIssue[] {
+  const { triggers, actions, artifactTypes } = useAutomationRegistry();
+  const [issues, setIssues] = React.useState<DefinitionIssue[]>([]);
+  const generationRef = React.useRef(0);
+
+  // The validator no-ops until an editor initializes the monaco-vscode services
+  // (it must never init them itself). Bumping this when services become ready
+  // re-runs the effect below, so opening any one script editor immediately
+  // validates ALL scripts - including the still-collapsed ones.
+  const [servicesReadyTick, setServicesReadyTick] = React.useState(0);
+  React.useEffect(
+    () => onVscodeServicesReady(() => setServicesReadyTick((tick) => tick + 1)),
+    [],
+  );
+
+  React.useEffect(() => {
+    const generation = ++generationRef.current;
+    const handle = setTimeout(() => {
+      const refs = collectScriptActions({ definition, actions });
+      if (refs.length === 0) {
+        if (generation === generationRef.current) setIssues([]);
+        return;
+      }
+
+      // Each script validates against the SAME merged type defs the editor
+      // shows it: the scope-derived `context` union for the action's position,
+      // plus the `process.env.*` augmentation for its declared secrets.
+      const sources = refs.map((ref) => {
+        const { typeDefinitions } = generateAutomationContextTypes({
+          definition,
+          triggers,
+          actions: actions.map((action) => ({
+            qualifiedId: action.qualifiedId,
+            produces: action.produces,
+          })),
+          artifactTypes,
+          path: ref.path,
+        });
+        const secretEnvLib = generateSecretEnvTypes({
+          envNames: ref.secretEnvNames,
+        });
+        return {
+          id: ref.id,
+          source: ref.source,
+          typeDefinitions: [typeDefinitions, secretEnvLib]
+            .filter(Boolean)
+            .join("\n\n"),
+          language: ref.language,
+        };
+      });
+
+      void validateTypeScriptSources({ sources })
+        .then((byId) => {
+          if (generation !== generationRef.current) return;
+          const next: DefinitionIssue[] = [];
+          for (const ref of refs) {
+            for (const diagnostic of byId.get(ref.id) ?? []) {
+              next.push({
+                path: ref.issuePath,
+                message: `Line ${diagnostic.line}: ${diagnostic.message}`,
+              });
+            }
+          }
+          setIssues(next);
+        })
+        .catch(() => {
+          // Validator failure (e.g. worker unavailable) must never break the
+          // editor; just leave script issues empty for this pass.
+          if (generation === generationRef.current) setIssues([]);
+        });
+    }, 400);
+
+    return () => clearTimeout(handle);
+  }, [definition, triggers, actions, artifactTypes, servicesReadyTick]);
+
+  return issues;
+}

package/src/index.tsx

@@ -17,6 +17,8 @@ import { AutomationMenuItems } from "./components/AutomationMenuItems";
 
 export {
   generateAutomationContextTypes,
+  generateSecretEnvTypes,
+  secretEnvEnvNames,
   type GenerateAutomationContextTypesInput,
   type GenerateAutomationContextTypesResult,
 } from "./script-context";