@adcops/autocore-react 3.3.89 → 3.3.91

package/src/components/tis/TestDataView.tsx

@@ -37,6 +37,7 @@ import { Chart as ChartJS,
     Title, Tooltip, Legend,
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
+import annotationPlugin from 'chartjs-plugin-annotation';
 import { Line } from 'react-chartjs-2';
 
 import { EventEmitterContext } from '../../core/EventEmitterContext';
@@ -46,7 +47,7 @@ import { useRawCycleData } from './useRawCycleData';
 
 ChartJS.register(
     CategoryScale, LinearScale, PointElement, LineElement,
-    Title, Tooltip, Legend, zoomPlugin,
+    Title, Tooltip, Legend, zoomPlugin, annotationPlugin,
 );
 
 // -------------------------------------------------------------------------
@@ -69,11 +70,58 @@ export interface TestFieldDef {
 
 export interface ChartAxis  { field?: string; column?: string; label?: string; }
 export interface ChartSeries { field?: string; column?: string; label?: string; y_axis?: 'left' | 'right'; }
+/**
+ * A shaded X-range band drawn over the plot (rendered as a
+ * chartjs-plugin-annotation `box` annotation spanning the full Y height).
+ * `xMin`/`xMax` are in the same units as the view's x data — for a
+ * `raw_trace` that's the x column's value, for a `cycle_scatter` it's the
+ * category index. Used to indicate a processed / region-of-interest span.
+ */
+export interface ChartRegion {
+    /** Start of the band on the X axis. */
+    xMin: number;
+    /** End of the band on the X axis. */
+    xMax: number;
+    /** Optional caption drawn at the top-center of the band. */
+    label?: string;
+    /** Fill color (any CSS color). Default: translucent theme accent. */
+    color?: string;
+    /** Optional band-edge border color. Default: no border. */
+    borderColor?: string;
+}
 export interface ChartView  {
     title?: string;
     type: 'cycle_scatter' | 'raw_trace';
     x: ChartAxis;
     y: ChartSeries[];
+    /**
+     * Display-only line smoothing for `raw_trace` views. `undefined ⇒ true`.
+     *
+     * When on, each series is passed through a Savitzky–Golay filter (which
+     * removes sample-to-sample noise while keeping peak height/shape),
+     * lightly decimated, and drawn with monotone-cubic interpolation — a
+     * smooth curve that traces the profile instead of a squiggly polyline.
+     * The underlying `raw` data is never altered (table, CSV, and any
+     * calculations still see the exact samples). Set `false` to render the
+     * raw polyline through every sample.
+     */
+    smooth?: boolean;
+    /**
+     * Optional Savitzky–Golay window size in samples (odd; clamped to the
+     * series length). Larger = smoother. Default is adaptive to the sample
+     * count. Ignored when `smooth` is false.
+     */
+    smoothWindow?: number;
+    /**
+     * Optional shaded X-range bands drawn over the plot, declared per view
+     * in project.json (static). These are drawn on every cycle.
+     *
+     * For per-cycle dynamic bands (computed at runtime from processed
+     * data), the producer instead attaches a `regions` array to the
+     * raw-data envelope; the component merges those with these and renders
+     * both. See `dynamicRegions` in the component body.
+     */
+    regions?: ChartRegion[];
 }
 export interface RawColumn { source: string; }
 export interface RawDataShape {
@@ -325,16 +373,28 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
             const xCol = selectedViewDef.x.column;
             if (!xCol) return null;
             const xs = traceFetch.raw[xCol] ?? [];
-            const datasets = selectedViewDef.y.map((s, idx) => ({
-                label: s.label ?? s.column,
-                data: (traceFetch.raw![s.column!] ?? []).map((y, i) => ({ x: xs[i], y })),
-                yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
-                borderColor:  palette(idx),
-                backgroundColor: palette(idx),
-                pointRadius: 0,
-                borderWidth: 1.5,
-                showLine: true,
-            }));
+            // Display-only smoothing (default on). Leaves traceFetch.raw
+            // untouched — only what chart.js draws changes.
+            const smoothOn = selectedViewDef.smooth !== false;
+            const datasets = selectedViewDef.y.map((s, idx) => {
+                const ys = (traceFetch.raw![s.column!] ?? []) as number[];
+                const data = smoothOn
+                    ? smoothTraceForDisplay(xs, ys, selectedViewDef.smoothWindow)
+                    : ys.map((y, i) => ({ x: xs[i], y }));
+                return {
+                    label: s.label ?? s.column,
+                    data,
+                    yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
+                    borderColor:  palette(idx),
+                    backgroundColor: palette(idx),
+                    pointRadius: 0,
+                    borderWidth: 1.5,
+                    showLine: true,
+                    // Smooth curve through the (already de-noised) points;
+                    // 'monotone' avoids the overshoot a plain tension adds.
+                    ...(smoothOn ? { cubicInterpolationMode: 'monotone' as const } : {}),
+                };
+            });
             return { datasets };
         }
         return null;
@@ -342,6 +402,28 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
 
     const usesRightAxis = selectedViewDef?.y.some(s => s.y_axis === 'right') ?? false;
 
+    // Per-cycle region bands carried in the raw-data envelope — the dynamic
+    // case: bands computed at runtime from processed data, changing each
+    // cycle. The hook re-fetches the envelope whenever the selected cycle
+    // changes, so these update automatically with the cycle picker.
+    //
+    // Read a top-level `regions` field first; fall back to `context.regions`
+    // so a producer can attach bands today (the envelope's `context` is
+    // already passed straight through by the server) without waiting on a
+    // server-side envelope-shape change.
+    const dynamicRegions = useMemo<ChartRegion[]>(() => {
+        if (!isRawTraceView) return [];
+        const env: any = traceFetch.envelope;
+        const r = env?.regions ?? env?.context?.regions;
+        return Array.isArray(r) ? r : [];
+    }, [isRawTraceView, traceFetch.envelope]);
+
+    // Static (schema-declared) bands + dynamic (per-cycle) bands, drawn together.
+    const activeRegions = useMemo<ChartRegion[]>(
+        () => [...(selectedViewDef?.regions ?? []), ...dynamicRegions],
+        [selectedViewDef, dynamicRegions],
+    );
+
     const chartOptions = useMemo(() => {
         const isTrace = selectedViewDef?.type === 'raw_trace';
         return {
@@ -375,9 +457,15 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
                         mode:  'xy' as const,
                     },
                 },
+                // Region bands: the view's static `regions` declaration plus
+                // any per-cycle bands carried in the raw-data envelope, merged
+                // upstream into `activeRegions`.
+                annotation: {
+                    annotations: buildRegionAnnotations(activeRegions),
+                },
             },
         };
-    }, [selectedViewDef, usesRightAxis]);
+    }, [selectedViewDef, usesRightAxis, activeRegions]);
 
     // -----------------------------------------------------------------
     // View Raw Data dialog: lazy-fetch raw + filtered blobs the first
