@checkstack/automation-frontend 0.2.0 → 0.3.0

package/src/editor/item-summary.ts

@@ -0,0 +1,210 @@
+/**
+ * Pure summary-string derivation for the collapsed item cards (actions,
+ * triggers, conditions) in the visual editor. Each helper turns a piece of
+ * the definition into a single compact line shown under the card title in
+ * its collapsed Home-Assistant-style summary row.
+ *
+ * Kept free of any React / `@checkstack/ui` imports so the logic is
+ * unit-testable under bun (the UI barrel drags Monaco's vscode-only modules,
+ * which break bun's test runner).
+ */
+import type {
+  ActionInput,
+  ChooseInput,
+  ConditionInput,
+  DelayInput,
+  ParallelInput,
+  ProviderAction,
+  RepeatInput,
+  SequenceInput,
+  StopInput,
+  Trigger,
+  VariablesInput,
+  WaitForTriggerInput,
+  WaitUntilInput,
+} from "@checkstack/automation-common";
+import { actionKindOf } from "./action-helpers";
+import { kindOf } from "./condition-kind";
+
+/** Collapse internal whitespace and clip to `max` chars with an ellipsis. */
+function clip(text: string, max = 80): string {
+  const normalized = text.replaceAll(/\s+/g, " ").trim();
+  if (normalized.length <= max) return normalized;
+  return `${normalized.slice(0, max - 1)}…`;
+}
+
+/** Local (post-dot) name of a fully-qualified id, e.g. `plugin.foo` -> `foo`. */
+function localName(qualified: string): string {
+  return qualified.includes(".")
+    ? qualified.slice(qualified.lastIndexOf(".") + 1)
+    : qualified;
+}
+
+/**
+ * One-line summary for a trigger's collapsed card: the event id, plus a hint
+ * of the gating filter / dwell window when set. Returns `undefined` when there
+ * is nothing meaningful to show beyond the title (no event picked yet).
+ */
+export function summarizeTrigger(trigger: Trigger): string | undefined {
+  const parts: string[] = [];
+  if (trigger.event) parts.push(trigger.event);
+  if (trigger.filter) parts.push(`if ${trigger.filter}`);
+  if (trigger.for) parts.push("with dwell");
+  if (trigger.window) {
+    const rate = `${trigger.window.count}× / ${trigger.window.minutes}m`;
+    parts.push(
+      trigger.window.partitionBy
+        ? `${rate} by ${trigger.window.partitionBy}`
+        : rate,
+    );
+  }
+  if (parts.length === 0) return undefined;
+  return clip(parts.join(" · "));
+}
+
+/** First few stops of a human time string for a duration-ish value. */
+function summarizeDelay(value: DelayInput): string {
+  if ("template" in value.delay) {
+    return value.delay.template
+      ? `delay ${value.delay.template}`
+      : "delay (template)";
+  }
+  return `delay ${value.delay.seconds}s`;
+}
+
+function summarizeStop(value: StopInput): string {
+  const reason = value.stop.reason ? `: ${value.stop.reason}` : "";
+  return `${value.stop.error ? "fail run" : "stop run"}${reason}`;
+}
+
+function summarizeVariables(value: VariablesInput): string {
+  const keys = Object.keys(value.variables);
+  if (keys.length === 0) return "no variables";
+  return `set ${keys.join(", ")}`;
+}
+
+function summarizeChoose(value: ChooseInput): string {
+  const branches = value.choose.length;
+  const elseHint = value.else && value.else.length > 0 ? " + else" : "";
+  return `${branches} branch${branches === 1 ? "" : "es"}${elseHint}`;
+}
+
+function summarizeParallel(value: ParallelInput): string {
+  const n = value.parallel.length;
+  return `${n} branch${n === 1 ? "" : "es"}`;
+}
+
+function summarizeSequence(value: SequenceInput): string {
+  const n = value.sequence.length;
+  return `${n} step${n === 1 ? "" : "s"}`;
+}
+
+function summarizeRepeat(value: RepeatInput): string {
+  const mode = value.repeat;
+  if ("count" in mode) return `count ${mode.count}`;
+  if ("for_each" in mode) return `for each ${mode.for_each || "…"}`;
+  if ("while" in mode) return `while ${mode.while || "…"}`;
+  return `until ${mode.until || "…"}`;
+}
+
+function summarizeWaitForTrigger(value: WaitForTriggerInput): string {
+  const event = value.wait_for_trigger.event || "any event";
+  return `wait for ${event}`;
+}
+
+function summarizeWaitUntil(value: WaitUntilInput): string {
+  return `wait until ${summarizeCondition(value.wait_until.condition)}`;
+}
+
+/**
+ * One-line summary for an action's collapsed card. Provider actions surface
+ * the local action name; structural kinds surface a compact shape hint
+ * (branch / step counts, repeat mode, delay length, …). Returns `undefined`
+ * when nothing beyond the kind label is meaningful.
+ */
+export function summarizeAction(action: ActionInput): string | undefined {
+  const kind = actionKindOf(action);
+  switch (kind) {
+    case "action": {
+      const provider = action as ProviderAction;
+      if (!provider.action) return undefined;
+      return clip(localName(provider.action));
+    }
+    case "choose": {
+      return clip(summarizeChoose(action as ChooseInput));
+    }
+    case "parallel": {
+      return clip(summarizeParallel(action as ParallelInput));
+    }
+    case "sequence": {
+      return clip(summarizeSequence(action as SequenceInput));
+    }
+    case "repeat": {
+      return clip(summarizeRepeat(action as RepeatInput));
+    }
+    case "delay": {
+      return clip(summarizeDelay(action as DelayInput));
+    }
+    case "stop": {
+      return clip(summarizeStop(action as StopInput));
+    }
+    case "variables": {
+      return clip(summarizeVariables(action as VariablesInput));
+    }
+    case "wait_for_trigger": {
+      return clip(summarizeWaitForTrigger(action as WaitForTriggerInput));
+    }
+    case "wait_until": {
+      return clip(summarizeWaitUntil(action as WaitUntilInput));
+    }
+    case "condition": {
+      return undefined;
+    }
+  }
+}
+
+/**
+ * One-line summary for a condition's collapsed card. Expressions show their
+ * (clipped) source; structured kinds show a readable shape; combinators show
+ * a child count. Always returns a non-empty string (a bare empty expression
+ * reads as "empty expression").
+ */
+export function summarizeCondition(condition: ConditionInput): string {
+  const kind = kindOf(condition);
+  switch (kind) {
+    case "expr": {
+      const expr = typeof condition === "string" ? condition.trim() : "";
+      return expr ? clip(expr) : "empty expression";
+    }
+    case "and": {
+      const n = (condition as { and: ConditionInput[] }).and.length;
+      return `all of ${n}`;
+    }
+    case "or": {
+      const n = (condition as { or: ConditionInput[] }).or.length;
+      return `any of ${n}`;
+    }
+    case "not": {
+      return "not (…)";
+    }
+    case "numeric_state": {
+      const ns = (condition as { numeric_state: { value: string | number; above?: number; below?: number } })
+        .numeric_state;
+      const bounds: string[] = [];
+      if (ns.above !== undefined) bounds.push(`> ${ns.above}`);
+      if (ns.below !== undefined) bounds.push(`< ${ns.below}`);
+      return clip(`${ns.value} ${bounds.join(" and ")}`.trim());
+    }
+    case "time": {
+      const t = (condition as { time: { after?: string; before?: string } })
+        .time;
+      const range = [t.after, t.before].filter(Boolean).join(" – ");
+      return range ? `time ${range}` : "time of day";
+    }
+    case "state": {
+      const s = (condition as { state: { entity: string; status: string } })
+        .state;
+      return clip(`${s.entity || "system"} is ${s.status}`);
+    }
+  }
+}

