@adcops/autocore-react 3.3.57 → 3.3.61

package/src/components/tis/ProjectInfoDialog.tsx

@@ -0,0 +1,307 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <ProjectInfoDialog> — operator-facing setup for a project's
+ * `project_fields`. Used in two modes:
+ *
+ *   - `create`: opened by the `+` button on <TestSetupForm>. The
+ *     project doesn't exist yet; on submit we call `tis.create_project`
+ *     with the user-entered fields baked into the request payload, so
+ *     the directory and project.json materialise atomically. The form
+ *     pre-fills source-bound fields from live GM values via the
+ *     surrounding AutoCoreTagProvider so the operator isn't typing
+ *     things the rig already knows.
+ *
+ *   - `edit`: opened by the pencil button on <TestSetupForm>. The
+ *     project already exists; we fetch project.json via
+ *     `tis.read_project` and pre-fill from it, with source-bound
+ *     fields preferring the live GM value over the persisted one (so
+ *     "edit" reflects current reality). On submit we
+ *     `tis.update_project` and `write()` source-bound fields back to
+ *     GM in the same pass.
+ *
+ * The dialog never stages or starts a test — it only manages
+ * project-level metadata. The future per-user permission gate that
+ * locks "create/edit project" away from the operator role hangs off
+ * the visibility of the two buttons in <TestSetupForm>; this dialog
+ * is agnostic to who opened it.
+ */
+
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Tooltip } from 'primereact/tooltip';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { AutoCoreTagContext } from '../../core/AutoCoreTagContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { ValueInput } from '../ValueInput';
+import { TextInput } from '../TextInput';
+import type { TestFieldDef } from './TestSetupForm';
+
+export type ProjectInfoMode = 'create' | 'edit';
+
+export interface ProjectInfoDialogProps {
+    visible: boolean;
+    onHide: () => void;
+    mode: ProjectInfoMode;
+    /** Project ID being created (`create` mode) or edited (`edit`). */
+    projectId: string;
+    /** Schema field defs for `project_fields` (from the selected method). */
+    projectFields: TestFieldDef[];
+    /**
+     * Called after a successful create/update with the values that
+     * landed on the server. Used by the parent form to refresh its
+     * known-projects list and to fold the new fields into subsequent
+     * `tis.stage_test` payloads without an extra round-trip.
+     */
+    onSubmitted: (projectId: string, projectFields: Record<string, any>) => void;
+}
+
+const labelOf = (f: TestFieldDef): string => {
+    const base = f.label && f.label.length > 0 ? f.label : f.name;
+    return f.units ? `${base} [${f.units}]` : base;
+};
+
+const hasDescription = (f: TestFieldDef): boolean =>
+    typeof f.description === 'string' && f.description.length > 0;
+
+export const ProjectInfoDialog: React.FC<ProjectInfoDialogProps> = ({
+    visible, onHide, mode, projectId, projectFields, onSubmitted,
+}) => {
+    const { invoke, write } = useContext(EventEmitterContext);
+    const { rawValues, findTagByFqdn } = useContext(AutoCoreTagContext);
+
+    const [values, setValues] = useState<Record<string, any>>({});
+    const [submitting, setSubmitting] = useState(false);
+    const [loadError, setLoadError] = useState<string | null>(null);
+    const lastLoadedIdRef = useRef<string>('');
+
+    // Whenever the dialog opens (or the target project changes while
+    // open), reset state and re-load. We DON'T do this in a single
+    // useEffect on `[visible, projectId, mode]` because the load is
+    // async and we want to drop stale results.
+    useEffect(() => {
+        if (!visible) return;
+        const loadKey = `${mode}:${projectId}`;
+        if (lastLoadedIdRef.current === loadKey) return;
+        lastLoadedIdRef.current = loadKey;
+
+        let cancelled = false;
+        setLoadError(null);
+
+        // Build the initial value map. For source-bound fields, seed
+        // from live GM via the AutoCoreTagProvider's rawValues. For
+        // non-source fields the seed is empty in `create` mode and
+        // gets overwritten by the persisted value in `edit` mode.
+        const seed: Record<string, any> = {};
+        for (const f of projectFields) {
+            if (!f.source) continue;
+            const tag = findTagByFqdn(f.source);
+            if (!tag) continue;
+            const v = rawValues[tag.tagName];
+            if (v !== undefined && v !== null) seed[f.name] = v;
+        }
+
+        if (mode === 'create') {
+            if (!cancelled) setValues(seed);
+        } else {
+            (async () => {
+                try {
+                    const resp: any = await invoke(
+                        'tis.read_project' as any, MessageType.Request,
+                        { project_id: projectId } as any,
+                    );
+                    if (cancelled) return;
+                    if (resp?.success) {
+                        const persisted = (resp.data?.project_fields ?? {}) as Record<string, any>;
+                        // Seed (source-bound from GM) + persisted +
+                        // GM wins on conflicts for source fields,
+                        // because GM is the live source of truth.
+                        const merged: Record<string, any> = { ...persisted };
+                        for (const f of projectFields) {
+                            if (f.source && seed[f.name] !== undefined) {
+                                merged[f.name] = seed[f.name];
+                            }
+                        }
+                        setValues(merged);
+                    } else {
+                        setLoadError(resp?.error_message ?? 'Failed to read project');
+                    }
+                } catch (e) {
+                    if (!cancelled) setLoadError(String(e instanceof Error ? e.message : e));
+                }
+            })();
+        }
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, projectId, mode]);
+
+    // When the dialog closes, clear the loaded-marker so a subsequent
+    // open re-fetches fresh state.
+    useEffect(() => {
+        if (!visible) lastLoadedIdRef.current = '';
+    }, [visible]);
+
+    const handleFieldChange = (field: TestFieldDef, val: any) => {
+        setValues(prev => ({ ...prev, [field.name]: val }));
+    };
+
+    // All required project_fields must be non-empty before we let the
+    // operator submit. Source-bound fields are validated the same way
+    // — they should already have a value from GM, but the dialog is
+    // honest about it if they don't.
+    const isValid = useMemo(() => {
+        for (const f of projectFields) {
+            if (!f.required) continue;
+            const v = values[f.name];
+            if (v === undefined || v === null || v === '') return false;
+        }
+        return true;
+    }, [projectFields, values]);
+
+    const handleSubmit = async () => {
+        if (!isValid || submitting) return;
+        setSubmitting(true);
+        try {
+            // For source-bound fields, push the value into GM in the
+            // same pass. We do this whether `create` or `edit` because
+            // the persisted project.json copy is just a snapshot —
+            // GM is the live source of truth and we want the rig to
+            // see the operator's changes immediately.
+            for (const f of projectFields) {
+                if (!f.source) continue;
+                const v = values[f.name];
+                if (v === undefined || v === null) continue;
+                try { await write(f.source, v); }
+                catch (e) { console.warn(`[ProjectInfoDialog] write to ${f.source} failed:`, e); }
+            }
+
+            // The persisted blob carries every project_field we
+            // present, including source-bound ones; this lets the
+            // form fold them into stage_test even if the live tag
+            // hasn't broadcast a value yet at staging time.
+            const projectFieldsPayload: Record<string, any> = {};
+            for (const f of projectFields) {
+                if (values[f.name] !== undefined) projectFieldsPayload[f.name] = values[f.name];
+            }
+
+            const topic = mode === 'create' ? 'tis.create_project' : 'tis.update_project';
+            const resp: any = await invoke(topic as any, MessageType.Request, {
+                project_id:     projectId,
+                project_fields: projectFieldsPayload,
+            } as any);
+            if (resp?.success) {
+                onSubmitted(projectId, projectFieldsPayload);
+                onHide();
+            } else {
+                alert(`Failed: ${resp?.error_message ?? 'unknown error'}`);
+            }
+        } catch (e) {
+            alert(`Failed: ${e instanceof Error ? e.message : String(e)}`);
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    const isFieldValid = (f: TestFieldDef) => {
+        if (!f.required) return true;
+        const v = values[f.name];
+        return v !== undefined && v !== null && v !== '';
+    };
+
+    const renderField = (field: TestFieldDef) => {
+        const valid = isFieldValid(field);
+        const isNum = field.type !== 'string' && field.type !== 'bool';
+        const tooltipId = `acProjInfo_${field.name}`;
+        return (
+            <React.Fragment key={field.name}>
+                <span className="ac-form-label">{labelOf(field)}</span>
+                {isNum ? (
+                    <ValueInput
+                        label={undefined}
+                        value={values[field.name] != null ? Number(values[field.name]) : null}
+                        onValueChanged={(val) => handleFieldChange(field, val)}
+                        className={!valid ? 'p-invalid' : ''}
+                    />
+                ) : (
+                    <TextInput
+                        label={undefined}
+                        value={values[field.name] != null ? String(values[field.name]) : ''}
+                        onValueChanged={(val) => handleFieldChange(field, val)}
+                        className={!valid ? 'p-invalid' : ''}
+                    />
+                )}
+                {hasDescription(field) ? (
+                    <>
+                        <Tooltip target={`#${tooltipId}`} position="left" />
+                        <span
+                            id={tooltipId}
+                            data-pr-tooltip={field.description}
+                            style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'help' }}
+                        >
+                            <i className="pi pi-info-circle" style={{ color: 'var(--text-secondary-color)' }} />
+                        </span>
+                    </>
+                ) : (
+                    <span aria-hidden="true" />
+                )}
+                <span style={{ color: valid ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                    <i className={valid ? 'pi pi-check' : 'pi pi-times'} />
+                </span>
+            </React.Fragment>
+        );
+    };
+
+    const footer = (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+            <Button label="Cancel" icon="pi pi-times" onClick={onHide} disabled={submitting} text />
+            <Button
+                label={mode === 'create' ? 'Create Project' : 'Save'}
+                icon={submitting ? 'pi pi-spin pi-spinner' : (mode === 'create' ? 'pi pi-plus' : 'pi pi-check')}
+                onClick={handleSubmit}
+                disabled={!isValid || submitting}
+            />
+        </div>
+    );
+
+    const header = mode === 'create'
+        ? `Create project: ${projectId || '(no ID)'}`
+        : `Edit project information: ${projectId}`;
+
+    return (
+        <Dialog
+            header={header}
+            visible={visible}
+            onHide={onHide}
+            footer={footer}
+            modal
+            style={{ width: 'min(640px, 90vw)' }}
+            // PrimeReact's `closable` X — same as Cancel.
+            closable={!submitting}
+        >
+            {loadError && (
+                <div style={{ color: 'var(--red-500)', marginBottom: '1rem' }}>
+                    {loadError}
+                </div>
+            )}
+            {projectFields.length === 0 ? (
+                <p style={{ color: 'var(--text-secondary-color)' }}>
+                    {mode === 'create'
+                        ? `Click "Create Project" to create the empty project "${projectId}". `
+                        + `This method declares no project_fields, so there's nothing to fill in.`
+                        : `This method declares no project_fields, so there's nothing to edit.`}
+                </p>
+            ) : (
+                <div
+                    className="ac-form-grid"
+                    style={{
+                        padding: '0.25rem 0',
+                        gridTemplateColumns: 'auto 1fr 1.75rem 1.75rem',
+                    }}
+                >
+                    {projectFields.map(renderField)}
+                </div>
+            )}
+        </Dialog>
+    );
+};

package/src/components/tis/ProjectSelector.tsx

@@ -0,0 +1,190 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <ProjectSelector> — standalone Project ID picker, designed to live
+ * on a "Project" tab alongside <ResultHistoryTable>. Was previously
+ * the first row of <TestSetupForm>; lifted out so a user can browse a
+ * project's history without being forced through the full test-setup
+ * UI.
+ *
+ * The component is intentionally narrow:
+ *
+ *   - One AutoComplete bound to `useTisSelection().projectId`.
+ *   - A `+` button that opens the Create-Project dialog.
+ *   - A `✏️` button that opens the Edit-Project-Information dialog.
+ *
+ * State (the existing projects list, the just-created set, the
+ * project_fields cache) all lives in <TisProvider>, so the form on
+ * the Test tab and this picker on the Project tab agree on what's
+ * known.
+ */
+
+import React, { useContext, useState, useMemo } from 'react';
+import { AutoComplete } from 'primereact/autocomplete';
+import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
+import { Button } from 'primereact/button';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { useTis } from './TisProvider';
+import { ProjectInfoDialog } from './ProjectInfoDialog';
+
+// Project IDs follow the same character class as the server's
+// `tis.create_project` validator. Keep these in sync — see
+// `src/tis_servelet.rs::create_project`.
+const PROJECT_ID_RE = /^[A-Za-z0-9_-]+$/;
+const isValidProjectIdFormat = (id: string) => PROJECT_ID_RE.test(id);
+
+export interface ProjectSelectorProps {
+    /**
+     * Optional override of the method whose `project_fields` are shown
+     * in the create / edit dialog. By default the dialog uses the
+     * provider's selected method (which is what you want — the
+     * project's metadata schema is per-method, and the form on the
+     * Test tab is going to use that same method anyway). Passing this
+     * is only useful if you have a "view-only" Project tab in a
+     * read-only HMI and want to lock the dialog to a specific method.
+     */
+    methodIdOverride?: string;
+}
+
+export const ProjectSelector: React.FC<ProjectSelectorProps> = ({ methodIdOverride }) => {
+    const tis = useTis();
+    const { invoke: _invoke } = useContext(EventEmitterContext);
+    void _invoke; // EventEmitterContext is consumed via ProjectInfoDialog; no direct call here.
+
+    const projectId = tis.selection.projectId;
+    const dialogMethodId =
+        methodIdOverride
+        ?? tis.selection.methodId
+        ?? tis.defaultMethodId
+        ?? Object.keys(tis.schemas)[0]
+        ?? '';
+    const dialogSchema = dialogMethodId ? tis.schemas[dialogMethodId] : undefined;
+    const projectFieldsSchema = dialogSchema?.project_fields ?? [];
+
+    const [filteredProjects, setFilteredProjects] = useState<string[]>([]);
+    const [newOpen, setNewOpen] = useState(false);
+    const [editOpen, setEditOpen] = useState(false);
+
+    const projectExists = projectId.trim() !== '' && tis.projectKnown(projectId.trim());
+    const projectIdFormatValid = isValidProjectIdFormat(projectId.trim());
+    const canCreateProject =
+        projectId.trim() !== ''
+        && projectIdFormatValid
+        && !tis.projectKnown(projectId.trim());
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        const q = event.query.toLowerCase();
+        setFilteredProjects(tis.existingProjects.filter(p => p.toLowerCase().includes(q)));
+    };
+
+    const handleChange = (value: string | null | undefined) => {
+        const sanitized = (value || '').replace(/[^a-zA-Z0-9_-]/g, '');
+        tis.setSelection({ projectId: sanitized });
+    };
+
+    // -----------------------------------------------------------------
+    // Plumbing for the create + edit dialogs. We treat the "create"
+    // result as authoritative for project_fields; the dialog sends
+    // them straight to `tis.create_project` so the persisted file
+    // already has the values. Stash them in the provider's cache so
+    // the form on the Test tab folds them into stage_test without an
+    // extra read_project round trip.
+    // -----------------------------------------------------------------
+    const handleSubmitted = (pid: string, fields: Record<string, any>) => {
+        tis.markProjectJustCreated(pid);
+        tis.setProjectFields(pid, fields);
+        // Refresh the dropdown so the new ID appears in future
+        // suggestions, and surface the new project as the current
+        // selection — operator's intent on `+` is "set up this
+        // project and start using it."
+        void tis.refreshProjects();
+        if (tis.selection.projectId !== pid) tis.setSelection({ projectId: pid });
+    };
+
+    const headerStatus = useMemo(() => {
+        if (projectExists) return { color: 'var(--green-500)', icon: 'pi-check-circle' };
+        if (projectId.trim() === '') return { color: 'var(--text-secondary-color)', icon: 'pi-info-circle' };
+        return { color: 'var(--red-500)', icon: 'pi-exclamation-circle' };
+    }, [projectExists, projectId]);
+
+    const gridStyle: React.CSSProperties = {
+        padding: '1.25rem',
+        gridTemplateColumns: 'auto 1fr 1.75rem 1.75rem',
+    };
+
+    return (
+        <div className="ac-form-grid" style={gridStyle}>
+            <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                Project
+                <span style={{ color: headerStatus.color }}>
+                    <i className={`pi ${headerStatus.icon}`} />
+                </span>
+            </h3>
+
+            <span className="ac-form-label">Project ID</span>
+            <div className="p-inputgroup" style={{ flex: 1 }}>
+                <AutoComplete
+                    value={projectId}
+                    suggestions={filteredProjects}
+                    completeMethod={search}
+                    onChange={(e) => handleChange(e.value)}
+                    dropdown
+                    placeholder="Select an existing Project ID, or type a new one and click +"
+                    className={projectId.trim() && !projectExists ? 'p-invalid' : ''}
+                    style={{ flex: 1 }}
+                />
+                <Button
+                    icon="pi pi-plus"
+                    type="button"
+                    onClick={() => setNewOpen(true)}
+                    disabled={!canCreateProject}
+                    tooltip={
+                        !projectId.trim() ? 'Type a project ID first' :
+                        !projectIdFormatValid ? 'Letters, digits, _ and - only' :
+                        tis.projectKnown(projectId.trim()) ? 'Project already exists' :
+                        `Create project "${projectId.trim()}"`
+                    }
+                    tooltipOptions={{ position: 'top' }}
+                />
+                <Button
+                    icon="pi pi-pencil"
+                    type="button"
+                    onClick={() => setEditOpen(true)}
+                    disabled={!projectExists}
+                    tooltip={projectExists
+                        ? `Edit information for "${projectId.trim()}"`
+                        : 'Select an existing project to edit'}
+                    tooltipOptions={{ position: 'top' }}
+                />
+            </div>
+            <span aria-hidden="true" />
+            <span style={{
+                color: projectExists ? 'var(--green-500)' :
+                       projectId.trim() === '' ? 'var(--text-secondary-color)' : 'var(--red-500)',
+                display: 'flex', alignItems: 'center',
+            }}>
+                <i className={projectExists ? 'pi pi-check' : projectId.trim() === '' ? 'pi pi-minus' : 'pi pi-times'} />
+            </span>
+
+            {/* Both dialogs are mounted unconditionally and gated by
+                their own `visible` prop. Cheap, and lets PrimeReact's
+                portal layering manage its own lifecycle. */}
+            <ProjectInfoDialog
+                visible={newOpen}
+                onHide={() => setNewOpen(false)}
+                mode="create"
+                projectId={projectId.trim()}
+                projectFields={projectFieldsSchema}
+                onSubmitted={handleSubmitted}
+            />
+            <ProjectInfoDialog
+                visible={editOpen}
+                onHide={() => setEditOpen(false)}
+                mode="edit"
+                projectId={projectId.trim()}
+                projectFields={projectFieldsSchema}
+                onSubmitted={handleSubmitted}
+            />
+        </div>
+    );
+};

package/src/components/tis/TestDataView.tsx

@@ -65,6 +65,10 @@ export interface TestMethod {
     results_fields:  TestFieldDef[];
     raw_data?:       RawDataShape | null;
     views?:          { [name: string]: ChartView };
+    /** Optional pretty label for the Test Method picker. */
+    label?:          string;
+    /** Optional long-form description for the picker. */
+    description?:    string;
 }
 
 export interface TestDataViewProps {

package/src/components/tis/TestMethodDialog.tsx

@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <TestMethodDialog> — picker UI for swapping the active test method.
+ *
+ * The main form displays a single "Test Method: <label>" row with an
+ * edit button. Clicking edit opens this dialog. The dialog shows a
+ * dropdown of every method declared in the current project's
+ * `test_methods` block, plus the long-form description for whichever
+ * method the operator has the dropdown highlighted on. OK commits the
+ * choice via the supplied callback; Cancel discards.
+ *
+ * This pattern scales past three or four methods where a SelectButton
+ * starts wrapping or eating horizontal space, and gives every method
+ * room to ship a description that disambiguates similar names.
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import type { TestMethod } from './TestSetupForm';
+import { useTisSchemas } from './TisProvider';
+
+export interface TestMethodDialogProps {
+    visible: boolean;
+    onHide: () => void;
+    /** Method ID currently selected on the form. The dropdown opens
+     *  pointing at this value so the dialog reflects current state. */
+    currentMethodId: string;
+    /**
+     * Called with the chosen method_id when the operator clicks OK.
+     * Cancel does not fire this callback. The parent is responsible
+     * for actually applying the new selection (e.g., updating the
+     * provider's selection or local state).
+     */
+    onSelected: (methodId: string) => void;
+}
+
+/** Display name for one method: prefer the schema's `label`, fall
+ *  back to the canonical `method_id` key. */
+const methodLabelOf = (methodId: string, schema: TestMethod | undefined): string =>
+    (schema?.label && schema.label.length > 0) ? schema.label : methodId;
+
+export const TestMethodDialog: React.FC<TestMethodDialogProps> = ({
+    visible, onHide, currentMethodId, onSelected,
+}) => {
+    const schemas = useTisSchemas();
+
+    // Local "draft" selection — the dropdown writes to this; OK
+    // applies it. We deliberately don't update the provider's
+    // selection on every dropdown change, so a Cancel really cancels.
+    const [draftMethodId, setDraftMethodId] = useState<string>(currentMethodId);
+
+    // Re-sync the draft whenever the dialog opens so a stale value
+    // from a previous open doesn't ghost the current selection.
+    useEffect(() => {
+        if (visible) setDraftMethodId(currentMethodId);
+    }, [visible, currentMethodId]);
+
+    const options = useMemo(() => {
+        return Object.keys(schemas).map(methodId => ({
+            label: methodLabelOf(methodId, schemas[methodId]),
+            value: methodId,
+        }));
+    }, [schemas]);
+
+    const draftSchema = schemas[draftMethodId];
+    const draftDescription =
+        (draftSchema?.description && draftSchema.description.length > 0)
+            ? draftSchema.description
+            : null;
+
+    const handleOk = () => {
+        if (draftMethodId && draftMethodId !== currentMethodId) {
+            onSelected(draftMethodId);
+        }
+        onHide();
+    };
+
+    const footer = (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+            <Button label="Cancel" icon="pi pi-times" onClick={onHide} text />
+            <Button
+                label="OK"
+                icon="pi pi-check"
+                onClick={handleOk}
+                disabled={!draftMethodId}
+            />
+        </div>
+    );
+
+    return (
+        <Dialog
+            header="Select Test Method"
+            visible={visible}
+            onHide={onHide}
+            footer={footer}
+            modal
+            style={{ width: 'min(560px, 90vw)' }}
+        >
+            {options.length === 0 ? (
+                <p style={{ color: 'var(--text-secondary-color)' }}>
+                    No test methods are declared in this project's <code>test_methods</code> block.
+                </p>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                        <label htmlFor="acTestMethodDropdown" style={{ flexShrink: 0 }}>
+                            Test Method:
+                        </label>
+                        <Dropdown
+                            inputId="acTestMethodDropdown"
+                            value={draftMethodId}
+                            options={options}
+                            onChange={(e) => setDraftMethodId(e.value)}
+                            placeholder="Select a method"
+                            style={{ flex: 1 }}
+                        />
+                    </div>
+                    {/*
+                     * Show the description region whenever we have a
+                     * draft selection — keeps layout stable even when
+                     * the operator picks a method without one (we just
+                     * render a muted placeholder rather than collapsing
+                     * the dialog by ~3rem).
+                     */}
+                    <div
+                        style={{
+                            padding: '0.75rem 1rem',
+                            background: 'var(--surface-100)',
+                            borderRadius: '6px',
+                            minHeight: '4.5rem',
+                            color: draftDescription
+                                ? 'var(--text-color)'
+                                : 'var(--text-secondary-color)',
+                            fontStyle: draftDescription ? 'normal' : 'italic',
+                            whiteSpace: 'pre-wrap',
+                        }}
+                    >
+                        {draftDescription ?? 'No description provided for this test method.'}
+                    </div>
+                </div>
+            )}
+        </Dialog>
+    );
+};