@adcops/autocore-react 3.3.57 → 3.3.61

package/src/components/tis/TestSetupForm.tsx

@@ -1,20 +1,27 @@
 import React, { useState, useEffect, useContext, useMemo } from 'react';
-import { AutoComplete } from 'primereact/autocomplete';
-import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
-import { SelectButton } from 'primereact/selectbutton';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+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 { useTis } from './TisProvider';
+import { TestMethodDialog } from './TestMethodDialog';
 
 export interface TestFieldDef {
+    /** Canonical key — wire format, generated code, on-disk JSON. */
     name: string;
     type: string;
     units?: string;
     required?: boolean;
     source?: string;
+    /** Pretty label rendered by the form. Falls back to `name`. Units
+     *  are appended automatically; don't pre-format `[mm]` into label. */
+    label?: string;
+    /** Long-form guidance surfaced as a hover tooltip on an info icon. */
+    description?: string;
 }
 
 export interface TestMethod {
@@ -22,33 +29,51 @@ export interface TestMethod {
     config_fields: TestFieldDef[];
     cycle_fields: TestFieldDef[];
     results_fields: TestFieldDef[];
+    /** Optional pretty label for the Test Method picker. Falls back
+     *  to the canonical method_id key. */
+    label?: string;
+    /** Optional long-form description shown in the picker dialog
+     *  when this method is highlighted. */
+    description?: string;
 }
 
 /**
- * Props are all optional overrides — by default the form drives itself
- * from the surrounding `<TisProvider>`. Pass any of these to lock that
- * particular axis.
+ * Test-setup form. Renders Sample ID, Test Method picker, and Test
+ * Configuration. Project ID lives in `<ProjectSelector>` on its own
+ * tab — this form reads the selected project from `<TisProvider>`
+ * and gates staging on it being a known project (created via the
+ * Project tab's `+` button).
  *
- * - `schema`: bypass `useTisSchemas()` for the selected method.
- * - `defaultProjectId` / `defaultMethodId`: seed the form's local
- *    state when the corresponding TIS-context fields are blank.
- * - `onProjectChange` / `onMethodChange` / `onValidationChange`:
- *    receive callbacks in addition to the provider's selection state.
+ * All props are optional overrides — by default the form drives
+ * itself from the surrounding `<TisProvider>`.
  */
 export interface TestSetupFormProps {
     schema?: TestMethod;
-    defaultProjectId?: string;
     defaultMethodId?: string;
-    onProjectChange?: (projectId: string) => void;
     onMethodChange?: (methodId: string) => void;
     onValidationChange?: (isValid: boolean, config: any) => void;
 }
 
+// -------------------------------------------------------------------------
+// Helpers
+// -------------------------------------------------------------------------
+
+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;
+
+const methodLabelOf = (methodId: string, schema: TestMethod | undefined): string =>
+    (schema?.label && schema.label.length > 0) ? schema.label : methodId;
+
+// -------------------------------------------------------------------------
+
 export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     schema: schemaOverride,
-    defaultProjectId,
     defaultMethodId,
-    onProjectChange,
     onMethodChange,
     onValidationChange,
 }) => {
@@ -58,33 +83,20 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     const methodIds = useMemo(() => Object.keys(tis.schemas), [tis.schemas]);
 
-    // Seed the form's local project/method state from the provider's
-    // selection. Direct edits update the provider via setSelection so
-    // the History tab and Data tab follow along.
-    const [projectId, setProjectIdLocal] = useState<string>(
-        tis.selection.projectId || defaultProjectId || ''
-    );
+    // The form owns Sample ID, Method, and per-test config_fields
+    // values. Project ID is sourced from the provider's selection
+    // (set by <ProjectSelector> on the Project tab).
+    const projectId = tis.selection.projectId;
+    const projectExists = projectId.trim() !== '' && tis.projectKnown(projectId.trim());
+
     const [methodId, setMethodIdLocal] = useState<string>(
         tis.selection.methodId || defaultMethodId || tis.defaultMethodId || ''
     );
     const [sampleId, setSampleIdLocal] = useState<string>('');
     const [config, setConfig] = useState<any>({});
 
-    // Resolve the schema for the active method. The override beats the
-    // registry; if neither is available, render the empty state.
     const schema = schemaOverride ?? (methodId ? tis.schemas[methodId] : undefined);
 
-    // Push local edits back into the provider's selection so other
-    // components react. Only push when the value actually differs to
-    // avoid feedback loops.
-    useEffect(() => {
-        if (tis.selection.projectId !== projectId) {
-            tis.setSelection({ projectId });
-        }
-        if (onProjectChange) onProjectChange(projectId);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [projectId]);
-
     useEffect(() => {
         if (tis.selection.methodId !== methodId && methodId) {
             tis.setSelection({ methodId });
@@ -100,10 +112,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sampleId]);
 
-    // Track the live broadcast scalars — when the form is staged for
-    // a different sample externally (e.g., the operator types in
-    // another tab), reflect that here. Only react on a true change
-    // to avoid stomping local edits.
     useEffect(() => {
         if (tis.state.stagedSampleId && tis.state.stagedSampleId !== sampleId) {
             setSampleIdLocal(tis.state.stagedSampleId);
@@ -111,18 +119,26 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tis.state.stagedSampleId]);
 
-    const [existingProjects, setExistingProjects] = useState<string[]>([]);
-    const [filteredProjects, setFilteredProjects] = useState<string[]>([]);
+    // If the provider's selected method changes elsewhere (e.g., the
+    // operator picks a different method via the dialog), reflect it
+    // here so the schema we render stays in sync.
+    useEffect(() => {
+        if (tis.selection.methodId && tis.selection.methodId !== methodId) {
+            setMethodIdLocal(tis.selection.methodId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tis.selection.methodId]);
+
     const [isValid, setIsValid] = useState(false);
+    const [methodPickerOpen, setMethodPickerOpen] = useState(false);
 
-    // Seed and live-update fields that declare a `source` (FQDN).
+    // Seed and live-update config_fields that declare a `source`.
     useEffect(() => {
         if (!schema) return;
-        const allFields = [...schema.project_fields, ...schema.config_fields];
         setConfig((prev: any) => {
             let next = prev;
-            for (const field of allFields) {
-                if (field.name === 'sample_id') continue; // sample_id is top-level now
+            for (const field of schema.config_fields) {
+                if (field.name === 'sample_id') continue;
                 if (!field.source) continue;
                 const tag = findTagByFqdn(field.source);
                 if (!tag) continue;
@@ -136,61 +152,53 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         });
     }, [schema, rawValues, findTagByFqdn]);
 
-    useEffect(() => {
-        const fetchProjects = async () => {
-            try {
-                const resp: any = await invoke('tis.list_projects' as any, MessageType.Request as any, {} as any);
-                if (resp.success && resp.data && resp.data.projects) {
-                    setExistingProjects(resp.data.projects);
-                }
-            } catch (err) {
-                console.error('Failed to list projects', err);
-            }
-        };
-        fetchProjects();
-    }, [invoke]);
-
-    const searchProjects = (event: AutoCompleteCompleteEvent) => {
-        const query = event.query.toLowerCase();
-        setFilteredProjects(existingProjects.filter(p => p.toLowerCase().includes(query)));
-    };
-
-    // Validation drives both the local UI and the auto-stage. We only
-    // call `tis.stage_test` when every required piece is present —
-    // otherwise the operator's edge-triggered Start button could fire
-    // a half-baked stage.
+    // Validation: project must be known (set on Project tab + + button),
+    // sample_id non-empty, and every required config_field present. We
+    // also require the provider's projectFieldsCache for the selected
+    // project to be loaded before we stage — otherwise the recorded
+    // test.json would be missing project-level metadata.
     useEffect(() => {
         if (!schema) { setIsValid(false); return; }
         let valid = true;
-        if (!projectId.trim()) valid = false;
+        if (!projectExists) valid = false;
         if (!methodId.trim()) valid = false;
         if (!sampleId.trim()) valid = false;
+        if (valid && !tis.projectFieldsLoaded) valid = false;
 
-        const allFields = [...schema.project_fields, ...schema.config_fields];
-        for (const field of allFields) {
-            if (field.name === 'sample_id') continue; // tracked separately
+        for (const field of schema.config_fields) {
+            if (field.name === 'sample_id') continue;
             if (field.required) {
                 const v = config[field.name];
                 if (v === undefined || v === '' || v === null) { valid = false; break; }
             }
         }
+
         setIsValid(valid);
         if (onValidationChange) onValidationChange(valid, config);
 
-        // Auto-stage when everything is valid. Stripping sample_id from
-        // config (it's a top-level peer of project_id/method_id now;
-        // the legacy nested form is server-side hoisted with a
-        // deprecation warning, but new code shouldn't rely on it).
         if (valid) {
-            const { sample_id: _drop, ...rest } = (config ?? {}) as any;
+            const { sample_id: _drop, ...configRest } = (config ?? {}) as any;
+            // Combine persisted project_fields (managerial setup) with
+            // per-test config_fields. If keys collide the per-test
+            // value wins — operators are closer to the run than the
+            // project metadata.
+            const mergedConfig = {
+                ...tis.projectFields,
+                ...configRest,
+            };
             void invoke('tis.stage_test' as any, MessageType.Request, {
                 project_id: projectId,
                 method_id:  methodId,
                 sample_id:  sampleId,
-                config:     rest,
+                config:     mergedConfig,
             } as any).catch(e => console.error('[TestSetupForm] stage_test failed:', e));
         }
-    }, [config, schema, projectId, methodId, sampleId, onValidationChange, invoke]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        config, schema, projectId, methodId, sampleId,
+        projectExists, tis.projectFields, tis.projectFieldsLoaded,
+        onValidationChange, invoke,
+    ]);
 
     const isFieldValid = (field: TestFieldDef) => {
         if (!field.required) return true;
@@ -198,11 +206,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         return v !== undefined && v !== '' && v !== null;
     };
 
-    const handleProjectIdChange = (value: string | null | undefined) => {
-        const sanitized = (value || '').replace(/[^a-zA-Z0-9_]/g, '');
-        setProjectIdLocal(sanitized);
-    };
-
     const handleSampleIdChange = (value: string) => {
         setSampleIdLocal(value);
     };
@@ -215,13 +218,14 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         }
     };
 
-    const renderField = (field: TestFieldDef) => {
+    const renderConfigField = (field: TestFieldDef) => {
         if (field.name === 'sample_id') return null;
         const valid = isFieldValid(field);
         const isNum = field.type !== 'string' && field.type !== 'bool';
+        const tooltipId = `acFormInfo_${field.name}`;
         return (
             <React.Fragment key={field.name}>
-                <span className="ac-form-label">{field.name}</span>
+                <span className="ac-form-label">{labelOf(field)}</span>
                 {isNum ? (
                     <ValueInput
                         label={undefined}
@@ -237,7 +241,20 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                         className={!valid ? 'p-invalid' : ''}
                     />
                 )}
-                <span className="ac-form-units">{field.units ?? ''}</span>
+                {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>
@@ -255,30 +272,46 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         );
     }
 
+    // Cross-tab guard: if no project is selected (or the typed name
+    // hasn't been created yet on the Project tab), the form is
+    // effectively useless because every staging path needs a real
+    // project_id. Render an explicit empty-state pointing the user
+    // back to the Project tab so they don't sit confused in front of
+    // a half-functional form.
+    if (!projectExists) {
+        return (
+            <div style={{ padding: '1.25rem', maxWidth: '600px' }}>
+                <h3 className="ac-form-section">No project selected</h3>
+                <p style={{ color: 'var(--text-secondary-color)', marginTop: '0.5rem' }}>
+                    Pick a project on the <strong>Project</strong> tab first
+                    {projectId.trim() !== '' && ` (or click + there to create "${projectId.trim()}")`}.
+                </p>
+            </div>
+        );
+    }
+
+    const gridStyle: React.CSSProperties = {
+        padding: '1.25rem',
+        gridTemplateColumns: 'auto 1fr 1.75rem 1.75rem',
+    };
+
     return (
-        <div className="ac-form-grid" style={{ padding: '1.25rem' }}>
+        <div className="ac-form-grid" style={gridStyle}>
             <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                Project &amp; Method
+                Test Setup
                 <span style={{ color: isValid ? 'var(--green-500)' : 'var(--red-500)' }}>
                     <i className={isValid ? 'pi pi-check-circle' : 'pi pi-exclamation-circle'} />
                 </span>
+                <span style={{
+                    fontSize: '0.85em',
+                    color: 'var(--text-secondary-color)',
+                    fontWeight: 'normal',
+                    marginLeft: '0.25rem',
+                }}>
+                    project: <strong>{projectId}</strong>
+                </span>
             </h3>
 
-            <span className="ac-form-label">Project ID</span>
-            <AutoComplete
-                value={projectId}
-                suggestions={filteredProjects}
-                completeMethod={searchProjects}
-                onChange={(e) => handleProjectIdChange(e.value)}
-                dropdown
-                placeholder="Enter or select Project ID"
-                className={!projectId.trim() ? 'p-invalid' : ''}
-            />
-            <span />
-            <span style={{ color: projectId.trim() ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
-                <i className={projectId.trim() ? 'pi pi-check' : 'pi pi-times'} />
-            </span>
-
             <span className="ac-form-label">Sample ID</span>
             <TextInput
                 label={undefined}
@@ -286,29 +319,47 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 onValueChanged={handleSampleIdChange}
                 className={!sampleId.trim() ? 'p-invalid' : ''}
             />
-            <span />
+            <span aria-hidden="true" />
             <span style={{ color: sampleId.trim() ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
                 <i className={sampleId.trim() ? 'pi pi-check' : 'pi pi-times'} />
             </span>
 
-            {methodIds.length > 1 && (
+            {methodIds.length > 0 && (
                 <>
                     <span className="ac-form-label">Test Method</span>
-                    <SelectButton
-                        value={methodId}
-                        options={methodIds.map(id => ({ label: id, value: id }))}
-                        onChange={(e) => e.value && setMethodIdLocal(e.value)}
-                    />
-                    <span />
-                    <span />
+                    <div className="p-inputgroup" style={{ flex: 1 }}>
+                        <InputText
+                            value={methodLabelOf(methodId, schema)}
+                            readOnly
+                            style={{ flex: 1 }}
+                            tabIndex={-1}
+                        />
+                        <Button
+                            icon="pi pi-pencil"
+                            type="button"
+                            onClick={() => setMethodPickerOpen(true)}
+                            tooltip={methodIds.length > 1
+                                ? 'Change test method'
+                                : 'View test method details'}
+                            tooltipOptions={{ position: 'top' }}
+                        />
+                    </div>
+                    <span aria-hidden="true" />
+                    <span style={{ color: methodId ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                        <i className={methodId ? 'pi pi-check' : 'pi pi-times'} />
+                    </span>
                 </>
             )}
 
-            <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Project Information</h3>
-            {schema.project_fields.map(renderField)}
-
             <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Test Configuration</h3>
-            {schema.config_fields.map(renderField)}
+            {schema.config_fields.map(renderConfigField)}
+
+            <TestMethodDialog
+                visible={methodPickerOpen}
+                onHide={() => setMethodPickerOpen(false)}
+                currentMethodId={methodId}
+                onSelected={(picked) => setMethodIdLocal(picked)}
+            />
         </div>
     );
 };

package/src/components/tis/TisProvider.tsx

@@ -90,6 +90,45 @@ export interface TisContextValue {
     selection: TisSelection;
     setSelection: (patch: TisSelectionPatch) => void;
 
+    // -----------------------------------------------------------------
+    // Project management — used by both <ProjectSelector> (Project tab)
+    // and <TestSetupForm> (Test tab) so they share a single source of
+    // truth for "which projects are real" and "what fields does the
+    // current one have." Keeping this in the provider rather than in
+    // TestSetupForm lets the two components live in different tabs
+    // without prop-threading.
+    // -----------------------------------------------------------------
+
+    /** Project IDs returned by the server's `tis.list_projects`. */
+    existingProjects: string[];
+    /** True when the project either exists on disk OR was created in
+     *  this browser session via `<ProjectInfoDialog mode="create">`.
+     *  This is the gate for staging — typing an unknown name is
+     *  invalid until + creates the directory. */
+    projectKnown: (id: string) => boolean;
+    /** Refresh `existingProjects` from the server. Called automatically
+     *  on `tis.project_created` / `tis.project_updated` broadcasts. */
+    refreshProjects: () => Promise<void>;
+    /** Add a project ID to the in-session "just created" set so the
+     *  form is immediately valid for it without round-tripping to
+     *  list_projects. Idempotent. */
+    markProjectJustCreated: (id: string) => void;
+
+    /** `project_fields` blob for the currently-selected project,
+     *  fetched from project.json. `{}` when nothing is loaded yet
+     *  (use `projectFieldsLoaded` to disambiguate "empty project" vs
+     *  "still fetching"). */
+    projectFields: Record<string, any>;
+    projectFieldsLoaded: boolean;
+    /** Fetch and cache project_fields for one project. Returns the
+     *  fields on success, or null on error. The current selection's
+     *  fields are also re-loaded automatically when `selection.projectId`
+     *  changes. */
+    loadProjectFields: (id: string) => Promise<Record<string, any> | null>;
+    /** Stash freshly-known project_fields without a round trip — used
+     *  by the create / edit dialogs after a successful submit. */
+    setProjectFields: (id: string, fields: Record<string, any>) => void;
+
     /** Fetch the run list for a (project, method?) pair. Method may be
      *  omitted to aggregate runs across every method in the project —
      *  the History tab uses this. */
@@ -120,6 +159,14 @@ const TisContext = createContext<TisContextValue>({
     state: EMPTY_STATE,
     selection: EMPTY_SELECTION,
     setSelection: () => {},
+    existingProjects: [],
+    projectKnown: () => false,
+    refreshProjects: async () => {},
+    markProjectJustCreated: () => {},
+    projectFields: {},
+    projectFieldsLoaded: false,
+    loadProjectFields: async () => null,
+    setProjectFields: () => {},
     fetchRuns: async () => [],
     fetchRun: async () => null,
     runCache: {},
@@ -340,11 +387,111 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
 
     const runCache = useMemo(() => ({ ...cacheRef.current }), [cacheVersion]);
 
+    // -----------------------------------------------------------------
+    // Project management state
+    //
+    // Mirrors what TestSetupForm used to track locally, but lifted up
+    // here so <ProjectSelector> on the Project tab and <TestSetupForm>
+    // on the Test tab share a single source of truth. Without this
+    // lift, the two tabs would each fire their own list_projects and
+    // disagree on which IDs are valid.
+    // -----------------------------------------------------------------
+    const [existingProjects, setExistingProjects] = useState<string[]>([]);
+    const justCreatedRef = useRef<Set<string>>(new Set());
+    const [projectsTick, setProjectsTick] = useState(0); // bumps on Set mutation
+    const [projectFieldsCache, setProjectFieldsCache] = useState<Record<string, Record<string, any>>>({});
+
+    const refreshProjects = useCallback(async () => {
+        try {
+            const resp: any = await invoke('tis.list_projects' as any, MessageType.Request, {} as any);
+            if (resp?.success && resp.data?.projects) {
+                setExistingProjects(resp.data.projects as string[]);
+            }
+        } catch (e) {
+            console.error('[TisProvider] tis.list_projects failed:', e);
+        }
+    }, [invoke]);
+
+    const markProjectJustCreated = useCallback((id: string) => {
+        if (!id) return;
+        if (justCreatedRef.current.has(id)) return;
+        justCreatedRef.current.add(id);
+        setProjectsTick(t => t + 1);
+    }, []);
+
+    const projectKnown = useCallback((id: string) => {
+        if (!id) return false;
+        if (justCreatedRef.current.has(id)) return true;
+        return existingProjects.includes(id);
+        // existingProjects + projectsTick are deps but useCallback
+        // closes over them; consumers read current values fine.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [existingProjects, projectsTick]);
+
+    const setProjectFields = useCallback((id: string, fields: Record<string, any>) => {
+        if (!id) return;
+        setProjectFieldsCache(prev => ({ ...prev, [id]: fields }));
+    }, []);
+
+    const loadProjectFields = useCallback(async (id: string): Promise<Record<string, any> | null> => {
+        if (!id) return null;
+        try {
+            const resp: any = await invoke('tis.read_project' as any, MessageType.Request, { project_id: id } as any);
+            if (resp?.success) {
+                const fields = (resp.data?.project_fields ?? {}) as Record<string, any>;
+                setProjectFieldsCache(prev => ({ ...prev, [id]: fields }));
+                return fields;
+            }
+        } catch (e) {
+            console.warn('[TisProvider] tis.read_project failed:', e);
+        }
+        return null;
+    }, [invoke]);
+
+    // Initial project list load + refresh on server-side mutation
+    // broadcasts. Mark-just-created is purely local; the server
+    // broadcasts kick the persisted list back into sync if a project
+    // was added by another client (or the next time `acctl` writes a
+    // new directory).
+    useEffect(() => { void refreshProjects(); }, [refreshProjects]);
+
+    useEffect(() => {
+        const onCreated = () => { void refreshProjects(); };
+        const onUpdated = (payload: any) => {
+            const pid = typeof payload?.project_id === 'string' ? payload.project_id : '';
+            if (pid) void loadProjectFields(pid);
+        };
+        const id1 = subscribe('tis.project_created', onCreated);
+        const id2 = subscribe('tis.project_updated', onUpdated);
+        return () => { unsubscribe(id1); unsubscribe(id2); };
+    }, [subscribe, unsubscribe, refreshProjects, loadProjectFields]);
+
+    // Auto-fetch project_fields whenever the selection lands on a
+    // known project we don't yet have cached. The Test tab's stage
+    // payload depends on this.
+    useEffect(() => {
+        const pid = selection.projectId;
+        if (!pid || !projectKnown(pid)) return;
+        if (projectFieldsCache[pid] !== undefined) return;
+        void loadProjectFields(pid);
+    }, [selection.projectId, projectKnown, projectFieldsCache, loadProjectFields]);
+
+    const projectFields = projectFieldsCache[selection.projectId] ?? {};
+    const projectFieldsLoaded = projectFieldsCache[selection.projectId] !== undefined;
+
     const value: TisContextValue = useMemo(() => ({
         schemas, defaultMethodId, schemasLoaded,
         state, selection, setSelection,
+        existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
+        projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
+        fetchRuns, fetchRun, runCache,
+    }), [
+        schemas, defaultMethodId, schemasLoaded,
+        state, selection, setSelection,
+        existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
+        projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
         fetchRuns, fetchRun, runCache,
-    }), [schemas, defaultMethodId, schemasLoaded, state, selection, setSelection, fetchRuns, fetchRun, runCache]);
+    ]);
 
     return <TisContext.Provider value={value}>{children}</TisContext.Provider>;
 };