@checkstack/automation-frontend 0.2.0 → 0.3.0

package/src/editor/ActionEditor.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   ActionCard,
+  type ActionCardMenuItem,
   Checkbox,
   cn,
   Input,
@@ -20,6 +25,7 @@ import type {
   StopInput,
   VariablesInput,
   WaitForTriggerInput,
+  WaitUntilInput,
 } from "@checkstack/automation-common";
 import {
   ACTION_KIND_META,
@@ -28,6 +34,8 @@ import {
   collectActionIds,
   defaultActionId,
 } from "./action-helpers";
+import { summarizeAction } from "./item-summary";
+import { ItemSheet } from "./ItemSheet";
 import { useAutomationRegistry, useVariableScope } from "./registry-context";
 import { useActionIssues } from "./editor-validation";
 import {
@@ -37,6 +45,7 @@ import {
   StopActionBody,
   VariablesActionBody,
   WaitForTriggerActionBody,
+  WaitUntilActionBody,
 } from "./action-leaf-cards";
 import {
   ChooseActionBody,
@@ -49,6 +58,8 @@ export interface ActionEditorProps {
   value: ActionInput;
   onChange: (next: ActionInput) => void;
   onDelete: () => void;
+  /** Clone this action (fresh ids) directly after itself. Omit to hide. */
+  onDuplicate?: () => void;
   path: ActionPath;
   definition: AutomationDefinition;
   dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
@@ -91,6 +102,7 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
   value,
   onChange,
   onDelete,
+  onDuplicate,
   path,
   definition,
   dragHandleProps,
@@ -100,6 +112,7 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
   const { actions } = useAutomationRegistry();
   const kind = actionKindOf(value);
   const meta = ACTION_KIND_META[kind];
+  const [sheetOpen, setSheetOpen] = React.useState(false);
   const {
     templateProperties,
     variableNodes,
@@ -116,101 +129,73 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
     actions.find((a) => a.qualifiedId === qualified)?.displayName,
   );
 
-  const description =
-    value.description ?? (value.id ? `id: ${value.id}` : undefined);
+  // Collapsed-row summary derived from the config; falls back to the
+  // operator's description/id note when there's no derivable summary.
+  const summary =
+    summarizeAction(value) ??
+    value.description ??
+    (value.id ? `id: ${value.id}` : undefined);
 
   const enabledValue = value.enabled !== false;
   const issues = useActionIssues(path);
+  // `id` auto-fills on blur, so it isn't a meaningful "advanced was
+  // customised" signal; open the metadata disclosure only when the operator
+  // set a description or flipped the failure behaviour.
+  const hasAdvancedMeta =
+    value.description !== undefined || value.continue_on_error === true;
 
-  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>
+  // Validation issues (structural + inline-script type errors) surface only as
+  // the card's error badge - never auto-open the sheet. Auto-opening would pop
+  // multiple sheets at once when several cards have errors (e.g. every script
+  // action after a trigger change), so the badge is the single, calm signal and
+  // the operator clicks in for detail.
 
-            <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>
+  const menuItems: ActionCardMenuItem[] = disabled
+    ? []
+    : [
+        {
+          label: enabledValue ? "Disable" : "Enable",
+          icon: enabledValue ? "PowerOff" : "Power",
+          onClick: () => onChange({ ...value, enabled: !enabledValue }),
+        },
+        ...(onDuplicate
+          ? [
+              {
+                label: "Duplicate",
+                icon: "Copy" as const,
+                onClick: onDuplicate,
+              },
+            ]
+          : []),
+        {
+          label: "Delete",
+          icon: "Trash2",
+          onClick: onDelete,
+          variant: "destructive",
+        },
+      ];
 
+  return (
+    <>
+      <ActionCard
+        id={stableId}
+        title={title}
+        summary={summary}
+        category={meta.label}
+        icon={meta.icon}
+        enabled={enabledValue}
+        onOpenSheet={() => setSheetOpen(true)}
+        actions={menuItems}
+        dragHandleProps={disabled ? undefined : dragHandleProps}
+        errors={issues}
+      />
+      <ItemSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        title={title}
+        description={meta.label}
+      >
+      <div className="space-y-4">
         <ActionBody
           kind={kind}
           value={value}
@@ -224,8 +209,102 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
           shellEnvVars={shellEnvVars}
           disabled={disabled}
         />
+
+        {/* Per-action metadata — id, description, failure behaviour — tucked
+            behind a collapsed disclosure so the action's own configuration
+            above reads as the primary content of the card. The action's kind
+            is fixed at creation; to change it, add a new step and delete this
+            one. Enable/disable lives on the card header, not here. */}
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue={hasAdvancedMeta ? "advanced" : undefined}
+          className="w-full"
+        >
+          <AccordionItem value="advanced" className="border-b-0">
+            <AccordionTrigger className="py-2 text-xs hover:no-underline">
+              <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                Advanced
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-0">
+              <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>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </div>
-    </ActionCard>
+      </ItemSheet>
+    </>
   );
 };
 
@@ -343,6 +422,17 @@ const ActionBody: React.FC<{
         />
       );
     }
+    case "wait_until": {
+      return (
+        <WaitUntilActionBody
+          value={value as WaitUntilInput}
+          onChange={(next) => onChange(next)}
+          variableNodes={variableNodes}
+          completionProvider={expressionCompletion}
+          disabled={disabled}
+        />
+      );
+    }
     case "sequence": {
       return (
         <SequenceActionBody

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>
+  );
+};