@adcops/autocore-react 3.3.84 → 3.3.87

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

@@ -0,0 +1,121 @@
+.tis-editor {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.tis-editor__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+}
+
+.tis-editor__header h2 {
+    margin: 0;
+    font-size: 1.125rem;
+}
+
+.tis-editor__header-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.tis-editor__dirty-pill {
+    display: inline-block;
+    background: #ea580c;
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.15rem 0.5rem;
+    border-radius: 999px;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+}
+
+.tis-editor__body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+}
+
+.tis-editor__sidebar {
+    flex: 0 0 320px;
+    border-right: 1px solid var(--surface-d, #e2e8f0);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.tis-editor__sidebar-actions {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    flex-wrap: wrap;
+}
+
+.tis-editor__sidebar-actions .p-button {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.tis-editor__detail {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.tis-editor__detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    background: var(--surface-b, #f8fafc);
+}
+
+.tis-editor__editor-wrap {
+    flex: 1;
+    min-height: 0;
+}
+
+.tis-editor__editor-wrap > * {
+    height: 100%;
+}
+
+.tis-editor__error {
+    background: #fef2f2;
+    color: #991b1b;
+    border-left: 3px solid #dc2626;
+    padding: 0.5rem 1rem;
+    margin: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+.tis-editor__error pre {
+    white-space: pre-wrap;
+    margin: 0.25rem 0 0 0;
+    font-family: ui-monospace, monospace;
+    font-size: 0.8rem;
+}
+
+.tis-editor__empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-color-secondary, #64748b);
+}
+
+.tis-editor__new-method-label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-bottom: 0.25rem;
+}

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

@@ -0,0 +1,321 @@
+/**
+ * TisConfigEditor — master-detail UI for editing TIS test_methods.
+ *
+ * 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.
+ *
+ * "Apply" pushes the local Monaco buffer to the server-side stage
+ * (`tis.put_method`). "Save" persists the entire stage to project.json
+ * (`tis.save_config`). "Revert" drops the stage (`tis.discard_config_changes`).
+ *
+ * Save is disabled (with a tooltip) when active tests are open against
+ * any method — the server enforces the same gate, but disabling on the
+ * client gives clearer UX.
+ */
+
+import { useEffect, useMemo, 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 { useContext } from 'react';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useTisConfig, type TisIpcInvoker } from '../../hooks/useTisConfig';
+import { useAmsAssetTypes } from '../../hooks/useAmsAssetTypes';
+import { MethodFormEditor } from './editor/MethodFormEditor';
+import { SaveDiffDialog } from './editor/SaveDiffDialog';
+import type { TestMethod } from './types';
+
+import './TisConfigEditor.css';
+
+export interface TisConfigEditorProps {
+    /** Project ID. Today this is informational (the server hosts one
+     *  project) but the wire contract carries it for forward compatibility. */
+    projectId: string;
+    /** Optional invoker override — primarily for the playground / tests. */
+    invoker?: TisIpcInvoker;
+}
+
+interface MethodRow {
+    id: string;
+    label: string;
+}
+
+const EMPTY_METHOD: TestMethod = {
+    label: '',
+    description: '',
+    project_fields: [],
+    config_fields: [],
+    cycle_fields: [],
+    results_fields: [],
+    views: {},
+    asset_refs: [],
+};
+
+export const TisConfigEditor: React.FC<TisConfigEditorProps> = ({ projectId, invoker }) => {
+    const ctx = useContext(EventEmitterContext);
+    // Resolve invoker once so it can be passed into the SaveDiffDialog
+    // alongside the hook's internal use of it.
+    const effectiveInvoker: TisIpcInvoker = invoker
+        ?? (async (topic, payload) => await ctx.invoke(topic as any, MessageType.Request, payload as any));
+
+    const tis = useTisConfig(projectId, { invoker: effectiveInvoker });
+    const ams = useAmsAssetTypes({ invoker: effectiveInvoker });
+    const [selectedId, setSelectedId] = useState<string | null>(null);
+    const [draftError, setDraftError] = useState<string | null>(null);
+    const [busy, setBusy] = useState<boolean>(false);
+    const [saveDialogOpen, setSaveDialogOpen] = useState<boolean>(false);
+
+    // New-method dialog state.
+    const [newDialogOpen, setNewDialogOpen] = useState<boolean>(false);
+    const [newId, setNewId] = useState<string>('');
+
+    const rows: MethodRow[] = useMemo(() => {
+        if (!tis.config) return [];
+        return Object.entries(tis.config.methods).map(([id, m]) => ({
+            id,
+            label: (m as any)?.label ?? '',
+        }));
+    }, [tis.config]);
+
+    // Auto-select the default method on first successful load.
+    useEffect(() => {
+        if (!selectedId && tis.config) {
+            const fallback = tis.config.defaultMethodId
+                || Object.keys(tis.config.methods)[0]
+                || null;
+            setSelectedId(fallback);
+        }
+    }, [tis.config, selectedId]);
+
+    // Clear errors whenever the selected method changes.
+    useEffect(() => { setDraftError(null); }, [selectedId]);
+
+    const onApply = async (next: TestMethod) => {
+        if (!selectedId) return;
+        setBusy(true);
+        try {
+            await tis.putMethod(selectedId, next as any);
+            setDraftError(null);
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onCreate = async () => {
+        const id = newId.trim();
+        if (!id) return;
+        if (tis.config?.methods[id]) {
+            setDraftError(`A method named "${id}" already exists.`);
+            return;
+        }
+        setBusy(true);
+        try {
+            await tis.putMethod(id, EMPTY_METHOD);
+            setSelectedId(id);
+            setNewDialogOpen(false);
+            setNewId('');
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onDuplicate = async () => {
+        if (!selectedId || !tis.config) return;
+        const source = tis.config.methods[selectedId];
+        if (!source) return;
+        let candidate = `${selectedId}_copy`;
+        let n = 2;
+        while (tis.config.methods[candidate]) {
+            candidate = `${selectedId}_copy_${n++}`;
+        }
+        setBusy(true);
+        try {
+            await tis.putMethod(candidate, JSON.parse(JSON.stringify(source)));
+            setSelectedId(candidate);
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onDelete = async () => {
+        if (!selectedId) return;
+        if (!window.confirm(`Remove method "${selectedId}"? This is staged — Save persists it.`)) return;
+        setBusy(true);
+        try {
+            await tis.removeMethod(selectedId);
+            setSelectedId(null);
+        } catch (e: any) {
+            setDraftError(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.
+    const openSaveDialog = () => setSaveDialogOpen(true);
+    const onSaveConfirm = async () => {
+        setBusy(true);
+        try {
+            await tis.save();
+            setSaveDialogOpen(false);
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onRevert = async () => {
+        if (!window.confirm('Discard all in-progress edits? This cannot be undone.')) return;
+        setBusy(true);
+        try {
+            await tis.revert();
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div className="tis-editor">
+            <header className="tis-editor__header">
+                <h2>
+                    Test Methods{' '}
+                    {tis.config?.dirty && (
+                        <span className="tis-editor__dirty-pill">unsaved</span>
+                    )}
+                </h2>
+                <div className="tis-editor__header-actions">
+                    <Button
+                        label="Save…"
+                        icon="pi pi-save"
+                        disabled={busy || !tis.config?.dirty}
+                        onClick={openSaveDialog}
+                    />
+                    <Button
+                        label="Revert"
+                        icon="pi pi-undo"
+                        className="p-button-secondary"
+                        disabled={busy || !tis.config?.dirty}
+                        onClick={onRevert}
+                    />
+                </div>
+            </header>
+
+            {tis.error && (
+                <div className="tis-editor__error">
+                    <strong>Error:</strong> <pre>{tis.error}</pre>
+                </div>
+            )}
+
+            <div className="tis-editor__body">
+                <aside className="tis-editor__sidebar">
+                    <div className="tis-editor__sidebar-actions">
+                        <Button
+                            label="New"
+                            icon="pi pi-plus"
+                            disabled={busy}
+                            onClick={() => setNewDialogOpen(true)}
+                        />
+                        <Button
+                            label="Duplicate"
+                            icon="pi pi-clone"
+                            className="p-button-secondary"
+                            disabled={busy || !selectedId}
+                            onClick={onDuplicate}
+                        />
+                        <Button
+                            label="Delete"
+                            icon="pi pi-trash"
+                            className="p-button-danger"
+                            disabled={busy || !selectedId}
+                            onClick={onDelete}
+                        />
+                    </div>
+                    <DataTable
+                        value={rows}
+                        selection={rows.find(r => r.id === selectedId) ?? null}
+                        onSelectionChange={(e) => setSelectedId((e.value as MethodRow | null)?.id ?? null)}
+                        selectionMode="single"
+                        dataKey="id"
+                        scrollable
+                        scrollHeight="flex"
+                        emptyMessage={tis.loading ? 'Loading…' : 'No test methods defined.'}
+                    >
+                        <Column field="id" header="Method ID" />
+                        <Column field="label" header="Label" />
+                    </DataTable>
+                </aside>
+
+                <section className="tis-editor__detail">
+                    {selectedId && tis.config?.methods[selectedId] ? (
+                        <>
+                            {draftError && (
+                                <div className="tis-editor__error">
+                                    <pre>{draftError}</pre>
+                                </div>
+                            )}
+                            <MethodFormEditor
+                                methodId={selectedId}
+                                method={tis.config.methods[selectedId] as TestMethod}
+                                onApply={onApply}
+                                busy={busy}
+                                knownAssetTypes={ams.types}
+                            />
+                        </>
+                    ) : (
+                        <div className="tis-editor__empty">
+                            Select a test method on the left, or create a new one.
+                        </div>
+                    )}
+                </section>
+            </div>
+
+            <Dialog
+                header="New Test Method"
+                visible={newDialogOpen}
+                onHide={() => setNewDialogOpen(false)}
+                style={{ width: '24rem' }}
+            >
+                <label className="tis-editor__new-method-label">
+                    Method ID
+                    <InputText
+                        value={newId}
+                        onChange={(e) => setNewId(e.target.value)}
+                        placeholder="e.g. translational_traction"
+                        autoFocus
+                    />
+                </label>
+                <small>Canonical key — appears in wire payloads, on-disk paths, and generated code.</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} />
+                </div>
+            </Dialog>
+
+            <SaveDiffDialog
+                visible={saveDialogOpen}
+                staged={(tis.config?.methods ?? {}) as Record<string, TestMethod>}
+                invoker={effectiveInvoker}
+                onConfirm={onSaveConfirm}
+                onCancel={() => setSaveDialogOpen(false)}
+            />
+        </div>
+    );
+};
+
+export default TisConfigEditor;

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

@@ -0,0 +1,54 @@
+import { InputText } from 'primereact/inputtext';
+import { Checkbox } from 'primereact/checkbox';
+import { FormSection } from '../../forms/FormSection';
+import { FormRow } from '../../forms/FormRow';
+import type { AnalysisShape, TestMethod } from '../types';
+
+export interface AnalysisEditorProps {
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+}
+
+const empty = (): AnalysisShape => ({ script: '', function: '' });
+
+export const AnalysisEditor: React.FC<AnalysisEditorProps> = ({ method, onChange }) => {
+    const a = method.analysis as AnalysisShape | null | undefined;
+    const enabled = !!a;
+
+    const setAnalysis = (next: AnalysisShape | null) => {
+        onChange({ ...method, analysis: next });
+    };
+
+    return (
+        <FormSection
+            title="Analysis Hook"
+            description="Optional post-cycle Python entry point. Codegen wires this into the method's TestManager."
+            actions={
+                <Checkbox
+                    checked={enabled}
+                    onChange={(e) => setAnalysis(e.checked ? empty() : null)}
+                />
+            }
+        >
+            {!enabled && <small>Analysis hook disabled. Tick the box to enable.</small>}
+            {enabled && a && (
+                <>
+                    <FormRow label="Script" required hint="Path under autocore-python's scripts directory.">
+                        <InputText
+                            value={a.script}
+                            onChange={(e) => setAnalysis({ ...a, script: e.target.value })}
+                            placeholder="e.g. analysis/traction_v1.py"
+                        />
+                    </FormRow>
+                    <FormRow label="Function" required hint="Entry-point name within the script.">
+                        <InputText
+                            value={a.function}
+                            onChange={(e) => setAnalysis({ ...a, function: e.target.value })}
+                            placeholder="e.g. analyze_cycle"
+                        />
+                    </FormRow>
+                </>
+            )}
+        </FormSection>
+    );
+};

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

@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dropdown } from 'primereact/dropdown';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { FormSection } from '../../forms/FormSection';
+import { FormRow } from '../../forms/FormRow';
+import type { AssetRef, TestMethod } from '../types';
+
+const SELECT_OPTIONS = [
+    { label: 'By location', value: 'by_location' },
+    { label: 'By id field', value: 'by_id_field' },
+];
+
+const CALIBRATION_OPTIONS = [
+    { label: 'Ignore', value: 'ignore' },
+    { label: 'Warn (default)', value: 'warn' },
+    { label: 'Require', value: 'require' },
+];
+
+export interface AssetRefsEditorProps {
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+    /** Asset types known to AMS, supplied by the host. Empty array = use a
+     *  free-form text field. Phase 3 wires this up to ams.list_schemas. */
+    knownAssetTypes?: string[];
+}
+
+const blank = (): AssetRef => ({
+    field: '', asset_type: '', select: 'by_location',
+    calibration_required: 'warn',
+});
+
+export const AssetRefsEditor: React.FC<AssetRefsEditorProps> = ({ method, onChange, knownAssetTypes = [] }) => {
+    const refs: AssetRef[] = (method.asset_refs as AssetRef[]) ?? [];
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingIdx, setEditingIdx] = useState<number | null>(null);
+    const [draft, setDraft] = useState<AssetRef>(blank());
+    const [error, setError] = useState<string | null>(null);
+
+    const openNew = () => {
+        setEditingIdx(null);
+        setDraft(blank());
+        setError(null);
+        setDialogOpen(true);
+    };
+    const openEdit = (i: number) => {
+        setEditingIdx(i);
+        setDraft({ ...refs[i] });
+        setError(null);
+        setDialogOpen(true);
+    };
+
+    const validate = (a: AssetRef): string | null => {
+        if (!a.field.trim()) return 'Field name is required.';
+        if (!a.asset_type.trim()) return 'Asset type is required.';
+        if (a.select === 'by_location' && !a.location?.trim()) {
+            return 'Location is required when select=by_location.';
+        }
+        if (a.select === 'by_id_field' && !a.from?.trim()) {
+            return 'From-path is required when select=by_id_field.';
+        }
+        const dupOfOther = refs.some((r, i) => r.field === a.field && i !== editingIdx);
+        if (dupOfOther) return `An asset_ref for field "${a.field}" already exists.`;
+        return null;
+    };
+
+    const handleSave = () => {
+        const err = validate(draft);
+        if (err) { setError(err); return; }
+        const next = [...refs];
+        if (editingIdx === null) next.push(draft);
+        else next[editingIdx] = draft;
+        onChange({ ...method, asset_refs: next });
+        setDialogOpen(false);
+    };
+
+    const handleRemove = (i: number) => {
+        if (!window.confirm(`Remove asset_ref "${refs[i].field}"?`)) return;
+        onChange({ ...method, asset_refs: refs.filter((_, idx) => idx !== i) });
+    };
+
+    const rowActions = (_r: AssetRef, opts: { rowIndex: number }) => (
+        <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button icon="pi pi-pencil" className="p-button-text p-button-sm" onClick={() => openEdit(opts.rowIndex)} />
+            <Button icon="pi pi-trash" className="p-button-text p-button-danger p-button-sm" onClick={() => handleRemove(opts.rowIndex)} />
+        </div>
+    );
+
+    const assetTypeOptions = knownAssetTypes.length > 0
+        ? knownAssetTypes.map(t => ({ label: t, value: t }))
+        : null;
+
+    return (
+        <>
+            <FormSection
+                title="Asset References"
+                description="AMS dependencies resolved at start_test time and snapshotted into test.json."
+                actions={<Button label="Add asset_ref" icon="pi pi-plus" size="small" onClick={openNew} />}
+            >
+                <DataTable value={refs} dataKey="field" emptyMessage="No asset_refs declared.">
+                    <Column field="field" header="Field" />
+                    <Column field="asset_type" header="Asset type" />
+                    <Column field="select" header="Select" style={{ width: '7rem' }} />
+                    <Column
+                        header="Locator"
+                        body={(r: AssetRef) => r.select === 'by_location' ? r.location : r.from}
+                    />
+                    <Column field="calibration_required" header="Calibration" style={{ width: '7rem' }} />
+                    <Column header="" body={rowActions} style={{ width: '6rem' }} />
+                </DataTable>
+            </FormSection>
+
+            <Dialog
+                header={editingIdx === null ? 'New asset_ref' : `Edit asset_ref: ${refs[editingIdx ?? 0]?.field}`}
+                visible={dialogOpen}
+                onHide={() => setDialogOpen(false)}
+                style={{ width: '40rem' }}
+            >
+                {error && <div style={{ color: '#dc2626', marginBottom: '0.5rem' }}>{error}</div>}
+                <FormRow label="Field" required hint="Key under test.json::asset_snapshot.">
+                    <InputText value={draft.field} onChange={(e) => setDraft({ ...draft, field: e.target.value })} />
+                </FormRow>
+                <FormRow label="Asset type" required>
+                    {assetTypeOptions ? (
+                        <Dropdown
+                            value={draft.asset_type}
+                            options={assetTypeOptions}
+                            onChange={(e) => setDraft({ ...draft, asset_type: e.value })}
+                            editable
+                        />
+                    ) : (
+                        <InputText
+                            value={draft.asset_type}
+                            onChange={(e) => setDraft({ ...draft, asset_type: e.target.value })}
+                            placeholder="e.g. load_cell"
+                        />
+                    )}
+                </FormRow>
+                <FormRow label="Select" required>
+                    <Dropdown
+                        value={draft.select}
+                        options={SELECT_OPTIONS}
+                        onChange={(e) => setDraft({ ...draft, select: e.value })}
+                    />
+                </FormRow>
+                {draft.select === 'by_location' && (
+                    <FormRow label="Location" required hint="AMS location key (e.g. tsdr).">
+                        <InputText value={draft.location ?? ''} onChange={(e) => setDraft({ ...draft, location: e.target.value })} />
+                    </FormRow>
+                )}
+                {draft.select === 'by_id_field' && (
+                    <FormRow label="From" required hint="Dotted config path (e.g. config.surface_asset_id).">
+                        <InputText value={draft.from ?? ''} onChange={(e) => setDraft({ ...draft, from: e.target.value })} />
+                    </FormRow>
+                )}
+                <FormRow label="Calibration policy">
+                    <Dropdown
+                        value={draft.calibration_required ?? 'warn'}
+                        options={CALIBRATION_OPTIONS}
+                        onChange={(e) => setDraft({ ...draft, calibration_required: e.value })}
+                    />
+                </FormRow>
+                <FormRow label="Label">
+                    <InputText
+                        value={draft.label ?? ''}
+                        onChange={(e) => setDraft({ ...draft, label: e.target.value || undefined })}
+                    />
+                </FormRow>
+                <FormRow label="Description">
+                    <InputTextarea
+                        rows={2}
+                        value={draft.description ?? ''}
+                        onChange={(e) => setDraft({ ...draft, description: e.target.value || undefined })}
+                    />
+                </FormRow>
+                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '1rem' }}>
+                    <Button label="Cancel" className="p-button-text" onClick={() => setDialogOpen(false)} />
+                    <Button label="Save" onClick={handleSave} />
+                </div>
+            </Dialog>
+        </>
+    );
+};