@checkstack/ui 1.11.0 → 1.13.0

package/src/components/DurationInput.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { Input } from "./Input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./Select";
+
+/**
+ * The duration units this input edits. Mirrors the single-unit object
+ * form the automation `Duration` schema accepts
+ * (`{ seconds } | { minutes } | { hours }`).
+ */
+export type DurationUnit = "seconds" | "minutes" | "hours";
+
+/**
+ * A single-unit duration value: `{ seconds: 30 }`, `{ minutes: 5 }`, etc.
+ * This is exactly the object form the backend `Duration` schema accepts,
+ * so a `DurationInput` round-trips losslessly to/from the stored value.
+ */
+export type DurationValue = Partial<Record<DurationUnit, number>>;
+
+export interface DurationInputProps {
+  /** Current duration, or undefined when unset. */
+  value: DurationValue | undefined;
+  onChange: (next: DurationValue | undefined) => void;
+  /** Default unit when the operator first types a value. Defaults to "minutes". */
+  defaultUnit?: DurationUnit;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+}
+
+const UNIT_LABELS: Record<DurationUnit, string> = {
+  seconds: "seconds",
+  minutes: "minutes",
+  hours: "hours",
+};
+
+/** Read the (unit, amount) pair out of a single-unit duration value. */
+function decompose(
+  value: DurationValue | undefined,
+  fallbackUnit: DurationUnit,
+): { unit: DurationUnit; amount: number | undefined } {
+  if (value) {
+    for (const unit of ["seconds", "minutes", "hours"] as const) {
+      const amount = value[unit];
+      if (amount !== undefined) return { unit, amount };
+    }
+  }
+  return { unit: fallbackUnit, amount: undefined };
+}
+
+/**
+ * Number + unit picker for a single-unit duration (`for:` dwells,
+ * threshold windows, poll intervals). Emits the object form the backend
+ * `Duration` schema accepts, so it round-trips losslessly through YAML.
+ *
+ * No animations or heavy effects, so no `usePerformance` gating is needed
+ * - it is a plain numeric input plus a unit `Select`.
+ */
+export const DurationInput: React.FC<DurationInputProps> = ({
+  value,
+  onChange,
+  defaultUnit = "minutes",
+  disabled,
+  id,
+  className,
+}) => {
+  const { unit, amount } = decompose(value, defaultUnit);
+
+  const emit = (nextUnit: DurationUnit, nextAmount: number | undefined) => {
+    const cleared: DurationValue | undefined = undefined;
+    if (nextAmount === undefined || !Number.isFinite(nextAmount)) {
+      onChange(cleared);
+      return;
+    }
+    onChange({ [nextUnit]: Math.max(0, Math.floor(nextAmount)) });
+  };
+
+  return (
+    <div className={`flex items-center gap-2 ${className ?? ""}`}>
+      <Input
+        id={id}
+        type="number"
+        min={1}
+        inputMode="numeric"
+        className="w-24"
+        value={amount ?? ""}
+        disabled={disabled}
+        placeholder="0"
+        onChange={(event) =>
+          emit(
+            unit,
+            event.target.value === ""
+              ? undefined
+              : Number(event.target.value),
+          )
+        }
+      />
+      <Select
+        value={unit}
+        disabled={disabled}
+        onValueChange={(nextUnit) => emit(nextUnit as DurationUnit, amount)}
+      >
+        <SelectTrigger className="w-32">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {(["seconds", "minutes", "hours"] as const).map((u) => (
+            <SelectItem key={u} value={u}>
+              {UNIT_LABELS[u]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};

package/src/components/DynamicForm/DynamicForm.tsx

@@ -3,7 +3,12 @@ import React from "react";
 import { EmptyState } from "../../index";
 
 import type { DynamicFormProps } from "./types";
-import { extractDefaults, isValueEmpty, isFieldHiddenByCondition } from "./utils";
+import {
+  extractDefaults,
+  isFieldHiddenByCondition,
+  findSecretEnvSibling,
+} from "./utils";
+import { deriveClientFieldErrors } from "./validation.logic";
 import { FormField } from "./FormField";
 
 /**
@@ -22,10 +27,26 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  secretNames,
+  acquireTypes,
+  acquireResetKey,
+  sdkTypes,
+  sdkTypesResetKey,
+  importablePackages,
+  templatePreviewContext,
+  showInlineErrors = false,
+  fieldErrors,
+  keepExistingSecretFields,
 }) => {
   // Track previous validity to avoid redundant callbacks
   const prevValidRef = React.useRef<boolean | undefined>(undefined);
 
+  // Top-level field keys the user has interacted with (touched + blurred).
+  // Client-side inline errors only show for touched fields so the form does
+  // not nag while the user is still filling it in for the first time.
+  const [touched, setTouched] = React.useState<Record<string, boolean>>({});
+
   // Initialize form with default values from schema
   React.useEffect(() => {
     if (!schema || !schema.properties) return;
@@ -40,40 +61,24 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentional: runs only on schema change. Including onChange would re-fire on parent re-renders; including value would cause an infinite loop since this effect calls onChange(merged)
   }, [schema]);
 
-  // Compute validity and report changes
+  // Single source of truth for client-side validation: the same per-field
+  // error map drives both the inline messages and the validity boolean
+  // (valid iff the map is empty), so what disables the submit button and
+  // what the user sees can never disagree. Honors keep-existing secrets.
+  const clientErrors = React.useMemo(() => {
+    if (!schema || !schema.properties) return {};
+    return deriveClientFieldErrors({ schema, value, keepExistingSecretFields });
+  }, [schema, value, keepExistingSecretFields]);
+
+  // Report validity changes.
   React.useEffect(() => {
     if (!onValidChange || !schema || !schema.properties) return;
-
-    // Check all required fields (including hidden ones like connectionId)
-    const requiredKeys = schema.required ?? [];
-    let isValid = true;
-
-    for (const key of requiredKeys) {
-      const propSchema = schema.properties[key];
-      if (!propSchema) continue;
-
-      // Skip hidden fields - they are auto-populated
-      if (propSchema["x-hidden"]) continue;
-
-      // Skip conditionally hidden fields - they are not visible
-      if (
-        propSchema["x-hidden-when"] &&
-        isFieldHiddenByCondition(propSchema["x-hidden-when"], value)
-      )
-        continue;
-
-      if (isValueEmpty(value[key], propSchema)) {
-        isValid = false;
-        break;
-      }
-    }
-
-    // Only call onValidChange if validity actually changed
+    const isValid = Object.keys(clientErrors).length === 0;
     if (prevValidRef.current !== isValid) {
       prevValidRef.current = isValid;
       onValidChange(isValid);
     }
-  }, [schema, value, onValidChange]);
+  }, [schema, clientErrors, onValidChange]);
 
   if (
     !schema ||
@@ -88,6 +93,14 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
     );
   }
 
+  // The script field and its `x-secret-env` field are top-level siblings in
+  // an action config, so resolve the mapping once at the root and forward it
+  // to every field; a testable script field passes it to the test panel.
+  const rootSecretEnv = findSecretEnvSibling({
+    properties: schema.properties,
+    values: value,
+  });
+
   return (
     <div className="space-y-6">
       {Object.entries(schema.properties)
@@ -104,27 +117,86 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
           const isRequired = schema.required?.includes(key);
           const label = key.charAt(0).toUpperCase() + key.slice(1);
 
+          // Resolve the inline message for this field. Server-supplied
+          // `fieldErrors` (keyed by exact key or a nested `key.*` path) take
+          // precedence and show whenever present; client errors only show
+          // when inline errors are enabled AND the field has been touched.
+          // Either way the message renders below the field without changing
+          // the field's own markup.
+          const clientError =
+            showInlineErrors && touched[key] ? clientErrors[key] : undefined;
+          const fieldError = resolveFieldError({
+            key,
+            fieldErrors,
+            clientError,
+          });
+
           return (
-            <FormField
-              key={key}
-              // Prefix with 'field-' to prevent DOM clobbering when field names
-              // match native DOM properties (e.g., nodeName, tagName, innerHTML)
-              id={`field-${key}`}
-              label={label}
-              propSchema={propSchema}
-              value={value[key]}
-              isRequired={isRequired}
-              formValues={value}
-              optionsResolvers={optionsResolvers}
-              templateProperties={templateProperties}
-              templateCompletionProvider={templateCompletionProvider}
-              typeDefinitions={typeDefinitions}
-              shellEnvVars={shellEnvVars}
-              starterTemplates={starterTemplates}
-              onChange={(val) => onChange({ ...value, [key]: val })}
-            />
+            <div key={key} className="space-y-1.5">
+              <FormField
+                // Prefix with 'field-' to prevent DOM clobbering when field
+                // names match native DOM properties (e.g. nodeName, tagName)
+                id={`field-${key}`}
+                label={label}
+                propSchema={propSchema}
+                value={value[key]}
+                isRequired={isRequired}
+                formValues={value}
+                optionsResolvers={optionsResolvers}
+                templateProperties={templateProperties}
+                templateCompletionProvider={templateCompletionProvider}
+                typeDefinitions={typeDefinitions}
+                shellEnvVars={shellEnvVars}
+                starterTemplates={starterTemplates}
+                scriptTestRenderer={scriptTestRenderer}
+                secretNames={secretNames}
+                acquireTypes={acquireTypes}
+                acquireResetKey={acquireResetKey}
+                sdkTypes={sdkTypes}
+                sdkTypesResetKey={sdkTypesResetKey}
+                importablePackages={importablePackages}
+                templatePreviewContext={templatePreviewContext}
+                siblingSecretEnv={rootSecretEnv}
+                onChange={(val) => {
+                  // First interaction marks the field touched so its inline
+                  // required error can appear (covers touched-then-blanked).
+                  if (showInlineErrors && !touched[key]) {
+                    setTouched((prev) => ({ ...prev, [key]: true }));
+                  }
+                  onChange({ ...value, [key]: val });
+                }}
+              />
+              {fieldError && (
+                <p className="text-xs text-destructive">{fieldError}</p>
+              )}
+            </div>
           );
         })}
     </div>
   );
 };
+
+/**
+ * Pick the inline error message to render under a top-level field. Server
+ * errors (`fieldErrors`) win over the client error and may be keyed either
+ * by the exact field key or by a nested path (`key.child`); the first nested
+ * match is surfaced so a sub-field problem still flags its parent field.
+ */
+function resolveFieldError({
+  key,
+  fieldErrors,
+  clientError,
+}: {
+  key: string;
+  fieldErrors: Record<string, string> | undefined;
+  clientError: string | undefined;
+}): string | undefined {
+  if (fieldErrors) {
+    if (fieldErrors[key] !== undefined) return fieldErrors[key];
+    const nestedKey = Object.keys(fieldErrors).find((path) =>
+      path.startsWith(`${key}.`),
+    );
+    if (nestedKey !== undefined) return fieldErrors[nestedKey];
+  }
+  return clientError;
+}

package/src/components/DynamicForm/DynamicOptionsField.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { Loader2, ChevronDown } from "lucide-react";
-import { cn } from "../../utils";
+import { ChevronDown } from "lucide-react";
 
 import {
   Input,
@@ -10,7 +9,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  usePerformance,
+  Spinner,
 } from "../../index";
 
 import type { DynamicOptionsFieldProps, ResolverOption } from "./types";
@@ -35,7 +34,6 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
   optionsResolvers,
   onChange,
 }) => {
-  const { isLowPower } = usePerformance();
   const [options, setOptions] = React.useState<ResolverOption[]>([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | undefined>();
@@ -46,6 +44,15 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
   const formValuesRef = React.useRef(formValues);
   formValuesRef.current = formValues;
 
+  // Ref the resolvers too. A parent re-render (e.g. typing in ANOTHER field of
+  // the same form) can hand down a new `optionsResolvers` object identity even
+  // though the resolver for THIS field is unchanged. Reading it from a ref keeps
+  // it out of the fetch effect's dependencies, so the field only re-fetches when
+  // its resolver NAME or its declared `x-depends-on` values change - not on
+  // every unrelated keystroke (which made the picker flash + re-fetch).
+  const optionsResolversRef = React.useRef(optionsResolvers);
+  optionsResolversRef.current = optionsResolvers;
+
   // Build dependency values string for useEffect dependency tracking
   // Only includes the specific fields this resolver depends on
   const dependencyValues = React.useMemo(() => {
@@ -54,7 +61,7 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
   }, [dependsOn, formValues]);
 
   React.useEffect(() => {
-    const resolver = optionsResolvers[resolverName];
+    const resolver = optionsResolversRef.current[resolverName];
     if (!resolver) {
       setError(`Resolver "${resolverName}" not found`);
       setLoading(false);
@@ -65,7 +72,8 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
     setLoading(true);
     setError(undefined);
 
-    // Use ref to get current form values without adding to dependencies
+    // Use refs to get the current resolvers + form values without adding them
+    // to the dependencies (see the refs above).
     resolver(formValuesRef.current)
       .then((result) => {
         if (!cancelled) {
@@ -83,8 +91,10 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
     return () => {
       cancelled = true;
     };
-    // Only re-fetch when resolver changes or explicit dependencies change
-  }, [resolverName, optionsResolvers, dependencyValues]);
+    // Only re-fetch when the resolver NAME or this field's declared
+    // `x-depends-on` values change - NOT when an unrelated field re-renders the
+    // form (the resolvers object identity is read via ref above).
+  }, [resolverName, dependencyValues]);
 
   // Filter options based on search query
   const filteredOptions = React.useMemo(() => {
@@ -200,12 +210,7 @@ export const DynamicOptionsField: React.FC<DynamicOptionsFieldProps> = ({
       <div className="relative">
         {loading ? (
           <div className="flex items-center gap-2 h-10 px-3 border rounded-md bg-muted/50">
-            <Loader2
-              className={cn(
-                "h-4 w-4 text-muted-foreground",
-                !isLowPower && "animate-spin",
-              )}
-            />
+            <Spinner size="sm" className="text-muted-foreground" />
             <span className="text-sm text-muted-foreground">
               Loading options...
             </span>