@adcops/autocore-react 3.5.15 → 3.6.5

package/src/components/tis-editor/MethodTransfer.ts

@@ -0,0 +1,138 @@
+/**
+ * MethodTransfer — a whole test method as one portable file.
+ *
+ * ## Why the method and not the sequence
+ *
+ * A sequence-backed method is two halves with a contract between them: the
+ * schema declares the cycle columns, and the procedure's `store_value` steps
+ * fill them by name. Exporting either half alone produces something that looks
+ * like a method and silently is not — a schema with no producer records blank
+ * rows on every cycle forever, and a procedure with no schema stores values
+ * nothing displays. Neither failure announces itself.
+ *
+ * So the exportable unit is the pair. This is the same reasoning that made
+ * `acctl push methods` move both files with one verb.
+ *
+ * ## The file
+ *
+ * Plain JSON, human-readable, no archive container: it goes on a USB stick
+ * between companies and someone will open it in a text editor.
+ *
+ *     {
+ *       "format": "autocore-method",
+ *       "version": 1,
+ *       "method_id": "golf_compression",
+ *       "schema":   { ...test_methods.json entry... },
+ *       "sequence": { ...seq.json..., or null for a control-backed method }
+ *     }
+ *
+ * `method_id` is a SUGGESTION, not an instruction. The importer offers it and
+ * lets the operator rename, because a method list that fills up with
+ * `golf_compression_copy_3` is the complaint that follows otherwise.
+ */
+
+import type { TestMethod } from './types';
+
+export const METHOD_FILE_FORMAT = 'autocore-method';
+export const METHOD_FILE_VERSION = 1;
+
+export interface MethodTransferFile {
+    format: typeof METHOD_FILE_FORMAT;
+    version: number;
+    method_id: string;
+    schema: TestMethod;
+    /** The procedure, or null for a control-backed method. */
+    sequence: any | null;
+}
+
+/** Build the export payload. */
+export function buildTransfer(
+    methodId: string,
+    schema: TestMethod,
+    sequence: any | null,
+): MethodTransferFile {
+    return {
+        format: METHOD_FILE_FORMAT,
+        version: METHOD_FILE_VERSION,
+        method_id: methodId,
+        schema,
+        sequence: sequence ?? null,
+    };
+}
+
+/**
+ * Legal method ids, and why the rule is this strict.
+ *
+ * The id becomes a path segment (`methods/<id>.seq.json`) and a directory name
+ * under the project (`<project>/<method_id>/<run_id>/`), both joined
+ * server-side, so anything that could traverse or quote-escape is refused at
+ * entry rather than sanitised silently — an id that comes back different from
+ * what was typed is how you end up with two methods you believe are one.
+ *
+ * It is also a Rust identifier stem in generated code, hence the leading-letter
+ * rule: `2point_bend` would emit `2pointBendTestManager`, which does not
+ * compile.
+ */
+export const METHOD_ID_RE = /^[A-Za-z][A-Za-z0-9_]*$/;
+export const METHOD_ID_RULE =
+    'Letters, digits and underscore only; must start with a letter.';
+
+/** Parse and validate an imported file. Returns the file or a reason. */
+export function parseTransfer(text: string): { file: MethodTransferFile } | { error: string } {
+    let parsed: unknown;
+    try {
+        parsed = JSON.parse(text);
+    } catch (e) {
+        return { error: `Not valid JSON: ${e instanceof Error ? e.message : String(e)}` };
+    }
+    if (typeof parsed !== 'object' || parsed === null) {
+        return { error: 'File does not contain a method object.' };
+    }
+    const f = parsed as Partial<MethodTransferFile>;
+    if (f.format !== METHOD_FILE_FORMAT) {
+        // Name what it looks like. A `.seq.json` dropped here is the most
+        // likely wrong file, and "unrecognised format" would leave the operator
+        // with no idea which of their two files to reach for.
+        const looksLikeSequence = Array.isArray((parsed as any)?.steps);
+        return {
+            error: looksLikeSequence
+                ? 'This is a sequence file, not a whole method. Import it from a method export, '
+                  + 'or create the method first and edit its sequence on the Method screen.'
+                : 'Not an autocore method export (missing "format": "autocore-method").',
+        };
+    }
+    if (typeof f.version !== 'number' || f.version > METHOD_FILE_VERSION) {
+        return {
+            error: `This file was written by a newer version (v${f.version}); `
+                 + `this machine understands up to v${METHOD_FILE_VERSION}.`,
+        };
+    }
+    if (typeof f.method_id !== 'string' || !METHOD_ID_RE.test(f.method_id)) {
+        return { error: `File has no usable method id. ${METHOD_ID_RULE}` };
+    }
+    if (typeof f.schema !== 'object' || f.schema === null) {
+        return { error: 'File has no method schema.' };
+    }
+    // A sequence-backed method with no procedure in the file is a half export;
+    // refuse it rather than importing a method that cannot run.
+    if ((f.schema as TestMethod).procedure === 'sequence' && !Array.isArray(f.sequence?.steps)) {
+        return {
+            error: 'This method declares a sequence procedure but the file carries no sequence. '
+                 + 'Re-export it from the machine it came from.',
+        };
+    }
+    return { file: f as MethodTransferFile };
+}
+
+/** Hand the browser a method export to save. */
+export function downloadTransfer(file: MethodTransferFile): void {
+    const blob = new Blob([JSON.stringify(file, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${file.method_id}.method.json`;
+    a.click();
+    // Revoke on the next tick: revoking synchronously can beat the download in
+    // Chromium, which is the browser on every panel.
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+}

package/src/components/tis-editor/TisConfigEditor.css

@@ -150,3 +150,34 @@
         border-bottom: 1px solid var(--surface-d, #e2e8f0);
     }
 }
+
+/*
+ * The three-step method deletion. Numbered because the steps are ordered and
+ * gated: the archive download unlocks the confirmation phrase, which unlocks
+ * the button. See DeleteMethodDialog for why deleting a method earns this.
+ */
+.tis-editor__delete-steps {
+    margin: 0 0 1rem;
+    padding-left: 1.4rem;
+}
+
+.tis-editor__delete-steps > li {
+    margin-bottom: 1rem;
+}
+
+.tis-editor__delete-steps p {
+    margin: 0.35rem 0 0.5rem;
+}
+
+.tis-editor__delete-steps ul {
+    margin: 0.35rem 0 0;
+    padding-left: 1.1rem;
+}
+
+.tis-editor__delete-steps code {
+    padding: 0.1rem 0.35rem;
+    border-radius: 3px;
+    background: var(--surface-ground);
+    font-family: var(--font-family-mono, monospace);
+    letter-spacing: 0.04em;
+}

package/src/components/tis-editor/TisConfigEditor.tsx

@@ -4,7 +4,15 @@
  * Left: PrimeReact DataTable listing methods (method_id + label).
  * Right: tabbed editor for the selected method. Phase 1 ships a single
  *        JSON-via-Monaco tab; Phase 2 layers form editors on top of it.
- * Action bar: New / Duplicate / Delete / Apply / Save / Revert.
+ * Action bar: New / Duplicate / Delete / Import / Export / Apply / Save / Revert.
+ *
+ * ## A method is two files
+ *
+ * A method whose `procedure` is `"sequence"` also owns
+ * `methods/<method_id>.seq.json`. This editor is the only place a method is
+ * created, copied, deleted or moved between machines, so it is the only place
+ * that can keep the two halves together — see `useMethodSequence` for what goes
+ * wrong when they drift. Every lifecycle action below therefore moves both.
  *
  * "Apply" pushes the local Monaco buffer to the server-side stage
  * (`tis.put_method`). "Save" persists the entire stage to test_methods.json
@@ -15,12 +23,14 @@
  * client gives clearer UX.
  */
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
 import { Dialog } from 'primereact/dialog';
+import { Message } from 'primereact/message';
+import { SelectButton } from 'primereact/selectbutton';
 import { useContext } from 'react';
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { MessageType } from '../../hub/CommandMessage';
@@ -28,7 +38,13 @@ import { useTisConfig, type TisIpcInvoker } from '../../hooks/useTisConfig';
 import { useAmsAssetTypes } from '../../hooks/useAmsAssetTypes';
 import { MethodFormEditor } from './editor/MethodFormEditor';
 import { SaveDiffDialog } from './editor/SaveDiffDialog';
+import { DeleteMethodDialog } from './DeleteMethodDialog';
+import {
+    buildTransfer, downloadTransfer, METHOD_ID_RE, METHOD_ID_RULE, parseTransfer,
+    type MethodTransferFile,
+} from './MethodTransfer';
 import type { TestMethod } from './types';
+import { useMethodSequence, emptySequence } from '../../hooks/useMethodSequence';
 
 import './TisConfigEditor.css';
 import { useGmVariables } from '../../hooks/useGmVariables';
@@ -88,6 +104,28 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
     // New-method dialog state.
     const [newDialogOpen, setNewDialogOpen] = useState<boolean>(false);
     const [newId, setNewId] = useState<string>('');
+    // A new method declares its procedure up front, because the choice decides
+    // whether creating it also scaffolds a sequence file. Defaulting to
+    // `sequence` is deliberate on a machine that has a sequencer: the other
+    // option cannot be made to work without a rebuild, so offering it as the
+    // default would be offering the operator a dead end.
+    const [newProcedure, setNewProcedure] = useState<'control' | 'sequence'>('sequence');
+
+    // Delete flow (archive + typed confirmation) — see DeleteMethodDialog.
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
+
+    // Import flow. `pendingImport` holds a parsed file waiting on the operator
+    // to resolve a name collision.
+    const fileInput = useRef<HTMLInputElement>(null);
+    const [pendingImport, setPendingImport] = useState<MethodTransferFile | null>(null);
+    const [importId, setImportId] = useState<string>('');
+    const [importError, setImportError] = useState<string | null>(null);
+
+    // The sequence half of a method. All method lifecycle actions move both.
+    // No `invoker` override: TisIpcInvoker speaks the `tis.*` request shape
+    // (topic, payload), and these are raw datastore reads and writes that need
+    // the message type as well.
+    const seqIo = useMethodSequence();
 
     const rows: MethodRow[] = useMemo(() => {
         if (!tis.config) return [];
@@ -135,13 +173,31 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
     const onCreate = async () => {
         const id = newId.trim();
         if (!id) return;
+        // Validated here and not just in the dialog: the id becomes a path
+        // segment and a Rust identifier stem downstream, and neither of those
+        // failures is legible where they surface.
+        if (!METHOD_ID_RE.test(id)) {
+            setDraftError(`"${id}" is not a valid method id. ${METHOD_ID_RULE}`);
+            return;
+        }
         if (tis.config?.methods[id]) {
             setDraftError(`A method named "${id}" already exists.`);
             return;
         }
         setBusy(true);
         try {
-            await tis.putMethod(id, EMPTY_METHOD);
+            const method: TestMethod = newProcedure === 'sequence'
+                ? { ...EMPTY_METHOD, procedure: 'sequence' }
+                : { ...EMPTY_METHOD };
+            // Sequence FIRST. A method whose schema exists without its procedure
+            // refuses to start with "has no sequence on this machine"; the
+            // reverse leaves an unreferenced file that the next method of the
+            // same name would silently inherit. Of the two half-states, the
+            // orphan file is the one that cannot mislead a run.
+            if (newProcedure === 'sequence') {
+                await seqIo.write(id, emptySequence(id));
+            }
+            await tis.putMethod(id, method as any);
             setSelectedId(id);
             setNewDialogOpen(false);
             setNewId('');
@@ -163,6 +219,10 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
         }
         setBusy(true);
         try {
+            // The procedure comes with it. `seqIo.copy` rewrites the sequence's
+            // own `name` to the new id, so the copy does not claim to be its
+            // source — the method id owns the identity.
+            await seqIo.copy(selectedId, candidate);
             await tis.putMethod(candidate, JSON.parse(JSON.stringify(source)));
             setSelectedId(candidate);
         } catch (e: any) {
@@ -172,13 +232,62 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
         }
     };
 
-    const onDelete = async () => {
+    /**
+     * Build and hand over an archive of every run recorded under `methodId`.
+     * Gates the delete confirmation; see DeleteMethodDialog.
+     */
+    const downloadMethodArchive = async (methodId: string): Promise<boolean> => {
+        const resp: any = await effectiveInvoker('tis.export_method_zip', {
+            project_id: projectId,
+            method_id: methodId,
+        });
+        if (!resp?.success) {
+            throw new Error(resp?.error_message ?? 'export_method_zip failed');
+        }
+        // Archives ride the server's /downloads/ endpoint rather than the
+        // WebSocket frame: a method with a season of history is not a payload.
+        const url = typeof resp.data?.download_url === 'string' ? resp.data.download_url : '';
+        if (!url) throw new Error('the server returned no download URL');
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = typeof resp.data?.filename === 'string' && resp.data.filename
+            ? resp.data.filename
+            : `${methodId}_method_archive.zip`;
+        a.click();
+        return true;
+    };
+
+    const onDeleteConfirmed = async () => {
         if (!selectedId) return;
-        if (!window.confirm(`Remove method "${selectedId}"? This is staged — Save persists it.`)) return;
         setBusy(true);
         try {
+            // Schema first here, unlike create: the schema is what makes the
+            // method selectable, so removing it first means an interrupted
+            // delete leaves an unreachable file rather than a method that is
+            // still offered and no longer runs.
             await tis.removeMethod(selectedId);
+            await seqIo.remove(selectedId);
             setSelectedId(null);
+            setDeleteDialogOpen(false);
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    /** The selected method and its procedure, as one portable file. */
+    const onExport = async () => {
+        if (!selectedId || !tis.config) return;
+        const schema = tis.config.methods[selectedId] as TestMethod | undefined;
+        if (!schema) return;
+        setBusy(true);
+        try {
+            // The STAGED schema, deliberately: what the operator sees on screen
+            // is what they mean to hand over. Exporting the on-disk copy instead
+            // would silently ship a version they had already changed.
+            const sequence = schema.procedure === 'sequence' ? await seqIo.read(selectedId) : null;
+            downloadTransfer(buildTransfer(selectedId, schema, sequence));
         } catch (e: any) {
             setDraftError(String(e?.message ?? e));
         } finally {
@@ -186,6 +295,51 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
         }
     };
 
+    const onImportFile = async (file: File) => {
+        const result = parseTransfer(await file.text());
+        if ('error' in result) {
+            setImportError(`${file.name}: ${result.error}`);
+            setPendingImport(null);
+            return;
+        }
+        setImportError(null);
+        setPendingImport(result.file);
+        setImportId(result.file.method_id);
+    };
+
+    /**
+     * Land a parsed import under `importId`.
+     *
+     * The dialog always asks, even when the name is free: an operator importing
+     * a colleague's method usually wants it called something of their own, and
+     * a list that fills up with other people's names is the complaint that
+     * follows. When the name IS taken, the same dialog is where they choose
+     * between replacing and renaming — the two are one decision, so they belong
+     * on one screen.
+     */
+    const onImportConfirm = async () => {
+        if (!pendingImport) return;
+        const id = importId.trim();
+        if (!METHOD_ID_RE.test(id)) {
+            setImportError(`"${id}" is not a valid method id. ${METHOD_ID_RULE}`);
+            return;
+        }
+        setBusy(true);
+        try {
+            if (pendingImport.sequence) {
+                await seqIo.write(id, pendingImport.sequence);
+            }
+            await tis.putMethod(id, pendingImport.schema as any);
+            setSelectedId(id);
+            setPendingImport(null);
+            setImportError(null);
+        } catch (e: any) {
+            setImportError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
     // Save flows through the diff dialog: it fetches the current disk
     // state via tis.list_schemas, shows the operator what's about to land,
     // and only invokes save_config on confirm.
@@ -279,9 +433,47 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
                             icon="pi pi-trash"
                             className="p-button-danger"
                             disabled={busy || !selectedId}
-                            onClick={onDelete}
+                            onClick={() => setDeleteDialogOpen(true)}
                         />
                     </div>
+                    {/* Import / Export move the WHOLE method — schema and
+                        procedure in one file. Half a method looks like a method
+                        and silently is not; see MethodTransfer. */}
+                    <div className="tis-editor__sidebar-actions">
+                        <Button
+                            label="Import"
+                            icon="pi pi-upload"
+                            className="p-button-secondary"
+                            disabled={busy}
+                            onClick={() => fileInput.current?.click()}
+                        />
+                        <Button
+                            label="Export"
+                            icon="pi pi-download"
+                            className="p-button-secondary"
+                            disabled={busy || !selectedId}
+                            onClick={onExport}
+                        />
+                    </div>
+                    {importError && (
+                        <div className="tis-editor__error">
+                            <pre>{importError}</pre>
+                        </div>
+                    )}
+                    {/* Hidden by design, not by CSS trickery: a styled Import
+                        button is a far better target than the browser's native
+                        file input on a touch panel. */}
+                    <input
+                        ref={fileInput}
+                        type="file"
+                        accept=".json,.method.json,application/json"
+                        style={{ display: 'none' }}
+                        onChange={(e) => {
+                            const f = e.target.files?.[0];
+                            e.target.value = '';
+                            if (f) void onImportFile(f);
+                        }}
+                    />
                     <DataTable
                         value={rows}
                         selection={rows.find(r => r.id === selectedId) ?? null}
@@ -337,12 +529,118 @@ export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, inv
                     />
                 </label>
                 <small>Canonical key — appears in wire payloads, on-disk paths, and generated code.</small>
+                {/* Stated on screen, not behind a tooltip: the rule is strict
+                    because this id becomes a path segment and a Rust identifier
+                    stem, and neither failure is legible where it surfaces. */}
+                {newId.trim() !== '' && !METHOD_ID_RE.test(newId.trim()) && (
+                    <Message severity="warn" text={METHOD_ID_RULE} style={{ width: '100%', marginTop: '0.5rem' }} />
+                )}
+
+                <label className="tis-editor__new-method-label" style={{ marginTop: '1rem' }}>
+                    Procedure
+                    <SelectButton
+                        value={newProcedure}
+                        options={[
+                            { label: 'Sequence', value: 'sequence' },
+                            { label: 'Control program', value: 'control' },
+                        ]}
+                        allowEmpty={false}
+                        onChange={(e) => e.value && setNewProcedure(e.value)}
+                    />
+                </label>
+                <small>
+                    {newProcedure === 'sequence'
+                        ? 'The steps are a file you edit on the Method screen. Creating this method also creates an empty sequence.'
+                        : 'The steps are compiled into the control program. A new method of this kind needs a rebuild and redeploy before it will run.'}
+                </small>
+
                 <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', marginTop: '1rem' }}>
                     <Button label="Cancel" className="p-button-text" onClick={() => setNewDialogOpen(false)} />
-                    <Button label="Create" disabled={!newId.trim() || busy} onClick={onCreate} />
+                    <Button
+                        label="Create"
+                        disabled={!METHOD_ID_RE.test(newId.trim()) || busy}
+                        onClick={onCreate}
+                    />
                 </div>
             </Dialog>
 
+            {/* Import: always asks for the name. See onImportConfirm. */}
+            <Dialog
+                header="Import Test Method"
+                visible={pendingImport !== null}
+                onHide={() => { setPendingImport(null); setImportError(null); }}
+                style={{ width: '28rem' }}
+            >
+                {pendingImport && (() => {
+                    const taken = !!tis.config?.methods[importId.trim()];
+                    const idOk = METHOD_ID_RE.test(importId.trim());
+                    return (
+                        <>
+                            <p style={{ marginTop: 0 }}>
+                                <strong>{pendingImport.method_id}</strong>
+                                {pendingImport.schema.label ? ` — ${pendingImport.schema.label}` : ''}
+                                <br />
+                                <small>
+                                    {pendingImport.sequence
+                                        ? 'Includes a sequence procedure.'
+                                        : 'Control-program method — no sequence in this file.'}
+                                </small>
+                            </p>
+
+                            <label className="tis-editor__new-method-label">
+                                Import as
+                                <InputText
+                                    value={importId}
+                                    onChange={(e) => setImportId(e.target.value)}
+                                    autoFocus
+                                />
+                            </label>
+                            {!idOk && importId.trim() !== '' && (
+                                <Message severity="warn" text={METHOD_ID_RULE} style={{ width: '100%' }} />
+                            )}
+                            {taken && idOk && (
+                                <Message
+                                    severity="warn"
+                                    text={`"${importId.trim()}" already exists. Importing will REPLACE it, `
+                                        + `including its sequence. Change the name above to keep both.`}
+                                    style={{ width: '100%' }}
+                                />
+                            )}
+                            {importError && (
+                                <Message severity="error" text={importError} style={{ width: '100%' }} />
+                            )}
+
+                            <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', marginTop: '1rem' }}>
+                                <Button
+                                    label="Cancel"
+                                    className="p-button-text"
+                                    onClick={() => { setPendingImport(null); setImportError(null); }}
+                                />
+                                <Button
+                                    label={taken ? 'Replace' : 'Import'}
+                                    className={taken ? 'p-button-danger' : undefined}
+                                    disabled={!idOk || busy}
+                                    onClick={onImportConfirm}
+                                />
+                            </div>
+                        </>
+                    );
+                })()}
+            </Dialog>
+
+            <DeleteMethodDialog
+                visible={deleteDialogOpen}
+                methodId={selectedId}
+                hasSequence={
+                    !!selectedId
+                    && (tis.config?.methods[selectedId] as TestMethod | undefined)?.procedure === 'sequence'
+                }
+                onDownloadArchive={downloadMethodArchive}
+                onConfirm={onDeleteConfirmed}
+                onCancel={() => setDeleteDialogOpen(false)}
+                busy={busy}
+            />
+
             <SaveDiffDialog
                 visible={saveDialogOpen}
                 staged={(tis.config?.methods ?? {}) as Record<string, TestMethod>}

package/src/components/tis-editor/editor/IdentitySection.tsx

@@ -1,5 +1,6 @@
 import { InputText } from 'primereact/inputtext';
 import { InputTextarea } from 'primereact/inputtextarea';
+import { SelectButton } from 'primereact/selectbutton';
 import { FormSection } from '../../forms/FormSection';
 import { FormRow } from '../../forms/FormRow';
 import type { TestMethod } from '../types';
@@ -13,7 +14,7 @@ export const IdentitySection: React.FC<IdentitySectionProps> = ({ method, onChan
     return (
         <FormSection
             title="Identity"
-            description="Display label and operator-facing description for this method."
+            description="Display label, operator-facing description, and which engine runs the steps."
         >
             <FormRow label="Label" hint="Pretty name shown in the Test Method picker.">
                 <InputText
@@ -31,6 +32,37 @@ export const IdentitySection: React.FC<IdentitySectionProps> = ({ method, onChan
                     onChange={(e) => onChange({ ...method, description: e.target.value })}
                 />
             </FormRow>
+            {/* Which engine owns the steps.
+                `Sequence` is the one that can be authored on the machine: the
+                procedure is a file the sequence workbench edits, so a new
+                method runs without regenerating and rebuilding the control
+                program. `Control program` means compiled Rust, which needs a
+                rebuild for every method — the default only because it is what
+                every method predating this field does.
+                Absent rather than "control" when control is chosen, so a
+                method that never had an opinion keeps a clean record. */}
+            <FormRow
+                label="Procedure"
+                hint="Sequence: the steps are a file you edit on the Method screen. Control program: compiled Rust, requires a rebuild to add or change a method."
+            >
+                <SelectButton
+                    value={(method.procedure as string) ?? 'control'}
+                    options={[
+                        { label: 'Control program', value: 'control' },
+                        { label: 'Sequence', value: 'sequence' },
+                    ]}
+                    allowEmpty={false}
+                    onChange={(e) => {
+                        const next: TestMethod = { ...method };
+                        if (e.value === 'sequence') {
+                            next.procedure = 'sequence';
+                        } else {
+                            delete next.procedure;
+                        }
+                        onChange(next);
+                    }}
+                />
+            </FormRow>
         </FormSection>
     );
 };

package/src/components/tis-editor/types.ts

@@ -188,6 +188,17 @@ export interface TestMethod {
     asset_refs?: AssetRef[];
     analysis?: AnalysisShape | null;
     configurations?: TestConfiguration[];
+    /**
+     * Which engine runs this method's steps.
+     *
+     * `"sequence"` means the procedure is data at
+     * `methods/<method_id>.seq.json`, authored in the sequence workbench and
+     * executed by autocore-seq — so a method can be created on the machine and
+     * run without regenerating and rebuilding the control program.
+     * `"control"` (the default) means compiled Rust, which is every method that
+     * predates this field.
+     */
+    procedure?: 'control' | 'sequence';
     [key: string]: unknown; // tolerate unknown server-side fields
 }
 

package/src/components/varpick/VariablePicker.tsx

@@ -98,6 +98,10 @@ export const VariablePicker: React.FC<VariablePickerProps> = ({
             visible={visible}
             onHide={onCancel}
             footer={footer}
+            // Carries the token bridge. PrimeReact portals the dialog to
+            // <body>, so it is not inside the field's subtree and cannot
+            // inherit the tokens declared there — see varpick.css.
+            className="ac-varpick"
             style={{ width: '44rem', maxWidth: '95vw' }}
         >
             {hint && <div className="ac-varpick__hint">{hint}</div>}