@checkstack/ui 1.10.0 → 1.12.0

package/src/components/DynamicForm/FormField.tsx

@@ -13,13 +13,21 @@ import {
   Textarea,
   Toggle,
   ColorPicker,
+  TemplateValueInput,
+  DurationInput,
+  type DurationValue,
 } from "../../index";
 
 import type { FormFieldProps, JsonSchemaProperty } from "./types";
-import { getCleanDescription, NONE_SENTINEL } from "./utils";
+import {
+  getCleanDescription,
+  NONE_SENTINEL,
+  findSecretEnvSibling,
+} from "./utils";
 import { DynamicOptionsField } from "./DynamicOptionsField";
 import { JsonField } from "./JsonField";
 import { MultiTypeEditorField } from "./MultiTypeEditorField";
+import { SecretEnvEditor } from "./SecretEnvEditor";
 
 /**
  * Recursive field renderer that handles all supported JSON Schema types.
@@ -33,9 +41,16 @@ export const FormField: React.FC<FormFieldProps> = ({
   formValues,
   optionsResolvers,
   templateProperties,
+  templateCompletionProvider,
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  secretNames,
+  acquireTypes,
+  acquireResetKey,
+  importablePackages,
+  siblingSecretEnv,
   onChange,
 }) => {
   const description = propSchema.description || "";
@@ -72,6 +87,34 @@ export const FormField: React.FC<FormFieldProps> = ({
     return <></>;
   }
 
+  // Duration field — render the DurationInput (single-unit duration
+  // object). Marked via `x-duration: true` or `format: "duration"`. This
+  // branch is intentionally additive and sits before the generic union /
+  // object handlers so a `for:` / threshold-window config renders the
+  // widget rather than the raw oneOf discriminator picker.
+  const isDuration =
+    propSchema["x-duration"] === true || propSchema.format === "duration";
+  if (isDuration) {
+    const cleanDesc = getCleanDescription(description);
+    return (
+      <div className="space-y-2">
+        <div>
+          <Label htmlFor={id}>
+            {label} {isRequired && "*"}
+          </Label>
+          {cleanDesc && (
+            <p className="text-sm text-muted-foreground mt-0.5">{cleanDesc}</p>
+          )}
+        </div>
+        <DurationInput
+          id={id}
+          value={value as DurationValue | undefined}
+          onChange={(next) => onChange(next)}
+        />
+      </div>
+    );
+  }
+
   // Enum handling
   if (propSchema.enum) {
     const cleanDesc = getCleanDescription(description);
@@ -135,6 +178,16 @@ export const FormField: React.FC<FormFieldProps> = ({
           typeDefinitions={typeDefinitions}
           shellEnvVars={shellEnvVars}
           starterTemplates={starterTemplates}
+          scriptTestRenderer={
+            propSchema["x-script-testable"] === true
+              ? scriptTestRenderer
+              : undefined
+          }
+          acquireTypes={acquireTypes}
+          acquireResetKey={acquireResetKey}
+          importablePackages={importablePackages}
+          fieldId={id}
+          siblingSecretEnv={siblingSecretEnv}
           onChange={onChange as (val: string | undefined) => void}
         />
       );
@@ -232,7 +285,14 @@ export const FormField: React.FC<FormFieldProps> = ({
       );
     }
 
-    // Default string input
+    // Default string input. When a completion provider is supplied the
+    // field is templatable (e.g. automation action config), so render a
+    // TemplateValueInput wired to it for `{{ … }}` autocomplete; without
+    // one, keep the bare Input so other DynamicForm consumers are
+    // unaffected.
+    const placeholder = propSchema.default
+      ? `Default: ${String(propSchema.default)}`
+      : "";
     return (
       <div className="space-y-2">
         <div>
@@ -243,14 +303,22 @@ export const FormField: React.FC<FormFieldProps> = ({
             <p className="text-sm text-muted-foreground mt-0.5">{cleanDesc}</p>
           )}
         </div>
-        <Input
-          id={id}
-          value={(value as string) || ""}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={
-            propSchema.default ? `Default: ${String(propSchema.default)}` : ""
-          }
-        />
+        {templateCompletionProvider ? (
+          <TemplateValueInput
+            id={id}
+            value={(value as string) || ""}
+            onChange={(next) => onChange(next)}
+            placeholder={placeholder}
+            completionProvider={templateCompletionProvider}
+          />
+        ) : (
+          <Input
+            id={id}
+            value={(value as string) || ""}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        )}
       </div>
     );
   }
@@ -314,6 +382,34 @@ export const FormField: React.FC<FormFieldProps> = ({
   }
 
   // Dictionary/Record (headers)
+  // Secret -> env mapping: a dedicated editor (env name + secret-name
+  // picker) instead of the raw JSON record fallback.
+  if (
+    propSchema.type === "object" &&
+    propSchema.additionalProperties &&
+    propSchema["x-secret-env"]
+  ) {
+    const cleanDesc = getCleanDescription(description);
+    return (
+      <div className="space-y-2">
+        <div>
+          <Label htmlFor={id}>
+            {label} {isRequired && "*"}
+          </Label>
+          {cleanDesc && (
+            <p className="text-sm text-muted-foreground mt-0.5">{cleanDesc}</p>
+          )}
+        </div>
+        <SecretEnvEditor
+          id={id}
+          value={(value as Record<string, string> | undefined) ?? {}}
+          secretNames={secretNames}
+          onChange={(next) => onChange(next)}
+        />
+      </div>
+    );
+  }
+
   if (propSchema.type === "object" && propSchema.additionalProperties) {
     const cleanDesc = getCleanDescription(description);
     return (
@@ -338,6 +434,12 @@ export const FormField: React.FC<FormFieldProps> = ({
 
   // Object (Nested Form)
   if (propSchema.type === "object" && propSchema.properties) {
+    // Resolve the secret→env sibling within THIS object so a nested
+    // testable script field forwards the right mapping to the test panel.
+    const nestedSecretEnv = findSecretEnvSibling({
+      properties: propSchema.properties,
+      values: value as Record<string, unknown> | undefined,
+    });
     return (
       <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
         <p className="text-sm font-semibold">{label}</p>
@@ -352,9 +454,16 @@ export const FormField: React.FC<FormFieldProps> = ({
             formValues={formValues}
             optionsResolvers={optionsResolvers}
             templateProperties={templateProperties}
+            templateCompletionProvider={templateCompletionProvider}
             typeDefinitions={typeDefinitions}
             shellEnvVars={shellEnvVars}
             starterTemplates={starterTemplates}
+            scriptTestRenderer={scriptTestRenderer}
+            secretNames={secretNames}
+            acquireTypes={acquireTypes}
+            acquireResetKey={acquireResetKey}
+            importablePackages={importablePackages}
+            siblingSecretEnv={nestedSecretEnv}
             onChange={(val) =>
               onChange({ ...(value as Record<string, unknown>), [key]: val })
             }
@@ -463,9 +572,15 @@ export const FormField: React.FC<FormFieldProps> = ({
                   formValues={formValues}
                   optionsResolvers={optionsResolvers}
                   templateProperties={templateProperties}
+                  templateCompletionProvider={templateCompletionProvider}
                   typeDefinitions={typeDefinitions}
                   shellEnvVars={shellEnvVars}
                   starterTemplates={starterTemplates}
+                  scriptTestRenderer={scriptTestRenderer}
+                  secretNames={secretNames}
+                  acquireTypes={acquireTypes}
+                  acquireResetKey={acquireResetKey}
+                  importablePackages={importablePackages}
                   onChange={(val) => {
                     const next = [...(items as unknown[])];
                     next[index] = val;
@@ -524,6 +639,12 @@ export const FormField: React.FC<FormFieldProps> = ({
     const displayDiscriminatorField =
       discriminatorField.charAt(0).toUpperCase() + discriminatorField.slice(1);
 
+    // Secret→env sibling within the selected variant's object.
+    const variantSecretEnv = findSecretEnvSibling({
+      properties: selectedVariant.properties,
+      values: currentValue,
+    });
+
     return (
       <div className="space-y-3 p-3 border rounded-lg bg-background">
         {/* Discriminator selector */}
