@checkstack/automation-frontend 0.2.0 → 0.3.0

package/src/editor/ConditionsEditor.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Plus, Trash2 } from "lucide-react";
 import {
-  Button,
+  ActionCard,
+  type ActionCardMenuItem,
   Card,
   CardContent,
   CardHeader,
@@ -10,7 +10,12 @@ import {
   type VariableNode,
 } from "@checkstack/ui";
 import type { ConditionInput } from "@checkstack/automation-common";
+import { AddConditionDialog } from "./AddConditionDialog";
 import { ConditionEditor } from "./ConditionEditor";
+import { defaultForKind } from "./condition-kind";
+import { ItemSheet } from "./ItemSheet";
+import { useConditionIssues } from "./editor-validation";
+import { summarizeCondition } from "./item-summary";
 
 /**
  * Top-level pre-run conditions. Every condition in this list must pass
@@ -35,55 +40,119 @@ export const ConditionsEditor: React.FC<{
 }> = ({ value, onChange, variableNodes, completionProvider, disabled }) => (
   <Card>
     <CardHeader className="border-b">
-      <div className="flex items-center justify-between">
-        <CardTitle className="text-base">Conditions</CardTitle>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => onChange([...value, ""])}
-          disabled={disabled}
-        >
-          <Plus className="mr-1 h-3 w-3" />
-          Add condition
-        </Button>
-      </div>
+      <CardTitle className="text-base">Conditions</CardTitle>
     </CardHeader>
     <CardContent className="space-y-2 p-3">
-      {value.length === 0 ? (
+      {value.length === 0 && (
         <p className="text-xs italic text-muted-foreground">
           No pre-run gating. Add a condition to require it before the
           actions run.
         </p>
-      ) : (
-        value.map((condition, index) => (
-          <div key={index} className="flex items-start gap-2">
-            <div className="flex-1">
-              <ConditionEditor
-                value={condition}
-                onChange={(next) => {
-                  const list = [...value];
-                  list[index] = next;
-                  onChange(list);
-                }}
-                variableNodes={variableNodes}
-                completionProvider={completionProvider}
-              />
-            </div>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7 text-destructive hover:bg-destructive/10"
-              onClick={() => onChange(value.filter((_, i) => i !== index))}
-              disabled={disabled}
-              aria-label="Remove condition"
-            >
-              <Trash2 className="h-3 w-3" />
-            </Button>
-          </div>
-        ))
       )}
+      {value.map((condition, index) => (
+        <ConditionCard
+          key={index}
+          index={index}
+          value={condition}
+          onChange={(next) => {
+            const list = [...value];
+            list[index] = next;
+            onChange(list);
+          }}
+          onRemove={() => onChange(value.filter((_, i) => i !== index))}
+          onDuplicate={() =>
+            // Conditions carry no id, so a structural clone (inserted
+            // directly after the original) is all that's needed.
+            onChange([
+              ...value.slice(0, index + 1),
+              structuredClone(condition),
+              ...value.slice(index + 1),
+            ])
+          }
+          variableNodes={variableNodes}
+          completionProvider={completionProvider}
+          disabled={disabled}
+        />
+      ))}
+      <AddConditionDialog
+        disabled={disabled}
+        onAdd={(kind) => onChange([...value, defaultForKind(kind)])}
+      />
     </CardContent>
   </Card>
 );
+
+const ConditionCard: React.FC<{
+  index: number;
+  value: ConditionInput;
+  onChange: (next: ConditionInput) => void;
+  onRemove: () => void;
+  onDuplicate: () => void;
+  variableNodes: VariableNode[];
+  completionProvider: TemplateCompletionProvider;
+  disabled?: boolean;
+}> = ({
+  index,
+  value,
+  onChange,
+  onRemove,
+  onDuplicate,
+  variableNodes,
+  completionProvider,
+  disabled,
+}) => {
+  const issues = useConditionIssues(index);
+  const [sheetOpen, setSheetOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (issues.length > 0) setSheetOpen(true);
+  }, [issues.length]);
+
+  const summary = summarizeCondition(value);
+  const title = `Condition ${index + 1}`;
+
+  const menuItems: ActionCardMenuItem[] = disabled
+    ? []
+    : [
+        { label: "Duplicate", icon: "Copy", onClick: onDuplicate },
+        {
+          label: "Delete",
+          icon: "Trash2",
+          onClick: onRemove,
+          variant: "destructive",
+        },
+      ];
+
+  return (
+    <>
+      <ActionCard
+        id={`condition-${index}`}
+        title={title}
+        summary={summary}
+        category="Condition"
+        icon="Funnel"
+        onOpenSheet={() => setSheetOpen(true)}
+        actions={menuItems}
+        errors={issues}
+      />
+      <ItemSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        title={title}
+        description="Pre-run condition"
+      >
+        <ConditionEditor
+          value={value}
+          onChange={onChange}
+          variableNodes={variableNodes}
+          completionProvider={completionProvider}
+          bare
+          // Kind is chosen up front via AddConditionDialog; to change it the
+          // operator deletes + re-adds, matching how actions work. Nested
+          // clauses keep their inline selector (this prop isn't threaded down).
+          hideKindSelector
+        />
+      </ItemSheet>
+    </>
+  );
+};

package/src/editor/ItemSheet.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@checkstack/ui";
+
+/**
+ * Side-sheet host for a single editor item's full configuration.
+ *
+ * The collapsed summary cards (actions, triggers, conditions) render only a
+ * compact row; clicking opens this right-side sheet containing the item's
+ * live config form. The form edits the same `value`/`onChange` the inline
+ * editor used, so closing the sheet keeps the changes (they're already
+ * applied) - there is no draft/commit step.
+ *
+ * Composite actions nest `ItemSheet`s: a child card inside the parent's sheet
+ * body opens its own sheet, which stacks on top via Radix Dialog's portal +
+ * overlay. The z-index/overlay layering is handled by the `Sheet` primitive.
+ */
+export const ItemSheet: React.FC<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  /** Sheet width. Composite/provider bodies want room, so default to `lg`. */
+  size?: "default" | "lg" | "xl" | "full";
+  children: React.ReactNode;
+}> = ({ open, onOpenChange, title, description, size = "lg", children }) => (
+  <Sheet open={open} onOpenChange={onOpenChange}>
+    <SheetContent
+      size={size}
+      // Stop the click that bubbles from a nested card/menu inside the sheet
+      // from being interpreted as a header click on the card behind it.
+      onClick={(event) => event.stopPropagation()}
+    >
+      <SheetHeader>
+        <SheetTitle className="truncate">{title}</SheetTitle>
+        {description && (
+          <SheetDescription className="truncate">
+            {description}
+          </SheetDescription>
+        )}
+      </SheetHeader>
+      <SheetBody className="space-y-4">{children}</SheetBody>
+    </SheetContent>
+  </Sheet>
+);

