@checkstack/ui 1.10.0 → 1.12.0

package/src/components/CodeEditor/validateJsonTemplate.ts

@@ -0,0 +1,26 @@
+// Template-aware JSON validation. See templateValidation.ts for the approach.
+// The real VS Code JSON service still provides highlighting + completion; only
+// its built-in (raw-text) validation is turned off in favour of this, so `{{ }}`
+// is tolerated in any position (including unquoted, e.g. a numeric value).
+import { parse, printParseErrorCode, type ParseError } from "jsonc-parser";
+import {
+  substituteTemplates,
+  type TemplateDiagnostic,
+} from "./templateValidation";
+
+/** Validate template-bearing JSON. Empty content is allowed (no diagnostics). */
+export const validateJsonTemplate = (
+  text: string,
+): TemplateDiagnostic[] => {
+  const errors: ParseError[] = [];
+  parse(substituteTemplates(text), errors, {
+    allowEmptyContent: true,
+    allowTrailingComma: false,
+    disallowComments: true,
+  });
+  return errors.map((parseError) => ({
+    offset: parseError.offset,
+    length: Math.max(parseError.length, 1),
+    message: `JSON: ${printParseErrorCode(parseError.error)}`,
+  }));
+};

package/src/components/CodeEditor/validateScripts.ts

@@ -0,0 +1,132 @@
+// Headless TypeScript / JavaScript script validator.
+//
+// Type-checks user scripts against their generated `context` types WITHOUT a
+// mounted editor, so an automation's collapsed-card scripts (or any script the
+// user isn't currently looking at) still surface type errors. It drives the
+// SAME standalone TS worker the editor uses, via off-screen models.
+//
+// Browser-only (imports `monaco` + the worker accessor). The pure mapping /
+// offset logic lives in `scriptDiagnostics.ts` and is unit-tested there; this
+// module is the thin async glue and is intentionally not unit-tested (no DOM /
+// worker under bun).
+//
+// Why prepend instead of an extra-lib: a global `context` extra-lib would
+// collide with any open editor's own `declare const context` (extra-libs are
+// global to the shared service). Prepending the type defs onto each validated
+// source keeps `context` scoped to that one off-screen file. See
+// `buildValidationSource`.
+import * as monaco from "@codingame/monaco-vscode-editor-api";
+import {
+  getJavaScriptWorker,
+  getTypeScriptWorker,
+} from "@codingame/monaco-vscode-standalone-typescript-language-features";
+import {
+  areVscodeServicesReady,
+  ensureStandaloneStdlib,
+} from "./monacoTsService";
+import {
+  buildValidationSource,
+  mapWorkerDiagnostics,
+  type RawTsDiagnostic,
+  type ScriptDiagnostic,
+} from "./scriptDiagnostics";
+
+export type { ScriptDiagnostic } from "./scriptDiagnostics";
+
+export interface ScriptValidationInput {
+  /** Caller-chosen identity; the returned map is keyed by this. */
+  id: string;
+  /** The user's script source (without any generated type prefix). */
+  source: string;
+  /** Generated `context.d.ts` (+ ambient augmentations) for this script. */
+  typeDefinitions: string;
+  language: "typescript" | "javascript";
+}
+
+// Monotonic across overlapping validation passes so two passes never reuse the
+// same off-screen model URI (which would race on create/dispose).
+let runCounter = 0;
+
+/**
+ * Validate each script against its `typeDefinitions`. Returns a map keyed by
+ * input `id` to that script's diagnostics (empty array = clean). Never throws:
+ * any worker/setup failure resolves to no diagnostics so validation can never
+ * break the editor it augments.
+ *
+ * Runs serially. The inline-prepend strategy removes the shared-state
+ * constraint that would otherwise force serialization, but validation is not
+ * latency-critical and serial keeps worker load predictable.
+ */
+export async function validateTypeScriptSources({
+  sources,
+}: {
+  sources: ScriptValidationInput[];
+}): Promise<Map<string, ScriptDiagnostic[]>> {
+  const results = new Map<string, ScriptDiagnostic[]>();
+  if (sources.length === 0) {
+    return results;
+  }
+  // CRITICAL: only proceed once an editor has initialized the monaco-vscode
+  // services. Initializing them here would collide with the editor wrapper's
+  // one-time init ("Services are already initialized") and break the editor.
+  if (!areVscodeServicesReady()) {
+    return results;
+  }
+  try {
+    await ensureStandaloneStdlib();
+  } catch {
+    return results;
+  }
+
+  for (const input of sources) {
+    try {
+      results.set(input.id, await validateOne(input));
+    } catch {
+      results.set(input.id, []);
+    }
+  }
+  return results;
+}
+
+async function validateOne(
+  input: ScriptValidationInput,
+): Promise<ScriptDiagnostic[]> {
+  const { text, prependedLineCount } = buildValidationSource({
+    typeDefinitions: input.typeDefinitions,
+    source: input.source,
+  });
+  const ext = input.language === "javascript" ? "js" : "ts";
+  const uri = monaco.Uri.parse(
+    `file:///script-validation/${runCounter++}.${ext}`,
+  );
+  monaco.editor.getModel(uri)?.dispose();
+  const model = monaco.editor.createModel(text, input.language, uri);
+  try {
+    const getWorker =
+      input.language === "javascript"
+        ? await getJavaScriptWorker()
+        : await getTypeScriptWorker();
+    const client = await getWorker(uri);
+    const fileName = uri.toString();
+    const [syntactic, semantic] = await Promise.all([
+      client.getSyntacticDiagnostics(fileName),
+      client.getSemanticDiagnostics(fileName),
+    ]);
+    const diagnostics: RawTsDiagnostic[] = [...syntactic, ...semantic].map(
+      (diagnostic) => ({
+        start: diagnostic.start,
+        length: diagnostic.length,
+        messageText: diagnostic.messageText,
+        category: diagnostic.category,
+        code: diagnostic.code,
+      }),
+    );
+    return mapWorkerDiagnostics({
+      diagnostics,
+      validationText: text,
+      prependedLineCount,
+    });
+  } finally {
+    model.dispose();
+  }
+}

