@checkstack/ui 1.11.0 → 1.12.0

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/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";
 
 /**
@@ -22,6 +27,11 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  secretNames,
+  acquireTypes,
+  acquireResetKey,
+  importablePackages,
 }) => {
   // Track previous validity to avoid redundant callbacks
   const prevValidRef = React.useRef<boolean | undefined>(undefined);
@@ -88,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)
@@ -121,6 +139,12 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({
               typeDefinitions={typeDefinitions}
               shellEnvVars={shellEnvVars}
               starterTemplates={starterTemplates}
+              scriptTestRenderer={scriptTestRenderer}
+              secretNames={secretNames}
+              acquireTypes={acquireTypes}
+              acquireResetKey={acquireResetKey}
+              importablePackages={importablePackages}
+              siblingSecretEnv={rootSecretEnv}
               onChange={(val) => onChange({ ...value, [key]: val })}
             />
           );

package/src/components/DynamicForm/FormField.tsx

@@ -14,13 +14,20 @@ import {
   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.
@@ -38,6 +45,12 @@ export const FormField: React.FC<FormFieldProps> = ({
   typeDefinitions,
   shellEnvVars,
   starterTemplates,
+  scriptTestRenderer,
+  secretNames,
+  acquireTypes,
+  acquireResetKey,
+  importablePackages,
+  siblingSecretEnv,
   onChange,
 }) => {
   const description = propSchema.description || "";
@@ -74,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);
@@ -137,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}
         />
       );
@@ -331,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 (
@@ -355,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>
@@ -373,6 +458,12 @@ export const FormField: React.FC<FormFieldProps> = ({
             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 })
             }
@@ -485,6 +576,11 @@ export const FormField: React.FC<FormFieldProps> = ({
                   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;
@@ -543,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 */}
@@ -617,6 +719,12 @@ export const FormField: React.FC<FormFieldProps> = ({
                 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/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
@@ -352,6 +394,9 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           language="javascript"
           minHeight="150px"
           typeDefinitions={typeDefinitions}
+          acquireTypes={acquireTypes}
+          acquireResetKey={acquireResetKey}
+          importablePackages={importablePackages}
         />
       )}
 
@@ -363,6 +408,9 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           language="typescript"
           minHeight="150px"
           typeDefinitions={typeDefinitions}
+          acquireTypes={acquireTypes}
+          acquireResetKey={acquireResetKey}
+          importablePackages={importablePackages}
         />
       )}
 
@@ -376,6 +424,23 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           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>
   );
 };