@checkstack/automation-frontend 0.2.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@checkstack/automation-frontend",
+  "version": "0.2.0",
+  "license": "Elastic-2.0",
+  "type": "module",
+  "main": "src/index.tsx",
+  "checkstack": {
+    "type": "frontend"
+  },
+  "scripts": {
+    "typecheck": "tsgo -b",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkstack/automation-common": "0.1.0",
+    "@checkstack/common": "0.11.0",
+    "@checkstack/frontend-api": "0.5.2",
+    "@checkstack/integration-common": "0.5.0",
+    "@checkstack/signal-frontend": "0.1.4",
+    "@checkstack/template-engine": "0.1.0",
+    "@checkstack/ui": "1.10.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "yaml": "^2.6.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkstack/tsconfig": "0.0.7",
+    "@checkstack/scripts": "0.3.3"
+  }
+}

package/src/components/AutomationMenuItems.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Workflow } from "lucide-react";
+import type { UserMenuItemsContext } from "@checkstack/frontend-api";
+import { DropdownMenuItem } from "@checkstack/ui";
+import { resolveRoute } from "@checkstack/common";
+import {
+  automationRoutes,
+  automationAccess,
+  pluginMetadata,
+} from "@checkstack/automation-common";
+
+/**
+ * "Automations" entry in the user menu. Only renders for users with
+ * `automation.read` access — mirrors `incident-frontend`'s pattern of
+ * gating the menu item rather than the underlying route (the route is
+ * also access-gated by `createFrontendPlugin`, but hiding the link is
+ * the cleaner UX for unauthorised users).
+ */
+export const AutomationMenuItems = ({
+  accessRules: userPerms,
+}: UserMenuItemsContext) => {
+  const qualifiedId = `${pluginMetadata.pluginId}.${automationAccess.read.id}`;
+  const canRead = userPerms.includes("*") || userPerms.includes(qualifiedId);
+
+  if (!canRead) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Link to={resolveRoute(automationRoutes.routes.list)}>
+      <DropdownMenuItem icon={<Workflow className="w-4 h-4" />}>
+        Automations
+      </DropdownMenuItem>
+    </Link>
+  );
+};

package/src/editor/ActionEditor.tsx