package/src/editor/RunReplayPicker.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@checkstack/ui";
+import { AutomationApi } from "@checkstack/automation-common";
+import { extractErrorMessage } from "@checkstack/common";
+
+export interface RunReplayPickerProps {
+  /** Automation whose runs populate the picker. */
+  automationId: string;
+  /**
+   * Called with the reconstructed sample-context JSON once a run is
+   * selected and its scope is fetched. The parent applies it to the
+   * `ContextSampleEditor`.
+   */
+  onLoad: (sampleContextJson: string) => void;
+  /** Surfaces a warning when the picked run's durable scope was cleared. */
+  onScopeSnapshotMissing?: () => void;
+}
+
+/**
+ * "Load from run" dropdown for the script-test panel. Lists this
+ * automation's recent runs; selecting one fetches its reconstructed
+ * scope via `getRunScopeForReplay` and hands the JSON to `onLoad`.
+ *
+ * Lives in automation-frontend (owns the RPC); `@checkstack/ui` stays
+ * plugin-agnostic and only renders it through the `runPicker` slot.
+ */
+export const RunReplayPicker: React.FC<RunReplayPickerProps> = ({
+  automationId,
+  onLoad,
+  onScopeSnapshotMissing,
+}) => {
+  const client = usePluginClient(AutomationApi);
+  const [selectedRunId, setSelectedRunId] = React.useState<string | null>(null);
+
+  const runsQuery = client.listRuns.useQuery(
+    { automationId, limit: 25 },
+    { enabled: Boolean(automationId) },
+  );
+
+  const replayQuery = client.getRunScopeForReplay.useQuery(
+    { runId: selectedRunId ?? "" },
+    { enabled: Boolean(selectedRunId), gcTime: 0 },
+  );
+
+  // Apply the fetched scope once it resolves for the selected run.
+  React.useEffect(() => {
+    if (!selectedRunId || !replayQuery.data) return;
+    onLoad(JSON.stringify(replayQuery.data.context, null, 2));
+    if (!replayQuery.data.scopeSnapshotAvailable) {
+      onScopeSnapshotMissing?.();
+    }
+    // Reset so the same run can be re-picked later.
+    setSelectedRunId(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- apply once per fetch; callbacks are stable enough and re-running on their identity would double-apply
+  }, [selectedRunId, replayQuery.data]);
+
+  const runs = runsQuery.data?.items ?? [];
+
+  return (
+    <Select
+      value=""
+      onValueChange={(runId) => setSelectedRunId(runId)}
+      disabled={runs.length === 0 || replayQuery.isFetching}
+    >
+      <SelectTrigger className="h-7 w-[180px] text-xs">
+        <SelectValue
+          placeholder={
+            replayQuery.isFetching
+              ? "Loading…"
+              : runs.length === 0
+                ? "No runs yet"
+                : "Load from run"
+          }
+        />
+      </SelectTrigger>
+      <SelectContent>
+        {runs.map((run) => (
+          <SelectItem key={run.id} value={run.id}>
+            {new Date(run.startedAt).toLocaleString()} — {run.status}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+/** Format a replay-load error for surfacing in the panel. */
+export function formatReplayError(error: unknown): string {
+  return `Failed to load run scope: ${extractErrorMessage(error)}`;
+}

package/src/editor/ScriptServicesBooter.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import {
+  CodeEditor,
+  areVscodeServicesReady,
+  onVscodeServicesReady,
+} from "@checkstack/ui";
+
+/**
+ * Boots the shared monaco-vscode services so the headless script validator can
+ * run from the moment an automation is opened - WITHOUT waiting for the
+ * operator to expand a script action card.
+ *
+ * Why this exists: the validator must not initialize the monaco-vscode services
+ * itself (that collides with the editor wrapper's one-time init and throws
+ * "Services are already initialized"). Only a real editor may init them. So
+ * when an automation already contains inline scripts, we mount ONE tiny,
+ * offscreen, read-only editor purely to trigger that init. Its
+ * `onEditorStartDone` flips the global "services ready" flag, the validator's
+ * subscription fires, and every script - collapsed cards included - validates.
+ *
+ * Once services are ready the booter unmounts (it has done its job), so there's
+ * no lingering hidden editor. It is only rendered when the definition actually
+ * has a script action, so automations with none never pay the Monaco load.
+ */
+export const ScriptServicesBooter: React.FC = () => {
+  const [ready, setReady] = React.useState(() => areVscodeServicesReady());
+
+  React.useEffect(() => {
+    if (ready) return;
+    return onVscodeServicesReady(() => setReady(true));
+  }, [ready]);
+
+  if (ready) return null;
+
+  return (
+    <div
+      aria-hidden
+      // Pulled far offscreen with a tiny footprint so it never affects layout
+      // or interaction; it exists only to start the editor services.
+      className="pointer-events-none fixed left-[-9999px] top-0 h-[2px] w-[2px] overflow-hidden opacity-0"
+    >
+      <CodeEditor
+        id="automation-script-services-booter"
+        language="typescript"
+        value=""
+        onChange={() => {}}
+        minHeight="1px"
+        allowPopout={false}
+        readOnly
+      />
+    </div>
+  );
+};

package/src/editor/ScriptTestRenderer.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import {
+  ScriptTestPanel,
+  ContextSampleEditor,
+  type ScriptTestRenderer,
+  type ScriptTestPanelResult,
+  type ScriptTestRunArgs,
+} from "@checkstack/ui";
+import { AutomationApi } from "@checkstack/automation-common";
+import { extractErrorMessage } from "@checkstack/common";
+import { useAutomationRegistry } from "./registry-context";
+import { RunReplayPicker } from "./RunReplayPicker";
+
+/**
+ * Default sample context for a freshly-opened test panel. Auto-seeded so
+ * operators see a runnable example instead of a blank slate. Mirrors the
+ * `context` shape `run_script` exposes / `run_shell` flattens.
+ */
+const DEFAULT_SAMPLE_CONTEXT = `{
+  "trigger": {
+    "event": "incident.created",
+    "payload": {
+      "id": "INC-42",
+      "title": "API latency spike",
+      "severity": "high"
+    }
+  },
+  "artifacts": {},
+  "var": {}
+}`;
+
+const TIMEOUT_MS = 30_000;
+
+interface AutomationScriptTestPanelProps {
+  kind: "typescript" | "shell";
+  script: string;
+  /**
+   * The action's declared secret → env mapping (the sibling `x-secret-env`
+   * field). Forwarded to `testScript` so the test injects
+   * `__SECRET_<NAME>__` placeholders (or operator overrides) — real secret
+   * values are NEVER resolved in the test path.
+   */
+  secretEnv?: Record<string, string>;
+}
+
+/**
+ * Self-contained test panel for an automation `run_script` / `run_shell`
+ * action config field. Owns its own editable sample-context state and the
+ * `testScript` mutation, so it can be returned from a {@link ScriptTestRenderer}
+ * without violating the rules of hooks.
+ */
+const AutomationScriptTestPanel: React.FC<AutomationScriptTestPanelProps> = ({
+  kind,
+  script,
+  secretEnv,
+}) => {
+  const client = usePluginClient(AutomationApi);
+  const { automationId } = useAutomationRegistry();
+  const testMutation = client.testScript.useMutation();
+  const [sampleContext, setSampleContext] = React.useState(
+    DEFAULT_SAMPLE_CONTEXT,
+  );
+  const [snapshotWarning, setSnapshotWarning] = React.useState(false);
+
+  const handleRun = React.useCallback(
+    async ({
+      secretOverrides,
+    }: ScriptTestRunArgs): Promise<ScriptTestPanelResult> => {
+      let context: Record<string, unknown> | undefined;
+      if (sampleContext.trim().length > 0) {
+        try {
+          context = JSON.parse(sampleContext) as Record<string, unknown>;
+        } catch (error) {
+          return {
+            stdout: "",
+            stderr: "",
+            durationMs: 0,
+            timedOut: false,
+            error: `Sample context is not valid JSON: ${extractErrorMessage(error)}`,
+          };
+        }
+      }
+      return testMutation.mutateAsync({
+        kind,
+        script,
+        context,
+        // The action's declared secrets → placeholders/overrides in the test
+        // run. Real values are never resolved here (decision 4).
+        ...(secretEnv ? { secretEnv } : {}),
+        ...(secretOverrides ? { secretOverrides } : {}),
+        timeoutMs: TIMEOUT_MS,
+      });
+    },
+    [testMutation, kind, script, sampleContext, secretEnv],
+  );
+
+  const note = snapshotWarning
+    ? "Loaded trigger + artifacts from the run. Variables / loop state were not available (the run's durable scope was already cleared). Runs on the central backend; real satellite runs may differ."
+    : undefined;
+
+  return (
+    <ScriptTestPanel
+      onRun={handleRun}
+      disabled={script.trim().length === 0}
+      secretEnv={secretEnv}
+      note={note}
+      contextEditor={
+        <ContextSampleEditor
+          value={sampleContext}
+          onChange={(next) => {
+            setSampleContext(next);
+            setSnapshotWarning(false);
+          }}
+          runPicker={
+            automationId ? (
+              <RunReplayPicker
+                automationId={automationId}
+                onLoad={(json) => {
+                  setSampleContext(json);
+                  setSnapshotWarning(false);
+                }}
+                onScopeSnapshotMissing={() => setSnapshotWarning(true)}
+              />
+            ) : undefined
+          }
+        />
+      }
+    />
+  );
+};
+
+/**
+ * Build the {@link ScriptTestRenderer} passed to `DynamicForm` for the
+ * automation action editor. Renders an {@link AutomationScriptTestPanel}
+ * beneath any `x-script-testable` script field.
+ */
+export const automationScriptTestRenderer: ScriptTestRenderer = ({
+  fieldId,
+  kind,
+  script,
+  secretEnv,
+}) => (
+  <AutomationScriptTestPanel
+    key={`${fieldId}-test`}
+    kind={kind}
+    script={script}
+    secretEnv={secretEnv}
+  />
+);

package/src/editor/SystemEntityPicker.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "bun:test";
+import { shouldStartManual } from "./system-entity-picker.logic";
+
+describe("shouldStartManual", () => {
+  const known = new Set(["payments-api", "billing"]);
+
+  it("uses the picker for a blank value", () => {
+    expect(shouldStartManual({ value: "", knownSystemIds: known })).toBe(false);
+  });
+
+  it("uses the picker for a known system id", () => {
+    expect(
+      shouldStartManual({ value: "payments-api", knownSystemIds: known }),
+    ).toBe(false);
+  });
+
+  it("falls back to manual entry for an unknown id (preserves round-trip)", () => {
+    expect(
+      shouldStartManual({ value: "future-system", knownSystemIds: known }),
+    ).toBe(true);
+  });
+
+  it("falls back to manual entry for a template", () => {
+    expect(
+      shouldStartManual({
+        value: "{{ trigger.payload.system }}",
+        knownSystemIds: known,
+      }),
+    ).toBe(true);
+  });
+
+  it("treats a template as manual even against an empty catalog", () => {
+    expect(
+      shouldStartManual({ value: "{{ x }}", knownSystemIds: new Set() }),
+    ).toBe(true);
+  });
+});

package/src/editor/SystemEntityPicker.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { Pencil, List } from "lucide-react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { CatalogApi } from "@checkstack/catalog-common";
+import { Button, Input } from "@checkstack/ui";
+import { ItemPicker } from "./ItemPicker";
+import { shouldStartManual } from "./system-entity-picker.logic";
+
+export interface SystemEntityPickerProps {
+  /** Current entity value — a catalog system id, or a free-form id / template. */
+  value: string;
+  onChange: (next: string) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Live system picker for a `state` condition's `entity`. Backed by the
+ * catalog `getSystems` RPC so an operator picks from the registered systems
+ * instead of typing a raw id.
+ *
+ * Keeps a manual-entry fallback: an id not present in the catalog (e.g. a
+ * system that will exist at run time, or a `{{ … }}` template) must still
+ * round-trip losslessly, so the picker switches to a plain text input when
+ * the current value isn't a known system id, and an explicit toggle lets the
+ * operator force manual entry. The value is always a bare string either way,
+ * so the saved `definition` is unchanged.
+ */
+export const SystemEntityPicker: React.FC<SystemEntityPickerProps> = ({
+  value,
+  onChange,
+  disabled,
+}) => {
+  const catalogClient = usePluginClient(CatalogApi);
+  const { data } = catalogClient.getSystems.useQuery({});
+  const systems = React.useMemo(() => data?.systems ?? [], [data]);
+
+  const items = React.useMemo(
+    () =>
+      systems.map((system) => ({
+        id: system.id,
+        label: system.name,
+        description: system.id,
+      })),
+    [systems],
+  );
+
+  // Drop to manual entry for templates or ids that aren't (yet) in the
+  // catalog so the value still round-trips; an explicit toggle also forces
+  // it. A blank value defaults to the picker (the common case).
+  const [manual, setManual] = React.useState(() =>
+    shouldStartManual({
+      value,
+      knownSystemIds: new Set(systems.map((system) => system.id)),
+    }),
+  );
+
+  if (manual) {
+    return (
+      <div className="flex items-center gap-2">
+        <Input
+          className="font-mono text-xs"
+          value={value}
+          placeholder="payments-api or {{ trigger.payload.system }}"
+          onChange={(event) => onChange(event.target.value)}
+          disabled={disabled}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0"
+          onClick={() => setManual(false)}
+          disabled={disabled}
+          aria-label="Pick from catalog systems"
+          title="Pick from catalog systems"
+        >
+          <List className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1">
+        <ItemPicker
+          items={items}
+          value={value || undefined}
+          onSelect={onChange}
+          placeholder="Pick a system"
+          emptyText="No systems in the catalog"
+          disabled={disabled}
+        />
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8 shrink-0"
+        onClick={() => setManual(true)}
+        disabled={disabled}
+        aria-label="Enter a system id or template manually"
+        title="Enter a system id or template manually"
+      >
+        <Pencil className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+};