@@ -594,9 +715,16 @@ export const FormField: React.FC<FormFieldProps> = ({
                 formValues={formValues}
                 optionsResolvers={optionsResolvers}
                 templateProperties={templateProperties}
+                templateCompletionProvider={templateCompletionProvider}
                 typeDefinitions={typeDefinitions}
                 shellEnvVars={shellEnvVars}
                 starterTemplates={starterTemplates}
+                scriptTestRenderer={scriptTestRenderer}
+                secretNames={secretNames}
+                acquireTypes={acquireTypes}
+                acquireResetKey={acquireResetKey}
+                importablePackages={importablePackages}
+                siblingSecretEnv={variantSecretEnv}
                 onChange={(val) => onChange({ ...currentValue, [key]: val })}
               />
             ))}

package/src/components/DynamicForm/KeyValueEditor.tsx

@@ -3,6 +3,7 @@ import { Plus, Trash2 } from "lucide-react";
 import { Button } from "../Button";
 import { Input } from "../Input";
 import type { TemplateProperty } from "../CodeEditor";
+import { TemplateValueInput } from "../TemplateValueInput";
 
 export interface KeyValuePair {
   key: string;
@@ -28,24 +29,6 @@ export interface KeyValueEditorProps {
   templateProperties?: TemplateProperty[];
 }
 
-/**
- * Detect if cursor is inside an unclosed {{ template context.
- */
-function detectTemplateContext(text: string, cursorPos: number) {
-  const textBefore = text.slice(0, cursorPos);
-  const lastOpenBrace = textBefore.lastIndexOf("{{");
-  const lastCloseBrace = textBefore.lastIndexOf("}}");
-
-  if (lastOpenBrace !== -1 && lastOpenBrace > lastCloseBrace) {
-    return {
-      isInTemplate: true,
-      query: textBefore.slice(lastOpenBrace + 2),
-      startPos: lastOpenBrace,
-    };
-  }
-  return { isInTemplate: false, query: "", startPos: -1 };
-}
-
 /**
  * A key/value pair editor for form data and similar use cases.
  * Supports adding/removing pairs and optional template autocomplete in values.
@@ -131,7 +114,7 @@ export const KeyValueEditor: React.FC<KeyValueEditorProps> = ({
             className="flex-1 font-mono text-sm"
           />
           <span className="text-muted-foreground">=</span>
-          <TemplateInput
+          <TemplateValueInput
             id={`${id}-value-${index}`}
             value={pair.value}
             onChange={(newValue) => handleValueChange(index, newValue)}
@@ -162,153 +145,3 @@ export const KeyValueEditor: React.FC<KeyValueEditorProps> = ({
     </div>
   );
 };
-
-/**
- * An input with simple template autocomplete support.
- * Shows a dropdown when user types "{{".
- */
-const TemplateInput: React.FC<{
-  id: string;
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  templateProperties?: TemplateProperty[];
-}> = ({ id, value, onChange, placeholder, templateProperties }) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const [showPopup, setShowPopup] = React.useState(false);
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const [templateContext, setTemplateContext] = React.useState<{
-    query: string;
-    startPos: number;
-  }>({ query: "", startPos: -1 });
-
-  // Filter properties based on query
-  const filteredProperties = React.useMemo(() => {
-    if (!templateProperties) return [];
-    if (!templateContext.query.trim()) return templateProperties;
-    const lowerQuery = templateContext.query.toLowerCase();
-    return templateProperties.filter((prop) =>
-      prop.path.toLowerCase().includes(lowerQuery),
-    );
-  }, [templateProperties, templateContext.query]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    onChange(newValue);
-
-    if (!templateProperties || templateProperties.length === 0) return;
-
-    const cursorPos = e.target.selectionStart ?? newValue.length;
-    const context = detectTemplateContext(newValue, cursorPos);
-
-    if (context.isInTemplate) {
-      setTemplateContext({ query: context.query, startPos: context.startPos });
-      setShowPopup(true);
-      setSelectedIndex(0);
-    } else {
-      setShowPopup(false);
-    }
-  };
-
-  const insertProperty = (prop: TemplateProperty) => {
-    if (templateContext.startPos === -1) return;
-
-    const cursorPos = inputRef.current?.selectionStart ?? value.length;
-    const template = `{{${prop.path}}}`;
-    const newValue =
-      value.slice(0, templateContext.startPos) +
-      template +
-      value.slice(cursorPos);
-
-    onChange(newValue);
-    setShowPopup(false);
-
-    // Restore focus
-    setTimeout(() => {
-      inputRef.current?.focus();
-      const newPos = templateContext.startPos + template.length;
-      inputRef.current?.setSelectionRange(newPos, newPos);
-    }, 0);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!showPopup || filteredProperties.length === 0) return;
-
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        setSelectedIndex((prev) =>
-          prev < filteredProperties.length - 1 ? prev + 1 : 0,
-        );
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        setSelectedIndex((prev) =>
-          prev > 0 ? prev - 1 : filteredProperties.length - 1,
-        );
-        break;
-      }
-      case "Enter":
-      case "Tab": {
-        e.preventDefault();
-        if (filteredProperties[selectedIndex]) {
-          insertProperty(filteredProperties[selectedIndex]);
-        }
-        break;
-      }
-      case "Escape": {
-        e.preventDefault();
-        setShowPopup(false);
-        break;
-      }
-    }
-  };
-
-  // Close popup on blur
-  const handleBlur = () => {
-    // Delay to allow click on popup item
-    setTimeout(() => setShowPopup(false), 150);
-  };
-
-  return (
-    <div className="relative flex-1">
-      <Input
-        ref={inputRef}
-        id={id}
-        value={value}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        onBlur={handleBlur}
-        placeholder={placeholder}
-        className="font-mono text-sm"
-      />
-      {showPopup && filteredProperties.length > 0 && (
-        <div className="absolute z-50 top-full left-0 mt-1 w-64 max-h-48 overflow-y-auto rounded-md border border-border bg-popover shadow-lg">
-          <div className="p-1">
-            {filteredProperties.map((prop, index) => (
-              <button
-                key={prop.path}
-                type="button"
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                  insertProperty(prop);
-                }}
-                className={`w-full flex items-center justify-between gap-2 px-2 py-1.5 text-xs rounded-sm text-left hover:bg-accent hover:text-accent-foreground ${
-                  index === selectedIndex
-                    ? "bg-accent text-accent-foreground"
-                    : ""
-                }`}
-              >
-                <code className="font-mono truncate">{prop.path}</code>
-                <span className="text-muted-foreground shrink-0">
-                  {prop.type}
-                </span>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/DynamicForm/MultiTypeEditorField.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import { Label } from "../Label";
 import { Textarea } from "../Textarea";
-import { CodeEditor, type TemplateProperty } from "../CodeEditor";
+import {
+  CodeEditor,
+  type TemplateProperty,
+  type AcquireTypes,
+} from "../CodeEditor";
 import {
   Select,
   SelectContent,
@@ -17,7 +21,11 @@ import {
   parseFormData,
   EDITOR_TYPE_LABELS,
 } from "./utils";
-import type { EditorStarterTemplates, ShellEnvVar } from "./types";
+import type {
+  EditorStarterTemplates,
+  ScriptTestRenderer,
+  ShellEnvVar,
+} from "./types";
 import { pickStarterForEmptyField } from "./starterTemplateSelector";
 
 export interface MultiTypeEditorFieldProps {
@@ -54,6 +62,34 @@ export interface MultiTypeEditorFieldProps {
    * working example instead of a blank canvas.
    */
   starterTemplates?: EditorStarterTemplates;
+  /**
+   * Optional renderer for the inline script-test panel. When supplied (the
+   * field is `x-script-testable`), it is rendered beneath the editor for
+   * `typescript` / `shell` modes, with the currently-selected language as
+   * `kind`. The owning page wires it to the `testScript` RPC.
+   */
+  scriptTestRenderer?: ScriptTestRenderer;
+  /**
+   * Optional lazy type-acquisition resolver, forwarded to the TS/JS
+   * `CodeEditor` so imported npm packages autocomplete (lazy ATA).
+   */
+  acquireTypes?: AcquireTypes;
+  /** Install identity (lockfile hash); resets acquired types on a new install. */
+  acquireResetKey?: string;
+  /**
+   * Importable installed package names (`@types/*`-free), forwarded to the
+   * TS/JS `CodeEditor` so the import specifier itself autocompletes.
+   */
+  importablePackages?: string[];
+  /** Form key of this field, forwarded to {@link scriptTestRenderer}. */
+  fieldId?: string;
+  /**
+   * Current value of the sibling `x-secret-env` mapping (located by
+   * annotation in the parent config object), forwarded to
+   * {@link scriptTestRenderer} so the test panel injects placeholders /
+   * overrides for the same secrets the action declares.
+   */
+  siblingSecretEnv?: Record<string, string>;
   /** Callback when value changes */
   onChange: (value: string | undefined) => void;
 }
@@ -74,6 +110,12 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  acquireTypes,
+  acquireResetKey,
+  importablePackages,
+  fieldId,
+  siblingSecretEnv,
   onChange,
 }) => {
   // Detect initial editor type from value
@@ -336,6 +378,14 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
         />
       )}
 
+      {/*
+        Native-code editors (javascript / typescript / shell) intentionally
+        do NOT receive `templateProperties`: `{{ }}` template syntax is for
+        text/markup fields only. Code fields access run context through
+        their language's native mechanism instead — a typed `context`
+        object (driven by `typeDefinitions`) for TS/JS, and `$`-prefixed
+        env vars (driven by `shellEnvVars`) for shell.
+      */}
       {selectedType === "javascript" && (
         <CodeEditor
           id={id}
@@ -343,8 +393,10 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           onChange={onChange}
           language="javascript"
           minHeight="150px"
-          templateProperties={templateProperties}
           typeDefinitions={typeDefinitions}
+          acquireTypes={acquireTypes}
+          acquireResetKey={acquireResetKey}
+          importablePackages={importablePackages}
         />
       )}
 
@@ -355,8 +407,10 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           onChange={onChange}
           language="typescript"
           minHeight="150px"
-          templateProperties={templateProperties}
           typeDefinitions={typeDefinitions}
+          acquireTypes={acquireTypes}
+          acquireResetKey={acquireResetKey}
+          importablePackages={importablePackages}
         />
       )}
 
@@ -367,10 +421,26 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           onChange={onChange}
           language="shell"
           minHeight="150px"
-          templateProperties={templateProperties}
           shellEnvVars={shellEnvVars}
         />
       )}
