@checkstack/automation-frontend 0.2.0

package/src/editor/AddActionDialog.tsx

@@ -0,0 +1,225 @@
+import React from "react";
+import { Plus, Search, Zap } from "lucide-react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DynamicIcon,
+  Input,
+  TabPanel,
+  Tabs,
+} from "@checkstack/ui";
+import { ACTION_KIND_META, type ActionKind } from "./action-helpers";
+import { useAutomationRegistry } from "./registry-context";
+
+/**
+ * Building blocks shown in the "Blocks" tab — every action kind except the
+ * generic provider `action`. Concrete provider actions are chosen directly
+ * from the "Actions" tab (which presets the step's `action`), so the kind is
+ * always decided up front rather than swapped on an existing step.
+ */
+const BLOCK_KINDS: ActionKind[] = [
+  "choose",
+  "parallel",
+  "repeat",
+  "sequence",
+  "condition",
+  "delay",
+  "stop",
+  "variables",
+  "wait_for_trigger",
+];
+
+const TAB_ITEMS = [
+  { id: "actions", label: "Actions" },
+  { id: "blocks", label: "Blocks" },
+];
+
+/** Shared row used by both tabs — icon, name, description, and a `+` affordance. */
+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>
+);
+
+export interface AddActionDialogProps {
+  /** Insert a building-block step of the given kind. */
+  onAddKind: (kind: ActionKind) => void;
+  /** Insert a provider-action step with its `action` preset to this id. */
+  onAddAction: (qualifiedId: string) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Home-Assistant-style step picker. The operator decides the step's type up
+ * front: pick a concrete provider action (grouped by category) from the
+ * "Actions" tab, or a structural building block from the "Blocks" tab. A
+ * single search filters whichever tab is active.
+ */
+export const AddActionDialog: React.FC<AddActionDialogProps> = ({
+  onAddKind,
+  onAddAction,
+  disabled,
+}) => {
+  const { actions } = useAutomationRegistry();
+  const [open, setOpen] = React.useState(false);
+  const [tab, setTab] = React.useState("actions");
+  const [query, setQuery] = React.useState("");
+
+  // Reset transient state whenever the dialog closes so it reopens clean.
+  React.useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setTab("actions");
+    }
+  }, [open]);
+
+  const q = query.trim().toLowerCase();
+
+  const filteredActions = React.useMemo(() => {
+    if (!q) return actions;
+    return actions.filter(
+      (action) =>
+        action.displayName.toLowerCase().includes(q) ||
+        action.qualifiedId.toLowerCase().includes(q) ||
+        action.description?.toLowerCase().includes(q) ||
+        action.category.toLowerCase().includes(q),
+    );
+  }, [actions, q]);
+
+  const groupedActions = React.useMemo(() => {
+    const groups = new Map<string, typeof actions>();
+    for (const action of filteredActions) {
+      const list = groups.get(action.category) ?? [];
+      list.push(action);
+      groups.set(action.category, list);
+    }
+    return [...groups.entries()].toSorted(([a], [b]) => a.localeCompare(b));
+  }, [filteredActions]);
+
+  const filteredBlocks = React.useMemo(() => {
+    if (!q) return BLOCK_KINDS;
+    return BLOCK_KINDS.filter((kind) => {
+      const meta = ACTION_KIND_META[kind];
+      return (
+        meta.label.toLowerCase().includes(q) ||
+        meta.description.toLowerCase().includes(q)
+      );
+    });
+  }, [q]);
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={disabled}
+        className="h-7 text-xs"
+        onClick={() => setOpen(true)}
+      >
+        <Plus className="mr-1 h-3 w-3" />
+        Add step
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent size="lg">
+          <DialogHeader>
+            <DialogTitle>Add action</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-3">
+            <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={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search actions and blocks…"
+                className="pl-9"
+              />
+            </div>
+
+            <Tabs items={TAB_ITEMS} activeTab={tab} onTabChange={setTab} />
+
+            <div className="max-h-[50vh] overflow-y-auto pr-1">
+              <TabPanel id="actions" activeTab={tab}>
+                {groupedActions.length === 0 ? (
+                  <p className="px-1 py-6 text-center text-xs italic text-muted-foreground">
+                    No matching actions. Looking for choose / repeat / delay?
+                    Check the Blocks tab.
+                  </p>
+                ) : (
+                  <div className="space-y-3">
+                    {groupedActions.map(([category, list]) => (
+                      <div key={category} className="space-y-1">
+                        <p className="px-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                          {category}
+                        </p>
+                        {list.map((action) => (
+                          <PickerRow
+                            key={action.qualifiedId}
+                            icon={<Zap className="h-4 w-4" />}
+                            title={action.displayName}
+                            description={action.description}
+                            onClick={() => {
+                              onAddAction(action.qualifiedId);
+                              setOpen(false);
+                            }}
+                          />
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TabPanel>
+
+              <TabPanel id="blocks" activeTab={tab}>
+                {filteredBlocks.length === 0 ? (
+                  <p className="px-1 py-6 text-center text-xs italic text-muted-foreground">
+                    No matching blocks.
+                  </p>
+                ) : (
+                  <div className="space-y-1">
+                    {filteredBlocks.map((kind) => {
+                      const meta = ACTION_KIND_META[kind];
+                      return (
+                        <PickerRow
+                          key={kind}
+                          icon={<DynamicIcon name={meta.icon} className="h-4 w-4" />}
+                          title={meta.label}
+                          description={meta.description}
+                          onClick={() => {
+                            onAddKind(kind);
+                            setOpen(false);
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+              </TabPanel>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

package/src/editor/AutomationDefinitionContext.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import type { AutomationDefinition } from "@checkstack/automation-common";
+
+/**
+ * Threads the live `AutomationDefinition` through the editor tree so
+ * recursively-rendered cards can resolve their variable scope against
+ * the latest state without prop-drilling. Updated by the top-level
+ * `AutomationDefinitionEditor` on every edit.
+ */
+interface AutomationDefinitionContextValue {
+  definition: AutomationDefinition;
+}
+
+const AutomationDefinitionContext =
+  React.createContext<AutomationDefinitionContextValue | null>(null);
+
+export const AutomationDefinitionProvider: React.FC<{
+  definition: AutomationDefinition;
+  children: React.ReactNode;
+}> = ({ definition, children }) => {
+  const value = React.useMemo(() => ({ definition }), [definition]);
+  return (
+    <AutomationDefinitionContext.Provider value={value}>
+      {children}
+    </AutomationDefinitionContext.Provider>
+  );
+};
+
+export function useAutomationDefinitionContext(): AutomationDefinitionContextValue {
+  const ctx = React.useContext(AutomationDefinitionContext);
+  if (!ctx) {
+    throw new Error(
+      "useAutomationDefinitionContext must be used inside <AutomationDefinitionProvider>",
+    );
+  }
+  return ctx;
+}

package/src/editor/AutomationDefinitionEditor.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
+import type { AutomationDefinition } from "@checkstack/automation-common";
+import {
+  AutomationDefinitionProvider,
+} from "./AutomationDefinitionContext";
+import {
+  AutomationRegistryProvider,
+  useAutomationRegistry,
+  useVariableScope,
+} from "./registry-context";
+import { TriggersEditor } from "./TriggersEditor";
+import { ConditionsEditor } from "./ConditionsEditor";
+import { ActionListEditor } from "./ActionListEditor";
+
+export interface AutomationDefinitionEditorProps {
+  value: AutomationDefinition;
+  onChange: (next: AutomationDefinition) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Top-level visual editor for an `AutomationDefinition`. Composes the
+ * three sections (triggers, pre-run conditions, actions) and threads
+ * the live definition through the registry + definition contexts so
+ * every nested template field can resolve its scope independently.
+ *
+ * Pure composition — no internal state. The parent (`AutomationEditPage`)
+ * owns the definition and decides when to save.
+ */
+export const AutomationDefinitionEditor: React.FC<
+  AutomationDefinitionEditorProps
+> = (props) => (
+  <AutomationRegistryProvider>
+    <AutomationDefinitionProvider definition={props.value}>
+      <EditorBody {...props} />
+    </AutomationDefinitionProvider>
+  </AutomationRegistryProvider>
+);
+
+const EditorBody: React.FC<AutomationDefinitionEditorProps> = ({
+  value,
+  onChange,
+  disabled,
+}) => {
+  const { loading } = useAutomationRegistry();
+
+  // Scope at the root path = `trigger.*` only. The conditions editor
+  // uses `variableNodes` for the explicit "fx" tree and
+  // `expressionCompletion` for the staged inline autocomplete (bare
+  // expression mode — pre-run conditions aren't `{{ }}`-wrapped).
+  const { variableNodes, expressionCompletion } = useVariableScope({
+    definition: value,
+    path: [{ slot: "root", index: 0 }],
+  });
+
+  return (
+    <div className="space-y-4">
+      {loading && (
+        <Card className="border-dashed">
+          <CardContent className="p-3">
+            <p className="text-xs italic text-muted-foreground">
+              Loading registry…
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      <TriggersEditor
+        value={value.triggers}
+        onChange={(triggers) => onChange({ ...value, triggers })}
+        disabled={disabled}
+      />
+
+      <ConditionsEditor
+        value={value.conditions}
+        onChange={(conditions) => onChange({ ...value, conditions })}
+        variableNodes={variableNodes}
+        completionProvider={expressionCompletion}
+        disabled={disabled}
+      />
+
+      <Card>
+        <CardHeader className="border-b">
+          <CardTitle className="text-base">Actions</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 p-3">
+          <ActionListEditor
+            value={value.actions}
+            onChange={(actions) => onChange({ ...value, actions })}
+            parentPath={[]}
+            slotForChildren={{ slot: "root" }}
+            disabled={disabled}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/editor/ConditionEditor.tsx

@@ -0,0 +1,218 @@
+import React from "react";
+import { Plus, Trash2 } from "lucide-react";
+import {
+  Button,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TemplateValueInput,
+  VariablePicker,
+  type TemplateCompletionProvider,
+  type VariableNode,
+} from "@checkstack/ui";
+import type { ConditionInput } from "@checkstack/automation-common";
+
+type CombinatorKind = "expr" | "and" | "or" | "not";
+
+function kindOf(condition: ConditionInput): CombinatorKind {
+  if (typeof condition === "string") return "expr";
+  if ("and" in condition) return "and";
+  if ("or" in condition) return "or";
+  return "not";
+}
+
+function defaultForKind(kind: CombinatorKind): ConditionInput {
+  switch (kind) {
+    case "expr": {
+      return "";
+    }
+    case "and": {
+      return { and: [""] };
+    }
+    case "or": {
+      return { or: [""] };
+    }
+    case "not": {
+      return { not: "" };
+    }
+  }
+}
+
+export interface ConditionEditorProps {
+  value: ConditionInput;
+  onChange: (next: ConditionInput) => void;
+  variableNodes: VariableNode[];
+  /**
+   * Staged completion provider (expression mode) for the inline
+   * expression input. Conditions are bare expressions — no `{{ }}`
+   * wrapper — so this is the `expressionCompletion` from
+   * `useVariableScope`. The hierarchical `variableNodes` powers the
+   * explicit "fx" picker.
+   */
+  completionProvider: TemplateCompletionProvider;
+  /** Render without the wrapping card — used when inlining inside an action card. */
+  bare?: boolean;
+  depth?: number;
+}
+
+/**
+ * Recursive editor over the `ConditionInput` discriminated union
+ * (`string | { and } | { or } | { not }`). Each level renders:
+ *
+ *   - A kind selector ("expression" | "and" | "or" | "not").
+ *   - The matching body:
+ *       expr → TemplateValueInput with `{{` autocomplete + the
+ *              VariablePicker "fx" trigger inline.
+ *       and / or → list of child conditions with add/remove buttons,
+ *                  each child rendered through this same component.
+ *       not → single child condition.
+ *
+ * No depth cap — operator can nest arbitrarily, mirroring the runtime.
+ */
+export const ConditionEditor: React.FC<ConditionEditorProps> = ({
+  value,
+  onChange,
+  variableNodes,
+  completionProvider,
+  bare,
+  depth = 0,
+}) => {
+  const kind = kindOf(value);
+
+  const body = (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Select
+          value={kind}
+          onValueChange={(next) =>
+            onChange(defaultForKind(next as CombinatorKind))
+          }
+        >
+          <SelectTrigger className="h-7 w-32 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="expr">expression</SelectItem>
+            <SelectItem value="and">and</SelectItem>
+            <SelectItem value="or">or</SelectItem>
+            <SelectItem value="not">not</SelectItem>
+          </SelectContent>
+        </Select>
+        {kind === "expr" && (
+          <VariablePicker
+            scope={variableNodes}
+            onSelect={(path) => {
+              // Conditions are bare expressions — insert the raw path,
+              // not a `{{ … }}`-wrapped reference.
+              const before = typeof value === "string" ? value : "";
+              const sep = before.length > 0 && !before.endsWith(" ") ? " " : "";
+              onChange(`${before}${sep}${path}`);
+            }}
+          />
+        )}
+      </div>
+
+      {kind === "expr" && (
+        <TemplateValueInput
+          value={typeof value === "string" ? value : ""}
+          onChange={(next) => onChange(next)}
+          placeholder="trigger.payload.severity == &quot;high&quot;"
+          completionProvider={completionProvider}
+        />
+      )}
+
+      {(kind === "and" || kind === "or") && (
+        <CombinatorList
+          kind={kind}
+          children={
+            kind === "and"
+              ? (value as { and: ConditionInput[] }).and
+              : (value as { or: ConditionInput[] }).or
+          }
+          onChange={(nextChildren) =>
+            onChange(
+              kind === "and"
+                ? { and: nextChildren }
+                : { or: nextChildren },
+            )
+          }
+          variableNodes={variableNodes}
+          completionProvider={completionProvider}
+          depth={depth + 1}
+        />
+      )}
+
+      {kind === "not" && (
+        <ConditionEditor
+          value={(value as { not: ConditionInput }).not}
+          onChange={(next) => onChange({ not: next })}
+          variableNodes={variableNodes}
+          completionProvider={completionProvider}
+          bare
+          depth={depth + 1}
+        />
+      )}
+    </div>
+  );
+
+  if (bare) return body;
+  return (
+    <Card>
+      <CardContent className="p-3">{body}</CardContent>
+    </Card>
+  );
+};
+
+const CombinatorList: React.FC<{
+  kind: "and" | "or";
+  children: ConditionInput[];
+  onChange: (next: ConditionInput[]) => void;
+  variableNodes: VariableNode[];
+  completionProvider: TemplateCompletionProvider;
+  depth: number;
+}> = ({ children: items, onChange, variableNodes, completionProvider, depth }) => (
+  <div className="space-y-2 border-l border-border pl-3">
+    {items.map((child, index) => (
+      <div key={index} className="flex items-start gap-2">
+        <div className="flex-1">
+          <ConditionEditor
+            value={child}
+            onChange={(next) => {
+              const nextChildren = [...items];
+              nextChildren[index] = next;
+              onChange(nextChildren);
+            }}
+            variableNodes={variableNodes}
+            completionProvider={completionProvider}
+            bare
+            depth={depth}
+          />
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 text-destructive hover:bg-destructive/10"
+          onClick={() => onChange(items.filter((_, i) => i !== index))}
+          aria-label="Remove condition"
+        >
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      </div>
+    ))}
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      onClick={() => onChange([...items, ""])}
+      className="h-7 text-xs"
+    >
+      <Plus className="mr-1 h-3 w-3" />
+      Add clause
+    </Button>
+  </div>
+);

package/src/editor/ConditionsEditor.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Plus, Trash2 } from "lucide-react";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  type TemplateCompletionProvider,
+  type VariableNode,
+} from "@checkstack/ui";
+import type { ConditionInput } from "@checkstack/automation-common";
+import { ConditionEditor } from "./ConditionEditor";
+
+/**
+ * Top-level pre-run conditions. Every condition in this list must pass
+ * for the actions section to even start — same semantics as Home
+ * Assistant's `condition:` block.
+ *
+ * Each condition reuses the recursive `ConditionEditor`, so combinators
+ * (`and` / `or` / `not`) nest the same way they do inside an inline
+ * `choose: when` clause.
+ *
+ * Variable scope at this point is just `trigger.*` — no upstream
+ * variables or artifacts exist before the action list starts. We get
+ * that scope from the same `useVariableScope` hook by passing the root
+ * path; the parent computes it once and threads it down here.
+ */
+export const ConditionsEditor: React.FC<{
+  value: ConditionInput[];
+  onChange: (next: ConditionInput[]) => void;
+  variableNodes: VariableNode[];
+  completionProvider: TemplateCompletionProvider;
+  disabled?: boolean;
+}> = ({ 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>
+    </CardHeader>
+    <CardContent className="space-y-2 p-3">
+      {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>
+        ))
+      )}
+    </CardContent>
+  </Card>
+);