@@ -0,0 +1,367 @@
+import React from "react";
+import {
+  ActionCard,
+  Checkbox,
+  cn,
+  Input,
+  Label,
+} from "@checkstack/ui";
+import type {
+  ActionInput,
+  ActionPath,
+  AutomationDefinition,
+  ChooseInput,
+  ConditionGuardInput,
+  DelayInput,
+  ParallelInput,
+  ProviderAction,
+  RepeatInput,
+  SequenceInput,
+  StopInput,
+  VariablesInput,
+  WaitForTriggerInput,
+} from "@checkstack/automation-common";
+import {
+  ACTION_KIND_META,
+  actionDisplayName,
+  actionKindOf,
+  collectActionIds,
+  defaultActionId,
+} from "./action-helpers";
+import { useAutomationRegistry, useVariableScope } from "./registry-context";
+import { useActionIssues } from "./editor-validation";
+import {
+  ConditionGuardActionBody,
+  DelayActionBody,
+  ProviderActionBody,
+  StopActionBody,
+  VariablesActionBody,
+  WaitForTriggerActionBody,
+} from "./action-leaf-cards";
+import {
+  ChooseActionBody,
+  ParallelActionBody,
+  RepeatActionBody,
+  SequenceActionBody,
+} from "./action-composite-cards";
+
+export interface ActionEditorProps {
+  value: ActionInput;
+  onChange: (next: ActionInput) => void;
+  onDelete: () => void;
+  path: ActionPath;
+  definition: AutomationDefinition;
+  dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
+  stableId: string;
+  disabled?: boolean;
+}
+
+/**
+ * Compact, uppercase "eyebrow" label for the action's secondary metadata
+ * fields (type / id / description / failure behaviour). Deliberately
+ * smaller and quieter than the `DynamicForm` config field labels so the
+ * action's own configuration stays the focal point of the card.
+ */
+const MetaField: React.FC<{
+  label: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+}> = ({ label, htmlFor, children }) => (
+  <div className="space-y-1.5">
+    <label
+      htmlFor={htmlFor}
+      className="block text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
+    >
+      {label}
+    </label>
+    {children}
+  </div>
+);
+
+/**
+ * Dispatch component — given an `ActionInput`, picks the right card
+ * body and wraps it in a shared `ActionCard` from `@checkstack/ui` so
+ * every action has the same collapsible header, enable toggle, drag
+ * handle, and delete button.
+ *
+ * Re-deriving the kind on every render is fine: the discriminator is
+ * structural and cheap to check.
+ */
+export const ActionEditor: React.FC<ActionEditorProps> = ({
+  value,
+  onChange,
+  onDelete,
+  path,
+  definition,
+  dragHandleProps,
+  stableId,
+  disabled,
+}) => {
+  const { actions } = useAutomationRegistry();
+  const kind = actionKindOf(value);
+  const meta = ACTION_KIND_META[kind];
+  const {
+    templateProperties,
+    variableNodes,
+    templateCompletion,
+    expressionCompletion,
+    typeDefinitions,
+    shellEnvVars,
+  } = useVariableScope({
+    definition,
+    path,
+  });
+
+  const title = actionDisplayName(value, (qualified) =>
+    actions.find((a) => a.qualifiedId === qualified)?.displayName,
+  );
+
+  const description =
+    value.description ?? (value.id ? `id: ${value.id}` : undefined);
+
+  const enabledValue = value.enabled !== false;
+  const issues = useActionIssues(path);
+
+  return (
+    <ActionCard
+      id={stableId}
+      title={title}
+      description={description}
+      category={meta.label}
+      icon={meta.icon}
+      enabled={enabledValue}
+      onEnabledChange={
+        disabled
+          ? undefined
+          : (next) => onChange({ ...value, enabled: next })
+      }
+      onDelete={disabled ? undefined : onDelete}
+      dragHandleProps={disabled ? undefined : dragHandleProps}
+      errors={issues}
+    >
+      <div className="space-y-4">
+        {/* Action settings — identity and failure behaviour. Grouped in a
+            quiet panel and labelled with small uppercase eyebrows so the
+            action's own configuration below reads as the primary content of
+            the card rather than competing with it. The action's kind is
+            fixed at creation; to change it, add a new step and delete this
+            one. */}
+        <div className="rounded-lg border border-border/60 bg-muted/20 p-3 space-y-3">
+          <div className="grid gap-x-4 gap-y-3 sm:grid-cols-2">
+            <MetaField label="Id" htmlFor={`${stableId}-id`}>
+              <Input
+                id={`${stableId}-id`}
+                value={value.id ?? ""}
+                onChange={(event) =>
+                  onChange({ ...value, id: event.target.value || undefined })
+                }
+                onBlur={() => {
+                  // Never leave the id blank: re-fill a unique, log-friendly
+                  // default so the action stays referenceable
+                  // (artifacts.<id>.<name>) and parseable in run logs.
+                  if (value.id) return;
+                  const taken = collectActionIds(definition.actions);
+                  onChange({ ...value, id: defaultActionId(value, taken) });
+                }}
+                placeholder="Generated on blur"
+                disabled={disabled}
+                className="h-8 text-xs"
+              />
+            </MetaField>
+
+            <MetaField label="Description" htmlFor={`${stableId}-desc`}>
+              <Input
+                id={`${stableId}-desc`}
+                value={value.description ?? ""}
+                onChange={(event) =>
+                  onChange({
+                    ...value,
+                    description: event.target.value || undefined,
+                  })
+                }
+                placeholder="Optional note"
+                disabled={disabled}
+                className="h-8 text-xs"
+              />
+            </MetaField>
+          </div>
+
+          <MetaField label="On failure">
+            <div
+              className={cn(
+                "flex h-8 items-center gap-2 select-none",
+                disabled ? "cursor-not-allowed" : "cursor-pointer",
+              )}
+              onClick={() =>
+                !disabled &&
+                onChange({
+                  ...value,
+                  continue_on_error: value.continue_on_error !== true,
+                })
+              }
+            >
+              <Checkbox
+                checked={value.continue_on_error === true}
+                disabled={disabled}
+              />
+              <Label className="text-xs font-normal text-muted-foreground cursor-pointer">
+                Continue on error
+              </Label>
+            </div>
+          </MetaField>
+        </div>
+
+        <ActionBody
+          kind={kind}
+          value={value}
+          onChange={onChange}
+          path={path}
+          templateProperties={templateProperties}
+          variableNodes={variableNodes}
+          templateCompletion={templateCompletion}
+          expressionCompletion={expressionCompletion}
+          typeDefinitions={typeDefinitions}
+          shellEnvVars={shellEnvVars}
+          disabled={disabled}
+        />
+      </div>
+    </ActionCard>
+  );
+};
+
+const ActionBody: React.FC<{
+  kind: ReturnType<typeof actionKindOf>;
+  value: ActionInput;
+  onChange: (next: ActionInput) => void;
+  path: ActionPath;
+  templateProperties: Array<{ path: string; type: string; description?: string }>;
+  variableNodes: Parameters<typeof ConditionGuardActionBody>[0]["variableNodes"];
+  templateCompletion: Parameters<typeof DelayActionBody>[0]["completionProvider"];
+  expressionCompletion: Parameters<
+    typeof ConditionGuardActionBody
+  >[0]["completionProvider"];
+  typeDefinitions: string;
+  shellEnvVars: Parameters<typeof ProviderActionBody>[0]["shellEnvVars"];
+  disabled?: boolean;
+}> = ({
+  kind,
+  value,
+  onChange,
+  path,
+  templateProperties,
+  variableNodes,
+  templateCompletion,
+  expressionCompletion,
+  typeDefinitions,
+  shellEnvVars,
+  disabled,
+}) => {
+  switch (kind) {
+    case "action": {
+      return (
+        <ProviderActionBody
+          value={value as ProviderAction}
+          onChange={(next) => onChange(next)}
+          templateProperties={templateProperties}
+          completionProvider={templateCompletion}
+          typeDefinitions={typeDefinitions}
+          shellEnvVars={shellEnvVars}
+          disabled={disabled}
+        />
+      );
+    }
+    case "choose": {
+      return (
+        <ChooseActionBody
+          value={value as ChooseInput}
+          onChange={(next) => onChange(next)}
+          path={path}
+          variableNodes={variableNodes}
+          expressionCompletion={expressionCompletion}
+          disabled={disabled}
+        />
+      );
+    }
+    case "parallel": {
+      return (
+        <ParallelActionBody
+          value={value as ParallelInput}
+          onChange={(next) => onChange(next)}
+          path={path}
+          disabled={disabled}
+        />
+      );
+    }
+    case "repeat": {
+      return (
+        <RepeatActionBody
+          value={value as RepeatInput}
+          onChange={(next) => onChange(next)}
+          path={path}
+          completionProvider={templateCompletion}
+          disabled={disabled}
+        />
+      );
+    }
+    case "variables": {
+      return (
+        <VariablesActionBody
+          value={value as VariablesInput}
+          onChange={(next) => onChange(next)}
+          templateProperties={templateProperties}
+          disabled={disabled}
+        />
+      );
+    }
+    case "condition": {
+      return (
+        <ConditionGuardActionBody
+          value={value as ConditionGuardInput}
+          onChange={(next) => onChange(next)}
+          variableNodes={variableNodes}
+          completionProvider={expressionCompletion}
+          disabled={disabled}
+        />
+      );
+    }
+    case "stop": {
+      return (
+        <StopActionBody
+          value={value as StopInput}
+          onChange={(next) => onChange(next)}
+          disabled={disabled}
+        />
+      );
+    }
+    case "wait_for_trigger": {
+      return (
+        <WaitForTriggerActionBody
+          value={value as WaitForTriggerInput}
+          onChange={(next) => onChange(next)}
+          completionProvider={templateCompletion}
+          disabled={disabled}
+        />
+      );
+    }
+    case "sequence": {
+      return (
+        <SequenceActionBody
+          value={value as SequenceInput}
+          onChange={(next) => onChange(next)}
+          path={path}
+          disabled={disabled}
+        />
+      );
+    }
+    case "delay": {
+      return (
+        <DelayActionBody
+          value={value as DelayInput}
+          onChange={(next) => onChange(next)}
+          completionProvider={templateCompletion}
+          disabled={disabled}
+        />
+      );
+    }
+  }
+};

