@checkstack/automation-frontend 0.2.0 → 0.4.0

package/src/editor/ConditionEditor.tsx

@@ -4,43 +4,38 @@ import {
   Button,
   Card,
   CardContent,
+  DurationInput,
+  Input,
+  Label,
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
+  SelectLabel,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
   TemplateValueInput,
+  TimeOfDayInput,
+  Toggle,
   VariablePicker,
+  type DurationValue,
   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: "" };
-    }
-  }
-}
+import type {
+  ConditionInput,
+  Duration,
+  NumericStateCondition,
+  StateCondition,
+  TimeCondition,
+} from "@checkstack/automation-common";
+import {
+  defaultForKind,
+  kindOf,
+  type ConditionKind,
+} from "./condition-kind";
+import { SystemEntityPicker } from "./SystemEntityPicker";
 
 export interface ConditionEditorProps {
   value: ConditionInput;
@@ -48,30 +43,39 @@ export interface ConditionEditorProps {
   variableNodes: VariableNode[];
   /**
    * Staged completion provider (expression mode) for the inline
-   * expression input. Conditions are bare expressions — no `{{ }}`
-   * wrapper — so this is the `expressionCompletion` from
+   * 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. */
+  /** Render without the wrapping card - used when inlining inside an action card. */
   bare?: boolean;
+  /**
+   * Suppress the inline kind `Select`. Used only for the top-level condition in
+   * the Conditions-section sheet, where the kind is chosen up front via
+   * `AddConditionDialog` (swap kind = delete + re-add, matching actions).
+   * Nested combinator children and the action `condition`-guard body do NOT
+   * set this, so their inline selector stays. The `expr` "fx" picker still
+   * renders when the kind is `expr`, even with the selector hidden.
+   */
+  hideKindSelector?: boolean;
   depth?: number;
 }
 
 /**
- * Recursive editor over the `ConditionInput` discriminated union
- * (`string | { and } | { or } | { not }`). Each level renders:
+ * Recursive editor over the `ConditionInput` union. Each level renders a
+ * kind selector plus the matching body:
  *
- *   - 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.
+ *   - expression  - TemplateValueInput + the VariablePicker "fx" trigger.
+ *   - and / or     - list of child conditions (recursive).
+ *   - not          - single child condition.
+ *   - numeric_state - value (path/template) + operator + threshold.
+ *   - time          - after / before (TimeOfDayInput) + weekday + timezone.
+ *   - state         - entity + status + optional dwell (DurationInput).
  *
- * No depth cap — operator can nest arbitrarily, mirroring the runtime.
+ * The raw expression stays the escape hatch for anything the structured
+ * variants don't cover. No depth cap - operator can nest arbitrarily.
  */
 export const ConditionEditor: React.FC<ConditionEditorProps> = ({
   value,
@@ -79,42 +83,69 @@ export const ConditionEditor: React.FC<ConditionEditorProps> = ({
   variableNodes,
   completionProvider,
   bare,
+  hideKindSelector,
   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>
+      {/* The top row holds the kind selector and the `expr` "fx" picker. Render
+          it when EITHER is present; omit it entirely (e.g. hidden selector on a
+          non-expr top-level condition) so no empty row remains. */}
+      {(!hideKindSelector || kind === "expr") && (
+        <div className="flex items-center gap-2">
+          {!hideKindSelector && (
+            <Select
+              value={kind}
+              onValueChange={(next) =>
+                onChange(defaultForKind(next as ConditionKind))
+              }
+            >
+              <SelectTrigger className="h-7 w-40 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {/* Structured kinds are the common case and lead the list. */}
+                <SelectGroup>
+                  <SelectLabel>Structured</SelectLabel>
+                  <SelectItem value="numeric_state">numeric state</SelectItem>
+                  <SelectItem value="time">time of day</SelectItem>
+                  <SelectItem value="state">system state</SelectItem>
+                </SelectGroup>
+                <SelectSeparator />
+                <SelectGroup>
+                  <SelectLabel>Logical</SelectLabel>
+                  <SelectItem value="and">and</SelectItem>
+                  <SelectItem value="or">or</SelectItem>
+                  <SelectItem value="not">not</SelectItem>
+                </SelectGroup>
+                <SelectSeparator />
+                {/* Raw expression stays the escape hatch for anything the
+                    structured variants don't cover — de-emphasised at the
+                    bottom, but still reachable. */}
+                <SelectGroup>
+                  <SelectLabel>Advanced</SelectLabel>
+                  <SelectItem value="expr">expression</SelectItem>
+                </SelectGroup>
+              </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
@@ -125,6 +156,23 @@ export const ConditionEditor: React.FC<ConditionEditorProps> = ({
         />
       )}
 
+      {kind === "numeric_state" && (
+        <NumericStateBody
+          value={value as NumericStateCondition}
+          onChange={onChange}
+          variableNodes={variableNodes}
+          completionProvider={completionProvider}
+        />
+      )}
+
+      {kind === "time" && (
+        <TimeBody value={value as TimeCondition} onChange={onChange} />
+      )}
+
+      {kind === "state" && (
+        <StateBody value={value as StateCondition} onChange={onChange} />
+      )}
+
       {(kind === "and" || kind === "or") && (
         <CombinatorList
           kind={kind}
@@ -167,6 +215,247 @@ export const ConditionEditor: React.FC<ConditionEditorProps> = ({
   );
 };
 
+// ─── numeric_state ─────────────────────────────────────────────────────
+
+type NumericOp = "above" | "below" | "between";
+
+function numericOpOf(c: NumericStateCondition["numeric_state"]): NumericOp {
+  if (c.above !== undefined && c.below !== undefined) return "between";
+  if (c.below !== undefined) return "below";
+  return "above";
+}
+
+const NumericStateBody: React.FC<{
+  value: NumericStateCondition;
+  onChange: (next: ConditionInput) => void;
+  variableNodes: VariableNode[];
+  completionProvider: TemplateCompletionProvider;
+}> = ({ value, onChange, variableNodes, completionProvider }) => {
+  const ns = value.numeric_state;
+  const op = numericOpOf(ns);
+  const patch = (next: Partial<NumericStateCondition["numeric_state"]>) =>
+    onChange({ numeric_state: { ...ns, ...next } });
+
+  return (
+    <div className="space-y-2 border-l border-border pl-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Value (path or template)</Label>
+        <div className="flex items-center gap-2">
+          <div className="flex-1">
+            <TemplateValueInput
+              value={typeof ns.value === "string" ? ns.value : String(ns.value)}
+              onChange={(next) => patch({ value: next })}
+              placeholder="health.system.p95_latency_ms"
+              completionProvider={completionProvider}
+            />
+          </div>
+          <VariablePicker
+            scope={variableNodes}
+            onSelect={(path) => patch({ value: path })}
+          />
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Select
+          value={op}
+          onValueChange={(next) => {
+            // Reset to a clean shape for the chosen operator.
+            if (next === "above") {
+              patch({ above: ns.above ?? 0, below: undefined });
+            } else if (next === "below") {
+              patch({ above: undefined, below: ns.below ?? 0 });
+            } else {
+              patch({ above: ns.above ?? 0, below: ns.below ?? 0 });
+            }
+          }}
+        >
+          <SelectTrigger className="h-8 w-32 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="above">above (&gt;)</SelectItem>
+            <SelectItem value="below">below (&lt;)</SelectItem>
+            <SelectItem value="between">between</SelectItem>
+          </SelectContent>
+        </Select>
+        {op !== "below" && (
+          <Input
+            type="number"
+            className="w-28"
+            placeholder="above"
+            value={ns.above ?? ""}
+            onChange={(event) =>
+              patch({
+                above:
+                  event.target.value === ""
+                    ? undefined
+                    : Number(event.target.value),
+              })
+            }
+          />
+        )}
+        {op !== "above" && (
+          <Input
+            type="number"
+            className="w-28"
+            placeholder="below"
+            value={ns.below ?? ""}
+            onChange={(event) =>
+              patch({
+                below:
+                  event.target.value === ""
+                    ? undefined
+                    : Number(event.target.value),
+              })
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ─── time ──────────────────────────────────────────────────────────────
+
+const WEEKDAYS: Array<{ value: number; label: string }> = [
+  { value: 0, label: "Sun" },
+  { value: 1, label: "Mon" },
+  { value: 2, label: "Tue" },
+  { value: 3, label: "Wed" },
+  { value: 4, label: "Thu" },
+  { value: 5, label: "Fri" },
+  { value: 6, label: "Sat" },
+];
+
+const TimeBody: React.FC<{
+  value: TimeCondition;
+  onChange: (next: ConditionInput) => void;
+}> = ({ value, onChange }) => {
+  const t = value.time;
+  const patch = (next: Partial<TimeCondition["time"]>) =>
+    onChange({ time: { ...t, ...next } });
+  const weekdays = t.weekday ?? [];
+
+  const toggleDay = (day: number) => {
+    const next = weekdays.includes(day)
+      ? weekdays.filter((d) => d !== day)
+      : [...weekdays, day].toSorted((a, b) => a - b);
+    patch({ weekday: next.length > 0 ? next : undefined });
+  };
+
+  return (
+    <div className="space-y-3 border-l border-border pl-3">
+      <div className="flex flex-wrap items-end gap-3">
+        <div className="space-y-1">
+          <Label className="text-xs">After</Label>
+          <TimeOfDayInput
+            value={t.after}
+            onChange={(next) => patch({ after: next })}
+          />
+        </div>
+        <div className="space-y-1">
+          <Label className="text-xs">Before</Label>
+          <TimeOfDayInput
+            value={t.before}
+            onChange={(next) => patch({ before: next })}
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Weekdays (any when none selected)</Label>
+        <div className="flex flex-wrap gap-1">
+          {WEEKDAYS.map((d) => {
+            const active = weekdays.includes(d.value);
+            return (
+              <Button
+                key={d.value}
+                type="button"
+                variant={active ? "primary" : "outline"}
+                size="sm"
+                className="h-7 w-11 text-xs"
+                onClick={() => toggleDay(d.value)}
+                aria-pressed={active}
+              >
+                {d.label}
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Timezone (IANA, defaults to UTC)</Label>
+        <Input
+          className="max-w-xs font-mono text-xs"
+          value={t.timezone ?? ""}
+          placeholder="Europe/Berlin"
+          onChange={(event) =>
+            patch({ timezone: event.target.value || undefined })
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+// ─── state ─────────────────────────────────────────────────────────────
+
+const StateBody: React.FC<{
+  value: StateCondition;
+  onChange: (next: ConditionInput) => void;
+}> = ({ value, onChange }) => {
+  const s = value.state;
+  const patch = (next: Partial<StateCondition["state"]>) =>
+    onChange({ state: { ...s, ...next } });
+  const hasDwell = s.for !== undefined;
+
+  return (
+    <div className="space-y-2 border-l border-border pl-3">
+      <div className="grid gap-2 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Label className="text-xs">System (entity)</Label>
+          <SystemEntityPicker
+            value={s.entity}
+            onChange={(next) => patch({ entity: next })}
+          />
+        </div>
+        <div className="space-y-1">
+          <Label className="text-xs">Status</Label>
+          <Select
+            value={s.status}
+            onValueChange={(next) =>
+              patch({ status: next as StateCondition["state"]["status"] })
+            }
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="healthy">healthy</SelectItem>
+              <SelectItem value="degraded">degraded</SelectItem>
+              <SelectItem value="unhealthy">unhealthy</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Toggle
+          checked={hasDwell}
+          onCheckedChange={(checked) =>
+            patch({ for: checked ? { minutes: 30 } : undefined })
+          }
+        />
+        <Label className="text-xs">Require held for a minimum duration</Label>
+      </div>
+      {hasDwell && (
+        <DurationInput
+          value={s.for as DurationValue | undefined}
+          onChange={(next) => patch({ for: (next as Duration) ?? undefined })}
+        />
+      )}
+    </div>
+  );
+};
+
 const CombinatorList: React.FC<{
   kind: "and" | "or";
   children: ConditionInput[];

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