@@ -1010,6 +1098,176 @@ const CHART_COLORS = [
 ];
 const palette = (i: number) => CHART_COLORS[i % CHART_COLORS.length];
 
+// =========================================================================
+// Display-only trace smoothing (Savitzky–Golay + decimation)
+//
+// Why SG: a sliding low-order polynomial fit removes sample-to-sample noise
+// while preserving the height and width of real features (peaks) far better
+// than a moving average, which pulls peaks toward the local mean. This is
+// purely cosmetic — it runs on a copy of the y-values when building the
+// chart dataset and never touches `traceFetch.raw`, so the raw table, CSV
+// export, and any downstream math see the exact samples.
+// =========================================================================
+
+// Cubic fit: preserves peak curvature better than linear/quadratic.
+const SG_ORDER = 3;
+// Target point count after decimation. The smoothed series is broad, so
+// uniform decimation to ~this many points renders cheaply and looks
+// identical to drawing all 5000.
+const SMOOTH_TARGET_POINTS = 800;
+
+// Invert a small square matrix via Gauss–Jordan. Returns null if singular.
+function invertMatrix(M: number[][]): number[][] | null {
+    const n = M.length;
+    const A = M.map((row, i) =>
+        [...row, ...Array.from({ length: n }, (_, j) => (i === j ? 1 : 0))]);
+    for (let col = 0; col < n; col++) {
+        let piv = col;
+        for (let r = col + 1; r < n; r++)
+            if (Math.abs(A[r][col]) > Math.abs(A[piv][col])) piv = r;
+        if (Math.abs(A[piv][col]) < 1e-12) return null;
+        [A[col], A[piv]] = [A[piv], A[col]];
+        const d = A[col][col];
+        for (let j = 0; j < 2 * n; j++) A[col][j] /= d;
+        for (let r = 0; r < n; r++) {
+            if (r === col) continue;
+            const f = A[r][col];
+            if (f === 0) continue;
+            for (let j = 0; j < 2 * n; j++) A[r][j] -= f * A[col][j];
+        }
+    }
+    return A.map(row => row.slice(n));
+}
+
+// Savitzky–Golay smoothing weights for a window of half-width `h`
+// (size 2h+1) and polynomial `order`. The center smoothed value is the
+// constant term of the local least-squares polynomial fit, i.e. row 0 of
+// (AᵀA)⁻¹Aᵀ. Weights depend only on (h, order) → computed once, cached.
+function sgWeights(h: number, order: number): number[] {
+    const win = 2 * h + 1;
+    const ord = Math.min(order, win - 1);
+    const A: number[][] = [];
+    for (let z = -h; z <= h; z++) {
+        const row: number[] = [];
+        let zp = 1;
+        for (let c = 0; c <= ord; c++) { row.push(zp); zp *= z; }
+        A.push(row);
+    }
+    const m = ord + 1;
+    const M: number[][] = Array.from({ length: m }, () => new Array(m).fill(0));
+    for (let a = 0; a < m; a++)
+        for (let b = 0; b < m; b++) {
+            let s = 0;
+            for (let r = 0; r < win; r++) s += A[r][a] * A[r][b];
+            M[a][b] = s;
+        }
+    const Minv = invertMatrix(M);
+    if (!Minv) return new Array(win).fill(1 / win); // degenerate → flat mean
+    const w = new Array<number>(win);
+    for (let r = 0; r < win; r++) {
+        let s = 0;
+        for (let a = 0; a < m; a++) s += Minv[0][a] * A[r][a];
+        w[r] = s;
+    }
+    return w;
+}
+
+// Apply SG smoothing to a y-series. Near the ends the window shrinks
+// symmetrically (h = distance to the nearest edge) so the filter stays
+// centered and no phantom data is invented past the trace boundaries.
+function savitzkyGolay(ys: number[], halfWidth: number): number[] {
+    const n = ys.length;
+    if (n === 0 || halfWidth < 1) return ys.slice();
+    const cache = new Map<number, number[]>();
+    const weightsFor = (h: number) => {
+        let w = cache.get(h);
+        if (!w) { w = sgWeights(h, SG_ORDER); cache.set(h, w); }
+        return w;
+    };
+    const out = new Array<number>(n);
+    for (let i = 0; i < n; i++) {
+        const h = Math.min(halfWidth, i, n - 1 - i);
+        if (h < 1) { out[i] = ys[i]; continue; }
+        const w = weightsFor(h);
+        let s = 0;
+        for (let k = -h; k <= h; k++) s += w[k + h] * ys[i + k];
+        out[i] = s;
+    }
+    return out;
+}
+
+// Build the {x, y} points chart.js draws for a smoothed raw_trace series:
+// SG-denoise, then uniformly decimate the broad result to SMOOTH_TARGET_POINTS.
+function smoothTraceForDisplay(
+    xs: number[],
+    ys: number[],
+    window?: number,
+): { x: number; y: number }[] {
+    const n = Math.min(xs.length, ys.length);
+    if (n === 0) return [];
+    // Adaptive default half-width: wide enough to suppress noise, narrow
+    // enough to keep features. An explicit `smoothWindow` (full odd size)
+    // overrides it.
+    const half = window && window > 1
+        ? Math.max(1, Math.floor((Math.min(window, n) - 1) / 2))
+        : Math.max(2, Math.min(40, Math.round(n / 250)));
+    const sm = savitzkyGolay(ys.slice(0, n), half);
+    const stride = Math.max(1, Math.ceil(n / SMOOTH_TARGET_POINTS));
+    const out: { x: number; y: number }[] = [];
+    for (let i = 0; i < n; i += stride) out.push({ x: xs[i], y: sm[i] });
+    // Always anchor the final sample so the curve reaches the trace end.
+    if ((n - 1) % stride !== 0) out.push({ x: xs[n - 1], y: sm[n - 1] });
+    return out;
+}
+
+// Default translucent fill for region bands (theme accent at low alpha).
+const DEFAULT_REGION_FILL = 'rgba(78, 168, 222, 0.15)';
+// Label color must be a concrete canvas color — CSS variables don't
+// resolve when chart.js paints to the 2D context.
+const REGION_LABEL_COLOR = 'rgba(226, 232, 240, 0.85)';
+
+/**
+ * Translate the view's `regions` into chartjs-plugin-annotation `box`
+ * annotations keyed by a stable id. Each band spans the full Y height
+ * (yMin/yMax left unset) between `xMin` and `xMax` on the x scale.
+ * Returns an empty map when there are no regions, which the plugin
+ * treats as "draw nothing".
+ *
+ * This is the single seam through which both the static schema path and a
+ * future dynamic (processed-data) path produce annotations.
+ */
+function buildRegionAnnotations(regions?: ChartRegion[]): Record<string, any> {
+    if (!regions || regions.length === 0) return {};
+    const out: Record<string, any> = {};
+    regions.forEach((r, i) => {
+        const hasBorder = !!r.borderColor;
+        out[`region-${i}`] = {
+            type: 'box',
+            xScaleID: 'x',
+            xMin: r.xMin,
+            xMax: r.xMax,
+            // yMin/yMax intentionally omitted → band spans the plot height.
+            backgroundColor: r.color ?? DEFAULT_REGION_FILL,
+            borderColor: hasBorder ? r.borderColor : 'transparent',
+            borderWidth: hasBorder ? 1 : 0,
+            // Sit behind the data line so the trace stays readable.
+            drawTime: 'beforeDatasetsDraw' as const,
+            ...(r.label
+                ? {
+                    label: {
+                        display: true,
+                        content: r.label,
+                        position: { x: 'center' as const, y: 'start' as const },
+                        color: REGION_LABEL_COLOR,
+                        font: { size: 11 },
+                    },
+                }
+                : {}),
+        };
+    });
+    return out;
+}
+
 // Loading / error wash drawn over the chart area while a raw_trace
 // fetch is in flight. Centered, pointer-events-none so the operator
 // can still interact with the dropdown above.