package/src/editor/picker-dialog.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { Plus, Search } from "lucide-react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Input,
+} from "@checkstack/ui";
+
+/**
+ * Shared building blocks for the editor's Home-Assistant-style "type
+ * pickers" (add action / add trigger / add condition). Each picker opens a
+ * dialog with a single search box and a grouped, searchable list of rows;
+ * clicking a row creates the item and closes the dialog. The trigger and
+ * condition pickers are single-list; the action picker layers tabs on top of
+ * the same row + dialog shell.
+ */
+
+/**
+ * A single picker row — icon, name, description, and a `+` affordance. Shared
+ * by every picker so the rows look identical across actions / triggers /
+ * conditions.
+ */
+export const PickerRow: React.FC<{
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+  onClick: () => void;
+}> = ({ icon, title, description, onClick }) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="flex w-full items-start gap-3 rounded-md border border-border/60 bg-card px-3 py-2.5 text-left transition-colors hover:border-border hover:bg-accent/50"
+  >
+    <span className="mt-0.5 shrink-0 text-muted-foreground">{icon}</span>
+    <div className="min-w-0 flex-1">
+      <div className="text-sm font-medium">{title}</div>
+      {description && (
+        <div className="text-xs text-muted-foreground">{description}</div>
+      )}
+    </div>
+    <Plus className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+  </button>
+);
+
+/**
+ * The "+ Add …" trigger button — outline, small, with a leading plus. Matches
+ * the Actions "Add step" button so every list's add affordance is identical.
+ */
+export const PickerAddButton: React.FC<{
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+}> = ({ label, disabled, onClick }) => (
+  <Button
+    type="button"
+    variant="outline"
+    size="sm"
+    disabled={disabled}
+    className="h-7 text-xs"
+    onClick={onClick}
+  >
+    <Plus className="mr-1 h-3 w-3" />
+    {label}
+  </Button>
+);
+
+/**
+ * Search box used at the top of every picker dialog. Auto-focuses on open so
+ * the operator can type immediately.
+ */
+export const PickerSearchInput: React.FC<{
+  value: string;
+  onChange: (next: string) => void;
+  placeholder: string;
+}> = ({ value, onChange, placeholder }) => (
+  <div className="relative">
+    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+    <Input
+      autoFocus
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      placeholder={placeholder}
+      className="pl-9"
+    />
+  </div>
+);
+
+export interface PickerDialogShellProps {
+  /** Label for the bottom "+ Add …" button (e.g. "Add trigger"). */
+  addLabel: string;
+  /** Title rendered in the dialog header. */
+  title: string;
+  /** Placeholder for the search box. */
+  searchPlaceholder: string;
+  disabled?: boolean;
+  /**
+   * Renders the dialog body given the current (lowercased, trimmed) query and a
+   * `close` callback the body calls after creating an item.
+   */
+  children: (args: { query: string; close: () => void }) => React.ReactNode;
+}
+
+/**
+ * Single-list picker shell: a bottom "+ Add …" button that opens a dialog with
+ * a search box and a scrollable body. The body (a grouped list of
+ * {@link PickerRow}s) is supplied by the caller, which receives the live query
+ * and a `close` callback. Transient state resets on close so the dialog always
+ * reopens clean.
+ */
+export const PickerDialogShell: React.FC<PickerDialogShellProps> = ({
+  addLabel,
+  title,
+  searchPlaceholder,
+  disabled,
+  children,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+
+  React.useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+
+  return (
+    <>
+      <PickerAddButton
+        label={addLabel}
+        disabled={disabled}
+        onClick={() => setOpen(true)}
+      />
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent size="lg">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <PickerSearchInput
+              value={query}
+              onChange={setQuery}
+              placeholder={searchPlaceholder}
+            />
+            <div className="max-h-[50vh] overflow-y-auto pr-1">
+              {children({
+                query: query.trim().toLowerCase(),
+                close: () => setOpen(false),
+              })}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

package/src/editor/registry-context.tsx

@@ -46,13 +46,19 @@ interface RegistryContextValue {
   artifactTypes: ArtifactTypeInfo[];
   /** True until all three queries have resolved. */
   loading: boolean;
+  /**
+   * Id of the automation being edited, if saved. Undefined for a new,
+   * unsaved automation. Used by the script-test "Load from run" picker.
+   */
+  automationId?: string;
 }
 
 const RegistryContext = React.createContext<RegistryContextValue | null>(null);
 
 export const AutomationRegistryProvider: React.FC<{
   children: React.ReactNode;
-}> = ({ children }) => {
+  automationId?: string;
+}> = ({ children, automationId }) => {
   const client = usePluginClient(AutomationApi);
   const triggers = client.listTriggers.useQuery();
   const actions = client.listActions.useQuery();
@@ -65,8 +71,9 @@ export const AutomationRegistryProvider: React.FC<{
       artifactTypes: artifactTypes.data?.items ?? [],
       loading:
         triggers.isLoading || actions.isLoading || artifactTypes.isLoading,
+      automationId,
     }),
-    [triggers, actions, artifactTypes],
+    [triggers, actions, artifactTypes, automationId],
   );
 
   return (

package/src/editor/script-actions.test.ts

@@ -0,0 +1,184 @@
+import { describe, expect, it } from "bun:test";
+import type {
+  ActionInfo,
+  AutomationDefinition,
+} from "@checkstack/automation-common";
+import type { ActionInput } from "@checkstack/automation-common";
+import { collectScriptActions } from "./script-actions";
+import { actionPathToDefPath, defPathKey } from "./editor-validation";
+
+const BASE = { enabled: true, continue_on_error: false } as const;
+
+/** Provider-action literal with the required base fields filled in. */
+const pa = (action: string, config: Record<string, unknown>): ActionInput => ({
+  ...BASE,
+  action,
+  config,
+});
+
+const RUN_SCRIPT: ActionInfo = {
+  qualifiedId: "integration-script.run_script",
+  displayName: "Run Script (TypeScript)",
+  description: undefined,
+  category: "Scripts",
+  ownerPluginId: "integration-script",
+  configSchema: {
+    type: "object",
+    properties: {
+      script: { type: "string", "x-editor-types": ["typescript"] },
+      secretEnv: { type: "object", "x-secret-env": true },
+    },
+  },
+  produces: undefined,
+  consumes: [],
+  connectionProviderId: undefined,
+};
+
+const LOG_ACTION: ActionInfo = {
+  qualifiedId: "core.log",
+  displayName: "Log",
+  description: undefined,
+  category: "Core",
+  ownerPluginId: "core",
+  configSchema: {
+    type: "object",
+    properties: { message: { type: "string" } },
+  },
+  produces: undefined,
+  consumes: [],
+  connectionProviderId: undefined,
+};
+
+const ACTIONS = [RUN_SCRIPT, LOG_ACTION];
+
+function def(overrides: Partial<AutomationDefinition>): AutomationDefinition {
+  return {
+    name: "Test",
+    triggers: [{ event: "incident.created" }],
+    conditions: [],
+    actions: [],
+    mode: "single",
+    concurrency_scope: "automation",
+    max_runs: 1,
+    ...overrides,
+  };
+}
+
+describe("collectScriptActions", () => {
+  it("collects a root-level script action with its path, source and language", () => {
+    const refs = collectScriptActions({
+      actions: ACTIONS,
+      definition: def({
+        actions: [
+          pa("integration-script.run_script", {
+            script: "export default async () => context.trigger.payload;",
+          }),
+        ],
+      }),
+    });
+
+    expect(refs).toHaveLength(1);
+    expect(refs[0]).toMatchObject({
+      path: [{ slot: "root", index: 0 }],
+      issuePath: ["actions", 0, "config", "script"],
+      language: "typescript",
+      source: "export default async () => context.trigger.payload;",
+      secretEnvNames: [],
+    });
+    expect(refs[0]?.id).toBe(defPathKey(["actions", 0, "config", "script"]));
+  });
+
+  it("extracts declared secretEnv names from the action config", () => {
+    const refs = collectScriptActions({
+      actions: ACTIONS,
+      definition: def({
+        actions: [
+          pa("integration-script.run_script", {
+            script: "context;",
+            secretEnv: { API_TOKEN: "secret-1", DB_PASS: "secret-2" },
+          }),
+        ],
+      }),
+    });
+    expect(refs[0]?.secretEnvNames).toEqual(["API_TOKEN", "DB_PASS"]);
+  });
+
+  it("skips empty scripts and non-script provider actions", () => {
+    const refs = collectScriptActions({
+      actions: ACTIONS,
+      definition: def({
+        actions: [
+          pa("integration-script.run_script", { script: "   " }),
+          pa("core.log", { message: "hi" }),
+          pa("integration-script.run_script", {}),
+        ],
+      }),
+    });
+    expect(refs).toEqual([]);
+  });
+
+  it("finds scripts nested in choose / else / parallel / repeat / sequence", () => {
+    const refs = collectScriptActions({
+      actions: ACTIONS,
+      definition: def({
+        actions: [
+          {
+            ...BASE,
+            choose: [
+              {
+                when: "true",
+                sequence: [pa("integration-script.run_script", { script: "a;" })],
+              },
+            ],
+            else: [pa("integration-script.run_script", { script: "b;" })],
+          },
+          {
+            ...BASE,
+            parallel: [
+              {
+                ...BASE,
+                repeat: {
+                  count: 2,
+                  sequence: [
+                    pa("integration-script.run_script", { script: "c;" }),
+                  ],
+                },
+              },
+            ],
+          },
+        ],
+      }),
+    });
+
+    const issueKeys = refs.map((r) => r.issuePath.join("."));
+    expect(refs).toHaveLength(3);
+    // choose-when[0].sequence[0]
+    expect(issueKeys).toContain("actions.0.choose.0.sequence.0.config.script");
+    // choose else[0]
+    expect(issueKeys).toContain("actions.0.else.0.config.script");
+    // parallel[0] -> repeat.sequence[0]
+    expect(issueKeys).toContain(
+      "actions.1.parallel.0.repeat.sequence.0.config.script",
+    );
+  });
+
+  it("derives issuePath via the same actionPathToDefPath the cards use", () => {
+    const refs = collectScriptActions({
+      actions: ACTIONS,
+      definition: def({
+        actions: [
+          {
+            ...BASE,
+            sequence: [pa("integration-script.run_script", { script: "x;" })],
+          },
+        ],
+      }),
+    });
+    const path = refs[0]!.path;
+    expect(refs[0]!.issuePath).toEqual([
+      ...actionPathToDefPath(path),
+      "config",
+      "script",
+    ]);
+  });
+});