package/src/components/CodeEditor/validateXmlTemplate.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from "bun:test";
+import { validateXmlTemplate } from "./validateXmlTemplate";
+
+describe("validateXmlTemplate", () => {
+  it("accepts valid XML", () => {
+    expect(validateXmlTemplate("<root><a>1</a></root>")).toEqual([]);
+  });
+
+  it("accepts empty content", () => {
+    expect(validateXmlTemplate("")).toEqual([]);
+    expect(validateXmlTemplate("  \n ")).toEqual([]);
+  });
+
+  it("accepts a template in element text", () => {
+    expect(
+      validateXmlTemplate("<root><repo>{{trigger.payload.repository}}</repo></root>"),
+    ).toEqual([]);
+  });
+
+  it("accepts a template in a (quoted) attribute value", () => {
+    expect(validateXmlTemplate('<root attr="{{id}}"></root>')).toEqual([]);
+  });
+
+  it("flags a mismatched closing tag", () => {
+    const diagnostics = validateXmlTemplate("<a><b></a>");
+    expect(diagnostics.length).toBeGreaterThan(0);
+    expect(diagnostics[0]?.message).toContain("XML:");
+  });
+
+  it("flags an unclosed tag even with templates present", () => {
+    const diagnostics = validateXmlTemplate("<root><x>{{v}}</root>");
+    expect(diagnostics.length).toBeGreaterThan(0);
+  });
+});

package/src/components/CodeEditor/validateXmlTemplate.ts

@@ -0,0 +1,35 @@
+// Template-aware XML validation. See templateValidation.ts for the approach.
+// There is no @codingame standalone XML language service (only Monarch
+// highlighting), so we use fast-xml-parser's validator after template
+// substitution. The validator reports the FIRST error only, with 1-based
+// line/column, which we convert to an offset/range in the original text.
+import { XMLValidator } from "fast-xml-parser";
+import {
+  lineColumnToOffset,
+  substituteTemplates,
+  type TemplateDiagnostic,
+} from "./templateValidation";
+
+/** Validate template-bearing XML. Empty content is allowed (no diagnostics). */
+export const validateXmlTemplate = (
+  text: string,
+): TemplateDiagnostic[] => {
+  const substituted = substituteTemplates(text);
+  if (substituted.trim() === "") {
+    return [];
+  }
+  const result = XMLValidator.validate(substituted, {
+    allowBooleanAttributes: true,
+  });
+  if (result === true) {
+    return [];
+  }
+  const { msg, line, col } = result.err;
+  return [
+    {
+      offset: lineColumnToOffset({ text: substituted, line, column: col }),
+      length: 1,
+      message: `XML: ${msg}`,
+    },
+  ];
+};

package/src/components/CodeEditor/validateYamlTemplate.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "bun:test";
+import { validateYamlTemplate } from "./validateYamlTemplate";
+
+describe("validateYamlTemplate", () => {
+  it("accepts valid YAML", () => {
+    expect(validateYamlTemplate("a: 1\nb: two\n")).toEqual([]);
+  });
+
+  it("accepts empty content", () => {
+    expect(validateYamlTemplate("")).toEqual([]);
+  });
+
+  it("accepts a template as a quoted string value", () => {
+    expect(validateYamlTemplate('repo: "{{trigger.payload.repository}}"')).toEqual(
+      [],
+    );
+  });
+
+  it("accepts an UNQUOTED template value (e.g. a number)", () => {
+    expect(validateYamlTemplate("timeout: {{trigger.payload.timeout}}")).toEqual(
+      [],
+    );
+  });
+
+  it("accepts a template as a list item", () => {
+    expect(validateYamlTemplate("items:\n  - {{count}}\n  - 2")).toEqual([]);
+  });
+
+  it("flags tabs used as indentation", () => {
+    const diagnostics = validateYamlTemplate("foo:\n\tbar: 1");
+    expect(diagnostics.length).toBeGreaterThan(0);
+    expect(diagnostics[0]?.message).toContain("YAML:");
+  });
+
+  it("flags a genuine structural error (with templates present)", () => {
+    const diagnostics = validateYamlTemplate("a: {{x}}\n  b: 2");
+    expect(diagnostics.length).toBeGreaterThan(0);
+  });
+});

