@adcops/autocore-react 3.3.85 → 3.3.89

package/src/components/forms/FormRow.tsx

@@ -0,0 +1,37 @@
+/**
+ * FormRow — grid-aligned label/input pair with optional required marker
+ * and inline error text. Drop inside a FormSection.
+ */
+
+import * as React from 'react';
+import './forms.css';
+
+export interface FormRowProps {
+    label: React.ReactNode;
+    required?: boolean;
+    /** Optional descriptive hint shown beneath the label. */
+    hint?: React.ReactNode;
+    /** Inline error text shown beneath the input. */
+    error?: React.ReactNode;
+    /** Optional `htmlFor` association on the label tag. */
+    htmlFor?: string;
+    children?: React.ReactNode;
+}
+
+export const FormRow: React.FC<FormRowProps> = ({ label, required, hint, error, htmlFor, children }) => {
+    return (
+        <div className={`ac-formrow${error ? ' ac-formrow--error' : ''}`}>
+            <label className="ac-formrow__label" htmlFor={htmlFor}>
+                {label}
+                {required && <span className="ac-formrow__required" aria-hidden> *</span>}
+                {hint && <small className="ac-formrow__hint">{hint}</small>}
+            </label>
+            <div className="ac-formrow__field">
+                {children}
+                {error && <small className="ac-formrow__error">{error}</small>}
+            </div>
+        </div>
+    );
+};
+
+export default FormRow;

package/src/components/forms/FormSection.tsx

@@ -0,0 +1,39 @@
+/**
+ * FormSection — labeled bordered region containing a group of FormRow rows.
+ *
+ * Used by the TIS editor subforms and intended for app-level settings
+ * pages. Replaces the ad-hoc `.ac-form-grid` divs scattered across project
+ * settings views.
+ */
+
+import * as React from 'react';
+import './forms.css';
+
+export interface FormSectionProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Right-aligned controls (buttons, dirty pill, etc.). */
+    actions?: React.ReactNode;
+}
+
+export const FormSection: React.FC<FormSectionProps> = ({ title, description, actions, children }) => {
+    return (
+        <section className="ac-formsection">
+            {(title || actions) && (
+                <header className="ac-formsection__header">
+                    <div>
+                        {title && <h3 className="ac-formsection__title">{title}</h3>}
+                        {description && <small className="ac-formsection__desc">{description}</small>}
+                    </div>
+                    {actions && <div className="ac-formsection__actions">{actions}</div>}
+                </header>
+            )}
+            <div className="ac-formsection__body">
+                {children}
+            </div>
+        </section>
+    );
+};
+
+export default FormSection;

package/src/components/forms/forms.css

@@ -0,0 +1,89 @@
+.ac-formsection {
+    border: 1px solid var(--surface-d, #e2e8f0);
+    border-radius: 6px;
+    background: var(--surface-card, #fff);
+    margin-bottom: 1rem;
+}
+
+.ac-formsection__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    background: var(--surface-b, #f8fafc);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.ac-formsection__title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+}
+
+.ac-formsection__desc {
+    color: var(--text-color-secondary, #64748b);
+    display: block;
+    margin-top: 0.15rem;
+}
+
+.ac-formsection__actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.ac-formsection__body {
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ac-formrow {
+    display: grid;
+    grid-template-columns: minmax(8rem, 14rem) 1fr;
+    gap: 0.5rem 1rem;
+    align-items: start;
+}
+
+.ac-formrow--error .ac-formrow__field input,
+.ac-formrow--error .ac-formrow__field .p-inputtext {
+    border-color: #dc2626;
+}
+
+.ac-formrow__label {
+    font-weight: 500;
+    padding-top: 0.4rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-formrow__required {
+    color: #dc2626;
+}
+
+.ac-formrow__hint {
+    color: var(--text-color-secondary, #64748b);
+    font-weight: 400;
+    font-size: 0.75rem;
+    margin-top: 0.15rem;
+}
+
+.ac-formrow__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.ac-formrow__field > input,
+.ac-formrow__field > .p-inputtext,
+.ac-formrow__field > .p-dropdown,
+.ac-formrow__field > .p-inputtextarea {
+    width: 100%;
+}
+
+.ac-formrow__error {
+    color: #dc2626;
+    font-size: 0.75rem;
+}

package/src/components/forms/index.ts

@@ -0,0 +1,2 @@
+export { FormSection, type FormSectionProps } from './FormSection';
+export { FormRow, type FormRowProps } from './FormRow';

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>
+    );
+};