package/src/editor/ActionListEditor.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+import {
+  DndContext,
+  type DragEndEvent,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type {
+  ActionInput,
+  ActionPath,
+  ActionPathStep,
+} from "@checkstack/automation-common";
+import {
+  assignDefaultIds,
+  collectActionIds,
+  makeEmptyAction,
+  makeProviderAction,
+} from "./action-helpers";
+import { ActionEditor } from "./ActionEditor";
+import { AddActionDialog } from "./AddActionDialog";
+import { useAutomationDefinitionContext } from "./AutomationDefinitionContext";
+
+type Slot = ActionPathStep["slot"];
+
+export interface ActionListEditorProps {
+  value: ActionInput[];
+  onChange: (next: ActionInput[]) => void;
+  /** Path of the parent action — empty array means we're at the root. */
+  parentPath: ActionPath;
+  /**
+   * Describes which child slot of the parent contains this list. Drives
+   * `ActionPathStep`s for nested resolution. Use `{ slot: "root" }` at the
+   * top of the editor; composite cards pass their own (`"choose-when"` with
+   * `whenIndex`, `"parallel"`, `"repeat"`, `"sequence"`, `"choose-else"`).
+   */
+  slotForChildren: { slot: Slot; whenIndex?: number };
+  disabled?: boolean;
+}
+
+let idCounter = 0;
+const nextId = (): string => {
+  idCounter += 1;
+  return `act-${idCounter}`;
+};
+
+/**
+ * Sortable list of actions. The hard parts:
+ *
+ *   1. **Drag-to-reorder** — we pair every value-slot with a stable
+ *      `string` id (kept in a parallel array). Reorders shuffle both
+ *      arrays together; edits don't touch the id array, so each card's
+ *      expanded-state survives parent re-renders.
+ *
+ *   2. **Path computation** — each child's `ActionPath` is the parent
+ *      path plus a final segment describing the child's position. The
+ *      segment's `slot` comes from `slotForChildren`; the `index` is
+ *      the child's position in the array.
+ *
+ *   3. **Add menu** — `AddActionDialog` lets the operator decide the
+ *      step's type up front: a concrete provider action (preset via
+ *      `makeProviderAction`) or a structural building block. Composite
+ *      kinds start with an empty child list, which the operator fills via
+ *      the nested add-step picker.
+ */
+export const ActionListEditor: React.FC<ActionListEditorProps> = ({
+  value,
+  onChange,
+  parentPath,
+  slotForChildren,
+  disabled,
+}) => {
+  const { definition } = useAutomationDefinitionContext();
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+  );
+
+  // Parallel id array; kept in sync with `value`'s length so reorders +
+  // add + delete are stable, while in-place edits don't churn keys.
+  const [ids, setIds] = React.useState<string[]>(() => value.map(() => nextId()));
+  React.useEffect(() => {
+    setIds((current) => {
+      if (current.length === value.length) return current;
+      if (current.length < value.length) {
+        return [
+          ...current,
+          ...Array.from({ length: value.length - current.length }, nextId),
+        ];
+      }
+      return current.slice(0, value.length);
+    });
+  }, [value.length]);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    if (!event.over || event.active.id === event.over.id) return;
+    const oldIndex = ids.indexOf(String(event.active.id));
+    const newIndex = ids.indexOf(String(event.over.id));
+    if (oldIndex === -1 || newIndex === -1) return;
+    setIds(arrayMove(ids, oldIndex, newIndex));
+    onChange(arrayMove(value, oldIndex, newIndex));
+  };
+
+  const childPathAt = (index: number): ActionPath => [
+    ...parentPath,
+    {
+      slot: slotForChildren.slot,
+      whenIndex: slotForChildren.whenIndex,
+      index,
+    },
+  ];
+
+  const appendStep = (action: ActionInput): void => {
+    // Auto-assign log-friendly default ids (deduped against every id already
+    // used anywhere in the automation), covering the new step and any
+    // children composite kinds prime themselves with. The operator can
+    // rename them in the card.
+    const taken = collectActionIds(definition.actions);
+    const [fresh] = assignDefaultIds([action], taken);
+    onChange([...value, fresh!]);
+    setIds((current) => [...current, nextId()]);
+  };
+
+  return (
+    <div className="space-y-2">
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+          {value.map((action, index) => (
+            <SortableActionItem
+              key={ids[index]}
+              id={ids[index]!}
+              value={action}
+              onChange={(next) => {
+                const list = [...value];
+                list[index] = next;
+                onChange(list);
+              }}
+              onDelete={() => {
+                onChange(value.filter((_, i) => i !== index));
+                setIds((current) => current.filter((_, i) => i !== index));
+              }}
+              path={childPathAt(index)}
+              definition={definition}
+              disabled={disabled}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+      {value.length === 0 && (
+        <p className="text-xs italic text-muted-foreground">No steps yet.</p>
+      )}
+      <AddActionDialog
+        disabled={disabled}
+        onAddKind={(kind) => appendStep(makeEmptyAction(kind))}
+        onAddAction={(qualifiedId) => appendStep(makeProviderAction(qualifiedId))}
+      />
+    </div>
+  );
+};
+
+const SortableActionItem: React.FC<{
+  id: string;
+  value: ActionInput;
+  onChange: (next: ActionInput) => void;
+  onDelete: () => void;
+  path: ActionPath;
+  definition: Parameters<typeof ActionEditor>[0]["definition"];
+  disabled?: boolean;
+}> = ({ id, value, onChange, onDelete, path, definition, disabled }) => {
+  const sortable = useSortable({ id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(sortable.transform),
+    transition: sortable.transition,
+  };
+  return (
+    <div ref={sortable.setNodeRef} style={style}>
+      <ActionEditor
+        value={value}
+        onChange={onChange}
+        onDelete={onDelete}
+        path={path}
+        definition={definition}
+        stableId={id}
+        dragHandleProps={{
+          ...sortable.attributes,
+          ...sortable.listeners,
+        }}
+        disabled={disabled}
+      />
+    </div>
+  );
+};