package/src/components/tis/TestSetupForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useContext, useMemo } from 'react';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
 import { Dropdown } from 'primereact/dropdown';
@@ -11,6 +11,7 @@ import { TextInput } from '../TextInput';
 import { useTis } from './TisProvider';
 import { useAmsAssets, useAmsRoles, type AmsAssetEntry } from '../ams/AmsProvider';
 import { TestMethodDialog } from './TestMethodDialog';
+import { ConfigurationDialog, configLabelOf } from './ConfigurationDialog';
 
 /**
  * One asset_ref declared on a test method. We only consume the subset
@@ -59,6 +60,19 @@ export interface TestFieldDef {
      *  Cycle and results values are scaled by the corresponding paths
      *  in TestDataView; the server scales CSV exports too. */
     scale?: number;
+    /** Optional fixed set of choices. When present, the field renders
+     *  as a dropdown and the operator must pick one of the declared
+     *  values rather than typing freely. Each entry is either a bare
+     *  scalar (label === value) or an explicit `{ label, value }` pair
+     *  when the displayed text should differ from the stored value.
+     *  Works with any `type`; like `default`, values are authored in
+     *  display units when `scale` is set. */
+    options?: Array<
+        | string
+        | number
+        | boolean
+        | { label?: string; value: string | number | boolean }
+    >;
 }
 
 export interface TestMethod {
@@ -90,6 +104,33 @@ export interface TestMethod {
      *  as `analysis` — the form ignores them; the type just has to
      *  accept them so generated schemas typecheck. */
     views?: Record<string, any>;
+    /**
+     * Optional named configurations for this method. When one or more
+     * are declared, the form renders a Configuration selector beneath
+     * the Test Method picker. Selecting (or accepting) a configuration
+     * writes its `defaults` into the matching config_fields. Each
+     * configuration only needs to declare the fields whose value is
+     * specific to it — unlisted fields keep the method's base default.
+     */
+    configurations?: TestConfiguration[];
+}
+
+/**
+ * One named, ready-to-use set of config_field overrides for a method —
+ * e.g. translational_traction's "Plaque" vs "Shoe". `defaults` is a
+ * sparse map of `config_field.name → value`; values are authored in
+ * display units (the form converts via the field's `scale` before
+ * writing to stagedConfig / GM, same convention as `TestFieldDef.default`).
+ */
+export interface TestConfiguration {
+    /** Canonical key — unique within the method. */
+    name: string;
+    /** Pretty label shown in the Configuration picker. Falls back to `name`. */
+    label?: string;
+    /** Long-form guidance shown beside the dropdown in the picker dialog. */
+    description?: string;
+    /** Sparse `config_field.name → value` overrides applied on selection. */
+    defaults?: Record<string, any>;
 }
 
 /**
@@ -145,6 +186,20 @@ const displayToRaw = (display: any, scale: number | undefined): any => {
 const hasDescription = (f: TestFieldDef): boolean =>
     typeof f.description === 'string' && f.description.length > 0;
 
+/**
+ * Normalise a field's `options` (bare scalars and/or `{label, value}`
+ * pairs) into the `{ label, value }[]` shape PrimeReact's Dropdown
+ * wants. Bare scalars use their stringified form as the label.
+ */
+const normalizeOptions = (
+    opts: TestFieldDef['options'],
+): { label: string; value: string | number | boolean }[] =>
+    (opts ?? []).map((o) =>
+        o !== null && typeof o === 'object'
+            ? { label: String(o.label ?? o.value), value: o.value }
+            : { label: String(o), value: o },
+    );
+
 const methodLabelOf = (methodId: string, schema: TestMethod | undefined): string =>
     (schema?.label && schema.label.length > 0) ? schema.label : methodId;
 
@@ -240,6 +295,28 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     const schema = schemaOverride ?? (methodId ? tis.schemas[methodId] : undefined);
 
+    // Write one configuration's sparse `defaults` overrides into a config
+    // object in place (returns the same object for chaining). Mirrors the
+    // base-default seeding below: values are authored in display units, so
+    // we convert to raw before storing; source-bound fields are also
+    // pushed to GM so the control program sees them. Used both by the
+    // auto-apply-first effect and by the picker dialog's accept handler.
+    const applyConfigOverridesInto = (cfg: TestConfiguration, target: any): any => {
+        for (const [fieldName, val] of Object.entries(cfg.defaults ?? {})) {
+            if (fieldName === 'sample_id') continue;
+            const field = schema?.config_fields.find((f: TestFieldDef) => f.name === fieldName);
+            const rawVal = displayToRaw(val, field?.scale);
+            target[fieldName] = rawVal;
+            if (field?.source) {
+                void Promise.resolve()
+                    .then(() => write(field.source!, rawVal))
+                    .catch(e => console.error(
+                        `[TestSetupForm] Failed to apply configuration override for ${fieldName}:`, e));
+            }
+        }
+        return target;
+    };
+
     useEffect(() => {
         if (tis.selection.methodId !== methodId && methodId) {
             tis.setSelection({ methodId });
@@ -274,6 +351,19 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     const [isValid, setIsValid] = useState(false);
     const [methodPickerOpen, setMethodPickerOpen] = useState(false);
+    const [configPickerOpen, setConfigPickerOpen] = useState(false);
+
+    const configurations = (schema?.configurations ?? []) as TestConfiguration[];
+    const selectedConfig = configurations.find(c => c.name === tis.configurationName);
+
+    // Operator accepted a configuration in the picker dialog — write its
+    // overrides into the fields and remember the selection.
+    const handleConfigurationSelected = (configName: string) => {
+        const cfg = configurations.find(c => c.name === configName);
+        if (!cfg) return;
+        setConfig((prev: any) => applyConfigOverridesInto(cfg, { ...prev }));
+        tis.setConfigurationName(configName);
+    };
 
     // Single shared "info" dialog used by:
     //   - the Test Setup status button (shows what's wrong, including
@@ -288,14 +378,23 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     // Apply schema-declared defaults when the operator picks a method.
     // Source-bound fields write the default to GM (the control program
     // is the consumer of record); non-source fields land directly in
-    // stagedConfig. We track the last method we seeded so subsequent
-    // re-renders don't clobber operator edits — only an actual method
-    // change re-applies the defaults.
-    const defaultsAppliedFor = useRef<string>('');
+    // stagedConfig. The "already seeded" marker lives on the provider
+    // (tis.defaultsAppliedForMethod), not in a local ref, so it
+    // survives this form unmounting when the operator switches tabs —
+    // otherwise defaults would re-apply on every Test-tab return and
+    // clobber the operator's edits. Only an actual method change (or
+    // clearStagedConfig() after start_test) re-applies the defaults.
     useEffect(() => {
         if (!schema || !methodId) return;
-        if (defaultsAppliedFor.current === methodId) return;
-        defaultsAppliedFor.current = methodId;
+        if (tis.defaultsAppliedForMethod === methodId) return;
+        tis.markDefaultsAppliedForMethod(methodId);
+
+        // Auto-apply the method's first configuration (if any) on top of
+        // the base defaults. '' when the method declares none, which also
+        // clears any stale selection carried over from a previous method.
+        const firstConfig = (schema.configurations && schema.configurations.length > 0)
+            ? schema.configurations[0] as TestConfiguration
+            : undefined;
 
         setConfig((prev: any) => {
             let next = prev;
@@ -321,9 +420,17 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                             `[TestSetupForm] Failed to seed default for ${field.name}:`, e));
                 }
             }
+            // Configuration overrides win over base defaults for the
+            // fields they name (e.g. Plaque's z_start_position).
+            if (firstConfig) {
+                if (next === prev) next = { ...prev };
+                next = applyConfigOverridesInto(firstConfig, next);
+            }
             return next;
         });
-    }, [schema, methodId, write]);
+
+        tis.setConfigurationName(firstConfig ? firstConfig.name : '');
+    }, [schema, methodId, write, tis.defaultsAppliedForMethod, tis.markDefaultsAppliedForMethod, tis.setConfigurationName]);
 
     // Seed and live-update config_fields that declare a `source`.
     useEffect(() => {
@@ -451,7 +558,14 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         if (field.name === 'sample_id') return null;
         const valid = isFieldValid(field);
         const assetType = assetTypeForField(field);
-        const isNum = !assetType && field.type !== 'string' && field.type !== 'bool';
+        // A schema-declared `options` list turns the field into a
+        // dropdown (skipped when an asset_ref already claims the field
+        // — that picker is sourced from AMS, not the static list).
+        const dropdownOptions = !assetType && Array.isArray(field.options) && field.options.length > 0
+            ? normalizeOptions(field.options)
+            : null;
+        const isNum = !assetType && !dropdownOptions
+            && field.type !== 'string' && field.type !== 'bool';
         return (
             <React.Fragment key={field.name}>
                 <span className="ac-form-label">{labelOf(field)}</span>
@@ -462,6 +576,15 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                         onChange={(val) => handleFieldChange(field, val)}
                         invalid={!valid}
                     />
+                ) : dropdownOptions ? (
+                    <Dropdown
+                        value={config[field.name] ?? null}
+                        options={dropdownOptions}
+                        onChange={(e) => handleFieldChange(field, e.value)}
+                        placeholder={`Select ${field.label ?? field.name}…`}
+                        className={!valid ? 'p-invalid' : ''}
+                        showClear={!field.required}
+                    />
                 ) : isNum ? (
                     <ValueInput
                         label={undefined}
@@ -664,7 +787,7 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                             tabIndex={-1}
                         />
                         <Button
-                            icon="pi pi-pencil"
+                            icon="pi pi-folder"
                             type="button"
                             onClick={() => setMethodPickerOpen(true)}
                             tooltip={methodIds.length > 1
@@ -680,6 +803,32 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 </>
             )}
 
+            {configurations.length > 0 && (
+                <>
+                    <span className="ac-form-label">Configuration</span>
+                    <div className="p-inputgroup" style={{ flex: 1 }}>
+                        <InputText
+                            value={selectedConfig ? configLabelOf(selectedConfig) : ''}
+                            placeholder="No configuration selected"
+                            readOnly
+                            style={{ flex: 1 }}
+                            tabIndex={-1}
+                        />
+                        <Button
+                            icon="pi pi-folder"
+                            type="button"
+                            onClick={() => setConfigPickerOpen(true)}
+                            tooltip="Change configuration"
+                            tooltipOptions={{ position: 'top' }}
+                        />
+                    </div>
+                    <span aria-hidden="true" />
+                    <span style={{ color: selectedConfig ? 'var(--green-500)' : 'var(--text-secondary-color)', display: 'flex', alignItems: 'center' }}>
+                        <i className={selectedConfig ? 'pi pi-check' : 'pi pi-minus'} />
+                    </span>
+                </>
+            )}
+
             <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Test Configuration</h3>
             {schema.config_fields.map(renderConfigField)}
 
@@ -690,6 +839,14 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 onSelected={(picked) => setMethodIdLocal(picked)}
             />
 
+            <ConfigurationDialog
+                visible={configPickerOpen}
+                onHide={() => setConfigPickerOpen(false)}
+                configurations={configurations}
+                currentConfigName={tis.configurationName}
+                onSelected={handleConfigurationSelected}
+            />
+
             {/* Shared info dialog. Driven by the Test Setup status
                 button (validation + server errors) and by per-field
                 info buttons (replaces the old hover Tooltip). One