+
+      {/* Inline script-test panel for testable code fields. Shell maps to
+          the `shell` test kind; both typescript and javascript map to the
+          `typescript` runner kind (the ESM runner handles both). */}
+      {scriptTestRenderer !== undefined &&
+        (selectedType === "typescript" ||
+          selectedType === "javascript" ||
+          selectedType === "shell") &&
+        scriptTestRenderer({
+          fieldId: fieldId ?? id,
+          kind: selectedType === "shell" ? "shell" : "typescript",
+          script: value ?? "",
+          secretEnv:
+            siblingSecretEnv && Object.keys(siblingSecretEnv).length > 0
+              ? siblingSecretEnv
+              : undefined,
+        })}
     </div>
   );
 };
@@ -417,8 +487,10 @@ const RawEditor: React.FC<{
     if (!templateProperties) return [];
     if (!templateContext.query.trim()) return templateProperties;
     const lowerQuery = templateContext.query.toLowerCase();
-    return templateProperties.filter((prop) =>
-      prop.path.toLowerCase().includes(lowerQuery),
+    return templateProperties.filter(
+      (prop) =>
+        prop.path.toLowerCase().includes(lowerQuery) ||
+        (prop.templateRef?.toLowerCase().includes(lowerQuery) ?? false),
     );
   }, [templateProperties, templateContext.query]);
 
@@ -481,7 +553,7 @@ const RawEditor: React.FC<{
       const textarea = textareaRef.current;
       if (!textarea || templateContext.startPos === -1) return;
 
-      const template = `{{${prop.path}}}`;
+      const template = `{{${prop.templateRef ?? prop.path}}}`;
       const cursorPos = textarea.selectionStart ?? 0;
       const newValue =
         value.slice(0, templateContext.startPos) +
@@ -580,7 +652,9 @@ const RawEditor: React.FC<{
                     : ""
                 }`}
               >
-                <code className="font-mono truncate">{prop.path}</code>
+                <code className="font-mono truncate">
+                  {prop.templateRef ?? prop.path}
+                </code>
                 <span className="text-muted-foreground shrink-0">
                   {prop.type}
                 </span>