@checkstack/automation-frontend 0.2.0 → 0.4.0

package/src/editor/ActionListEditor.tsx

@@ -22,6 +22,7 @@ import type {
 import {
   assignDefaultIds,
   collectActionIds,
+  duplicateAction,
   makeEmptyAction,
   makeProviderAction,
 } from "./action-helpers";
@@ -128,6 +129,28 @@ export const ActionListEditor: React.FC<ActionListEditorProps> = ({
     setIds((current) => [...current, nextId()]);
   };
 
+  const duplicateStep = (index: number): void => {
+    const original = value[index];
+    if (!original) return;
+    // Clone with FRESH ids deduped against every id in the automation so the
+    // copy never collides with the original (or any sibling/nested step).
+    const taken = collectActionIds(definition.actions);
+    const clone = duplicateAction(original, taken);
+    // Insert directly after the original, keeping the parallel `ids` array in
+    // lockstep so each card's stable React key / drag id stays aligned.
+    const nextValue = [
+      ...value.slice(0, index + 1),
+      clone,
+      ...value.slice(index + 1),
+    ];
+    onChange(nextValue);
+    setIds((current) => [
+      ...current.slice(0, index + 1),
+      nextId(),
+      ...current.slice(index + 1),
+    ]);
+  };
+
   return (
     <div className="space-y-2">
       <DndContext
@@ -150,6 +173,7 @@ export const ActionListEditor: React.FC<ActionListEditorProps> = ({
                 onChange(value.filter((_, i) => i !== index));
                 setIds((current) => current.filter((_, i) => i !== index));
               }}
+              onDuplicate={disabled ? undefined : () => duplicateStep(index)}
               path={childPathAt(index)}
               definition={definition}
               disabled={disabled}
@@ -174,10 +198,11 @@ const SortableActionItem: React.FC<{
   value: ActionInput;
   onChange: (next: ActionInput) => void;
   onDelete: () => void;
+  onDuplicate?: () => void;
   path: ActionPath;
   definition: Parameters<typeof ActionEditor>[0]["definition"];
   disabled?: boolean;
-}> = ({ id, value, onChange, onDelete, path, definition, disabled }) => {
+}> = ({ id, value, onChange, onDelete, onDuplicate, path, definition, disabled }) => {
   const sortable = useSortable({ id });
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(sortable.transform),
@@ -189,6 +214,7 @@ const SortableActionItem: React.FC<{
         value={value}
         onChange={onChange}
         onDelete={onDelete}
+        onDuplicate={onDuplicate}
         path={path}
         definition={definition}
         stableId={id}

package/src/editor/AddActionDialog.tsx

@@ -1,17 +1,20 @@
 import React from "react";
-import { Plus, Search, Zap } from "lucide-react";
+import { 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 {
+  PickerAddButton,
+  PickerRow,
+  PickerSearchInput,
+} from "./picker-dialog";
 import { useAutomationRegistry } from "./registry-context";
 
 /**
@@ -30,6 +33,7 @@ const BLOCK_KINDS: ActionKind[] = [
   "stop",
   "variables",
   "wait_for_trigger",
+  "wait_until",
 ];
 
 const TAB_ITEMS = [
@@ -37,29 +41,6 @@ const TAB_ITEMS = [
   { 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;
@@ -128,17 +109,11 @@ export const AddActionDialog: React.FC<AddActionDialogProps> = ({
 
   return (
     <>
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
+      <PickerAddButton
+        label="Add step"
         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>
@@ -146,16 +121,11 @@ export const AddActionDialog: React.FC<AddActionDialogProps> = ({
           </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>
+            <PickerSearchInput
+              value={query}
+              onChange={setQuery}
+              placeholder="Search actions and blocks…"
+            />
 
             <Tabs items={TAB_ITEMS} activeTab={tab} onTabChange={setTab} />
 

package/src/editor/AddConditionDialog.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { DynamicIcon } from "@checkstack/ui";
+import {
+  CONDITION_KIND_META,
+  type ConditionKind,
+  type ConditionKindGroup,
+} from "./condition-kind";
+import { PickerDialogShell, PickerRow } from "./picker-dialog";
+
+export interface AddConditionDialogProps {
+  /** Append a condition of the picked kind (seeded via `defaultForKind`). */
+  onAdd: (kind: ConditionKind) => void;
+  disabled?: boolean;
+}
+
+/** Picker group order — structured first (common case), advanced last. */
+const GROUP_ORDER: ConditionKindGroup[] = ["Structured", "Logical", "Advanced"];
+
+const ALL_KINDS = Object.values(CONDITION_KIND_META);
+
+/**
+ * Home-Assistant-style condition type picker. The operator picks the condition
+ * kind up front (grouped by `CONDITION_KIND_META.group`, searchable on label /
+ * description); on pick the consumer (`ConditionsEditor`) appends a seeded
+ * default for that kind. Mirrors the Actions "Add step" picker but is
+ * single-list.
+ */
+export const AddConditionDialog: React.FC<AddConditionDialogProps> = ({
+  onAdd,
+  disabled,
+}) => (
+  <PickerDialogShell
+    addLabel="Add condition"
+    title="Add condition"
+    searchPlaceholder="Search conditions…"
+    disabled={disabled}
+  >
+    {({ query, close }) => {
+      const filtered = query
+        ? ALL_KINDS.filter(
+            (meta) =>
+              meta.label.toLowerCase().includes(query) ||
+              meta.description.toLowerCase().includes(query) ||
+              meta.kind.toLowerCase().includes(query),
+          )
+        : ALL_KINDS;
+
+      const grouped = GROUP_ORDER.map((group) => ({
+        group,
+        items: filtered.filter((meta) => meta.group === group),
+      })).filter(({ items }) => items.length > 0);
+
+      if (grouped.length === 0) {
+        return (
+          <p className="px-1 py-6 text-center text-xs italic text-muted-foreground">
+            No matching conditions.
+          </p>
+        );
+      }
+
+      return (
+        <div className="space-y-3">
+          {grouped.map(({ group, items }) => (
+            <div key={group} className="space-y-1">
+              <p className="px-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                {group}
+              </p>
+              {items.map((meta) => (
+                <PickerRow
+                  key={meta.kind}
+                  icon={<DynamicIcon name={meta.icon} className="h-4 w-4" />}
+                  title={meta.label}
+                  description={meta.description}
+                  onClick={() => {
+                    onAdd(meta.kind);
+                    close();
+                  }}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      );
+    }}
+  </PickerDialogShell>
+);

package/src/editor/AddTriggerDialog.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Zap } from "lucide-react";
+import { useAutomationRegistry } from "./registry-context";
+import { PickerDialogShell, PickerRow } from "./picker-dialog";
+
+export interface AddTriggerDialogProps {
+  /** Append a trigger subscribed to the picked event's qualified id. */
+  onAdd: (event: string) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Home-Assistant-style trigger type picker. The operator picks a concrete
+ * trigger event (grouped by category, searchable) up front; on pick the
+ * consumer (`TriggersEditor`) creates the trigger with a unique default id and
+ * appends it. Mirrors the Actions "Add step" picker but is single-list.
+ */
+export const AddTriggerDialog: React.FC<AddTriggerDialogProps> = ({
+  onAdd,
+  disabled,
+}) => {
+  const { triggers } = useAutomationRegistry();
+
+  const items = React.useMemo(
+    () =>
+      triggers.map((t) => ({
+        id: t.qualifiedId,
+        label: t.displayName,
+        description: t.description,
+        category: t.category,
+      })),
+    [triggers],
+  );
+
+  return (
+    <PickerDialogShell
+      addLabel="Add trigger"
+      title="Add trigger"
+      searchPlaceholder="Search triggers…"
+      disabled={disabled}
+    >
+      {({ query, close }) => {
+        const filtered = query
+          ? items.filter(
+              (item) =>
+                item.label.toLowerCase().includes(query) ||
+                item.id.toLowerCase().includes(query) ||
+                item.description?.toLowerCase().includes(query) ||
+                item.category.toLowerCase().includes(query),
+            )
+          : items;
+
+        const groups = new Map<string, typeof filtered>();
+        for (const item of filtered) {
+          const list = groups.get(item.category) ?? [];
+          list.push(item);
+          groups.set(item.category, list);
+        }
+        const grouped = [...groups.entries()].toSorted(([a], [b]) =>
+          a.localeCompare(b),
+        );
+
+        if (grouped.length === 0) {
+          return (
+            <p className="px-1 py-6 text-center text-xs italic text-muted-foreground">
+              No matching triggers.
+            </p>
+          );
+        }
+
+        return (
+          <div className="space-y-3">
+            {grouped.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((item) => (
+                  <PickerRow
+                    key={item.id}
+                    icon={<Zap className="h-4 w-4" />}
+                    title={item.label}
+                    description={item.description}
+                    onClick={() => {
+                      onAdd(item.id);
+                      close();
+                    }}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        );
+      }}
+    </PickerDialogShell>
+  );
+};

package/src/editor/AutomationDefinitionEditor.tsx

@@ -12,11 +12,29 @@ import {
 import { TriggersEditor } from "./TriggersEditor";
 import { ConditionsEditor } from "./ConditionsEditor";
 import { ActionListEditor } from "./ActionListEditor";
+import { ValidationProvider, type DefinitionIssue } from "./editor-validation";
+import { useScriptDiagnostics } from "./useScriptDiagnostics";
+import { collectScriptActions } from "./script-actions";
+import { ScriptServicesBooter } from "./ScriptServicesBooter";
 
 export interface AutomationDefinitionEditorProps {
   value: AutomationDefinition;
   onChange: (next: AutomationDefinition) => void;
   disabled?: boolean;
+  /**
+   * Id of the automation being edited, if it already exists (omitted for
+   * a brand-new, unsaved automation). Enables the script-test "Load from
+   * run" picker, which lists this automation's prior runs.
+   */
+  automationId?: string;
+  /**
+   * Structural validation issues (from the backend `validateDefinition`),
+   * merged here with the live, frontend-computed inline-script TYPE issues so
+   * both surface through the same per-card badges. Script type-checking lives
+   * inside this component because it needs the registry (trigger/action
+   * catalog) the `AutomationRegistryProvider` supplies.
+   */
+  structuralIssues?: DefinitionIssue[];
 }
 
 /**
@@ -31,7 +49,7 @@ export interface AutomationDefinitionEditorProps {
 export const AutomationDefinitionEditor: React.FC<
   AutomationDefinitionEditorProps
 > = (props) => (
-  <AutomationRegistryProvider>
+  <AutomationRegistryProvider automationId={props.automationId}>
     <AutomationDefinitionProvider definition={props.value}>
       <EditorBody {...props} />
     </AutomationDefinitionProvider>
@@ -42,8 +60,26 @@ const EditorBody: React.FC<AutomationDefinitionEditorProps> = ({
   value,
   onChange,
   disabled,
+  structuralIssues = [],
 }) => {
-  const { loading } = useAutomationRegistry();
+  const { loading, actions } = useAutomationRegistry();
+
+  // Live type-check of every inline script action (collapsed cards included),
+  // merged with the backend's structural issues so both drive the same
+  // per-card badges via `ValidationProvider`.
+  const scriptIssues = useScriptDiagnostics({ definition: value });
+  const issues = React.useMemo(
+    () => [...structuralIssues, ...scriptIssues],
+    [structuralIssues, scriptIssues],
+  );
+
+  // When the automation already contains inline scripts, boot the editor
+  // services up-front (a hidden editor) so those scripts validate the moment
+  // the automation opens - not only after a card is expanded.
+  const hasScriptActions = React.useMemo(
+    () => collectScriptActions({ definition: value, actions }).length > 0,
+    [value, actions],
+  );
 
   // Scope at the root path = `trigger.*` only. The conditions editor
   // uses `variableNodes` for the explicit "fx" tree and
@@ -55,6 +91,8 @@ const EditorBody: React.FC<AutomationDefinitionEditorProps> = ({
   });
 
   return (
+    <ValidationProvider issues={issues}>
+    {hasScriptActions && <ScriptServicesBooter />}
     <div className="space-y-4">
       {loading && (
         <Card className="border-dashed">
@@ -95,5 +133,6 @@ const EditorBody: React.FC<AutomationDefinitionEditorProps> = ({
         </CardContent>
       </Card>
     </div>
+    </ValidationProvider>
   );
 };