@flamingo-stack/openframe-frontend-core 0.0.739 → 0.0.741

package/src/components/features/scripts/schedule-form/schedule-interval-input.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Input } from '../../../ui/input';
+
+interface ScheduleIntervalInputProps {
+  /** The form's value. `null` = the box is empty. */
+  value: number | null;
+  onChange: (next: number | null) => void;
+  /**
+   * The form's own blur handler. Load-bearing, not optional plumbing: react-hook-form
+   * learns a field was left ONLY through this, and `reValidateMode: 'onBlur'` is
+   * what re-runs the schema. Without it an error the user has already fixed sits
+   * on screen until the next Save.
+   */
+  onBlur?: () => void;
+  disabled?: boolean;
+  invalid?: boolean;
+  error?: string;
+  min?: number;
+  className?: string;
+  'aria-label'?: string;
+  /**
+   * Marks this box as where `scrollToFirstInvalidField` should put focus when
+   * the error is carried by an ancestor rather than by the input itself.
+   */
+  'data-invalid-focus'?: boolean;
+}
+
+/**
+ * The `[interval]` half of the form's two duration pairs (Repeat in, Stop Retry
+ * after).
+ *
+ * **What the user types owns the display; the form value never writes back into
+ * it while the field has focus.** That inversion is the whole component. Binding
+ * a number input straight to validated state reads as a bug rather than a rule:
+ * the previous version coerced an emptied box back to a floor on every
+ * keystroke, so the digit reappeared as fast as it was deleted and "1" could not
+ * be typed over. Any round trip through `Number()` has the same shape in
+ * smaller ways — a leading zero vanishes mid-word, "10" briefly becomes "1"
+ * while a character is being removed.
+ *
+ * So the raw string is local state, and the form is told the PARSED value as it
+ * changes. Keeping the form current (rather than committing on blur alone)
+ * matters for one case: submitting with Enter never fires a blur, and a form
+ * reading a stale interval would save a number the user cannot see.
+ *
+ * The reverse direction — form → box — is deliberately narrow. It runs only
+ * when the field is NOT focused, which is exactly the set of changes that come
+ * from somewhere else: the record arriving (`useSeedForm`), or the unit
+ * dropdown raising the interval to its floor. While the box has focus those
+ * cannot happen, and nothing else may repaint what is being typed.
+ *
+ * Validation timing is the form's business, not this component's: errors are
+ * held until the first Save (`showErrors`) and re-checked on blur
+ * (`reValidateMode`), so nothing here is judged mid-word.
+ */
+export function ScheduleIntervalInput({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  invalid,
+  error,
+  min,
+  className,
+  'aria-label': ariaLabel,
+  'data-invalid-focus': invalidFocus,
+}: ScheduleIntervalInputProps) {
+  const [text, setText] = useState(() => (value === null ? '' : String(value)));
+  const focused = useRef(false);
+
+  // Adopts the FORM's value, never its own output — hence the functional
+  // `setText`, which keeps `text` out of the dependency list. Reacting to the
+  // text this effect just wrote is what would fight the user.
+  useEffect(() => {
+    if (focused.current) return;
+    const next = value === null ? '' : String(value);
+    setText(current => (current === next ? current : next));
+  }, [value]);
+
+  return (
+    <Input
+      // Left as a number field so the stepper and the numeric keypad stay. The
+      // one cost is that a browser reports `''` for a half-typed exponent
+      // ("1e"), which reads here as a cleared box — it resolves itself on blur,
+      // and it is the browser's own behaviour for the type rather than
+      // something this component can improve on.
+      type="number"
+      min={min}
+      inputMode="numeric"
+      aria-label={ariaLabel}
+      data-invalid-focus={invalidFocus || undefined}
+      className={className}
+      value={text}
+      onFocus={() => {
+        focused.current = true;
+      }}
+      onBlur={() => {
+        focused.current = false;
+        // Normalise what is shown to what was actually stored: "007" settles to
+        // "7". Only on the way out, never mid-word.
+        setText(value === null ? '' : String(value));
+        onBlur?.();
+      }}
+      onChange={e => {
+        const raw = e.target.value;
+        setText(raw);
+        if (raw.trim() === '') {
+          onChange(null);
+          return;
+        }
+        const parsed = Number(raw);
+        onChange(Number.isFinite(parsed) ? parsed : null);
+      }}
+      disabled={disabled}
+      invalid={invalid}
+      error={error}
+    />
+  );
+}