package/src/components/CodeEditor/validateYamlTemplate.ts

@@ -0,0 +1,28 @@
+// Template-aware YAML validation. See templateValidation.ts for the approach.
+// There is no @codingame standalone YAML language service (only Monarch
+// highlighting), so we parse with the `yaml` package after template
+// substitution. YAML is permissive (it often parses `{{ }}` as a flow
+// collection), but substitution gives accurate structural validation and still
+// catches real mistakes (bad indentation, tabs, duplicate keys, ...).
+import { parseDocument } from "yaml";
+import {
+  substituteTemplates,
+  type TemplateDiagnostic,
+} from "./templateValidation";
+
+/** Validate template-bearing YAML. */
+export const validateYamlTemplate = (
+  text: string,
+): TemplateDiagnostic[] => {
+  const doc = parseDocument(substituteTemplates(text), {
+    prettyErrors: false,
+  });
+  return doc.errors.map((error) => {
+    const [start, end] = error.pos;
+    return {
+      offset: start,
+      length: Math.max(end - start, 1),
+      message: `YAML: ${error.message}`,
+    };
+  });
+};

package/src/components/Dialog.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../utils";
 import { usePerformance } from "./PerformanceProvider";
+import { PortalContainerContext } from "./portalContainer";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -64,12 +65,23 @@ const DialogContent = React.forwardRef<
   DialogContentProps & DialogContentExtraProps
 >(({ className, children, size, hideCloseButton, ...props }, ref) => {
   const { isLowPower } = usePerformance();
+  // Expose the content element so popovers/comboboxes inside the dialog portal
+  // INTO it, otherwise the modal scroll-lock blocks their internal scrolling.
+  const [content, setContent] = React.useState<HTMLDivElement | null>(null);
+  const setRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      setContent(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
   return (
     <DialogPortal>
       <DialogOverlay />
       <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
         <DialogPrimitive.Content
-          ref={ref}
+          ref={setRefs}
           className={cn(
             "pointer-events-auto relative",
             dialogContentVariants({ size }),
@@ -79,16 +91,25 @@ const DialogContent = React.forwardRef<
           )}
           {...props}
         >
-          <div className="-mx-2 px-2 flex flex-col gap-6">{children}</div>
-          {!hideCloseButton && (
-            <DialogPrimitive.Close
-              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-              aria-label="Close"
-            >
-              <X className="h-4 w-4" />
-              <span className="sr-only">Close</span>
-            </DialogPrimitive.Close>
-          )}
+          <PortalContainerContext.Provider value={content}>
+            {/* `min-h-0 flex-1` lets this wrapper fill the height when a
+                consumer makes `DialogContent` a tall flex column (e.g. the
+                CodeEditor popout, so a `fillHeight` editor fills the body).
+                Inert for the default (non-flex) dialog: `flex-1` only affects
+                flex items, and `min-h-0` is the block default. */}
+            <div className="-mx-2 px-2 flex min-h-0 flex-1 flex-col gap-6">
+              {children}
+            </div>
+            {!hideCloseButton && (
+              <DialogPrimitive.Close
+                className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                aria-label="Close"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </PortalContainerContext.Provider>
         </DialogPrimitive.Content>
       </div>
     </DialogPortal>

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,
+  isValueEmpty,
+  isFieldHiddenByCondition,
+  findSecretEnvSibling,
+} from "./utils";
 import { FormField } from "./FormField";
 
 /**
@@ -18,9 +23,15 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
   onValidChange,
   optionsResolvers,
   templateProperties,
+  templateCompletionProvider,
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  secretNames,
+  acquireTypes,
+  acquireResetKey,
+  importablePackages,
 }) => {
   // Track previous validity to avoid redundant callbacks
   const prevValidRef = React.useRef<boolean | undefined>(undefined);
@@ -87,6 +98,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)
@@ -116,9 +135,16 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
               formValues={value}
               optionsResolvers={optionsResolvers}
               templateProperties={templateProperties}
+              templateCompletionProvider={templateCompletionProvider}
               typeDefinitions={typeDefinitions}
               shellEnvVars={shellEnvVars}
               starterTemplates={starterTemplates}
+              scriptTestRenderer={scriptTestRenderer}
+              secretNames={secretNames}
+              acquireTypes={acquireTypes}
+              acquireResetKey={acquireResetKey}
+              importablePackages={importablePackages}
+              siblingSecretEnv={rootSecretEnv}
               onChange={(val) => onChange({ ...value, [key]: val })}
             />
           );