package/src/components/features/scripts/schedule-form/schedule-offline-fields.tsx

@@ -0,0 +1,218 @@
+'use client';
+'use no memo';
+
+import { useController, useFormContext, useWatch } from 'react-hook-form';
+import { cn } from '../../../../utils/cn';
+import { Label } from '../../../ui/label';
+import { RadioGroupBlock } from '../../../ui/radio-group';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select';
+import { TruncateText } from '../../../ui/truncate-text';
+import { type ScheduleFormData, SCHEDULE_OFFLINE_BEHAVIOR_OPTIONS } from './schedule-form-types';
+import { ScheduleIntervalInput } from './schedule-interval-input';
+import {
+  DURATION_UNIT_OPTIONS,
+  type DurationUnit,
+  isEventTrigger,
+  isRetryOnReconnect,
+  MIN_RECONNECT_MINUTES,
+  snapReconnectInterval,
+} from './schedule-timing';
+
+interface ReconnectWindowFieldsProps {
+  interval: number | null;
+  unit: DurationUnit;
+  onIntervalChange: (next: number | null) => void;
+  onIntervalBlur: () => void;
+  onUnitChange: (next: DurationUnit) => void;
+  disabled: boolean;
+  invalid: boolean;
+  /**
+   * Let the two controls share the width they are given instead of taking the
+   * design's fixed 120px each — what the full-width row below `md` needs, where
+   * the fixed pair plus its caption overflows a phone.
+   */
+  fluid?: boolean;
+  className?: string;
+}
+
+/**
+ * "Stop Retry after [1] [Week]" — how long a queued run stays worth running.
+ *
+ * Presentational and stateless: the two form fields are registered ONCE by the
+ * block below and handed down, because this renders TWICE (see the two call
+ * sites). Two `Controller`s on one name would also work, but one registration
+ * with two views is the honest description of what this is.
+ */
+function ReconnectWindowFields({
+  interval,
+  unit,
+  onIntervalChange,
+  onIntervalBlur,
+  onUnitChange,
+  disabled,
+  invalid,
+  fluid = false,
+  className,
+}: ReconnectWindowFieldsProps) {
+  const controlWidth = fluid ? 'flex-1 min-w-0' : 'w-[120px]';
+  return (
+    <div className={cn('flex items-center gap-[var(--spacing-system-xsf)]', className)}>
+      <span className={cn('shrink-0 text-h4', disabled ? 'text-ods-text-disabled' : 'text-ods-text-secondary')}>
+        Stop Retry after
+      </span>
+      <ScheduleIntervalInput
+        min={unit === 'minute' ? MIN_RECONNECT_MINUTES : 1}
+        aria-label="Stop retry after"
+        className={controlWidth}
+        value={interval}
+        onChange={onIntervalChange}
+        onBlur={onIntervalBlur}
+        // Where a failed Save should land. Without it the section marker below
+        // hands focus to its first focusable descendant, which is the "Skip
+        // this Run" radio — three controls away from the value to fix.
+        data-invalid-focus
+        disabled={disabled}
+        invalid={invalid}
+      />
+      {/* Switching to minutes drags the interval up to the floor with it: "1 Day"
+          would otherwise read "1 Minute", a value the user never typed and the
+          form cannot save. Coarser units clear the floor by construction. */}
+      <Select value={unit} onValueChange={(next: DurationUnit) => onUnitChange(next)} disabled={disabled}>
+        <SelectTrigger className={controlWidth} aria-label="Stop retry after unit">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {DURATION_UNIT_OPTIONS.map(opt => (
+            <SelectItem key={opt.value} value={opt.value}>
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+/**
+ * "If device is offline at scheduled time" — Skip this Run vs Run when device
+ * comes back online, plus the reconnect window the second one needs
+ * (design node 460:63425).
+ *
+ * Maps to `offlineBehavior` (`SKIP` | `RETRY_ON_RECONNECT`) and
+ * `reconnectWindowSeconds`. The window is submitted ONLY alongside
+ * RETRY_ON_RECONNECT — the schema documents it as "set only when offlineBehavior
+ * is RETRY_ON_RECONNECT" — which is also why it is required rather than
+ * optional-meaning-forever: nothing in the contract says a null window queues a
+ * run indefinitely, so the form never offers a reading it cannot back up.
+ *
+ * The block presupposes a scheduled time the device can be absent FOR, so it
+ * collapses for DEVICE_ONLINE — which fires on the reconnect already — and
+ * submits the SKIP default instead of what the collapsed controls hold.
+ * DEVICE_LOCAL keeps it: its scheduled moment is the device's own wall clock.
+ *
+ * It collapses with the `0fr → 1fr` grid-rows technique, staying MOUNTED so
+ * toggling the trigger back restores what was picked, `inert` to drop the
+ * collapsed controls out of the tab order, and a padding/negative-margin pair:
+ * the bottom padding is the room the absolutely-positioned error renders into,
+ * and the constant negative margin cancels it so a collapsed block leaves no
+ * hole.
+ */
+export function ScheduleOfflineFields({ showErrors, disabled = false }: { showErrors: boolean; disabled?: boolean }) {
+  const { control } = useFormContext<ScheduleFormData>();
+  const trigger = useWatch({ control, name: 'trigger' });
+  // The one reading with no offline moment to decide about — see the docstring.
+  const collapsed = isEventTrigger(trigger);
+
+  const { field: behaviorField } = useController({ control, name: 'offlineBehavior' });
+  const { field: intervalField, fieldState: intervalState } = useController({ control, name: 'reconnectInterval' });
+  const { field: unitField } = useController({ control, name: 'reconnectUnit' });
+
+  // The window belongs to the second option and only to it. Locked under SKIP
+  // rather than hidden: the design keeps it on the row so the choice reads as
+  // "skip, or retry for THIS long", and a click anywhere on that row selects the
+  // option and unlocks it — the controls themselves are interactive content,
+  // which a label's activation behavior skips, so using them never re-triggers
+  // the radio they sit inside.
+  const windowDisabled = disabled || !isRetryOnReconnect(behaviorField.value);
+  const intervalError = showErrors ? intervalState.error?.message : undefined;
+
+  // Switching TO minutes drags the interval up to the floor with it, the way the
+  // repeat pair does: "1 Day" would otherwise read "1 Minute", a value the user
+  // never typed and the form cannot save. A cleared field stays cleared.
+  const handleUnitChange = (next: DurationUnit) => {
+    unitField.onChange(next);
+    const snapped = snapReconnectInterval(intervalField.value, next);
+    if (snapped !== intervalField.value) intervalField.onChange(snapped);
+  };
+
+  const windowFieldsFor = (fluid: boolean) => (
+    <ReconnectWindowFields
+      interval={intervalField.value}
+      unit={unitField.value}
+      onIntervalChange={intervalField.onChange}
+      onIntervalBlur={intervalField.onBlur}
+      onUnitChange={handleUnitChange}
+      disabled={windowDisabled}
+      invalid={!!intervalError}
+      fluid={fluid}
+    />
+  );
+
+  const options = SCHEDULE_OFFLINE_BEHAVIOR_OPTIONS.map(option =>
+    isRetryOnReconnect(option.value)
+      ? // Desktop only. Below `md` the caption plus two controls cannot share a
+        // row with the option's own label without squeezing it to nothing, so
+        // the same fields render full-width under the group instead.
+        { ...option, trailing: <div className="hidden content-md:flex">{windowFieldsFor(false)}</div> }
+      : option,
+  );
+
+  return (
+    <div
+      inert={collapsed}
+      style={{
+        gridTemplateRows: collapsed ? '0fr' : '1fr',
+        opacity: collapsed ? 0 : 1,
+      }}
+      className="mb-[calc(-1*var(--spacing-system-lf))] grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none"
+    >
+      <div className="min-h-0 overflow-hidden">
+        {/* The bottom padding is the room the error below renders into, and it
+            sits on a wrapper INSIDE the clipping box rather than on the box
+            itself: a box is never shorter than its own padding — border-box
+            included — so padding on the grid item would survive the 0fr track as
+            24px of residue that the negative margin above then spends cancelling
+            instead of closing the section gap. */}
+        <div className="pb-[var(--spacing-system-lf)]">
+          {/* `data-invalid` on the SECTION, not on the number inputs: one of
+              those two copies is always display:none, and an ancestor is matched
+              before either, so the marker is visible at every breakpoint. What
+              it cannot say on its own is WHERE to put focus — the first
+              focusable inside it is the "Skip this Run" radio — so the input
+              carries `data-invalid-focus` and the helper prefers it. */}
+          <div
+            className="relative flex flex-col gap-[var(--spacing-system-xxs)]"
+            data-invalid={intervalError ? true : undefined}
+          >
+            <Label className="text-h4">If device is offline at scheduled time</Label>
+            <RadioGroupBlock
+              variant="grouped"
+              value={behaviorField.value}
+              onValueChange={behaviorField.onChange}
+              disabled={disabled}
+              options={options}
+            />
+            <div className="pt-[var(--spacing-system-xs)] content-md:hidden">{windowFieldsFor(true)}</div>
+            {intervalError && (
+              <div className="absolute bottom-0 left-0 right-0 translate-y-full">
+                <TruncateText variant="h6" className="text-ods-error">
+                  {intervalError}
+                </TruncateText>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/features/scripts/schedule-form/schedule-script-picker-card.tsx

@@ -0,0 +1,321 @@
+'use client';
+'use no memo';
+
+import { Controller, useFormContext } from 'react-hook-form';
+import { useContentMdUp } from '../../../../hooks/ui/use-content-breakpoint';
+import { DraggerIcon } from '../../../icons-v2-generated/interface/dragger-icon';
+import { TrashIcon } from '../../../icons-v2-generated/interface/trash-icon';
+import { ScriptArguments } from '../../../platform/ScriptArguments';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion';
+import { Button } from '../../../ui/button';
+import { Input } from '../../../ui/input';
+import { Label } from '../../../ui/label';
+import { SortableMoveButtons } from '../../sortable-list/sortable-move-buttons';
+import { useSortableItem } from '../../sortable-list/use-sortable-item';
+import {
+  EMPTY_SCHEDULE_SCRIPT_ROW,
+  type RenderScheduleScriptSearch,
+  type ScheduleFormData,
+  type ScheduleFormScriptRow,
+} from './schedule-form-types';
+
+/** Sentinel for "no script picked yet" — the field is locked and renders empty. */
+const UNSET_TIMEOUT = 0;
+
+interface ScheduleScriptPickerCardProps {
+  index: number;
+  /** How many cards the list has — disables the move buttons at the ends. */
+  count: number;
+  /** UI platform ids the schedule targets — what the host narrows its script search by. */
+  supportedPlatforms: string[];
+  /** The card's "Select Script" field: the host's search over its script library. */
+  renderScriptSearch: RenderScheduleScriptSearch;
+  onRemove: () => void;
+  canRemove: boolean;
+  disabled?: boolean;
+  /**
+   * Controls inline error visibility — the parent flips this true once the
+   * user attempts Save, so errors stay hidden on a pristine form (mirrors
+   * `ScriptFormFields.showErrors`).
+   */
+  showErrors?: boolean;
+  /**
+   * The script's arguments and environment variables under the first row.
+   * Default true; false is the card as one row (the script and its timeout).
+   */
+  showParams?: boolean;
+}
+
+/**
+ * One card of the schedule's ordered script list: drag handle, script
+ * autocomplete, timeout and the script's arguments / environment variables.
+ *
+ * **Order is the payload.** The card index IS the run order — the backend
+ * stores `scriptIds: [ID!]` in run order, so reordering rewrites that array.
+ *
+ * Sorting runs on the core library's `SortableList` (`useSortableItem`), the
+ * same Pragmatic stack the ticket board uses. Only the handle starts a drag,
+ * so text selection inside the fields keeps working, and the handle carries
+ * the keyboard path (Arrow Up / Arrow Down, one press one move) with
+ * live-region announcements wired up by the list. On touch/narrow viewports
+ * no drag exists at all — an up/down button pair renders beside the delete
+ * button instead.
+ *
+ * Arguments and env vars ARE persisted, as this schedule's per-script override
+ * (`scriptCustomParams`): they seed from the picked script's defaults, and only
+ * a half the user moves off those defaults is written back — so leaving a card
+ * untouched keeps the schedule following later edits to the script itself.
+ *
+ * ⚠ **Timeout is still editable but not persisted**: the override input carries
+ * args and env vars only. It is
+ * seeded from the script's own default, which is what the run actually uses, so
+ * the card shows the truth — it just cannot be changed per schedule yet.
+ */
+export function ScheduleScriptPickerCard({
+  index,
+  count,
+  supportedPlatforms,
+  renderScriptSearch,
+  onRemove,
+  canRemove,
+  disabled = false,
+  showErrors = true,
+  showParams = true,
+}: ScheduleScriptPickerCardProps) {
+  const { control, setValue, watch } = useFormContext<ScheduleFormData>();
+  const selected = watch(`scripts.${index}`);
+
+  // Timeout / arguments / env vars all belong to the picked script and are
+  // seeded from it, so they stay locked until there is a script to belong to.
+  const runParamsLocked = disabled || !selected?.scriptId;
+
+  const { itemRef, dragHandleProps, isDragging, dragAndDropEnabled } = useSortableItem();
+  // Mobile folds the args/env editors into accordions; `undefined` (SSR/first
+  // render) keeps the expanded variant and settles before first paint.
+  const isMdUp = useContentMdUp();
+
+  const handleScriptPick = (row: ScheduleFormScriptRow | null) => {
+    if (!row) {
+      // Back to the locked state: the run parameters belong to the script, so
+      // clearing the script clears them rather than leaving a stale timeout.
+      setValue(`scripts.${index}`, EMPTY_SCHEDULE_SCRIPT_ROW, { shouldValidate: true });
+      return;
+    }
+    // The row the host seeds from the script itself — that IS what the
+    // schedule will run with, so the card never shows blanks for a real script.
+    // A freshly picked script therefore starts UNCUSTOMISED: the defaults ride
+    // along beside the editable copy, and submit writes an override only for a
+    // half the user actually moved off them.
+    setValue(`scripts.${index}`, row, { shouldValidate: true, shouldDirty: true });
+  };
+
+  return (
+    <div
+      ref={itemRef}
+      // No inline style here — the list writes `transform` straight onto this
+      // node during a drag (see `SortableList`).
+      className={`flex flex-col gap-[var(--spacing-system-sf)] rounded-[6px] border bg-ods-bg p-[var(--spacing-system-l)] content-md:gap-[var(--spacing-system-lf)] ${
+        isDragging ? 'relative z-10 border-ods-accent shadow-lg' : 'border-ods-border'
+      }`}
+    >
+      {/* Touch (no DnD): the mock stacks the rows on every width and puts the
+          move buttons + delete in the Select Script row, spaced by a fixed 8px;
+          with DnD the approved desktop layout stays — handle beside the select,
+          delete beside the timeout, the two halves side by side from md. */}
+      <div
+        className={`flex flex-col gap-[var(--spacing-system-sf)] content-md:gap-[var(--spacing-system-lf)] ${dragAndDropEnabled ? 'content-md:flex-row content-md:items-end' : ''}`}
+      >
+        <div
+          className={`flex min-w-0 flex-1 items-end ${
+            dragAndDropEnabled ? 'gap-[var(--spacing-system-xs)]' : 'gap-[var(--spacing-system-xsf)]'
+          }`}
+        >
+          {dragAndDropEnabled && (
+            <button
+              type="button"
+              {...dragHandleProps}
+              disabled={disabled}
+              aria-label={`Reorder ${selected?.name || `script ${index + 1}`}`}
+              className={`flex size-12 shrink-0 items-center justify-center rounded-[6px] text-ods-text-secondary hover:text-ods-text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-ods-border-focus disabled:cursor-not-allowed disabled:opacity-30 ${
+                isDragging ? 'cursor-grabbing text-ods-text-primary' : 'cursor-grab'
+              }`}
+            >
+              <DraggerIcon size={24} />
+            </button>
+          )}
+
+          <Controller
+            name={`scripts.${index}.scriptId`}
+            control={control}
+            render={({ fieldState }) => (
+              <>
+                {renderScriptSearch({
+                  scriptId: selected?.scriptId ?? '',
+                  name: selected?.name ?? '',
+                  supportedPlatforms,
+                  onPick: handleScriptPick,
+                  disabled,
+                  error: showErrors ? fieldState.error?.message : undefined,
+                  invalid: showErrors && !!fieldState.error,
+                })}
+              </>
+            )}
+          />
+
+          {!dragAndDropEnabled && (
+            <>
+              <SortableMoveButtons index={index} count={count} label={selected?.name || `script ${index + 1}`} />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={onRemove}
+                disabled={!canRemove || disabled}
+                aria-label="Remove script from schedule"
+                className="text-ods-error disabled:opacity-30"
+              >
+                <TrashIcon size={20} />
+              </Button>
+            </>
+          )}
+        </div>
+
+        <div className="flex min-w-0 flex-1 items-end gap-[var(--spacing-system-xs)]">
+          <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
+            <Label className="text-h4">Timeout</Label>
+            <Controller
+              name={`scripts.${index}.timeoutSeconds`}
+              control={control}
+              render={({ field, fieldState }) => (
+                // Locked until a script is picked: the timeout belongs to the
+                // script, so the field stays EMPTY until there is one — the
+                // sentinel is a "nothing here yet" marker, and rendering it as
+                // a literal 0 would read as a real (and invalid) timeout.
+                // Picking a script writes its own timeout in.
+                <Input
+                  type="number"
+                  min={1}
+                  className="w-full"
+                  value={field.value ? String(field.value) : ''}
+                  onChange={e => field.onChange(e.target.value ? Number(e.target.value) : UNSET_TIMEOUT)}
+                  disabled={runParamsLocked}
+                  endAdornment={<span className="text-ods-text-secondary text-h6">Seconds</span>}
+                  error={showErrors ? fieldState.error?.message : undefined}
+                  invalid={showErrors && !!fieldState.error}
+                />
+              )}
+            />
+          </div>
+
+          {dragAndDropEnabled && (
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={onRemove}
+              disabled={!canRemove || disabled}
+              aria-label="Remove script from schedule"
+              className="text-ods-error disabled:opacity-30"
+            >
+              <TrashIcon size={20} />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Arguments / env vars are the same class of field as Timeout — they
+          belong to the picked script and are seeded from it — so they stay
+          locked until there is a script to belong to.
+          Mobile folds the two editors into "Edit Default …" accordions (per the
+          mock); from md up they stay expanded side by side. The editors are the
+          only difference — both branches render the same controlled fields. */}
+      {!showParams ? null : isMdUp === false ? (
+        <Accordion type="multiple" className="overflow-hidden rounded-[6px] border border-ods-border">
+          <AccordionItem value="args" className="border-ods-border data-[state=closed]:bg-ods-card">
+            <AccordionTrigger className="h-14 px-[var(--spacing-system-sf)] py-0 text-ods-text-primary text-h6 hover:no-underline [&>svg]:text-ods-text-secondary">
+              Edit Default Script Arguments
+            </AccordionTrigger>
+            {/* The editor's own title would duplicate the trigger — an empty
+                titleLabel renders an empty <label>, hidden by :empty. */}
+            <AccordionContent className="px-[var(--spacing-system-sf)] [&_label:empty]:hidden">
+              <Controller
+                name={`scripts.${index}.args`}
+                control={control}
+                render={({ field }) => (
+                  <ScriptArguments
+                    arguments={field.value}
+                    onArgumentsChange={field.onChange}
+                    keyPlaceholder="Key"
+                    valuePlaceholder="Enter Value (empty=flag)"
+                    addButtonLabel="Add Script Argument"
+                    titleLabel=""
+                    disabled={runParamsLocked}
+                  />
+                )}
+              />
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="env" className="border-b-0 border-ods-border data-[state=closed]:bg-ods-card">
+            <AccordionTrigger className="h-14 px-[var(--spacing-system-sf)] py-0 text-ods-text-primary text-h6 hover:no-underline [&>svg]:text-ods-text-secondary">
+              Edit Default Environment Vars
+            </AccordionTrigger>
+            <AccordionContent className="px-[var(--spacing-system-sf)] [&_label:empty]:hidden">
+              <Controller
+                name={`scripts.${index}.envVars`}
+                control={control}
+                render={({ field }) => (
+                  <ScriptArguments
+                    arguments={field.value}
+                    onArgumentsChange={field.onChange}
+                    keyPlaceholder="Key"
+                    valuePlaceholder="Enter Value"
+                    addButtonLabel="Add Environment Var"
+                    addSecretButtonLabel="Add Secret"
+                    titleLabel=""
+                    disabled={runParamsLocked}
+                  />
+                )}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      ) : (
+        <div className="flex flex-col items-start gap-[var(--spacing-system-lf)] content-md:flex-row">
+          <div className="w-full min-w-0 flex-1 [&_label]:text-h4">
+            <Controller
+              name={`scripts.${index}.args`}
+              control={control}
+              render={({ field }) => (
+                <ScriptArguments
+                  arguments={field.value}
+                  onArgumentsChange={field.onChange}
+                  keyPlaceholder="Key"
+                  valuePlaceholder="Enter Value (empty=flag)"
+                  addButtonLabel="Add Script Argument"
+                  titleLabel="Script Arguments"
+                  disabled={runParamsLocked}
+                />
+              )}
+            />
+          </div>
+          <div className="w-full min-w-0 flex-1 [&_label]:text-h4">
+            <Controller
+              name={`scripts.${index}.envVars`}
+              control={control}
+              render={({ field }) => (
+                <ScriptArguments
+                  arguments={field.value}
+                  onArgumentsChange={field.onChange}
+                  keyPlaceholder="Key"
+                  valuePlaceholder="Enter Value"
+                  addButtonLabel="Add Environment Var"
+                  addSecretButtonLabel="Add Secret"
+                  titleLabel="Environment Vars"
+                  disabled={runParamsLocked}
+                />
+              )}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}