From b2445b0325915c47b687bcf7b60c0569abc387b4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 16 Aug 2026 18:16:48 +0000
Subject: [PATCH 1/4] feat: progressive validation in the compute form

A new job opened the Compute tab on four red 'The field is required'
errors - complaints about things the reader had not been given a chance
to do yet. The form validates live, so every required field reported
itself on first paint.

Errors are now shown only for fields the reader has actually edited,
tracked from the field id RJSF passes to onChange. A new showAllErrors
prop (default off) reveals everything at once for the cases where the
whole form must answer for itself - submit, and the preflight check
coming in phase 2.

Note the RJSForm remount keyed on showAllErrors: RJSF only re-validates
when its schema or form data change, so without it the toggle left the
previous validation result on screen.

Demo: 'Start empty' reproduces the state a new job starts in, and the
'Show all errors' switch flips between the two modes. LOAD JSON now
remounts the form too - ComputeForm derives its data in the constructor,
so loading JSON previously did nothing to the form.

SOF-8023 phase 1.1.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
---
 src/components/Compute.jsx     |  4 ++
 src/components/ComputeForm.tsx | 52 ++++++++++++++++++--
 src/standalone/index.tsx       | 37 ++++++++++++++
 src/utils/touchedFields.ts     | 60 +++++++++++++++++++++++
 tests/touchedFields.tests.ts   | 89 ++++++++++++++++++++++++++++++++++
 5 files changed, 237 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/touchedFields.ts
 create mode 100644 tests/touchedFields.tests.ts

diff --git a/src/components/Compute.jsx b/src/components/Compute.jsx
index 799850e..60db8b4 100644
--- a/src/components/Compute.jsx
+++ b/src/components/Compute.jsx
@@ -88,6 +88,7 @@ class Compute extends React.Component {
             showAdvancedOptions,
             accountUsers,
             isAccountUsersLoading,
+            showAllErrors,
         } = this.props;
 
         return (
@@ -126,6 +127,7 @@ class Compute extends React.Component {
                         showAdvancedOptions={showAdvancedOptions}
                         accountUsers={accountUsers}
                         isAccountUsersLoading={isAccountUsersLoading}
+                        showAllErrors={showAllErrors}
                     />
                 )}
                 {this.showStatusTrack && (
@@ -150,6 +152,8 @@ Compute.propTypes = {
     showStatusTrack: PropTypes.bool,
     showAdvancedOptions: PropTypes.bool,
     accountUsers: PropTypes.array,
+    /** Reveal every validation error, not just those for fields already touched. */
+    showAllErrors: PropTypes.bool,
 };
 
 Compute.defaultProps = {
diff --git a/src/components/ComputeForm.tsx b/src/components/ComputeForm.tsx
index b988010..c531d22 100644
--- a/src/components/ComputeForm.tsx
+++ b/src/components/ComputeForm.tsx
@@ -28,6 +28,7 @@ import omitBy from "lodash/omitBy";
 import React from "react";
 
 import { getComputeSchema, getComputeValidator } from "../validators";
+import { shouldShowFieldError, withTouchedField } from "../utils/touchedFields";
 import Notify from "./Notify";
 import QueuesTable from "./QueuesTable";
 
@@ -309,10 +310,19 @@ interface ComputeFormProps {
     onUpdate: (s: string) => void;
     appName?: string;
     pathForClusters?: string;
+    /**
+     * Reveals every validation error at once, including for fields the reader
+     * has not touched. Off by default: a form the reader has not filled in yet
+     * should not open by listing everything wrong with it. Turn it on when the
+     * whole form has to answer for itself — on submit, or from a preflight check.
+     */
+    showAllErrors?: boolean;
 }
 
 interface ComputeFormState {
     formData: any;
+    /** Form-data keys the reader has edited; see `utils/touchedFields`. */
+    touchedFields: ReadonlySet<string>;
 }
 
 export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormState> {
@@ -334,6 +344,7 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
 
         this.state = {
             formData,
+            touchedFields: new Set<string>(),
         };
         this.handleFormUpdate = this.handleFormUpdate.bind(this);
         this.onNotifyUpdate = this.onNotifyUpdate.bind(this);
@@ -344,10 +355,21 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
         this.computeUiSchema = resolveComputeUISchema(props.appName ?? "");
     }
 
-    handleFormUpdate({ formData }: { formData: Record<string, any> }) {
-        this.setState({ formData }, () => {
-            this.updateForm();
-        });
+    /**
+     * `fieldId` is RJSF's id for the field that changed. It is what makes
+     * progressive validation possible: errors stay hidden until the reader has
+     * been to the field in question.
+     */
+    handleFormUpdate({ formData }: { formData: Record<string, any> }, fieldId?: string) {
+        this.setState(
+            (previousState) => ({
+                formData,
+                touchedFields: withTouchedField(previousState.touchedFields, fieldId),
+            }),
+            () => {
+                this.updateForm();
+            },
+        );
     }
 
     onNotifyUpdate(notify: Record<string, any>) {
@@ -404,9 +426,20 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
             return {};
         }
 
+        const { showAllErrors = false } = this.props;
+        const { touchedFields } = this.state;
+
         this.validator.errors.forEach((obj: Record<string, any>) => {
             const { params } = obj;
             const { name, message } = this.getErrorMessage(obj);
+            const fieldName = params.missingProperty || name;
+
+            // The form validates live, so without this every required field
+            // reports itself on first paint — before the reader has had a chance
+            // to fill anything in.
+            if (!shouldShowFieldError({ fieldName, touchedFields, showAllErrors })) {
+                return;
+            }
 
             if (params.missingProperty) {
                 errors[params.missingProperty]?.addError("The field is required");
@@ -459,6 +492,7 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
             compute,
             gridParams,
             pathForClusters,
+            showAllErrors = false,
         } = this.props;
         const { formData } = this.state;
         const disableFields = !editable;
@@ -498,11 +532,19 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
                     <Grid container>
                         <Grid item p={2} {...(gridParams?.left || DEFAULT_GRID_PARAMS.left)}>
                             <RJSForm
+                                // RJSF only re-validates when its schema or form data
+                                // change, so flipping `showAllErrors` alone would leave
+                                // the previous validation result on screen. Remounting
+                                // forces a fresh pass; the toggle happens on submit, not
+                                // while typing, so the cost is not felt.
+                                key={showAllErrors ? "show-all-errors" : "progressive"}
                                 schema={finalSchema as any}
                                 uiSchema={uiSchema}
                                 validator={rjsfValidator}
                                 formData={formData}
-                                onChange={(event: any) => this.handleFormUpdate(event)}
+                                onChange={(event: any, fieldId?: string) =>
+                                    this.handleFormUpdate(event, fieldId)
+                                }
                                 showErrorList={false}
                                 customValidate={this.customValidate}
                                 liveValidate
diff --git a/src/standalone/index.tsx b/src/standalone/index.tsx
index bf55121..290f72d 100644
--- a/src/standalone/index.tsx
+++ b/src/standalone/index.tsx
@@ -177,6 +177,23 @@ function App() {
     const [compute, setCompute] = useState(defaultComputeConfig);
     const [jsonInput, setJsonInput] = useState(JSON.stringify(defaultComputeConfig, null, 2));
     const [jsonError, setJsonError] = useState("");
+    const [showAllErrors, setShowAllErrors] = useState(false);
+    // Remount key: clearing the form has to reset the touched-field state too,
+    // otherwise the previous session's touches keep their errors on screen.
+    const [computeInstanceKey, setComputeInstanceKey] = useState(0);
+
+    /**
+     * The state a brand-new job actually starts in. Worth one click in the demo:
+     * it is the case progressive validation exists for, and the one where the
+     * form used to open on a wall of "The field is required".
+     */
+    const loadEmptyCompute = useCallback(() => {
+        const emptyCompute = { cluster: {}, arguments: {} };
+        setCompute(emptyCompute as typeof defaultComputeConfig);
+        setJsonInput(JSON.stringify(emptyCompute, null, 2));
+        setJsonError("");
+        setComputeInstanceKey((previousKey) => previousKey + 1);
+    }, []);
 
     const mockJob = useMemo(() => {
         return {
@@ -205,6 +222,10 @@ function App() {
             const parsed = JSON.parse(jsonInput);
             setCompute(parsed);
             setJsonError("");
+            // ComputeForm derives its form data once, in its constructor, so a new
+            // `compute` prop alone is invisible to it — loading JSON did nothing to
+            // the form without this remount.
+            setComputeInstanceKey((previousKey) => previousKey + 1);
         } catch (e: any) {
             setJsonError(e.message);
         }
@@ -256,6 +277,20 @@ function App() {
                             }
                             label="Editable"
                         />
+                        {/* Progressive validation: an untouched form stays quiet until
+                            something downstream (submit, preflight) demands the full picture. */}
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={showAllErrors}
+                                    onChange={(e) => setShowAllErrors(e.target.checked)}
+                                />
+                            }
+                            label="Show all errors"
+                        />
+                        <Button size="small" onClick={loadEmptyCompute}>
+                            Start empty
+                        </Button>
                     </Stack>
                 </Stack>
 
@@ -264,6 +299,7 @@ function App() {
                     {/* Left Pane: Interactive Form */}
                     <Box sx={{ flexGrow: 1, p: 3, maxWidth: "65%", overflowY: "auto" }}>
                         <Compute
+                            key={computeInstanceKey}
                             compute={compute}
                             user={mockUser}
                             account={mockAccount}
@@ -275,6 +311,7 @@ function App() {
                             accountUsers={mockAccountUsers}
                             isAccountUsersLoading={false}
                             showHeader
+                            showAllErrors={showAllErrors}
                         />
                     </Box>
 
diff --git a/src/utils/touchedFields.ts b/src/utils/touchedFields.ts
new file mode 100644
index 0000000..ba2686d
--- /dev/null
+++ b/src/utils/touchedFields.ts
@@ -0,0 +1,60 @@
+/**
+ * Progressive validation state for the compute form.
+ *
+ * The form validates live, which used to mean a brand-new job opened on a wall
+ * of "The field is required" — an error message about something the reader has
+ * not had a chance to do yet. These helpers narrow that to fields the reader has
+ * actually interacted with, while still allowing every error to be revealed at
+ * once when something downstream (submit preflight) needs the full picture.
+ */
+
+/** RJSF prefixes generated field ids with this; `root_nodes` → `nodes`. */
+const RJSF_FIELD_ID_PREFIX = "root_";
+
+/**
+ * Maps an RJSF field id to the key used in form data and in the validation
+ * error object. The compute form flattens its data, so a nested property
+ * arrives as a single dotted key (`root_cluster.fqdn` → `cluster.fqdn`).
+ *
+ * Returns null for ids that are not field ids (the form root itself, or an
+ * absent id) — callers treat that as "nothing became touched".
+ */
+export function fieldNameFromFieldId(fieldId?: string | null): string | null {
+    if (!fieldId || !fieldId.startsWith(RJSF_FIELD_ID_PREFIX)) return null;
+
+    return fieldId.slice(RJSF_FIELD_ID_PREFIX.length) || null;
+}
+
+/**
+ * Returns the touched set including `fieldId`. The same set instance is
+ * returned when nothing changed, so callers can skip a re-render.
+ */
+export function withTouchedField(
+    touchedFields: ReadonlySet<string>,
+    fieldId?: string | null,
+): ReadonlySet<string> {
+    const fieldName = fieldNameFromFieldId(fieldId);
+
+    if (!fieldName || touchedFields.has(fieldName)) return touchedFields;
+
+    return new Set(touchedFields).add(fieldName);
+}
+
+export interface FieldErrorVisibilityOptions {
+    /** Form-data key the error belongs to, e.g. "nodes" or "cluster.fqdn". */
+    fieldName?: string | null;
+    touchedFields: ReadonlySet<string>;
+    /** Set once the whole form must own up — submit, preflight, an explicit check. */
+    showAllErrors: boolean;
+}
+
+export function shouldShowFieldError({
+    fieldName,
+    touchedFields,
+    showAllErrors,
+}: FieldErrorVisibilityOptions): boolean {
+    if (showAllErrors) return true;
+    if (!fieldName) return false;
+
+    return touchedFields.has(fieldName);
+}
diff --git a/tests/touchedFields.tests.ts b/tests/touchedFields.tests.ts
new file mode 100644
index 0000000..96b7cb0
--- /dev/null
+++ b/tests/touchedFields.tests.ts
@@ -0,0 +1,89 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import {
+    fieldNameFromFieldId,
+    shouldShowFieldError,
+    withTouchedField,
+} from "../src/utils/touchedFields";
+
+describe("fieldNameFromFieldId", () => {
+    it("strips RJSF's root prefix", () => {
+        assert.equal(fieldNameFromFieldId("root_nodes"), "nodes");
+    });
+
+    it("keeps dotted keys intact, since compute form data is flattened", () => {
+        assert.equal(fieldNameFromFieldId("root_cluster.fqdn"), "cluster.fqdn");
+    });
+
+    it("returns null for the form root, an unprefixed id, or no id at all", () => {
+        assert.equal(fieldNameFromFieldId("root_"), null);
+        assert.equal(fieldNameFromFieldId("nodes"), null);
+        assert.equal(fieldNameFromFieldId(undefined), null);
+        assert.equal(fieldNameFromFieldId(null), null);
+    });
+});
+
+describe("withTouchedField", () => {
+    it("adds the field a change came from", () => {
+        const touched = withTouchedField(new Set<string>(), "root_ppn");
+        assert.deepEqual([...touched], ["ppn"]);
+    });
+
+    it("accumulates across changes", () => {
+        let touched: ReadonlySet<string> = new Set<string>();
+        touched = withTouchedField(touched, "root_nodes");
+        touched = withTouchedField(touched, "root_cluster.fqdn");
+        assert.deepEqual([...touched].sort(), ["cluster.fqdn", "nodes"]);
+    });
+
+    it("returns the same set when nothing new was touched, so callers can skip work", () => {
+        const touched = new Set(["nodes"]);
+        assert.equal(withTouchedField(touched, "root_nodes"), touched);
+        assert.equal(withTouchedField(touched, undefined), touched);
+    });
+
+    it("does not mutate the set it was given", () => {
+        const touched = new Set(["nodes"]);
+        withTouchedField(touched, "root_ppn");
+        assert.deepEqual([...touched], ["nodes"]);
+    });
+});
+
+describe("shouldShowFieldError", () => {
+    const touchedFields = new Set(["nodes"]);
+
+    it("hides errors for fields the reader has not been to", () => {
+        // The point of the whole module: a new job must not open on a wall of
+        // "The field is required".
+        assert.equal(
+            shouldShowFieldError({ fieldName: "ppn", touchedFields, showAllErrors: false }),
+            false,
+        );
+    });
+
+    it("shows errors once the field has been touched", () => {
+        assert.equal(
+            shouldShowFieldError({ fieldName: "nodes", touchedFields, showAllErrors: false }),
+            true,
+        );
+    });
+
+    it("shows everything when the whole form has to answer for itself", () => {
+        assert.equal(
+            shouldShowFieldError({ fieldName: "ppn", touchedFields, showAllErrors: true }),
+            true,
+        );
+        assert.equal(
+            shouldShowFieldError({ fieldName: null, touchedFields, showAllErrors: true }),
+            true,
+        );
+    });
+
+    it("stays quiet for errors it cannot attribute to a field", () => {
+        assert.equal(
+            shouldShowFieldError({ fieldName: undefined, touchedFields, showAllErrors: false }),
+            false,
+        );
+    });
+});

From b60568bbef2920bcd4d7aeec59cc75cd2a8fa044 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 16 Aug 2026 20:28:31 +0000
Subject: [PATCH 2/4] build: regenerate dist for progressive compute validation

dist/ is tracked in this repo and the published package ships it ("files":
["/dist", "/src"]). There is no prepublishOnly build here, so a stale dist
is what consumers would get - and dist/utils/touchedFields.js was missing
entirely, which ComputeForm.js imports.

The husky pre-commit hook does this automatically (npm run transpile &&
git add dist/), but only once hooks are installed; this repo has no
'prepare: husky install' script, so a fresh clone commits without it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
---
 dist/components/Compute.d.ts     |  1 +
 dist/components/Compute.js       |  6 +++--
 dist/components/ComputeForm.d.ts | 16 ++++++++++++-
 dist/components/ComputeForm.js   | 33 +++++++++++++++++++++----
 dist/utils/touchedFields.d.ts    | 31 ++++++++++++++++++++++++
 dist/utils/touchedFields.js      | 41 ++++++++++++++++++++++++++++++++
 6 files changed, 121 insertions(+), 7 deletions(-)
 create mode 100644 dist/utils/touchedFields.d.ts
 create mode 100644 dist/utils/touchedFields.js

diff --git a/dist/components/Compute.d.ts b/dist/components/Compute.d.ts
index 4386aca..0b195c4 100644
--- a/dist/components/Compute.d.ts
+++ b/dist/components/Compute.d.ts
@@ -28,6 +28,7 @@ declare namespace Compute {
         let showStatusTrack: PropTypes.Requireable<boolean>;
         let showAdvancedOptions: PropTypes.Requireable<boolean>;
         let accountUsers: PropTypes.Requireable<any[]>;
+        let showAllErrors: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
         let editable_1: boolean;
diff --git a/dist/components/Compute.js b/dist/components/Compute.js
index 6b37021..dbc9d43 100644
--- a/dist/components/Compute.js
+++ b/dist/components/Compute.js
@@ -65,8 +65,8 @@ class Compute extends React.Component {
         return Boolean(showStatusTrack && job.statusTrack && job.statusTrack.length);
     }
     render() {
-        const { className, showHeader, isLoading, adjustable, editable, showComputeForm, compute, user, account, clusters, onUpdate, job, showAdvancedOptions, accountUsers, isAccountUsersLoading, } = this.props;
-        return (_jsxs("div", { className: setClass(className, "wizard-step", "compute-step"), children: [showHeader ? (_jsxs(EntityHeaderContainer, { children: [_jsx(EntityHeader, { name: "Compute", subtitle: "Runtime configuration parameters", icon: "pages.compute", isLoading: isLoading, editable: false, adjustable: true, isDescriptionEditorHidden: true }), adjustable || editable ? (_jsx(AutoSetActionContainer, { children: _jsx(Dropdown, { className: "pull-right", actions: this.getDropdownAction(), children: _jsx(DropdownButton, { children: _jsx(IconByName, { name: "shapes.dots.vertical" }) }) }) })) : null] })) : null, showComputeForm && (_jsx(ComputeForm, { editable: editable, compute: compute, user: user, account: account, clusters: clusters, onUpdate: onUpdate, appName: job.workflow.usedApplicationNames[0], showAdvancedOptions: showAdvancedOptions, accountUsers: accountUsers, isAccountUsersLoading: isAccountUsersLoading })), this.showStatusTrack && (_jsx(Box, { p: 2, children: _jsx(StatusTrackTable, { entity: job }) }))] }));
+        const { className, showHeader, isLoading, adjustable, editable, showComputeForm, compute, user, account, clusters, onUpdate, job, showAdvancedOptions, accountUsers, isAccountUsersLoading, showAllErrors, } = this.props;
+        return (_jsxs("div", { className: setClass(className, "wizard-step", "compute-step"), children: [showHeader ? (_jsxs(EntityHeaderContainer, { children: [_jsx(EntityHeader, { name: "Compute", subtitle: "Runtime configuration parameters", icon: "pages.compute", isLoading: isLoading, editable: false, adjustable: true, isDescriptionEditorHidden: true }), adjustable || editable ? (_jsx(AutoSetActionContainer, { children: _jsx(Dropdown, { className: "pull-right", actions: this.getDropdownAction(), children: _jsx(DropdownButton, { children: _jsx(IconByName, { name: "shapes.dots.vertical" }) }) }) })) : null] })) : null, showComputeForm && (_jsx(ComputeForm, { editable: editable, compute: compute, user: user, account: account, clusters: clusters, onUpdate: onUpdate, appName: job.workflow.usedApplicationNames[0], showAdvancedOptions: showAdvancedOptions, accountUsers: accountUsers, isAccountUsersLoading: isAccountUsersLoading, showAllErrors: showAllErrors })), this.showStatusTrack && (_jsx(Box, { p: 2, children: _jsx(StatusTrackTable, { entity: job }) }))] }));
     }
 }
 Compute.propTypes = {
@@ -81,6 +81,8 @@ Compute.propTypes = {
     showStatusTrack: PropTypes.bool,
     showAdvancedOptions: PropTypes.bool,
     accountUsers: PropTypes.array,
+    /** Reveal every validation error, not just those for fields already touched. */
+    showAllErrors: PropTypes.bool,
 };
 Compute.defaultProps = {
     editable: true,
diff --git a/dist/components/ComputeForm.d.ts b/dist/components/ComputeForm.d.ts
index bae6671..82689cc 100644
--- a/dist/components/ComputeForm.d.ts
+++ b/dist/components/ComputeForm.d.ts
@@ -27,9 +27,18 @@ interface ComputeFormProps {
     onUpdate: (s: string) => void;
     appName?: string;
     pathForClusters?: string;
+    /**
+     * Reveals every validation error at once, including for fields the reader
+     * has not touched. Off by default: a form the reader has not filled in yet
+     * should not open by listing everything wrong with it. Turn it on when the
+     * whole form has to answer for itself — on submit, or from a preflight check.
+     */
+    showAllErrors?: boolean;
 }
 interface ComputeFormState {
     formData: any;
+    /** Form-data keys the reader has edited; see `utils/touchedFields`. */
+    touchedFields: ReadonlySet<string>;
 }
 export declare class ComputeForm extends React.Component<ComputeFormProps, ComputeFormState> {
     computeUiSchema: UISchema;
@@ -37,9 +46,14 @@ export declare class ComputeForm extends React.Component<ComputeFormProps, Compu
     validator: any;
     getErrorMessage: any;
     constructor(props: ComputeFormProps);
+    /**
+     * `fieldId` is RJSF's id for the field that changed. It is what makes
+     * progressive validation possible: errors stay hidden until the reader has
+     * been to the field in question.
+     */
     handleFormUpdate({ formData }: {
         formData: Record<string, any>;
-    }): void;
+    }, fieldId?: string): void;
     onNotifyUpdate(notify: Record<string, any>): void;
     getURLForChargesPerJodID(jid: string): any;
     getNode: () => ClusterNode | undefined;
diff --git a/dist/components/ComputeForm.js b/dist/components/ComputeForm.js
index 83bbe81..24241d5 100644
--- a/dist/components/ComputeForm.js
+++ b/dist/components/ComputeForm.js
@@ -27,6 +27,7 @@ import isObject from "lodash/isObject";
 import omitBy from "lodash/omitBy";
 import React from "react";
 import { getComputeSchema, getComputeValidator } from "../validators";
+import { shouldShowFieldError, withTouchedField } from "../utils/touchedFields";
 import Notify from "./Notify";
 import QueuesTable from "./QueuesTable";
 import { LoadingIndicator } from "@mat3ra/cove/dist/mui-composed/components/loading/LoadingIndicator";
@@ -213,10 +214,19 @@ export class ComputeForm extends React.Component {
             if (this.validator({ ...data, node })) {
                 return {};
             }
+            const { showAllErrors = false } = this.props;
+            const { touchedFields } = this.state;
             this.validator.errors.forEach((obj) => {
                 var _a, _b;
                 const { params } = obj;
                 const { name, message } = this.getErrorMessage(obj);
+                const fieldName = params.missingProperty || name;
+                // The form validates live, so without this every required field
+                // reports itself on first paint — before the reader has had a chance
+                // to fill anything in.
+                if (!shouldShowFieldError({ fieldName, touchedFields, showAllErrors })) {
+                    return;
+                }
                 if (params.missingProperty) {
                     (_a = errors[params.missingProperty]) === null || _a === void 0 ? void 0 : _a.addError("The field is required");
                 }
@@ -232,6 +242,7 @@ export class ComputeForm extends React.Component {
         });
         this.state = {
             formData,
+            touchedFields: new Set(),
         };
         this.handleFormUpdate = this.handleFormUpdate.bind(this);
         this.onNotifyUpdate = this.onNotifyUpdate.bind(this);
@@ -241,8 +252,16 @@ export class ComputeForm extends React.Component {
         this.getErrorMessage = getErrorMessage;
         this.computeUiSchema = resolveComputeUISchema((_c = props.appName) !== null && _c !== void 0 ? _c : "");
     }
-    handleFormUpdate({ formData }) {
-        this.setState({ formData }, () => {
+    /**
+     * `fieldId` is RJSF's id for the field that changed. It is what makes
+     * progressive validation possible: errors stay hidden until the reader has
+     * been to the field in question.
+     */
+    handleFormUpdate({ formData }, fieldId) {
+        this.setState((previousState) => ({
+            formData,
+            touchedFields: withTouchedField(previousState.touchedFields, fieldId),
+        }), () => {
             this.updateForm();
         });
     }
@@ -300,7 +319,7 @@ export class ComputeForm extends React.Component {
     }
     render() {
         var _a;
-        const { editable, showAdvancedOptions, user, accountUsers, isAccountUsersLoading, compute, gridParams, pathForClusters, } = this.props;
+        const { editable, showAdvancedOptions, user, accountUsers, isAccountUsersLoading, compute, gridParams, pathForClusters, showAllErrors = false, } = this.props;
         const { formData } = this.state;
         const disableFields = !editable;
         const costUrl = this.getURLForChargesPerJodID((_a = compute === null || compute === void 0 ? void 0 : compute.cluster) === null || _a === void 0 ? void 0 : _a.jid);
@@ -325,6 +344,12 @@ export class ComputeForm extends React.Component {
             CLUSTER_STATUS_DOC_WIDGET: disableFields ? "hidden" : LinkWidget,
             QUEUES_OPTIONS: this.queueOptions(),
         });
-        return (_jsx(Box, { sx: { display: "flex" }, id: "compute-step-form", children: _jsx(Box, { sx: { flexGrow: 1 }, children: _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.left) || DEFAULT_GRID_PARAMS.left), children: _jsx(RJSForm, { schema: finalSchema, uiSchema: uiSchema, validator: rjsfValidator, formData: formData, onChange: (event) => this.handleFormUpdate(event), showErrorList: false, customValidate: this.customValidate, liveValidate: true, widgets: WIDGETS, templates: TEMPLATES }) }), _jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.right) || DEFAULT_GRID_PARAMS.right), children: isAccountUsersLoading ? (_jsx(LoadingIndicator, { size: "small", included: true }, "loading-indicator")) : (_jsx(Notify, { user: user, accountUsers: accountUsers, editable: editable, onUpdate: this.onNotifyUpdate, notify: formData.notify, email: formData.email })) })] }) }) }));
+        return (_jsx(Box, { sx: { display: "flex" }, id: "compute-step-form", children: _jsx(Box, { sx: { flexGrow: 1 }, children: _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.left) || DEFAULT_GRID_PARAMS.left), children: _jsx(RJSForm
+                            // RJSF only re-validates when its schema or form data
+                            // change, so flipping `showAllErrors` alone would leave
+                            // the previous validation result on screen. Remounting
+                            // forces a fresh pass; the toggle happens on submit, not
+                            // while typing, so the cost is not felt.
+                            , { schema: finalSchema, uiSchema: uiSchema, validator: rjsfValidator, formData: formData, onChange: (event, fieldId) => this.handleFormUpdate(event, fieldId), showErrorList: false, customValidate: this.customValidate, liveValidate: true, widgets: WIDGETS, templates: TEMPLATES }, showAllErrors ? "show-all-errors" : "progressive") }), _jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.right) || DEFAULT_GRID_PARAMS.right), children: isAccountUsersLoading ? (_jsx(LoadingIndicator, { size: "small", included: true }, "loading-indicator")) : (_jsx(Notify, { user: user, accountUsers: accountUsers, editable: editable, onUpdate: this.onNotifyUpdate, notify: formData.notify, email: formData.email })) })] }) }) }));
     }
 }
diff --git a/dist/utils/touchedFields.d.ts b/dist/utils/touchedFields.d.ts
new file mode 100644
index 0000000..0976156
--- /dev/null
+++ b/dist/utils/touchedFields.d.ts
@@ -0,0 +1,31 @@
+/**
+ * Progressive validation state for the compute form.
+ *
+ * The form validates live, which used to mean a brand-new job opened on a wall
+ * of "The field is required" — an error message about something the reader has
+ * not had a chance to do yet. These helpers narrow that to fields the reader has
+ * actually interacted with, while still allowing every error to be revealed at
+ * once when something downstream (submit preflight) needs the full picture.
+ */
+/**
+ * Maps an RJSF field id to the key used in form data and in the validation
+ * error object. The compute form flattens its data, so a nested property
+ * arrives as a single dotted key (`root_cluster.fqdn` → `cluster.fqdn`).
+ *
+ * Returns null for ids that are not field ids (the form root itself, or an
+ * absent id) — callers treat that as "nothing became touched".
+ */
+export declare function fieldNameFromFieldId(fieldId?: string | null): string | null;
+/**
+ * Returns the touched set including `fieldId`. The same set instance is
+ * returned when nothing changed, so callers can skip a re-render.
+ */
+export declare function withTouchedField(touchedFields: ReadonlySet<string>, fieldId?: string | null): ReadonlySet<string>;
+export interface FieldErrorVisibilityOptions {
+    /** Form-data key the error belongs to, e.g. "nodes" or "cluster.fqdn". */
+    fieldName?: string | null;
+    touchedFields: ReadonlySet<string>;
+    /** Set once the whole form must own up — submit, preflight, an explicit check. */
+    showAllErrors: boolean;
+}
+export declare function shouldShowFieldError({ fieldName, touchedFields, showAllErrors, }: FieldErrorVisibilityOptions): boolean;
diff --git a/dist/utils/touchedFields.js b/dist/utils/touchedFields.js
new file mode 100644
index 0000000..05dacdf
--- /dev/null
+++ b/dist/utils/touchedFields.js
@@ -0,0 +1,41 @@
+/**
+ * Progressive validation state for the compute form.
+ *
+ * The form validates live, which used to mean a brand-new job opened on a wall
+ * of "The field is required" — an error message about something the reader has
+ * not had a chance to do yet. These helpers narrow that to fields the reader has
+ * actually interacted with, while still allowing every error to be revealed at
+ * once when something downstream (submit preflight) needs the full picture.
+ */
+/** RJSF prefixes generated field ids with this; `root_nodes` → `nodes`. */
+const RJSF_FIELD_ID_PREFIX = "root_";
+/**
+ * Maps an RJSF field id to the key used in form data and in the validation
+ * error object. The compute form flattens its data, so a nested property
+ * arrives as a single dotted key (`root_cluster.fqdn` → `cluster.fqdn`).
+ *
+ * Returns null for ids that are not field ids (the form root itself, or an
+ * absent id) — callers treat that as "nothing became touched".
+ */
+export function fieldNameFromFieldId(fieldId) {
+    if (!fieldId || !fieldId.startsWith(RJSF_FIELD_ID_PREFIX))
+        return null;
+    return fieldId.slice(RJSF_FIELD_ID_PREFIX.length) || null;
+}
+/**
+ * Returns the touched set including `fieldId`. The same set instance is
+ * returned when nothing changed, so callers can skip a re-render.
+ */
+export function withTouchedField(touchedFields, fieldId) {
+    const fieldName = fieldNameFromFieldId(fieldId);
+    if (!fieldName || touchedFields.has(fieldName))
+        return touchedFields;
+    return new Set(touchedFields).add(fieldName);
+}
+export function shouldShowFieldError({ fieldName, touchedFields, showAllErrors, }) {
+    if (showAllErrors)
+        return true;
+    if (!fieldName)
+        return false;
+    return touchedFields.has(fieldName);
+}

From f95f155d814639a757a917906b54af97b6cb70f2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 16 Aug 2026 21:44:43 +0000
Subject: [PATCH 3/4] chore: arm the pre-commit hook so dist stays in sync

The hook that regenerates dist has never run: husky was not a dependency
and no prepare script installed it, so a fresh clone had .husky/pre-commit
sitting inert. That is why four packages landed src changes with a stale
or entirely missing dist - including new modules whose emitted code
imported files that were never built.

Adds husky + 'prepare: husky install' (matching cove, the one repo where
this works), and drops 'npx lint-staged' from the hook: lint-staged is
neither a dependency nor configured here, so arming the hook with that
line would have failed and blocked every commit. Linting is enforced in
CI regardless.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
---
 .husky/pre-commit | 5 ++++-
 package.json      | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 76031ec..5325f24 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,6 +1,9 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+# dist/ is tracked and shipped ("files": ["/dist", "/src"]), so a src change
+# committed without it leaves consumers on the old code - and a brand-new module
+# is worse than stale, since its dist file is absent entirely and the emitted
+# code imports something that does not exist.
 npm run transpile
 git add dist/
diff --git a/package.json b/package.json
index c23dc74..2412cc2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "build": "tsc && npm run copy-css",
         "build:standalone": "vite build",
         "copy-css": "mkdir -p dist/stylesheets && cp src/stylesheets/* dist/stylesheets/ 2>/dev/null || true",
+        "prepare": "husky install",
         "transpile": "tsc",
         "test": "node --import tsx --test tests/*.tests.ts",
         "lint": "eslint src tests && prettier --check src tests"
@@ -57,6 +58,7 @@
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.2",
         "@vitejs/plugin-react": "^4.3.4",
+        "husky": "^7.0.4",
         "lodash": "^4.17.4",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",

From 51195bc46e0b56e9547c38bc54fb37e6b3630d2d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 16 Aug 2026 23:57:38 +0000
Subject: [PATCH 4/4] feat: cluster cards, presets and a live estimate for
 compute (phase 2.3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The compute step asked for a cluster, a queue, nodes, cores and a
walltime as five schema fields — a dropdown listing cluster names and
nothing to choose between them on, four required fields empty on
arrival, and no statement anywhere of what the answers add up to. A
reader could configure 4 × 32 × 12 h without being told that is 1536
core-hours, three times the quota, until the run failed.

Opt-in via `useComputeCards`, which moves four fields out of the schema
form and into their own surface above it:

- ClusterCards — each cluster as a card carrying price, max walltime and
  typical queue wait, so the choice is a comparison rather than a guess.
- ComputeResources — presets (Debug / Standard / Production) clamped to
  the cluster's published limits, so the button meant to avoid an
  invalid configuration cannot produce one; bounded steppers for nodes
  and cores; walltime as the HH:MM:SS the scheduler takes. Typed values
  past a limit are allowed and flagged inline, on the same touched-field
  rule as the rest of the form.
- ComputeEstimatePanel — core-hours, cost and queue wait as metric tiles
  over a quota meter. Each degrades on its own: core-hours need only the
  job, cost needs a published price, the meter needs an injected
  allowance, and a tile with nothing behind it shows an em dash, never a
  zero.

utils/computeEstimate.ts is the canonical home for the arithmetic —
job-designer currently carries a copy for its context strip and submit
preflight, and should import this once ive publishes.

Writes go through the same handleFormUpdate path as a keystroke in the
schema form, so touched-field bookkeeping and the validate-then-onUpdate
gate are unchanged. The hidden fields stay in the schema and keep
validating. Espresso's advanced options are untouched; the cluster group
left holding only two links is retitled Documentation rather than
pointing at a picker that has moved.

Verified in the demo: presets fill the fields and the estimate follows
synchronously; Production on a 2-node cluster applies as 2 × 16 × 6 h;
the nodes stepper disables at the cluster's limit while a typed 24 h
walltime reports "Over the 6 h queue limit" and the meter shows "over by
268 core·h"; toggling the surface off brings all four schema fields
back. 44 unit tests pass.

Note: requires a @mat3ra/cove release carrying SelectableCard,
MetricTile, SegmentedMeter and NumericStepperInput.

Refs SOF-8023.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
---
 dist/components/ClusterCards.d.ts         |  22 +++
 dist/components/ClusterCards.js           |  45 +++++
 dist/components/Compute.d.ts              |   4 +
 dist/components/Compute.js                |  12 +-
 dist/components/ComputeEstimatePanel.d.ts |  21 +++
 dist/components/ComputeEstimatePanel.js   |  64 +++++++
 dist/components/ComputeForm.d.ts          |  38 +++++
 dist/components/ComputeForm.js            |  78 ++++++++-
 dist/components/ComputeResources.d.ts     |  29 ++++
 dist/components/ComputeResources.js       |  78 +++++++++
 dist/exports.d.ts                         |   7 +
 dist/exports.js                           |   5 +
 dist/schemas/ui/compute_base.json         |   7 +-
 dist/utils/computeEstimate.d.ts           |  80 +++++++++
 dist/utils/computeEstimate.js             | 101 +++++++++++
 dist/utils/computePresets.d.ts            |  39 +++++
 dist/utils/computePresets.js              |  72 ++++++++
 src/components/ClusterCards.tsx           | 115 +++++++++++++
 src/components/Compute.jsx                |  16 ++
 src/components/ComputeEstimatePanel.tsx   | 150 +++++++++++++++++
 src/components/ComputeForm.tsx            | 146 +++++++++++++++-
 src/components/ComputeResources.tsx       | 194 ++++++++++++++++++++++
 src/exports.ts                            |  26 +++
 src/schemas/ui/compute_base.json          |   7 +-
 src/standalone/index.tsx                  |  67 +++++++-
 src/utils/computeEstimate.ts              | 167 +++++++++++++++++++
 src/utils/computePresets.ts               | 115 +++++++++++++
 tests/computeEstimate.tests.ts            | 103 ++++++++++++
 tests/computePresets.tests.ts             |  95 +++++++++++
 29 files changed, 1877 insertions(+), 26 deletions(-)
 create mode 100644 dist/components/ClusterCards.d.ts
 create mode 100644 dist/components/ClusterCards.js
 create mode 100644 dist/components/ComputeEstimatePanel.d.ts
 create mode 100644 dist/components/ComputeEstimatePanel.js
 create mode 100644 dist/components/ComputeResources.d.ts
 create mode 100644 dist/components/ComputeResources.js
 create mode 100644 dist/utils/computeEstimate.d.ts
 create mode 100644 dist/utils/computeEstimate.js
 create mode 100644 dist/utils/computePresets.d.ts
 create mode 100644 dist/utils/computePresets.js
 create mode 100644 src/components/ClusterCards.tsx
 create mode 100644 src/components/ComputeEstimatePanel.tsx
 create mode 100644 src/components/ComputeResources.tsx
 create mode 100644 src/utils/computeEstimate.ts
 create mode 100644 src/utils/computePresets.ts
 create mode 100644 tests/computeEstimate.tests.ts
 create mode 100644 tests/computePresets.tests.ts

diff --git a/dist/components/ClusterCards.d.ts b/dist/components/ClusterCards.d.ts
new file mode 100644
index 0000000..6a443a7
--- /dev/null
+++ b/dist/components/ClusterCards.d.ts
@@ -0,0 +1,22 @@
+import React from "react";
+import type { ClusterMetadata } from "../utils/computeEstimate";
+export interface ClusterCardsProps {
+    /** The host's cluster list, unchanged — `hostname`, `displayName`, `queues`. */
+    clusters: Array<Record<string, any>>;
+    /** Pricing, limits and queue waits, keyed by fqdn. Optional. */
+    clusterMetadata?: ClusterMetadata[];
+    selectedHostname?: string;
+    onSelect: (hostname: string) => void;
+    disabled?: boolean;
+    id?: string;
+}
+/**
+ * The cluster choice, as cards.
+ *
+ * It used to be a `select`: one line of text per cluster, and everything a
+ * reader would actually choose on — what it costs, how long the queue is, how
+ * big a job it will take — either absent or a click away in a popover table.
+ * The card carries those facts next to the name, which is the only arrangement
+ * that makes the choice a comparison rather than a guess.
+ */
+export default function ClusterCards({ clusters, clusterMetadata, selectedHostname, onSelect, disabled, id, }: ClusterCardsProps): React.JSX.Element;
diff --git a/dist/components/ClusterCards.js b/dist/components/ClusterCards.js
new file mode 100644
index 0000000..5726f09
--- /dev/null
+++ b/dist/components/ClusterCards.js
@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MetricTile from "@mat3ra/cove/dist/mui/components/metric/MetricTile";
+import SelectableCard, { SelectableCardGroup, } from "@mat3ra/cove/dist/mui/components/selectable-card/SelectableCard";
+import StatusChip from "@mat3ra/cove/dist/mui/components/status/StatusChip";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { formatCost } from "../utils/computeEstimate";
+/** How busy a queue is, as words rather than a bare number. */
+function queueBadge(metadata) {
+    const wait = metadata === null || metadata === void 0 ? void 0 : metadata.queueWaitMinutes;
+    if (wait === undefined)
+        return null;
+    const tone = wait <= 10 ? "success" : wait <= 30 ? "warning" : "neutral";
+    return (_jsx(StatusChip, { tone: tone, iconName: wait <= 10 ? "shapes.check" : "shapes.loop", label: `~${wait} min`, title: "Typical wait before the job starts" }));
+}
+function describeCapacity(cluster, metadata) {
+    var _a;
+    const queues = (_a = cluster.queues) !== null && _a !== void 0 ? _a : [];
+    const queueNames = queues.map((queue) => queue.name).join(", ");
+    const limits = metadata === null || metadata === void 0 ? void 0 : metadata.limits;
+    const capacity = (limits === null || limits === void 0 ? void 0 : limits.maxNodes) && (limits === null || limits === void 0 ? void 0 : limits.maxPpn)
+        ? `up to ${limits.maxNodes} nodes × ${limits.maxPpn} cores`
+        : undefined;
+    return [queueNames && `queue ${queueNames}`, capacity].filter(Boolean).join(" · ");
+}
+/**
+ * The cluster choice, as cards.
+ *
+ * It used to be a `select`: one line of text per cluster, and everything a
+ * reader would actually choose on — what it costs, how long the queue is, how
+ * big a job it will take — either absent or a click away in a popover table.
+ * The card carries those facts next to the name, which is the only arrangement
+ * that makes the choice a comparison rather than a guess.
+ */
+export default function ClusterCards({ clusters, clusterMetadata = [], selectedHostname, onSelect, disabled = false, id, }) {
+    if (!clusters.length) {
+        return (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "No clusters are available on this account." }));
+    }
+    return (_jsx(SelectableCardGroup, { label: "Cluster", id: id, children: clusters.map((cluster) => {
+            var _a, _b;
+            const metadata = clusterMetadata.find((entry) => entry.fqdn === cluster.hostname);
+            const price = formatCost(metadata === null || metadata === void 0 ? void 0 : metadata.pricePerCoreHour, metadata === null || metadata === void 0 ? void 0 : metadata.currency);
+            return (_jsx(SelectableCard, { id: `cluster-card-${cluster.hostname}`, title: (_a = cluster.displayName) !== null && _a !== void 0 ? _a : cluster.hostname, subtitle: describeCapacity(cluster, metadata), selected: cluster.hostname === selectedHostname, disabled: disabled, onSelect: () => onSelect(cluster.hostname), badge: queueBadge(metadata), children: _jsxs(Stack, { direction: "row", spacing: 3, children: [_jsx(MetricTile, { size: "small", label: "Price", value: price, unit: price ? "/ core·h" : undefined, caption: price ? undefined : "not published" }), _jsx(MetricTile, { size: "small", label: "Max walltime", value: (_b = metadata === null || metadata === void 0 ? void 0 : metadata.limits) === null || _b === void 0 ? void 0 : _b.maxWalltimeHours, unit: "h" })] }) }, cluster.hostname));
+        }) }));
+}
diff --git a/dist/components/Compute.d.ts b/dist/components/Compute.d.ts
index 0b195c4..ad9447e 100644
--- a/dist/components/Compute.d.ts
+++ b/dist/components/Compute.d.ts
@@ -29,6 +29,10 @@ declare namespace Compute {
         let showAdvancedOptions: PropTypes.Requireable<boolean>;
         let accountUsers: PropTypes.Requireable<any[]>;
         let showAllErrors: PropTypes.Requireable<boolean>;
+        let useComputeCards: PropTypes.Requireable<boolean>;
+        let clusterMetadata: PropTypes.Requireable<any[]>;
+        let computeQuota: PropTypes.Requireable<object>;
+        let runs: PropTypes.Requireable<number>;
     }
     namespace defaultProps {
         let editable_1: boolean;
diff --git a/dist/components/Compute.js b/dist/components/Compute.js
index dbc9d43..7a5089f 100644
--- a/dist/components/Compute.js
+++ b/dist/components/Compute.js
@@ -65,8 +65,8 @@ class Compute extends React.Component {
         return Boolean(showStatusTrack && job.statusTrack && job.statusTrack.length);
     }
     render() {
-        const { className, showHeader, isLoading, adjustable, editable, showComputeForm, compute, user, account, clusters, onUpdate, job, showAdvancedOptions, accountUsers, isAccountUsersLoading, showAllErrors, } = this.props;
-        return (_jsxs("div", { className: setClass(className, "wizard-step", "compute-step"), children: [showHeader ? (_jsxs(EntityHeaderContainer, { children: [_jsx(EntityHeader, { name: "Compute", subtitle: "Runtime configuration parameters", icon: "pages.compute", isLoading: isLoading, editable: false, adjustable: true, isDescriptionEditorHidden: true }), adjustable || editable ? (_jsx(AutoSetActionContainer, { children: _jsx(Dropdown, { className: "pull-right", actions: this.getDropdownAction(), children: _jsx(DropdownButton, { children: _jsx(IconByName, { name: "shapes.dots.vertical" }) }) }) })) : null] })) : null, showComputeForm && (_jsx(ComputeForm, { editable: editable, compute: compute, user: user, account: account, clusters: clusters, onUpdate: onUpdate, appName: job.workflow.usedApplicationNames[0], showAdvancedOptions: showAdvancedOptions, accountUsers: accountUsers, isAccountUsersLoading: isAccountUsersLoading, showAllErrors: showAllErrors })), this.showStatusTrack && (_jsx(Box, { p: 2, children: _jsx(StatusTrackTable, { entity: job }) }))] }));
+        const { className, showHeader, isLoading, adjustable, editable, showComputeForm, compute, user, account, clusters, onUpdate, job, showAdvancedOptions, accountUsers, isAccountUsersLoading, showAllErrors, useComputeCards, clusterMetadata, computeQuota, runs, } = this.props;
+        return (_jsxs("div", { className: setClass(className, "wizard-step", "compute-step"), children: [showHeader ? (_jsxs(EntityHeaderContainer, { children: [_jsx(EntityHeader, { name: "Compute", subtitle: "Runtime configuration parameters", icon: "pages.compute", isLoading: isLoading, editable: false, adjustable: true, isDescriptionEditorHidden: true }), adjustable || editable ? (_jsx(AutoSetActionContainer, { children: _jsx(Dropdown, { className: "pull-right", actions: this.getDropdownAction(), children: _jsx(DropdownButton, { children: _jsx(IconByName, { name: "shapes.dots.vertical" }) }) }) })) : null] })) : null, showComputeForm && (_jsx(ComputeForm, { editable: editable, compute: compute, user: user, account: account, clusters: clusters, onUpdate: onUpdate, appName: job.workflow.usedApplicationNames[0], showAdvancedOptions: showAdvancedOptions, accountUsers: accountUsers, isAccountUsersLoading: isAccountUsersLoading, showAllErrors: showAllErrors, useComputeCards: useComputeCards, clusterMetadata: clusterMetadata, computeQuota: computeQuota, runs: runs })), this.showStatusTrack && (_jsx(Box, { p: 2, children: _jsx(StatusTrackTable, { entity: job }) }))] }));
     }
 }
 Compute.propTypes = {
@@ -83,6 +83,14 @@ Compute.propTypes = {
     accountUsers: PropTypes.array,
     /** Reveal every validation error, not just those for fields already touched. */
     showAllErrors: PropTypes.bool,
+    /** Render cluster cards, resource steppers and the estimate above the schema form. */
+    useComputeCards: PropTypes.bool,
+    /** Per-cluster pricing, limits and queue waits. Not part of the job document. */
+    clusterMetadata: PropTypes.array,
+    /** Remaining allowance for the paying account, when the host tracks one. */
+    computeQuota: PropTypes.object,
+    /** Multi-material jobs run once per material; the estimate covers all of them. */
+    runs: PropTypes.number,
 };
 Compute.defaultProps = {
     editable: true,
diff --git a/dist/components/ComputeEstimatePanel.d.ts b/dist/components/ComputeEstimatePanel.d.ts
new file mode 100644
index 0000000..4d82186
--- /dev/null
+++ b/dist/components/ComputeEstimatePanel.d.ts
@@ -0,0 +1,21 @@
+import React from "react";
+import type { ClusterMetadata, ComputeConfiguration, ComputeQuota } from "../utils/computeEstimate";
+export interface ComputeEstimatePanelProps {
+    compute?: ComputeConfiguration | null;
+    clusterMetadata?: ClusterMetadata[];
+    quota?: ComputeQuota | null;
+    /** Multi-material jobs run once per material; the estimate is for all of them. */
+    runs?: number;
+    id?: string;
+}
+/**
+ * What this configuration will consume, while it is still being configured.
+ *
+ * The form's fields are inputs to an arithmetic nobody was doing: 4 nodes × 32
+ * cores × 12 hours is 1536 core-hours, which on a 500-hour quota is a
+ * conversation the reader should have before submitting, not after. Every tile
+ * degrades independently — core-hours need only the job, cost needs a published
+ * price, the quota bar needs an injected allowance — and a tile with nothing
+ * behind it shows an em dash rather than a zero.
+ */
+export default function ComputeEstimatePanel({ compute, clusterMetadata, quota, runs, id, }: ComputeEstimatePanelProps): React.JSX.Element;
diff --git a/dist/components/ComputeEstimatePanel.js b/dist/components/ComputeEstimatePanel.js
new file mode 100644
index 0000000..22cdf53
--- /dev/null
+++ b/dist/components/ComputeEstimatePanel.js
@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MetricTile from "@mat3ra/cove/dist/mui/components/metric/MetricTile";
+import SegmentedMeter from "@mat3ra/cove/dist/mui/components/metric/SegmentedMeter";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { estimateComputeUsage, findClusterMetadata, formatCoreHours, formatCost, } from "../utils/computeEstimate";
+/**
+ * What this configuration will consume, while it is still being configured.
+ *
+ * The form's fields are inputs to an arithmetic nobody was doing: 4 nodes × 32
+ * cores × 12 hours is 1536 core-hours, which on a 500-hour quota is a
+ * conversation the reader should have before submitting, not after. Every tile
+ * degrades independently — core-hours need only the job, cost needs a published
+ * price, the quota bar needs an injected allowance — and a tile with nothing
+ * behind it shows an em dash rather than a zero.
+ */
+export default function ComputeEstimatePanel({ compute, clusterMetadata = [], quota, runs = 1, id = "compute-estimate-panel", }) {
+    var _a, _b, _c;
+    const estimate = estimateComputeUsage(compute, clusterMetadata, runs);
+    const cluster = findClusterMetadata(compute, clusterMetadata);
+    const remaining = quota === null || quota === void 0 ? void 0 : quota.remainingCoreHours;
+    const isOverQuota = remaining !== undefined && ((_a = estimate.coreHours) !== null && _a !== void 0 ? _a : 0) > remaining;
+    const usedBefore = (quota === null || quota === void 0 ? void 0 : quota.totalCoreHours) !== undefined && remaining !== undefined
+        ? Math.max(quota.totalCoreHours - remaining, 0)
+        : undefined;
+    return (_jsxs(Paper, { id: id, sx: { p: 2 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Estimate" }), _jsxs(Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, children: [_jsx(MetricTile, { id: "estimate-core-hours", label: "Core-hours", value: estimate.coreHours === undefined
+                            ? undefined
+                            : (_b = formatCoreHours(estimate.coreHours)) === null || _b === void 0 ? void 0 : _b.replace(" core·h", ""), unit: "core\u00B7h", tone: isOverQuota ? "error" : "default", caption: describeDerivation(estimate.nodes, estimate.ppn, estimate.walltimeHours, runs) }), _jsx(MetricTile, { id: "estimate-cost", label: "Cost", value: formatCost(estimate.cost, estimate.currency), caption: (cluster === null || cluster === void 0 ? void 0 : cluster.pricePerCoreHour) === undefined
+                            ? "no price published for this cluster"
+                            : `at ${formatCost(cluster.pricePerCoreHour, cluster.currency)} / core·h` }), _jsx(MetricTile, { id: "estimate-queue-wait", label: "Queue wait", value: (cluster === null || cluster === void 0 ? void 0 : cluster.queueWaitMinutes) === undefined
+                            ? undefined
+                            : `~${cluster.queueWaitMinutes}`, unit: "min", caption: "typical, before the job starts" })] }), remaining !== undefined && (quota === null || quota === void 0 ? void 0 : quota.totalCoreHours) !== undefined ? (_jsx(Stack, { sx: { mt: 2 }, children: _jsx(SegmentedMeter, { id: "estimate-quota-meter", label: "Monthly quota", total: quota.totalCoreHours, caption: describeQuota(estimate.coreHours, remaining), segments: [
+                        ...(usedBefore
+                            ? [
+                                {
+                                    label: "Already used",
+                                    value: usedBefore,
+                                    color: "primary.main",
+                                },
+                            ]
+                            : []),
+                        {
+                            label: "This job",
+                            value: (_c = estimate.coreHours) !== null && _c !== void 0 ? _c : 0,
+                            color: isOverQuota ? "error.main" : "warning.main",
+                            isProjected: true,
+                        },
+                    ] }) })) : null] }));
+}
+function describeDerivation(nodes, ppn, walltimeHours, runs = 1) {
+    if (!nodes || !ppn || walltimeHours === undefined)
+        return "set nodes, cores and a walltime";
+    const base = `${nodes} × ${ppn} × ${Math.round(walltimeHours * 10) / 10} h`;
+    return runs > 1 ? `${base}, ${runs} materials` : base;
+}
+function describeQuota(coreHours, remaining) {
+    if (coreHours === undefined)
+        return `${formatCoreHours(remaining)} left this month`;
+    if (coreHours > remaining) {
+        return `over by ${formatCoreHours(coreHours - remaining)}`;
+    }
+    return `${formatCoreHours(remaining - coreHours)} would remain`;
+}
diff --git a/dist/components/ComputeForm.d.ts b/dist/components/ComputeForm.d.ts
index 82689cc..db88297 100644
--- a/dist/components/ComputeForm.d.ts
+++ b/dist/components/ComputeForm.d.ts
@@ -1,5 +1,6 @@
 import { JSONSchema7 } from "json-schema";
 import React from "react";
+import type { ClusterMetadata, ComputeQuota } from "../utils/computeEstimate";
 import { UISchema } from "../utils/schemas";
 /** Minimal interface for cluster node objects passed from the host application. */
 export interface ClusterNode {
@@ -34,6 +35,21 @@ interface ComputeFormProps {
      * whole form has to answer for itself — on submit, or from a preflight check.
      */
     showAllErrors?: boolean;
+    /**
+     * Renders the cluster choice, the resource fields and the estimate as their
+     * own surface above the schema form, hiding those fields from it.
+     *
+     * Opt-in per host, like job-designer's guided layout: the fields move, so a
+     * host with its own tests or documentation against the schema form should
+     * flip this when it is ready rather than find it flipped for it.
+     */
+    useComputeCards?: boolean;
+    /** Pricing, limits and queue waits per cluster. Only used with `useComputeCards`. */
+    clusterMetadata?: ClusterMetadata[];
+    /** Remaining allowance for the paying account, when the host tracks one. */
+    computeQuota?: ComputeQuota | null;
+    /** Multi-material jobs run once per material; the estimate covers all of them. */
+    runs?: number;
 }
 interface ComputeFormState {
     formData: any;
@@ -59,6 +75,28 @@ export declare class ComputeForm extends React.Component<ComputeFormProps, Compu
     getNode: () => ClusterNode | undefined;
     getClusterQueues(): any;
     customValidate: (data: Record<string, any>, errors: any) => any;
+    /** Limits and pricing for the cluster currently chosen, if the host published any. */
+    get selectedClusterMetadata(): ClusterMetadata | undefined;
+    /**
+     * The compute the cards surface is editing, in the unflattened shape the
+     * estimate and limit checks expect.
+     */
+    get computeFromFormData(): {
+        cluster: {
+            fqdn: any;
+        };
+        nodes: any;
+        ppn: any;
+        timeLimit: any;
+        queue: any;
+    };
+    /**
+     * Writes from the cards surface go through the same path as a keystroke in
+     * the schema form — same touched-field bookkeeping, same validate-then-
+     * `onUpdate` gate — so the two cannot get out of step.
+     */
+    applyComputePatch: (patch: Record<string, any>) => void;
+    onClusterSelect: (hostname: string) => void;
     clusterOptions(): {
         label: any;
         value: any;
diff --git a/dist/components/ComputeForm.js b/dist/components/ComputeForm.js
index 24241d5..f1ef603 100644
--- a/dist/components/ComputeForm.js
+++ b/dist/components/ComputeForm.js
@@ -27,7 +27,11 @@ import isObject from "lodash/isObject";
 import omitBy from "lodash/omitBy";
 import React from "react";
 import { getComputeSchema, getComputeValidator } from "../validators";
+import { findClusterMetadata } from "../utils/computeEstimate";
 import { shouldShowFieldError, withTouchedField } from "../utils/touchedFields";
+import ClusterCards from "./ClusterCards";
+import ComputeEstimatePanel from "./ComputeEstimatePanel";
+import ComputeResources from "./ComputeResources";
 import Notify from "./Notify";
 import QueuesTable from "./QueuesTable";
 import { LoadingIndicator } from "@mat3ra/cove/dist/mui-composed/components/loading/LoadingIndicator";
@@ -98,13 +102,20 @@ const getPropsForGroup = (group, props) => {
     };
 };
 function ObjectFieldTemplateWrapper(props) {
+    var _a, _b;
+    // With the cards surface on, the cluster, queue and resource fields are
+    // rendered above and hidden here — so the group that used to be the cluster
+    // choice is now two documentation links, and calling it "Cluster" would send
+    // the reader looking for a picker that has moved.
+    const useComputeCards = Boolean((_b = (_a = props.registry) === null || _a === void 0 ? void 0 : _a.formContext) === null || _b === void 0 ? void 0 : _b.useComputeCards);
     return (_jsx(_Fragment, { children: GROUPS.map((group, index) => {
             const childProps = getPropsForGroup(group, props);
             if (!childProps.properties.length)
                 return null;
+            const title = useComputeCards && group.title === "Cluster" ? "Documentation" : group.title;
             return (
             // eslint-disable-next-line react/no-array-index-key
-            _jsx(Paper, { sx: { mb: 3, p: 3 }, children: _jsx(CustomObjectFieldTemplate, { ...childProps, title: group.title }) }, `${group.title}-${index}`));
+            _jsx(Paper, { sx: { mb: 3, p: 3 }, children: _jsx(CustomObjectFieldTemplate, { ...childProps, title: title }) }, `${group.title}-${index}`));
         }) }));
 }
 function buildComputeFormJsonSchema(initialSchema, { clusterOptions, queueOptions, costUrl, selectedQueue, clusterStatusUrl }) {
@@ -236,6 +247,31 @@ export class ComputeForm extends React.Component {
             });
             return errors;
         };
+        /**
+         * Writes from the cards surface go through the same path as a keystroke in
+         * the schema form — same touched-field bookkeeping, same validate-then-
+         * `onUpdate` gate — so the two cannot get out of step.
+         */
+        this.applyComputePatch = (patch) => {
+            var _a, _b;
+            const { formData } = this.state;
+            const flatPatch = { ...patch };
+            if (Object.prototype.hasOwnProperty.call(patch, "cluster")) {
+                delete flatPatch.cluster;
+                flatPatch["cluster.fqdn"] = (_a = patch.cluster) === null || _a === void 0 ? void 0 : _a.fqdn;
+            }
+            const fieldId = `root_${(_b = Object.keys(flatPatch)[0]) !== null && _b !== void 0 ? _b : ""}`;
+            this.handleFormUpdate({ formData: { ...formData, ...flatPatch } }, fieldId);
+        };
+        this.onClusterSelect = (hostname) => {
+            var _a;
+            const { clusters } = this.props;
+            const cluster = clusters.find((entry) => entry.hostname === hostname);
+            const [firstQueue] = ((_a = cluster === null || cluster === void 0 ? void 0 : cluster.queues) !== null && _a !== void 0 ? _a : []).filter((queue) => queue.nodeLimit);
+            // Queues belong to a cluster, so a queue chosen on the previous one is
+            // meaningless here; default to the first this cluster actually offers.
+            this.applyComputePatch({ "cluster.fqdn": hostname, queue: firstQueue === null || firstQueue === void 0 ? void 0 : firstQueue.name });
+        };
         const formData = omitBy(flatten((_a = props.compute) !== null && _a !== void 0 ? _a : {}), (value) => {
             // remove empty objects as they lead to invalid flatten formData
             return isObject(value) && isEmpty(value);
@@ -289,9 +325,31 @@ export class ComputeForm extends React.Component {
         const { formData } = this.state;
         const { clusters } = this.props;
         const cluster = clusters.find((x) => x.hostname === formData["cluster.fqdn"]);
-        const queues = cluster ? cluster.queues.filter((q) => q.nodeLimit) : [];
+        const queues = cluster
+            ? cluster.queues.filter((q) => q.nodeLimit)
+            : [];
         return queues;
     }
+    /** Limits and pricing for the cluster currently chosen, if the host published any. */
+    get selectedClusterMetadata() {
+        const { clusterMetadata = [] } = this.props;
+        const { formData } = this.state;
+        return findClusterMetadata({ cluster: { fqdn: formData["cluster.fqdn"] } }, clusterMetadata);
+    }
+    /**
+     * The compute the cards surface is editing, in the unflattened shape the
+     * estimate and limit checks expect.
+     */
+    get computeFromFormData() {
+        const { formData } = this.state;
+        return {
+            cluster: { fqdn: formData["cluster.fqdn"] },
+            nodes: formData.nodes,
+            ppn: formData.ppn,
+            timeLimit: formData.timeLimit,
+            queue: formData.queue,
+        };
+    }
     clusterOptions() {
         const { clusters } = this.props;
         return clusters.map((x) => {
@@ -318,8 +376,8 @@ export class ComputeForm extends React.Component {
         }
     }
     render() {
-        var _a;
-        const { editable, showAdvancedOptions, user, accountUsers, isAccountUsersLoading, compute, gridParams, pathForClusters, showAllErrors = false, } = this.props;
+        var _a, _b;
+        const { editable, showAdvancedOptions, user, accountUsers, isAccountUsersLoading, compute, gridParams, pathForClusters, showAllErrors = false, useComputeCards = false, clusters, clusterMetadata, computeQuota, runs = 1, } = this.props;
         const { formData } = this.state;
         const disableFields = !editable;
         const costUrl = this.getURLForChargesPerJodID((_a = compute === null || compute === void 0 ? void 0 : compute.cluster) === null || _a === void 0 ? void 0 : _a.jid);
@@ -338,18 +396,24 @@ export class ComputeForm extends React.Component {
         const uiSchema = this.computeUiSchema.resolveSchemaValues({
             DISABLE_FIELDS: disableFields,
             SHOW_ADVANCED_OPTIONS: showAdvancedOptions ? "updown" : "hidden",
-            CLUSTER_FQDN_WIDGET: disableFields ? "hidden" : "select",
+            CLUSTER_FQDN_WIDGET: disableFields || useComputeCards ? "hidden" : "select",
             CLUSTER_JID_WIDGET: disableFields ? "text" : "hidden",
             CLUSTER_COST_WIDGET: disableFields ? LinkWidget : "hidden",
             CLUSTER_STATUS_DOC_WIDGET: disableFields ? "hidden" : LinkWidget,
             QUEUES_OPTIONS: this.queueOptions(),
+            // With the cards surface on, these four are edited above and hidden
+            // here — hidden rather than removed, so the schema still validates
+            // them and nothing downstream has to learn a second shape.
+            RESOURCE_FIELD_WIDGET: useComputeCards ? "hidden" : "updown",
+            WALLTIME_FIELD_WIDGET: useComputeCards ? "hidden" : "text",
+            QUEUE_FIELD_WIDGET: useComputeCards ? "hidden" : "QueueSelectWidget",
         });
-        return (_jsx(Box, { sx: { display: "flex" }, id: "compute-step-form", children: _jsx(Box, { sx: { flexGrow: 1 }, children: _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.left) || DEFAULT_GRID_PARAMS.left), children: _jsx(RJSForm
+        return (_jsx(Box, { sx: { display: "flex" }, id: "compute-step-form", children: _jsx(Box, { sx: { flexGrow: 1 }, children: _jsxs(Grid, { container: true, children: [useComputeCards ? (_jsx(Grid, { item: true, xs: 12, p: 2, children: _jsxs(Paper, { sx: { p: 3, mb: 3 }, id: "compute-cards", children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Cluster" }), _jsx(ClusterCards, { clusters: clusters, clusterMetadata: clusterMetadata, selectedHostname: formData["cluster.fqdn"], onSelect: this.onClusterSelect, disabled: disableFields }), _jsx(Box, { sx: { mt: 3 }, children: _jsx(ComputeResources, { compute: this.computeFromFormData, queues: this.getClusterQueues(), limits: (_b = this.selectedClusterMetadata) === null || _b === void 0 ? void 0 : _b.limits, onChange: this.applyComputePatch, disabled: disableFields, showAllErrors: showAllErrors }) }), _jsx(Box, { sx: { mt: 3 }, children: _jsx(ComputeEstimatePanel, { compute: this.computeFromFormData, clusterMetadata: clusterMetadata, quota: computeQuota, runs: runs }) })] }) })) : null, _jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.left) || DEFAULT_GRID_PARAMS.left), children: _jsx(RJSForm
                             // RJSF only re-validates when its schema or form data
                             // change, so flipping `showAllErrors` alone would leave
                             // the previous validation result on screen. Remounting
                             // forces a fresh pass; the toggle happens on submit, not
                             // while typing, so the cost is not felt.
-                            , { schema: finalSchema, uiSchema: uiSchema, validator: rjsfValidator, formData: formData, onChange: (event, fieldId) => this.handleFormUpdate(event, fieldId), showErrorList: false, customValidate: this.customValidate, liveValidate: true, widgets: WIDGETS, templates: TEMPLATES }, showAllErrors ? "show-all-errors" : "progressive") }), _jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.right) || DEFAULT_GRID_PARAMS.right), children: isAccountUsersLoading ? (_jsx(LoadingIndicator, { size: "small", included: true }, "loading-indicator")) : (_jsx(Notify, { user: user, accountUsers: accountUsers, editable: editable, onUpdate: this.onNotifyUpdate, notify: formData.notify, email: formData.email })) })] }) }) }));
+                            , { schema: finalSchema, uiSchema: uiSchema, formContext: { useComputeCards }, validator: rjsfValidator, formData: formData, onChange: (event, fieldId) => this.handleFormUpdate(event, fieldId), showErrorList: false, customValidate: this.customValidate, liveValidate: true, widgets: WIDGETS, templates: TEMPLATES }, showAllErrors ? "show-all-errors" : "progressive") }), _jsx(Grid, { item: true, p: 2, ...((gridParams === null || gridParams === void 0 ? void 0 : gridParams.right) || DEFAULT_GRID_PARAMS.right), children: isAccountUsersLoading ? (_jsx(LoadingIndicator, { size: "small", included: true }, "loading-indicator")) : (_jsx(Notify, { user: user, accountUsers: accountUsers, editable: editable, onUpdate: this.onNotifyUpdate, notify: formData.notify, email: formData.email })) })] }) }) }));
     }
 }
diff --git a/dist/components/ComputeResources.d.ts b/dist/components/ComputeResources.d.ts
new file mode 100644
index 0000000..f65322d
--- /dev/null
+++ b/dist/components/ComputeResources.d.ts
@@ -0,0 +1,29 @@
+import React from "react";
+import type { ClusterLimits, ComputeConfiguration } from "../utils/computeEstimate";
+export interface ComputeResourcesProps {
+    compute?: ComputeConfiguration | null;
+    /** Queues the selected cluster offers. Empty until a cluster is chosen. */
+    queues?: Array<Record<string, any>>;
+    /** Limits for the selected cluster. Absent when the host published none. */
+    limits?: ClusterLimits;
+    onChange: (patch: Partial<ComputeConfiguration>) => void;
+    disabled?: boolean;
+    /** Reveal limit violations for fields the reader has not touched yet. */
+    showAllErrors?: boolean;
+    id?: string;
+}
+/**
+ * How much of the cluster this job wants.
+ *
+ * The three numbers that decide what a job costs used to be plain required text
+ * fields: empty on arrival, red on first paint, and silent about the limits they
+ * had to respect. Here the bounds live on the steppers, so nudging cannot
+ * produce a configuration the queue would reject, and the presets give a reader
+ * who does not know how many nodes a relaxation wants something defensible to
+ * start from.
+ *
+ * Typed values are still allowed past the bounds and reported inline — but only
+ * once the reader has been to the field, on the same rule as the rest of the
+ * form (see `utils/touchedFields`).
+ */
+export default function ComputeResources({ compute, queues, limits, onChange, disabled, showAllErrors, id, }: ComputeResourcesProps): React.JSX.Element;
diff --git a/dist/components/ComputeResources.js b/dist/components/ComputeResources.js
new file mode 100644
index 0000000..1de87fc
--- /dev/null
+++ b/dist/components/ComputeResources.js
@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NumericStepperInput from "@mat3ra/cove/dist/mui/components/numeric-stepper/NumericStepperInput";
+import Button from "@mui/material/Button";
+import MenuItem from "@mui/material/MenuItem";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { parseWalltimeHours } from "../utils/computeEstimate";
+import { COMPUTE_PRESETS, findMatchingPreset, presetToCompute, resolvePreset, } from "../utils/computePresets";
+/**
+ * How much of the cluster this job wants.
+ *
+ * The three numbers that decide what a job costs used to be plain required text
+ * fields: empty on arrival, red on first paint, and silent about the limits they
+ * had to respect. Here the bounds live on the steppers, so nudging cannot
+ * produce a configuration the queue would reject, and the presets give a reader
+ * who does not know how many nodes a relaxation wants something defensible to
+ * start from.
+ *
+ * Typed values are still allowed past the bounds and reported inline — but only
+ * once the reader has been to the field, on the same rule as the rest of the
+ * form (see `utils/touchedFields`).
+ */
+export default function ComputeResources({ compute, queues = [], limits, onChange, disabled = false, showAllErrors = false, id = "compute-resources", }) {
+    var _a, _b, _c, _d;
+    const [touched, setTouched] = React.useState({});
+    const walltimeHours = parseWalltimeHours(compute === null || compute === void 0 ? void 0 : compute.timeLimit);
+    const activePreset = findMatchingPreset(compute, limits);
+    const markTouched = (field) => setTouched((prev) => ({ ...prev, [field]: true }));
+    const shouldShow = (field) => showAllErrors || touched[field];
+    const applyPreset = (preset) => {
+        setTouched({ nodes: true, ppn: true, timeLimit: true });
+        onChange(presetToCompute(preset, limits));
+    };
+    const nodesError = shouldShow("nodes") &&
+        (limits === null || limits === void 0 ? void 0 : limits.maxNodes) !== undefined &&
+        ((_a = compute === null || compute === void 0 ? void 0 : compute.nodes) !== null && _a !== void 0 ? _a : 0) > limits.maxNodes;
+    const ppnError = shouldShow("ppn") && (limits === null || limits === void 0 ? void 0 : limits.maxPpn) !== undefined && ((_b = compute === null || compute === void 0 ? void 0 : compute.ppn) !== null && _b !== void 0 ? _b : 0) > limits.maxPpn;
+    const walltimeError = shouldShow("timeLimit") &&
+        (limits === null || limits === void 0 ? void 0 : limits.maxWalltimeHours) !== undefined &&
+        walltimeHours !== undefined &&
+        walltimeHours > limits.maxWalltimeHours;
+    return (_jsxs(Stack, { spacing: 2, id: id, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", useFlexGap: true, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: "Start from" }), COMPUTE_PRESETS.map((preset) => {
+                        const resolved = resolvePreset(preset, limits);
+                        const isActive = (activePreset === null || activePreset === void 0 ? void 0 : activePreset.id) === preset.id;
+                        return (_jsx(Button, { id: `compute-preset-${preset.id}`, size: "small", variant: isActive ? "contained" : "outlined", disabled: disabled, onClick: () => applyPreset(preset), title: `${preset.description} — ${resolved.nodes} × ${resolved.ppn}, ${resolved.walltimeHours} h`, children: preset.label }, preset.id));
+                    })] }), _jsxs(Stack, { direction: "row", spacing: 2, flexWrap: "wrap", useFlexGap: true, children: [queues.length ? (_jsx(TextField, { id: "compute-queue", select: true, label: "Queue", size: "small", sx: { minWidth: 200 }, value: (_c = compute === null || compute === void 0 ? void 0 : compute.queue) !== null && _c !== void 0 ? _c : "", disabled: disabled, helperText: "Determines the walltime cap and the wait", onChange: (event) => {
+                            markTouched("queue");
+                            onChange({ queue: event.target.value });
+                        }, children: queues.map((queue) => {
+                            var _a;
+                            return (_jsx(MenuItem, { value: queue.name, children: (_a = queue.displayName) !== null && _a !== void 0 ? _a : queue.name }, queue.name));
+                        }) })) : null, _jsx(NumericStepperInput, { id: "compute-nodes", label: "Nodes", value: compute === null || compute === void 0 ? void 0 : compute.nodes, min: 1, max: limits === null || limits === void 0 ? void 0 : limits.maxNodes, disabled: disabled, error: Boolean(nodesError), helperText: nodesError
+                            ? `Over the ${limits === null || limits === void 0 ? void 0 : limits.maxNodes}-node limit`
+                            : describeRange(1, limits === null || limits === void 0 ? void 0 : limits.maxNodes), onChange: (nodes) => {
+                            markTouched("nodes");
+                            onChange({ nodes });
+                        } }), _jsx(NumericStepperInput, { id: "compute-ppn", label: "Cores per node", value: compute === null || compute === void 0 ? void 0 : compute.ppn, min: 1, max: limits === null || limits === void 0 ? void 0 : limits.maxPpn, unit: "cores", disabled: disabled, error: Boolean(ppnError), helperText: ppnError
+                            ? `Over the ${limits === null || limits === void 0 ? void 0 : limits.maxPpn}-core limit`
+                            : describeRange(1, limits === null || limits === void 0 ? void 0 : limits.maxPpn), onChange: (ppn) => {
+                            markTouched("ppn");
+                            onChange({ ppn });
+                        } }), _jsx(TextField, { id: "compute-walltime", label: "Walltime", size: "small", 
+                        // Free text rather than a stepper: HH:MM:SS is what the queue
+                        // takes and what the reader recognises from the scheduler.
+                        value: (_d = compute === null || compute === void 0 ? void 0 : compute.timeLimit) !== null && _d !== void 0 ? _d : "", placeholder: "HH:MM:SS", disabled: disabled, error: Boolean(walltimeError), helperText: walltimeError
+                            ? `Over the ${limits === null || limits === void 0 ? void 0 : limits.maxWalltimeHours} h queue limit`
+                            : (limits === null || limits === void 0 ? void 0 : limits.maxWalltimeHours)
+                                ? `up to ${limits.maxWalltimeHours} h`
+                                : "HH:MM:SS", onChange: (event) => {
+                            markTouched("timeLimit");
+                            onChange({ timeLimit: event.target.value });
+                        } })] })] }));
+}
+function describeRange(min, max) {
+    return max === undefined ? `${min} or more` : `${min} to ${max}`;
+}
diff --git a/dist/exports.d.ts b/dist/exports.d.ts
index f3937e4..e109703 100644
--- a/dist/exports.d.ts
+++ b/dist/exports.d.ts
@@ -2,3 +2,10 @@ export { default as QueuesTable } from "./components/QueuesTable";
 export { default as Compute } from "./components/Compute";
 export { ComputableEntityMixin } from "./components/mixins";
 export { ComputeForm } from "./components/ComputeForm";
+export { default as ClusterCards } from "./components/ClusterCards";
+export { default as ComputeEstimatePanel } from "./components/ComputeEstimatePanel";
+export { default as ComputeResources } from "./components/ComputeResources";
+export { estimateComputeUsage, findClusterMetadata, formatCoreHours, formatCost, formatEstimate, parseWalltimeHours, } from "./utils/computeEstimate";
+export type { ClusterLimits, ClusterMetadata, ComputeConfiguration, ComputeEstimate, ComputeQuota, } from "./utils/computeEstimate";
+export { COMPUTE_PRESETS, findMatchingPreset, formatWalltime, presetToCompute, resolvePreset, } from "./utils/computePresets";
+export type { ComputePreset } from "./utils/computePresets";
diff --git a/dist/exports.js b/dist/exports.js
index f3937e4..b51787e 100644
--- a/dist/exports.js
+++ b/dist/exports.js
@@ -2,3 +2,8 @@ export { default as QueuesTable } from "./components/QueuesTable";
 export { default as Compute } from "./components/Compute";
 export { ComputableEntityMixin } from "./components/mixins";
 export { ComputeForm } from "./components/ComputeForm";
+export { default as ClusterCards } from "./components/ClusterCards";
+export { default as ComputeEstimatePanel } from "./components/ComputeEstimatePanel";
+export { default as ComputeResources } from "./components/ComputeResources";
+export { estimateComputeUsage, findClusterMetadata, formatCoreHours, formatCost, formatEstimate, parseWalltimeHours, } from "./utils/computeEstimate";
+export { COMPUTE_PRESETS, findMatchingPreset, formatWalltime, presetToCompute, resolvePreset, } from "./utils/computePresets";
diff --git a/dist/schemas/ui/compute_base.json b/dist/schemas/ui/compute_base.json
index d4c1255..0eb999c 100644
--- a/dist/schemas/ui/compute_base.json
+++ b/dist/schemas/ui/compute_base.json
@@ -3,7 +3,7 @@
     "properties": {
         "queue": {
             "ui:title": "Queue",
-            "ui:widget": "QueueSelectWidget",
+            "ui:widget": "$val.QUEUE_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
@@ -16,7 +16,7 @@
         },
         "nodes": {
             "ui:title": "Nodes",
-            "ui:widget": "updown",
+            "ui:widget": "$val.RESOURCE_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
@@ -28,7 +28,7 @@
         },
         "ppn": {
             "ui:title": "Cores",
-            "ui:widget": "updown",
+            "ui:widget": "$val.RESOURCE_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
@@ -40,6 +40,7 @@
         },
         "timeLimit": {
             "ui:title": "Time Limit",
+            "ui:widget": "$val.WALLTIME_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
diff --git a/dist/utils/computeEstimate.d.ts b/dist/utils/computeEstimate.d.ts
new file mode 100644
index 0000000..46f2df8
--- /dev/null
+++ b/dist/utils/computeEstimate.d.ts
@@ -0,0 +1,80 @@
+/**
+ * What a compute configuration will consume, and what that costs.
+ *
+ * The compute form asks for nodes, cores and a walltime and says nothing about
+ * what they add up to. The same arithmetic is needed wherever that shows: the
+ * estimate panel here, and in job-designer the context strip's estimate chip and
+ * the submit preflight's budget check. Surfaces disagreeing about what a job
+ * costs would be worse than none of them saying anything, so it lives here —
+ * beside the form that holds the live values — and job-designer imports it.
+ *
+ * Pricing, limits and quota are not in the job document: they are properties of
+ * the cluster and the account, injected by the host through `setDependencies()`
+ * (see {@link ClusterMetadata}). Everything here degrades when that metadata is
+ * absent — core-hours are always computable from the job alone, cost is not, and
+ * an absent cost is reported as absent rather than as zero.
+ */
+/** Per-cluster enrichment the host may inject. Every field is optional. */
+export interface ClusterMetadata {
+    /** Matches `compute.cluster.fqdn`. */
+    fqdn?: string;
+    /** Human name, when the host has a nicer one than the FQDN. */
+    name?: string;
+    pricePerCoreHour?: number;
+    /** ISO 4217, e.g. "USD". Only used for display. */
+    currency?: string;
+    limits?: ClusterLimits;
+    /** Typical wait before the job starts, in minutes. */
+    queueWaitMinutes?: number;
+}
+export interface ClusterLimits {
+    maxNodes?: number;
+    maxPpn?: number;
+    /** Queue walltime cap, in hours. */
+    maxWalltimeHours?: number;
+}
+/** Remaining allowance for the account paying for this job. */
+export interface ComputeQuota {
+    remainingCoreHours?: number;
+    totalCoreHours?: number;
+    remainingBalance?: number;
+    currency?: string;
+}
+export interface ComputeEstimate {
+    /** nodes × cores-per-node × walltime hours. Undefined when a term is missing. */
+    coreHours?: number;
+    /** Only when the cluster carries a price. */
+    cost?: number;
+    currency?: string;
+    walltimeHours?: number;
+    nodes?: number;
+    ppn?: number;
+}
+/** The compute half of a job, as the designer holds it. */
+export interface ComputeConfiguration {
+    cluster?: {
+        fqdn?: string;
+    } | null;
+    nodes?: number;
+    ppn?: number;
+    timeLimit?: string;
+    queue?: string;
+}
+/**
+ * Walltime as hours. Accepts the `HH:MM:SS` and `D-HH:MM:SS` forms the compute
+ * form produces, and a bare number of hours. Returns undefined for anything it
+ * cannot read, so callers can tell "no walltime" from "zero hours".
+ */
+export declare function parseWalltimeHours(timeLimit?: string | number): number | undefined;
+/** Cluster metadata for the cluster this compute points at, if the host gave any. */
+export declare function findClusterMetadata(compute?: ComputeConfiguration | null, clusterMetadata?: ClusterMetadata[]): ClusterMetadata | undefined;
+/**
+ * Core-hours and cost for one run. Multi-material jobs run once per material —
+ * pass `runs` so the estimate is what the account will actually be charged
+ * rather than the per-material figure.
+ */
+export declare function estimateComputeUsage(compute?: ComputeConfiguration | null, clusterMetadata?: ClusterMetadata[], runs?: number): ComputeEstimate;
+export declare function formatCoreHours(coreHours?: number): string | undefined;
+export declare function formatCost(cost?: number, currency?: string): string | undefined;
+/** One line for a chip or a summary row. Undefined when nothing is known yet. */
+export declare function formatEstimate(estimate: ComputeEstimate): string | undefined;
diff --git a/dist/utils/computeEstimate.js b/dist/utils/computeEstimate.js
new file mode 100644
index 0000000..a595fd8
--- /dev/null
+++ b/dist/utils/computeEstimate.js
@@ -0,0 +1,101 @@
+/**
+ * What a compute configuration will consume, and what that costs.
+ *
+ * The compute form asks for nodes, cores and a walltime and says nothing about
+ * what they add up to. The same arithmetic is needed wherever that shows: the
+ * estimate panel here, and in job-designer the context strip's estimate chip and
+ * the submit preflight's budget check. Surfaces disagreeing about what a job
+ * costs would be worse than none of them saying anything, so it lives here —
+ * beside the form that holds the live values — and job-designer imports it.
+ *
+ * Pricing, limits and quota are not in the job document: they are properties of
+ * the cluster and the account, injected by the host through `setDependencies()`
+ * (see {@link ClusterMetadata}). Everything here degrades when that metadata is
+ * absent — core-hours are always computable from the job alone, cost is not, and
+ * an absent cost is reported as absent rather than as zero.
+ */
+/**
+ * Walltime as hours. Accepts the `HH:MM:SS` and `D-HH:MM:SS` forms the compute
+ * form produces, and a bare number of hours. Returns undefined for anything it
+ * cannot read, so callers can tell "no walltime" from "zero hours".
+ */
+export function parseWalltimeHours(timeLimit) {
+    if (typeof timeLimit === "number")
+        return Number.isFinite(timeLimit) ? timeLimit : undefined;
+    if (!timeLimit)
+        return undefined;
+    const [dayPart, clockPart] = timeLimit.includes("-")
+        ? timeLimit.split("-")
+        : [undefined, timeLimit];
+    const segments = clockPart.split(":").map((segment) => Number(segment));
+    if (!segments.length || segments.some((segment) => !Number.isFinite(segment)))
+        return undefined;
+    const [hours = 0, minutes = 0, seconds = 0] = segments;
+    const days = dayPart === undefined ? 0 : Number(dayPart);
+    if (!Number.isFinite(days))
+        return undefined;
+    return days * 24 + hours + minutes / 60 + seconds / 3600;
+}
+/** Cluster metadata for the cluster this compute points at, if the host gave any. */
+export function findClusterMetadata(compute, clusterMetadata = []) {
+    var _a;
+    const fqdn = (_a = compute === null || compute === void 0 ? void 0 : compute.cluster) === null || _a === void 0 ? void 0 : _a.fqdn;
+    if (!fqdn)
+        return undefined;
+    return clusterMetadata.find((cluster) => cluster.fqdn === fqdn);
+}
+/**
+ * Core-hours and cost for one run. Multi-material jobs run once per material —
+ * pass `runs` so the estimate is what the account will actually be charged
+ * rather than the per-material figure.
+ */
+export function estimateComputeUsage(compute, clusterMetadata = [], runs = 1) {
+    const walltimeHours = parseWalltimeHours(compute === null || compute === void 0 ? void 0 : compute.timeLimit);
+    const { nodes, ppn } = compute !== null && compute !== void 0 ? compute : {};
+    const estimate = { walltimeHours, nodes, ppn };
+    if (!nodes || !ppn || walltimeHours === undefined)
+        return estimate;
+    estimate.coreHours = nodes * ppn * walltimeHours * Math.max(runs, 1);
+    const cluster = findClusterMetadata(compute, clusterMetadata);
+    if ((cluster === null || cluster === void 0 ? void 0 : cluster.pricePerCoreHour) !== undefined) {
+        estimate.cost = estimate.coreHours * cluster.pricePerCoreHour;
+        estimate.currency = cluster.currency;
+    }
+    return estimate;
+}
+function formatNumber(value) {
+    // Core-hours below 10 are the interesting ones to see a decimal on; above
+    // that the fraction is noise next to a queue that rounds to the minute.
+    return value >= 10 ? String(Math.round(value)) : String(Math.round(value * 10) / 10);
+}
+export function formatCoreHours(coreHours) {
+    if (coreHours === undefined)
+        return undefined;
+    return `${formatNumber(coreHours)} core·h`;
+}
+export function formatCost(cost, currency) {
+    if (cost === undefined)
+        return undefined;
+    const amount = cost >= 10 ? cost.toFixed(0) : cost.toFixed(2);
+    if (!currency)
+        return amount;
+    try {
+        return new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency,
+            maximumFractionDigits: cost >= 10 ? 0 : 2,
+        }).format(cost);
+    }
+    catch (_a) {
+        // An unknown currency code must not take the estimate down with it.
+        return `${amount} ${currency}`;
+    }
+}
+/** One line for a chip or a summary row. Undefined when nothing is known yet. */
+export function formatEstimate(estimate) {
+    const coreHours = formatCoreHours(estimate.coreHours);
+    if (!coreHours)
+        return undefined;
+    const cost = formatCost(estimate.cost, estimate.currency);
+    return cost ? `${coreHours} ≈ ${cost}` : coreHours;
+}
diff --git a/dist/utils/computePresets.d.ts b/dist/utils/computePresets.d.ts
new file mode 100644
index 0000000..9cfde9d
--- /dev/null
+++ b/dist/utils/computePresets.d.ts
@@ -0,0 +1,39 @@
+import type { ClusterLimits, ComputeConfiguration } from "./computeEstimate";
+/**
+ * Starting points for a compute configuration.
+ *
+ * Most readers do not know how many nodes a relaxation wants; today the form
+ * asks anyway, with empty fields and a required-field error apiece. A preset is
+ * a defensible answer to "just give me something that runs" that the reader can
+ * then adjust — and, unlike a hidden default, it says what it assumes.
+ *
+ * Presets are proposals, not policy: each is clamped to the cluster's published
+ * limits, so picking one can never produce a configuration the queue would
+ * reject.
+ */
+export interface ComputePreset {
+    id: string;
+    label: string;
+    /** What this preset is for, in one line. */
+    description: string;
+    nodes: number;
+    ppn: number;
+    /** Hours; formatted to `HH:MM:SS` when applied. */
+    walltimeHours: number;
+}
+export declare const COMPUTE_PRESETS: ComputePreset[];
+export declare function formatWalltime(hours: number): string;
+/**
+ * The preset as it would actually be applied on this cluster. A "Production"
+ * preset asking for 4 nodes on a 2-node cluster becomes 2 nodes rather than a
+ * configuration that fails validation the moment it is applied.
+ */
+export declare function resolvePreset(preset: ComputePreset, limits?: ClusterLimits): ComputePreset;
+/** The compute fields a preset sets. Everything else — cluster, queue — is left alone. */
+export declare function presetToCompute(preset: ComputePreset, limits?: ClusterLimits): Pick<ComputeConfiguration, "nodes" | "ppn" | "timeLimit">;
+/**
+ * Which preset the current configuration matches, if any. Used to show the
+ * chosen preset as selected — and, once the reader edits a field, to stop
+ * claiming a preset that no longer describes what is set.
+ */
+export declare function findMatchingPreset(compute: ComputeConfiguration | null | undefined, limits?: ClusterLimits): ComputePreset | undefined;
diff --git a/dist/utils/computePresets.js b/dist/utils/computePresets.js
new file mode 100644
index 0000000..d9c7184
--- /dev/null
+++ b/dist/utils/computePresets.js
@@ -0,0 +1,72 @@
+export const COMPUTE_PRESETS = [
+    {
+        id: "debug",
+        label: "Debug",
+        description: "Smallest run that exercises the workflow",
+        nodes: 1,
+        ppn: 4,
+        walltimeHours: 1,
+    },
+    {
+        id: "standard",
+        label: "Standard",
+        description: "A single node, most of a day",
+        nodes: 1,
+        ppn: 16,
+        walltimeHours: 8,
+    },
+    {
+        id: "production",
+        label: "Production",
+        description: "Several nodes for a long run",
+        nodes: 4,
+        ppn: 32,
+        walltimeHours: 24,
+    },
+];
+export function formatWalltime(hours) {
+    const totalMinutes = Math.round(hours * 60);
+    const hh = Math.floor(totalMinutes / 60);
+    const mm = totalMinutes % 60;
+    return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}:00`;
+}
+/**
+ * The preset as it would actually be applied on this cluster. A "Production"
+ * preset asking for 4 nodes on a 2-node cluster becomes 2 nodes rather than a
+ * configuration that fails validation the moment it is applied.
+ */
+export function resolvePreset(preset, limits) {
+    var _a, _b, _c;
+    if (!limits)
+        return preset;
+    return {
+        ...preset,
+        nodes: Math.min(preset.nodes, (_a = limits.maxNodes) !== null && _a !== void 0 ? _a : preset.nodes),
+        ppn: Math.min(preset.ppn, (_b = limits.maxPpn) !== null && _b !== void 0 ? _b : preset.ppn),
+        walltimeHours: Math.min(preset.walltimeHours, (_c = limits.maxWalltimeHours) !== null && _c !== void 0 ? _c : preset.walltimeHours),
+    };
+}
+/** The compute fields a preset sets. Everything else — cluster, queue — is left alone. */
+export function presetToCompute(preset, limits) {
+    const resolved = resolvePreset(preset, limits);
+    return {
+        nodes: resolved.nodes,
+        ppn: resolved.ppn,
+        timeLimit: formatWalltime(resolved.walltimeHours),
+    };
+}
+/**
+ * Which preset the current configuration matches, if any. Used to show the
+ * chosen preset as selected — and, once the reader edits a field, to stop
+ * claiming a preset that no longer describes what is set.
+ */
+export function findMatchingPreset(compute, limits) {
+    if (!(compute === null || compute === void 0 ? void 0 : compute.nodes) || !(compute === null || compute === void 0 ? void 0 : compute.ppn) || !(compute === null || compute === void 0 ? void 0 : compute.timeLimit))
+        return undefined;
+    return COMPUTE_PRESETS.find((preset) => {
+        const applied = presetToCompute(preset, limits);
+        return (applied.nodes === compute.nodes &&
+            applied.ppn === compute.ppn &&
+            applied.timeLimit === compute.timeLimit);
+    });
+}
diff --git a/src/components/ClusterCards.tsx b/src/components/ClusterCards.tsx
new file mode 100644
index 0000000..17889b8
--- /dev/null
+++ b/src/components/ClusterCards.tsx
@@ -0,0 +1,115 @@
+import MetricTile from "@mat3ra/cove/dist/mui/components/metric/MetricTile";
+import SelectableCard, {
+    SelectableCardGroup,
+} from "@mat3ra/cove/dist/mui/components/selectable-card/SelectableCard";
+import StatusChip from "@mat3ra/cove/dist/mui/components/status/StatusChip";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import React from "react";
+
+import type { ClusterMetadata } from "../utils/computeEstimate";
+import { formatCost } from "../utils/computeEstimate";
+
+export interface ClusterCardsProps {
+    /** The host's cluster list, unchanged — `hostname`, `displayName`, `queues`. */
+    clusters: Array<Record<string, any>>;
+    /** Pricing, limits and queue waits, keyed by fqdn. Optional. */
+    clusterMetadata?: ClusterMetadata[];
+    selectedHostname?: string;
+    onSelect: (hostname: string) => void;
+    disabled?: boolean;
+    id?: string;
+}
+
+/** How busy a queue is, as words rather than a bare number. */
+function queueBadge(metadata?: ClusterMetadata) {
+    const wait = metadata?.queueWaitMinutes;
+    if (wait === undefined) return null;
+
+    const tone = wait <= 10 ? "success" : wait <= 30 ? "warning" : "neutral";
+
+    return (
+        <StatusChip
+            tone={tone}
+            iconName={wait <= 10 ? "shapes.check" : "shapes.loop"}
+            label={`~${wait} min`}
+            title="Typical wait before the job starts"
+        />
+    );
+}
+
+function describeCapacity(cluster: Record<string, any>, metadata?: ClusterMetadata): string {
+    const queues: Array<Record<string, any>> = cluster.queues ?? [];
+    const queueNames = queues.map((queue) => queue.name).join(", ");
+    const limits = metadata?.limits;
+    const capacity =
+        limits?.maxNodes && limits?.maxPpn
+            ? `up to ${limits.maxNodes} nodes × ${limits.maxPpn} cores`
+            : undefined;
+
+    return [queueNames && `queue ${queueNames}`, capacity].filter(Boolean).join(" · ");
+}
+
+/**
+ * The cluster choice, as cards.
+ *
+ * It used to be a `select`: one line of text per cluster, and everything a
+ * reader would actually choose on — what it costs, how long the queue is, how
+ * big a job it will take — either absent or a click away in a popover table.
+ * The card carries those facts next to the name, which is the only arrangement
+ * that makes the choice a comparison rather than a guess.
+ */
+export default function ClusterCards({
+    clusters,
+    clusterMetadata = [],
+    selectedHostname,
+    onSelect,
+    disabled = false,
+    id,
+}: ClusterCardsProps) {
+    if (!clusters.length) {
+        return (
+            <Typography variant="body2" color="text.secondary">
+                No clusters are available on this account.
+            </Typography>
+        );
+    }
+
+    return (
+        <SelectableCardGroup label="Cluster" id={id}>
+            {clusters.map((cluster) => {
+                const metadata = clusterMetadata.find((entry) => entry.fqdn === cluster.hostname);
+                const price = formatCost(metadata?.pricePerCoreHour, metadata?.currency);
+
+                return (
+                    <SelectableCard
+                        key={cluster.hostname}
+                        id={`cluster-card-${cluster.hostname}`}
+                        title={cluster.displayName ?? cluster.hostname}
+                        subtitle={describeCapacity(cluster, metadata)}
+                        selected={cluster.hostname === selectedHostname}
+                        disabled={disabled}
+                        onSelect={() => onSelect(cluster.hostname)}
+                        badge={queueBadge(metadata)}
+                    >
+                        <Stack direction="row" spacing={3}>
+                            <MetricTile
+                                size="small"
+                                label="Price"
+                                value={price}
+                                unit={price ? "/ core·h" : undefined}
+                                caption={price ? undefined : "not published"}
+                            />
+                            <MetricTile
+                                size="small"
+                                label="Max walltime"
+                                value={metadata?.limits?.maxWalltimeHours}
+                                unit="h"
+                            />
+                        </Stack>
+                    </SelectableCard>
+                );
+            })}
+        </SelectableCardGroup>
+    );
+}
diff --git a/src/components/Compute.jsx b/src/components/Compute.jsx
index 60db8b4..1e0c0d0 100644
--- a/src/components/Compute.jsx
+++ b/src/components/Compute.jsx
@@ -89,6 +89,10 @@ class Compute extends React.Component {
             accountUsers,
             isAccountUsersLoading,
             showAllErrors,
+            useComputeCards,
+            clusterMetadata,
+            computeQuota,
+            runs,
         } = this.props;
 
         return (
@@ -128,6 +132,10 @@ class Compute extends React.Component {
                         accountUsers={accountUsers}
                         isAccountUsersLoading={isAccountUsersLoading}
                         showAllErrors={showAllErrors}
+                        useComputeCards={useComputeCards}
+                        clusterMetadata={clusterMetadata}
+                        computeQuota={computeQuota}
+                        runs={runs}
                     />
                 )}
                 {this.showStatusTrack && (
@@ -154,6 +162,14 @@ Compute.propTypes = {
     accountUsers: PropTypes.array,
     /** Reveal every validation error, not just those for fields already touched. */
     showAllErrors: PropTypes.bool,
+    /** Render cluster cards, resource steppers and the estimate above the schema form. */
+    useComputeCards: PropTypes.bool,
+    /** Per-cluster pricing, limits and queue waits. Not part of the job document. */
+    clusterMetadata: PropTypes.array,
+    /** Remaining allowance for the paying account, when the host tracks one. */
+    computeQuota: PropTypes.object,
+    /** Multi-material jobs run once per material; the estimate covers all of them. */
+    runs: PropTypes.number,
 };
 
 Compute.defaultProps = {
diff --git a/src/components/ComputeEstimatePanel.tsx b/src/components/ComputeEstimatePanel.tsx
new file mode 100644
index 0000000..bcb83c1
--- /dev/null
+++ b/src/components/ComputeEstimatePanel.tsx
@@ -0,0 +1,150 @@
+import MetricTile from "@mat3ra/cove/dist/mui/components/metric/MetricTile";
+import SegmentedMeter from "@mat3ra/cove/dist/mui/components/metric/SegmentedMeter";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import React from "react";
+
+import type { ClusterMetadata, ComputeConfiguration, ComputeQuota } from "../utils/computeEstimate";
+import {
+    estimateComputeUsage,
+    findClusterMetadata,
+    formatCoreHours,
+    formatCost,
+} from "../utils/computeEstimate";
+
+export interface ComputeEstimatePanelProps {
+    compute?: ComputeConfiguration | null;
+    clusterMetadata?: ClusterMetadata[];
+    quota?: ComputeQuota | null;
+    /** Multi-material jobs run once per material; the estimate is for all of them. */
+    runs?: number;
+    id?: string;
+}
+
+/**
+ * What this configuration will consume, while it is still being configured.
+ *
+ * The form's fields are inputs to an arithmetic nobody was doing: 4 nodes × 32
+ * cores × 12 hours is 1536 core-hours, which on a 500-hour quota is a
+ * conversation the reader should have before submitting, not after. Every tile
+ * degrades independently — core-hours need only the job, cost needs a published
+ * price, the quota bar needs an injected allowance — and a tile with nothing
+ * behind it shows an em dash rather than a zero.
+ */
+export default function ComputeEstimatePanel({
+    compute,
+    clusterMetadata = [],
+    quota,
+    runs = 1,
+    id = "compute-estimate-panel",
+}: ComputeEstimatePanelProps) {
+    const estimate = estimateComputeUsage(compute, clusterMetadata, runs);
+    const cluster = findClusterMetadata(compute, clusterMetadata);
+    const remaining = quota?.remainingCoreHours;
+
+    const isOverQuota = remaining !== undefined && (estimate.coreHours ?? 0) > remaining;
+    const usedBefore =
+        quota?.totalCoreHours !== undefined && remaining !== undefined
+            ? Math.max(quota.totalCoreHours - remaining, 0)
+            : undefined;
+
+    return (
+        <Paper id={id} sx={{ p: 2 }}>
+            <Typography variant="subtitle2" gutterBottom>
+                Estimate
+            </Typography>
+
+            <Stack direction="row" spacing={3} flexWrap="wrap" useFlexGap>
+                <MetricTile
+                    id="estimate-core-hours"
+                    label="Core-hours"
+                    value={
+                        estimate.coreHours === undefined
+                            ? undefined
+                            : formatCoreHours(estimate.coreHours)?.replace(" core·h", "")
+                    }
+                    unit="core·h"
+                    tone={isOverQuota ? "error" : "default"}
+                    caption={describeDerivation(
+                        estimate.nodes,
+                        estimate.ppn,
+                        estimate.walltimeHours,
+                        runs,
+                    )}
+                />
+                <MetricTile
+                    id="estimate-cost"
+                    label="Cost"
+                    value={formatCost(estimate.cost, estimate.currency)}
+                    caption={
+                        cluster?.pricePerCoreHour === undefined
+                            ? "no price published for this cluster"
+                            : `at ${formatCost(cluster.pricePerCoreHour, cluster.currency)} / core·h`
+                    }
+                />
+                <MetricTile
+                    id="estimate-queue-wait"
+                    label="Queue wait"
+                    value={
+                        cluster?.queueWaitMinutes === undefined
+                            ? undefined
+                            : `~${cluster.queueWaitMinutes}`
+                    }
+                    unit="min"
+                    caption="typical, before the job starts"
+                />
+            </Stack>
+
+            {remaining !== undefined && quota?.totalCoreHours !== undefined ? (
+                <Stack sx={{ mt: 2 }}>
+                    <SegmentedMeter
+                        id="estimate-quota-meter"
+                        label="Monthly quota"
+                        total={quota.totalCoreHours}
+                        caption={describeQuota(estimate.coreHours, remaining)}
+                        segments={[
+                            ...(usedBefore
+                                ? [
+                                      {
+                                          label: "Already used",
+                                          value: usedBefore,
+                                          color: "primary.main",
+                                      },
+                                  ]
+                                : []),
+                            {
+                                label: "This job",
+                                value: estimate.coreHours ?? 0,
+                                color: isOverQuota ? "error.main" : "warning.main",
+                                isProjected: true,
+                            },
+                        ]}
+                    />
+                </Stack>
+            ) : null}
+        </Paper>
+    );
+}
+
+function describeDerivation(
+    nodes?: number,
+    ppn?: number,
+    walltimeHours?: number,
+    runs = 1,
+): string | undefined {
+    if (!nodes || !ppn || walltimeHours === undefined) return "set nodes, cores and a walltime";
+
+    const base = `${nodes} × ${ppn} × ${Math.round(walltimeHours * 10) / 10} h`;
+
+    return runs > 1 ? `${base}, ${runs} materials` : base;
+}
+
+function describeQuota(coreHours: number | undefined, remaining: number): string {
+    if (coreHours === undefined) return `${formatCoreHours(remaining)} left this month`;
+    if (coreHours > remaining) {
+        return `over by ${formatCoreHours(coreHours - remaining)}`;
+    }
+
+    return `${formatCoreHours(remaining - coreHours)} would remain`;
+}
diff --git a/src/components/ComputeForm.tsx b/src/components/ComputeForm.tsx
index c531d22..8cab915 100644
--- a/src/components/ComputeForm.tsx
+++ b/src/components/ComputeForm.tsx
@@ -28,7 +28,12 @@ import omitBy from "lodash/omitBy";
 import React from "react";
 
 import { getComputeSchema, getComputeValidator } from "../validators";
+import type { ClusterMetadata, ComputeQuota } from "../utils/computeEstimate";
+import { findClusterMetadata } from "../utils/computeEstimate";
 import { shouldShowFieldError, withTouchedField } from "../utils/touchedFields";
+import ClusterCards from "./ClusterCards";
+import ComputeEstimatePanel from "./ComputeEstimatePanel";
+import ComputeResources from "./ComputeResources";
 import Notify from "./Notify";
 import QueuesTable from "./QueuesTable";
 
@@ -142,7 +147,8 @@ function QueueSelectWidget(props: Record<string, any>) {
                 anchorOrigin={{
                     vertical: "bottom",
                     horizontal: "left",
-                }}>
+                }}
+            >
                 <QueuesTable queues={queues} onQueueClick={handleSelect} />
             </Popover>
         </>
@@ -174,12 +180,19 @@ const getPropsForGroup = (group: { fields: string[] }, props: Record<string, any
     return {
         ...props,
         properties: props.properties.filter(
-            (p: Record<string, any>) => group.fields.some((f: string) => new RegExp(f).test(p.name)) && !p.hidden,
+            (p: Record<string, any>) =>
+                group.fields.some((f: string) => new RegExp(f).test(p.name)) && !p.hidden,
         ),
     };
 };
 
 function ObjectFieldTemplateWrapper(props: Record<string, any>) {
+    // With the cards surface on, the cluster, queue and resource fields are
+    // rendered above and hidden here — so the group that used to be the cluster
+    // choice is now two documentation links, and calling it "Cluster" would send
+    // the reader looking for a picker that has moved.
+    const useComputeCards = Boolean(props.registry?.formContext?.useComputeCards);
+
     return (
         <>
             {GROUPS.map((group, index) => {
@@ -187,10 +200,13 @@ function ObjectFieldTemplateWrapper(props: Record<string, any>) {
 
                 if (!childProps.properties.length) return null;
 
+                const title =
+                    useComputeCards && group.title === "Cluster" ? "Documentation" : group.title;
+
                 return (
                     // eslint-disable-next-line react/no-array-index-key
                     <Paper key={`${group.title}-${index}`} sx={{ mb: 3, p: 3 }}>
-                        <CustomObjectFieldTemplate {...(childProps as any)} title={group.title} />
+                        <CustomObjectFieldTemplate {...(childProps as any)} title={title} />
                     </Paper>
                 );
             })}
@@ -317,6 +333,21 @@ interface ComputeFormProps {
      * whole form has to answer for itself — on submit, or from a preflight check.
      */
     showAllErrors?: boolean;
+    /**
+     * Renders the cluster choice, the resource fields and the estimate as their
+     * own surface above the schema form, hiding those fields from it.
+     *
+     * Opt-in per host, like job-designer's guided layout: the fields move, so a
+     * host with its own tests or documentation against the schema form should
+     * flip this when it is ready rather than find it flipped for it.
+     */
+    useComputeCards?: boolean;
+    /** Pricing, limits and queue waits per cluster. Only used with `useComputeCards`. */
+    clusterMetadata?: ClusterMetadata[];
+    /** Remaining allowance for the paying account, when the host tracks one. */
+    computeQuota?: ComputeQuota | null;
+    /** Multi-material jobs run once per material; the estimate covers all of them. */
+    runs?: number;
 }
 
 interface ComputeFormState {
@@ -414,7 +445,9 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
         const { formData } = this.state;
         const { clusters } = this.props;
         const cluster = clusters.find((x) => x.hostname === formData["cluster.fqdn"]);
-        const queues = cluster ? cluster.queues.filter((q: Record<string, any>) => q.nodeLimit) : [];
+        const queues = cluster
+            ? cluster.queues.filter((q: Record<string, any>) => q.nodeLimit)
+            : [];
 
         return queues;
     }
@@ -451,6 +484,63 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
         return errors;
     };
 
+    /** Limits and pricing for the cluster currently chosen, if the host published any. */
+    get selectedClusterMetadata(): ClusterMetadata | undefined {
+        const { clusterMetadata = [] } = this.props;
+        const { formData } = this.state;
+
+        return findClusterMetadata(
+            { cluster: { fqdn: formData["cluster.fqdn"] } },
+            clusterMetadata,
+        );
+    }
+
+    /**
+     * The compute the cards surface is editing, in the unflattened shape the
+     * estimate and limit checks expect.
+     */
+    get computeFromFormData() {
+        const { formData } = this.state;
+
+        return {
+            cluster: { fqdn: formData["cluster.fqdn"] },
+            nodes: formData.nodes,
+            ppn: formData.ppn,
+            timeLimit: formData.timeLimit,
+            queue: formData.queue,
+        };
+    }
+
+    /**
+     * Writes from the cards surface go through the same path as a keystroke in
+     * the schema form — same touched-field bookkeeping, same validate-then-
+     * `onUpdate` gate — so the two cannot get out of step.
+     */
+    applyComputePatch = (patch: Record<string, any>) => {
+        const { formData } = this.state;
+        const flatPatch: Record<string, any> = { ...patch };
+
+        if (Object.prototype.hasOwnProperty.call(patch, "cluster")) {
+            delete flatPatch.cluster;
+            flatPatch["cluster.fqdn"] = patch.cluster?.fqdn;
+        }
+
+        const fieldId = `root_${Object.keys(flatPatch)[0] ?? ""}`;
+        this.handleFormUpdate({ formData: { ...formData, ...flatPatch } }, fieldId);
+    };
+
+    onClusterSelect = (hostname: string) => {
+        const { clusters } = this.props;
+        const cluster = clusters.find((entry) => entry.hostname === hostname);
+        const [firstQueue] = (cluster?.queues ?? []).filter(
+            (queue: Record<string, any>) => queue.nodeLimit,
+        );
+
+        // Queues belong to a cluster, so a queue chosen on the previous one is
+        // meaningless here; default to the first this cluster actually offers.
+        this.applyComputePatch({ "cluster.fqdn": hostname, queue: firstQueue?.name });
+    };
+
     clusterOptions() {
         const { clusters } = this.props;
 
@@ -493,6 +583,11 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
             gridParams,
             pathForClusters,
             showAllErrors = false,
+            useComputeCards = false,
+            clusters,
+            clusterMetadata,
+            computeQuota,
+            runs = 1,
         } = this.props;
         const { formData } = this.state;
         const disableFields = !editable;
@@ -519,17 +614,57 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
         const uiSchema = this.computeUiSchema.resolveSchemaValues({
             DISABLE_FIELDS: disableFields,
             SHOW_ADVANCED_OPTIONS: showAdvancedOptions ? "updown" : "hidden",
-            CLUSTER_FQDN_WIDGET: disableFields ? "hidden" : "select",
+            CLUSTER_FQDN_WIDGET: disableFields || useComputeCards ? "hidden" : "select",
             CLUSTER_JID_WIDGET: disableFields ? "text" : "hidden",
             CLUSTER_COST_WIDGET: disableFields ? LinkWidget : "hidden",
             CLUSTER_STATUS_DOC_WIDGET: disableFields ? "hidden" : LinkWidget,
             QUEUES_OPTIONS: this.queueOptions(),
+            // With the cards surface on, these four are edited above and hidden
+            // here — hidden rather than removed, so the schema still validates
+            // them and nothing downstream has to learn a second shape.
+            RESOURCE_FIELD_WIDGET: useComputeCards ? "hidden" : "updown",
+            WALLTIME_FIELD_WIDGET: useComputeCards ? "hidden" : "text",
+            QUEUE_FIELD_WIDGET: useComputeCards ? "hidden" : "QueueSelectWidget",
         });
 
         return (
             <Box sx={{ display: "flex" }} id="compute-step-form">
                 <Box sx={{ flexGrow: 1 }}>
                     <Grid container>
+                        {useComputeCards ? (
+                            <Grid item xs={12} p={2}>
+                                <Paper sx={{ p: 3, mb: 3 }} id="compute-cards">
+                                    <Typography variant="subtitle2" gutterBottom>
+                                        Cluster
+                                    </Typography>
+                                    <ClusterCards
+                                        clusters={clusters}
+                                        clusterMetadata={clusterMetadata}
+                                        selectedHostname={formData["cluster.fqdn"]}
+                                        onSelect={this.onClusterSelect}
+                                        disabled={disableFields}
+                                    />
+                                    <Box sx={{ mt: 3 }}>
+                                        <ComputeResources
+                                            compute={this.computeFromFormData}
+                                            queues={this.getClusterQueues()}
+                                            limits={this.selectedClusterMetadata?.limits}
+                                            onChange={this.applyComputePatch}
+                                            disabled={disableFields}
+                                            showAllErrors={showAllErrors}
+                                        />
+                                    </Box>
+                                    <Box sx={{ mt: 3 }}>
+                                        <ComputeEstimatePanel
+                                            compute={this.computeFromFormData}
+                                            clusterMetadata={clusterMetadata}
+                                            quota={computeQuota}
+                                            runs={runs}
+                                        />
+                                    </Box>
+                                </Paper>
+                            </Grid>
+                        ) : null}
                         <Grid item p={2} {...(gridParams?.left || DEFAULT_GRID_PARAMS.left)}>
                             <RJSForm
                                 // RJSF only re-validates when its schema or form data
@@ -540,6 +675,7 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
                                 key={showAllErrors ? "show-all-errors" : "progressive"}
                                 schema={finalSchema as any}
                                 uiSchema={uiSchema}
+                                formContext={{ useComputeCards }}
                                 validator={rjsfValidator}
                                 formData={formData}
                                 onChange={(event: any, fieldId?: string) =>
diff --git a/src/components/ComputeResources.tsx b/src/components/ComputeResources.tsx
new file mode 100644
index 0000000..7567678
--- /dev/null
+++ b/src/components/ComputeResources.tsx
@@ -0,0 +1,194 @@
+import NumericStepperInput from "@mat3ra/cove/dist/mui/components/numeric-stepper/NumericStepperInput";
+import Button from "@mui/material/Button";
+import MenuItem from "@mui/material/MenuItem";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import React from "react";
+
+import type { ClusterLimits, ComputeConfiguration } from "../utils/computeEstimate";
+import { parseWalltimeHours } from "../utils/computeEstimate";
+import type { ComputePreset } from "../utils/computePresets";
+import {
+    COMPUTE_PRESETS,
+    findMatchingPreset,
+    presetToCompute,
+    resolvePreset,
+} from "../utils/computePresets";
+
+export interface ComputeResourcesProps {
+    compute?: ComputeConfiguration | null;
+    /** Queues the selected cluster offers. Empty until a cluster is chosen. */
+    queues?: Array<Record<string, any>>;
+    /** Limits for the selected cluster. Absent when the host published none. */
+    limits?: ClusterLimits;
+    onChange: (patch: Partial<ComputeConfiguration>) => void;
+    disabled?: boolean;
+    /** Reveal limit violations for fields the reader has not touched yet. */
+    showAllErrors?: boolean;
+    id?: string;
+}
+
+/**
+ * How much of the cluster this job wants.
+ *
+ * The three numbers that decide what a job costs used to be plain required text
+ * fields: empty on arrival, red on first paint, and silent about the limits they
+ * had to respect. Here the bounds live on the steppers, so nudging cannot
+ * produce a configuration the queue would reject, and the presets give a reader
+ * who does not know how many nodes a relaxation wants something defensible to
+ * start from.
+ *
+ * Typed values are still allowed past the bounds and reported inline — but only
+ * once the reader has been to the field, on the same rule as the rest of the
+ * form (see `utils/touchedFields`).
+ */
+export default function ComputeResources({
+    compute,
+    queues = [],
+    limits,
+    onChange,
+    disabled = false,
+    showAllErrors = false,
+    id = "compute-resources",
+}: ComputeResourcesProps) {
+    const [touched, setTouched] = React.useState<Record<string, boolean>>({});
+    const walltimeHours = parseWalltimeHours(compute?.timeLimit);
+    const activePreset = findMatchingPreset(compute, limits);
+
+    const markTouched = (field: string) => setTouched((prev) => ({ ...prev, [field]: true }));
+    const shouldShow = (field: string) => showAllErrors || touched[field];
+
+    const applyPreset = (preset: ComputePreset) => {
+        setTouched({ nodes: true, ppn: true, timeLimit: true });
+        onChange(presetToCompute(preset, limits));
+    };
+
+    const nodesError =
+        shouldShow("nodes") &&
+        limits?.maxNodes !== undefined &&
+        (compute?.nodes ?? 0) > limits.maxNodes;
+    const ppnError =
+        shouldShow("ppn") && limits?.maxPpn !== undefined && (compute?.ppn ?? 0) > limits.maxPpn;
+    const walltimeError =
+        shouldShow("timeLimit") &&
+        limits?.maxWalltimeHours !== undefined &&
+        walltimeHours !== undefined &&
+        walltimeHours > limits.maxWalltimeHours;
+
+    return (
+        <Stack spacing={2} id={id}>
+            <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
+                <Typography variant="caption" color="text.secondary">
+                    Start from
+                </Typography>
+                {COMPUTE_PRESETS.map((preset) => {
+                    const resolved = resolvePreset(preset, limits);
+                    const isActive = activePreset?.id === preset.id;
+
+                    return (
+                        <Button
+                            key={preset.id}
+                            id={`compute-preset-${preset.id}`}
+                            size="small"
+                            variant={isActive ? "contained" : "outlined"}
+                            disabled={disabled}
+                            onClick={() => applyPreset(preset)}
+                            title={`${preset.description} — ${resolved.nodes} × ${resolved.ppn}, ${resolved.walltimeHours} h`}
+                        >
+                            {preset.label}
+                        </Button>
+                    );
+                })}
+            </Stack>
+
+            <Stack direction="row" spacing={2} flexWrap="wrap" useFlexGap>
+                {queues.length ? (
+                    <TextField
+                        id="compute-queue"
+                        select
+                        label="Queue"
+                        size="small"
+                        sx={{ minWidth: 200 }}
+                        value={compute?.queue ?? ""}
+                        disabled={disabled}
+                        helperText="Determines the walltime cap and the wait"
+                        onChange={(event) => {
+                            markTouched("queue");
+                            onChange({ queue: event.target.value });
+                        }}
+                    >
+                        {queues.map((queue) => (
+                            <MenuItem key={queue.name} value={queue.name}>
+                                {queue.displayName ?? queue.name}
+                            </MenuItem>
+                        ))}
+                    </TextField>
+                ) : null}
+                <NumericStepperInput
+                    id="compute-nodes"
+                    label="Nodes"
+                    value={compute?.nodes}
+                    min={1}
+                    max={limits?.maxNodes}
+                    disabled={disabled}
+                    error={Boolean(nodesError)}
+                    helperText={
+                        nodesError
+                            ? `Over the ${limits?.maxNodes}-node limit`
+                            : describeRange(1, limits?.maxNodes)
+                    }
+                    onChange={(nodes) => {
+                        markTouched("nodes");
+                        onChange({ nodes });
+                    }}
+                />
+                <NumericStepperInput
+                    id="compute-ppn"
+                    label="Cores per node"
+                    value={compute?.ppn}
+                    min={1}
+                    max={limits?.maxPpn}
+                    unit="cores"
+                    disabled={disabled}
+                    error={Boolean(ppnError)}
+                    helperText={
+                        ppnError
+                            ? `Over the ${limits?.maxPpn}-core limit`
+                            : describeRange(1, limits?.maxPpn)
+                    }
+                    onChange={(ppn) => {
+                        markTouched("ppn");
+                        onChange({ ppn });
+                    }}
+                />
+                <TextField
+                    id="compute-walltime"
+                    label="Walltime"
+                    size="small"
+                    // Free text rather than a stepper: HH:MM:SS is what the queue
+                    // takes and what the reader recognises from the scheduler.
+                    value={compute?.timeLimit ?? ""}
+                    placeholder="HH:MM:SS"
+                    disabled={disabled}
+                    error={Boolean(walltimeError)}
+                    helperText={
+                        walltimeError
+                            ? `Over the ${limits?.maxWalltimeHours} h queue limit`
+                            : limits?.maxWalltimeHours
+                              ? `up to ${limits.maxWalltimeHours} h`
+                              : "HH:MM:SS"
+                    }
+                    onChange={(event) => {
+                        markTouched("timeLimit");
+                        onChange({ timeLimit: event.target.value });
+                    }}
+                />
+            </Stack>
+        </Stack>
+    );
+}
+
+function describeRange(min: number, max?: number): string {
+    return max === undefined ? `${min} or more` : `${min} to ${max}`;
+}
diff --git a/src/exports.ts b/src/exports.ts
index f3937e4..7b41c5e 100644
--- a/src/exports.ts
+++ b/src/exports.ts
@@ -2,3 +2,29 @@ export { default as QueuesTable } from "./components/QueuesTable";
 export { default as Compute } from "./components/Compute";
 export { ComputableEntityMixin } from "./components/mixins";
 export { ComputeForm } from "./components/ComputeForm";
+export { default as ClusterCards } from "./components/ClusterCards";
+export { default as ComputeEstimatePanel } from "./components/ComputeEstimatePanel";
+export { default as ComputeResources } from "./components/ComputeResources";
+export {
+    estimateComputeUsage,
+    findClusterMetadata,
+    formatCoreHours,
+    formatCost,
+    formatEstimate,
+    parseWalltimeHours,
+} from "./utils/computeEstimate";
+export type {
+    ClusterLimits,
+    ClusterMetadata,
+    ComputeConfiguration,
+    ComputeEstimate,
+    ComputeQuota,
+} from "./utils/computeEstimate";
+export {
+    COMPUTE_PRESETS,
+    findMatchingPreset,
+    formatWalltime,
+    presetToCompute,
+    resolvePreset,
+} from "./utils/computePresets";
+export type { ComputePreset } from "./utils/computePresets";
diff --git a/src/schemas/ui/compute_base.json b/src/schemas/ui/compute_base.json
index d4c1255..0eb999c 100644
--- a/src/schemas/ui/compute_base.json
+++ b/src/schemas/ui/compute_base.json
@@ -3,7 +3,7 @@
     "properties": {
         "queue": {
             "ui:title": "Queue",
-            "ui:widget": "QueueSelectWidget",
+            "ui:widget": "$val.QUEUE_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
@@ -16,7 +16,7 @@
         },
         "nodes": {
             "ui:title": "Nodes",
-            "ui:widget": "updown",
+            "ui:widget": "$val.RESOURCE_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
@@ -28,7 +28,7 @@
         },
         "ppn": {
             "ui:title": "Cores",
-            "ui:widget": "updown",
+            "ui:widget": "$val.RESOURCE_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
@@ -40,6 +40,7 @@
         },
         "timeLimit": {
             "ui:title": "Time Limit",
+            "ui:widget": "$val.WALLTIME_FIELD_WIDGET",
             "ui:disabled": "$val.DISABLE_FIELDS",
             "ui:description": " ",
             "ui:options": {
diff --git a/src/standalone/index.tsx b/src/standalone/index.tsx
index 290f72d..73c8be1 100644
--- a/src/standalone/index.tsx
+++ b/src/standalone/index.tsx
@@ -27,6 +27,32 @@ console.log("IVE standalone: mounting React app, schemas registered:", esseSchem
 
 // --- Mock Data ---
 
+/**
+ * Pricing, limits and queue waits the webapp would inject. Not part of the job
+ * document — without it the estimate can still count core-hours, but it cannot
+ * price them and there are no limits to hold the fields to.
+ */
+const mockClusterMetadata = [
+    {
+        fqdn: "cluster-1.mat3ra.com",
+        name: "Azure HPC Cluster 1",
+        pricePerCoreHour: 0.08,
+        currency: "USD",
+        limits: { maxNodes: 4, maxPpn: 32, maxWalltimeHours: 12 },
+        queueWaitMinutes: 8,
+    },
+    {
+        fqdn: "cluster-2.mat3ra.com",
+        name: "Azure HPC Cluster 2",
+        pricePerCoreHour: 0.05,
+        currency: "USD",
+        limits: { maxNodes: 2, maxPpn: 16, maxWalltimeHours: 6 },
+        queueWaitMinutes: 35,
+    },
+];
+
+const mockQuota = { remainingCoreHours: 500, totalCoreHours: 1000, currency: "USD" };
+
 const mockClusters = [
     {
         hostname: "cluster-1.mat3ra.com",
@@ -178,6 +204,8 @@ function App() {
     const [jsonInput, setJsonInput] = useState(JSON.stringify(defaultComputeConfig, null, 2));
     const [jsonError, setJsonError] = useState("");
     const [showAllErrors, setShowAllErrors] = useState(false);
+    // Phase 2.3 surface, opt-in: the demo is where it is reviewed before a host flips it on.
+    const [useComputeCards, setUseComputeCards] = useState(true);
     // Remount key: clearing the form has to reset the touched-field state too,
     // otherwise the previous session's touches keep their errors on screen.
     const [computeInstanceKey, setComputeInstanceKey] = useState(0);
@@ -239,8 +267,15 @@ function App() {
                     direction="row"
                     alignItems="center"
                     justifyContent="space-between"
-                    sx={{ px: 3, py: 1.5, borderBottom: 1, borderColor: "divider", bgcolor: "background.paper" }}
-                    spacing={2}>
+                    sx={{
+                        px: 3,
+                        py: 1.5,
+                        borderBottom: 1,
+                        borderColor: "divider",
+                        bgcolor: "background.paper",
+                    }}
+                    spacing={2}
+                >
                     <Typography variant="subtitle1" fontWeight={700}>
                         IVE — Infrastructure Viewer/Editor
                     </Typography>
@@ -251,7 +286,8 @@ function App() {
                         <Select
                             value={appName}
                             label="Application"
-                            onChange={(e) => setAppName(e.target.value)}>
+                            onChange={(e) => setAppName(e.target.value)}
+                        >
                             <MenuItem value="espresso">Quantum ESPRESSO</MenuItem>
                             <MenuItem value="vasp">VASP (Base Compute)</MenuItem>
                         </Select>
@@ -288,6 +324,17 @@ function App() {
                             }
                             label="Show all errors"
                         />
+                        {/* The cluster cards, resource steppers and estimate replace the
+                            schema form's cluster/nodes/cores/walltime fields. */}
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={useComputeCards}
+                                    onChange={(e) => setUseComputeCards(e.target.checked)}
+                                />
+                            }
+                            label="Cards + estimate"
+                        />
                         <Button size="small" onClick={loadEmptyCompute}>
                             Start empty
                         </Button>
@@ -312,6 +359,9 @@ function App() {
                             isAccountUsersLoading={false}
                             showHeader
                             showAllErrors={showAllErrors}
+                            useComputeCards={useComputeCards}
+                            clusterMetadata={mockClusterMetadata}
+                            computeQuota={mockQuota}
                         />
                     </Box>
 
@@ -326,7 +376,8 @@ function App() {
                             display: "flex",
                             flexDirection: "column",
                             gap: 2,
-                        }}>
+                        }}
+                    >
                         <Typography variant="subtitle1" fontWeight={600}>
                             Live Serialized Compute State (JSON)
                         </Typography>
@@ -341,7 +392,10 @@ function App() {
                                 setJsonError("");
                             }}
                             error={!!jsonError}
-                            helperText={jsonError || "You can edit this JSON and click 'LOAD JSON' to update the form."}
+                            helperText={
+                                jsonError ||
+                                "You can edit this JSON and click 'LOAD JSON' to update the form."
+                            }
                             inputProps={{
                                 style: {
                                     fontFamily: "monospace",
@@ -354,7 +408,8 @@ function App() {
                             color="primary"
                             onClick={handleLoadJson}
                             disabled={!jsonInput}
-                            fullWidth>
+                            fullWidth
+                        >
                             LOAD JSON
                         </Button>
                     </Box>
diff --git a/src/utils/computeEstimate.ts b/src/utils/computeEstimate.ts
new file mode 100644
index 0000000..8f012e9
--- /dev/null
+++ b/src/utils/computeEstimate.ts
@@ -0,0 +1,167 @@
+/**
+ * What a compute configuration will consume, and what that costs.
+ *
+ * The compute form asks for nodes, cores and a walltime and says nothing about
+ * what they add up to. The same arithmetic is needed wherever that shows: the
+ * estimate panel here, and in job-designer the context strip's estimate chip and
+ * the submit preflight's budget check. Surfaces disagreeing about what a job
+ * costs would be worse than none of them saying anything, so it lives here —
+ * beside the form that holds the live values — and job-designer imports it.
+ *
+ * Pricing, limits and quota are not in the job document: they are properties of
+ * the cluster and the account, injected by the host through `setDependencies()`
+ * (see {@link ClusterMetadata}). Everything here degrades when that metadata is
+ * absent — core-hours are always computable from the job alone, cost is not, and
+ * an absent cost is reported as absent rather than as zero.
+ */
+
+/** Per-cluster enrichment the host may inject. Every field is optional. */
+export interface ClusterMetadata {
+    /** Matches `compute.cluster.fqdn`. */
+    fqdn?: string;
+    /** Human name, when the host has a nicer one than the FQDN. */
+    name?: string;
+    pricePerCoreHour?: number;
+    /** ISO 4217, e.g. "USD". Only used for display. */
+    currency?: string;
+    limits?: ClusterLimits;
+    /** Typical wait before the job starts, in minutes. */
+    queueWaitMinutes?: number;
+}
+
+export interface ClusterLimits {
+    maxNodes?: number;
+    maxPpn?: number;
+    /** Queue walltime cap, in hours. */
+    maxWalltimeHours?: number;
+}
+
+/** Remaining allowance for the account paying for this job. */
+export interface ComputeQuota {
+    remainingCoreHours?: number;
+    totalCoreHours?: number;
+    remainingBalance?: number;
+    currency?: string;
+}
+
+export interface ComputeEstimate {
+    /** nodes × cores-per-node × walltime hours. Undefined when a term is missing. */
+    coreHours?: number;
+    /** Only when the cluster carries a price. */
+    cost?: number;
+    currency?: string;
+    walltimeHours?: number;
+    nodes?: number;
+    ppn?: number;
+}
+
+/** The compute half of a job, as the designer holds it. */
+export interface ComputeConfiguration {
+    cluster?: { fqdn?: string } | null;
+    nodes?: number;
+    ppn?: number;
+    timeLimit?: string;
+    queue?: string;
+}
+
+/**
+ * Walltime as hours. Accepts the `HH:MM:SS` and `D-HH:MM:SS` forms the compute
+ * form produces, and a bare number of hours. Returns undefined for anything it
+ * cannot read, so callers can tell "no walltime" from "zero hours".
+ */
+export function parseWalltimeHours(timeLimit?: string | number): number | undefined {
+    if (typeof timeLimit === "number") return Number.isFinite(timeLimit) ? timeLimit : undefined;
+    if (!timeLimit) return undefined;
+
+    const [dayPart, clockPart] = timeLimit.includes("-")
+        ? timeLimit.split("-")
+        : [undefined, timeLimit];
+
+    const segments = clockPart.split(":").map((segment) => Number(segment));
+    if (!segments.length || segments.some((segment) => !Number.isFinite(segment))) return undefined;
+
+    const [hours = 0, minutes = 0, seconds = 0] = segments;
+    const days = dayPart === undefined ? 0 : Number(dayPart);
+    if (!Number.isFinite(days)) return undefined;
+
+    return days * 24 + hours + minutes / 60 + seconds / 3600;
+}
+
+/** Cluster metadata for the cluster this compute points at, if the host gave any. */
+export function findClusterMetadata(
+    compute?: ComputeConfiguration | null,
+    clusterMetadata: ClusterMetadata[] = [],
+): ClusterMetadata | undefined {
+    const fqdn = compute?.cluster?.fqdn;
+    if (!fqdn) return undefined;
+
+    return clusterMetadata.find((cluster) => cluster.fqdn === fqdn);
+}
+
+/**
+ * Core-hours and cost for one run. Multi-material jobs run once per material —
+ * pass `runs` so the estimate is what the account will actually be charged
+ * rather than the per-material figure.
+ */
+export function estimateComputeUsage(
+    compute?: ComputeConfiguration | null,
+    clusterMetadata: ClusterMetadata[] = [],
+    runs = 1,
+): ComputeEstimate {
+    const walltimeHours = parseWalltimeHours(compute?.timeLimit);
+    const { nodes, ppn } = compute ?? {};
+
+    const estimate: ComputeEstimate = { walltimeHours, nodes, ppn };
+
+    if (!nodes || !ppn || walltimeHours === undefined) return estimate;
+
+    estimate.coreHours = nodes * ppn * walltimeHours * Math.max(runs, 1);
+
+    const cluster = findClusterMetadata(compute, clusterMetadata);
+    if (cluster?.pricePerCoreHour !== undefined) {
+        estimate.cost = estimate.coreHours * cluster.pricePerCoreHour;
+        estimate.currency = cluster.currency;
+    }
+
+    return estimate;
+}
+
+function formatNumber(value: number): string {
+    // Core-hours below 10 are the interesting ones to see a decimal on; above
+    // that the fraction is noise next to a queue that rounds to the minute.
+    return value >= 10 ? String(Math.round(value)) : String(Math.round(value * 10) / 10);
+}
+
+export function formatCoreHours(coreHours?: number): string | undefined {
+    if (coreHours === undefined) return undefined;
+
+    return `${formatNumber(coreHours)} core·h`;
+}
+
+export function formatCost(cost?: number, currency?: string): string | undefined {
+    if (cost === undefined) return undefined;
+
+    const amount = cost >= 10 ? cost.toFixed(0) : cost.toFixed(2);
+    if (!currency) return amount;
+
+    try {
+        return new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency,
+            maximumFractionDigits: cost >= 10 ? 0 : 2,
+        }).format(cost);
+    } catch {
+        // An unknown currency code must not take the estimate down with it.
+        return `${amount} ${currency}`;
+    }
+}
+
+/** One line for a chip or a summary row. Undefined when nothing is known yet. */
+export function formatEstimate(estimate: ComputeEstimate): string | undefined {
+    const coreHours = formatCoreHours(estimate.coreHours);
+    if (!coreHours) return undefined;
+
+    const cost = formatCost(estimate.cost, estimate.currency);
+
+    return cost ? `${coreHours} ≈ ${cost}` : coreHours;
+}
diff --git a/src/utils/computePresets.ts b/src/utils/computePresets.ts
new file mode 100644
index 0000000..8ba9367
--- /dev/null
+++ b/src/utils/computePresets.ts
@@ -0,0 +1,115 @@
+import type { ClusterLimits, ComputeConfiguration } from "./computeEstimate";
+
+/**
+ * Starting points for a compute configuration.
+ *
+ * Most readers do not know how many nodes a relaxation wants; today the form
+ * asks anyway, with empty fields and a required-field error apiece. A preset is
+ * a defensible answer to "just give me something that runs" that the reader can
+ * then adjust — and, unlike a hidden default, it says what it assumes.
+ *
+ * Presets are proposals, not policy: each is clamped to the cluster's published
+ * limits, so picking one can never produce a configuration the queue would
+ * reject.
+ */
+
+export interface ComputePreset {
+    id: string;
+    label: string;
+    /** What this preset is for, in one line. */
+    description: string;
+    nodes: number;
+    ppn: number;
+    /** Hours; formatted to `HH:MM:SS` when applied. */
+    walltimeHours: number;
+}
+
+export const COMPUTE_PRESETS: ComputePreset[] = [
+    {
+        id: "debug",
+        label: "Debug",
+        description: "Smallest run that exercises the workflow",
+        nodes: 1,
+        ppn: 4,
+        walltimeHours: 1,
+    },
+    {
+        id: "standard",
+        label: "Standard",
+        description: "A single node, most of a day",
+        nodes: 1,
+        ppn: 16,
+        walltimeHours: 8,
+    },
+    {
+        id: "production",
+        label: "Production",
+        description: "Several nodes for a long run",
+        nodes: 4,
+        ppn: 32,
+        walltimeHours: 24,
+    },
+];
+
+export function formatWalltime(hours: number): string {
+    const totalMinutes = Math.round(hours * 60);
+    const hh = Math.floor(totalMinutes / 60);
+    const mm = totalMinutes % 60;
+
+    return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}:00`;
+}
+
+/**
+ * The preset as it would actually be applied on this cluster. A "Production"
+ * preset asking for 4 nodes on a 2-node cluster becomes 2 nodes rather than a
+ * configuration that fails validation the moment it is applied.
+ */
+export function resolvePreset(preset: ComputePreset, limits?: ClusterLimits): ComputePreset {
+    if (!limits) return preset;
+
+    return {
+        ...preset,
+        nodes: Math.min(preset.nodes, limits.maxNodes ?? preset.nodes),
+        ppn: Math.min(preset.ppn, limits.maxPpn ?? preset.ppn),
+        walltimeHours: Math.min(
+            preset.walltimeHours,
+            limits.maxWalltimeHours ?? preset.walltimeHours,
+        ),
+    };
+}
+
+/** The compute fields a preset sets. Everything else — cluster, queue — is left alone. */
+export function presetToCompute(
+    preset: ComputePreset,
+    limits?: ClusterLimits,
+): Pick<ComputeConfiguration, "nodes" | "ppn" | "timeLimit"> {
+    const resolved = resolvePreset(preset, limits);
+
+    return {
+        nodes: resolved.nodes,
+        ppn: resolved.ppn,
+        timeLimit: formatWalltime(resolved.walltimeHours),
+    };
+}
+
+/**
+ * Which preset the current configuration matches, if any. Used to show the
+ * chosen preset as selected — and, once the reader edits a field, to stop
+ * claiming a preset that no longer describes what is set.
+ */
+export function findMatchingPreset(
+    compute: ComputeConfiguration | null | undefined,
+    limits?: ClusterLimits,
+): ComputePreset | undefined {
+    if (!compute?.nodes || !compute?.ppn || !compute?.timeLimit) return undefined;
+
+    return COMPUTE_PRESETS.find((preset) => {
+        const applied = presetToCompute(preset, limits);
+
+        return (
+            applied.nodes === compute.nodes &&
+            applied.ppn === compute.ppn &&
+            applied.timeLimit === compute.timeLimit
+        );
+    });
+}
diff --git a/tests/computeEstimate.tests.ts b/tests/computeEstimate.tests.ts
new file mode 100644
index 0000000..31c41ad
--- /dev/null
+++ b/tests/computeEstimate.tests.ts
@@ -0,0 +1,103 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import {
+    estimateComputeUsage,
+    findClusterMetadata,
+    formatCost,
+    formatEstimate,
+    parseWalltimeHours,
+} from "../src/utils/computeEstimate";
+
+const cluster = {
+    fqdn: "cluster-007.mat3ra.com",
+    pricePerCoreHour: 0.08,
+    currency: "USD",
+};
+
+const compute = {
+    cluster: { fqdn: cluster.fqdn },
+    nodes: 1,
+    ppn: 16,
+    timeLimit: "04:00:00",
+};
+
+describe("parseWalltimeHours", () => {
+    it("reads the HH:MM:SS the compute form produces", () => {
+        assert.equal(parseWalltimeHours("04:00:00"), 4);
+        assert.equal(parseWalltimeHours("00:30:00"), 0.5);
+    });
+
+    it("reads the D-HH:MM:SS form used for multi-day walltimes", () => {
+        assert.equal(parseWalltimeHours("2-12:00:00"), 60);
+    });
+
+    it("accepts a bare number of hours", () => {
+        assert.equal(parseWalltimeHours(12), 12);
+    });
+
+    it("returns undefined rather than zero for what it cannot read", () => {
+        // Zero would be indistinguishable from a free job, and the estimate would
+        // silently claim the run costs nothing.
+        assert.equal(parseWalltimeHours(undefined), undefined);
+        assert.equal(parseWalltimeHours(""), undefined);
+        assert.equal(parseWalltimeHours("later"), undefined);
+    });
+});
+
+describe("estimateComputeUsage", () => {
+    it("multiplies nodes, cores and walltime into core-hours", () => {
+        const estimate = estimateComputeUsage(compute, [cluster]);
+        assert.equal(estimate.coreHours, 64);
+    });
+
+    it("prices the run when the host published a rate", () => {
+        const estimate = estimateComputeUsage(compute, [cluster]);
+        assert.equal(estimate.cost, 64 * 0.08);
+        assert.equal(estimate.currency, "USD");
+    });
+
+    it("omits cost entirely when no pricing was injected", () => {
+        // Most deployments have none; a zero here would read as "free".
+        const estimate = estimateComputeUsage(compute, []);
+        assert.equal(estimate.coreHours, 64);
+        assert.equal(estimate.cost, undefined);
+    });
+
+    it("multiplies by the number of runs for a batch", () => {
+        const estimate = estimateComputeUsage(compute, [cluster], 3);
+        assert.equal(estimate.coreHours, 192);
+    });
+
+    it("gives no core-hours while the configuration is incomplete", () => {
+        assert.equal(
+            estimateComputeUsage({ ...compute, ppn: undefined }, [cluster]).coreHours,
+            undefined,
+        );
+        assert.equal(estimateComputeUsage(null, [cluster]).coreHours, undefined);
+    });
+
+    it("ignores metadata belonging to a different cluster", () => {
+        const other = { ...cluster, fqdn: "cluster-008.mat3ra.com" };
+        assert.equal(estimateComputeUsage(compute, [other]).cost, undefined);
+        assert.equal(findClusterMetadata(compute, [other, cluster])?.fqdn, cluster.fqdn);
+    });
+});
+
+describe("formatting", () => {
+    it("states core-hours alone when there is no price", () => {
+        assert.equal(formatEstimate(estimateComputeUsage(compute, [])), "64 core·h");
+    });
+
+    it("states core-hours and cost together when there is one", () => {
+        assert.equal(formatEstimate(estimateComputeUsage(compute, [cluster])), "64 core·h ≈ $5.12");
+    });
+
+    it("says nothing at all when nothing is known", () => {
+        assert.equal(formatEstimate(estimateComputeUsage(null, [])), undefined);
+    });
+
+    it("survives a currency code Intl does not know", () => {
+        assert.equal(formatCost(5.12, "NOTACURRENCY"), "5.12 NOTACURRENCY");
+    });
+});
diff --git a/tests/computePresets.tests.ts b/tests/computePresets.tests.ts
new file mode 100644
index 0000000..56f46b0
--- /dev/null
+++ b/tests/computePresets.tests.ts
@@ -0,0 +1,95 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import {
+    COMPUTE_PRESETS,
+    findMatchingPreset,
+    formatWalltime,
+    presetToCompute,
+    resolvePreset,
+} from "../src/utils/computePresets";
+
+const limits = { maxNodes: 2, maxPpn: 16, maxWalltimeHours: 6 };
+const production = COMPUTE_PRESETS.find((preset) => preset.id === "production")!;
+const debug = COMPUTE_PRESETS.find((preset) => preset.id === "debug")!;
+
+describe("formatWalltime", () => {
+    it("writes the HH:MM:SS the scheduler takes", () => {
+        assert.equal(formatWalltime(4), "04:00:00");
+        assert.equal(formatWalltime(0.5), "00:30:00");
+        assert.equal(formatWalltime(24), "24:00:00");
+    });
+
+    it("pads hours past a day rather than wrapping", () => {
+        // "1-12:00:00" is a different form; the queue takes plain hours here.
+        assert.equal(formatWalltime(36), "36:00:00");
+    });
+});
+
+describe("resolvePreset", () => {
+    it("clamps a preset to what the cluster actually allows", () => {
+        // Applying Production unclamped would set 4 nodes on a 2-node cluster —
+        // an invalid configuration produced by the button meant to avoid one.
+        const resolved = resolvePreset(production, limits);
+        assert.deepEqual(
+            { nodes: resolved.nodes, ppn: resolved.ppn, walltimeHours: resolved.walltimeHours },
+            { nodes: 2, ppn: 16, walltimeHours: 6 },
+        );
+    });
+
+    it("leaves a preset alone where it already fits", () => {
+        assert.deepEqual(resolvePreset(debug, limits), debug);
+    });
+
+    it("does not invent limits when the host published none", () => {
+        assert.deepEqual(resolvePreset(production, undefined), production);
+    });
+
+    it("clamps only the dimensions that have a limit", () => {
+        const resolved = resolvePreset(production, { maxNodes: 1 });
+        assert.equal(resolved.nodes, 1);
+        assert.equal(resolved.ppn, production.ppn);
+        assert.equal(resolved.walltimeHours, production.walltimeHours);
+    });
+});
+
+describe("presetToCompute", () => {
+    it("sets only the three fields it owns", () => {
+        assert.deepEqual(presetToCompute(debug), {
+            nodes: 1,
+            ppn: 4,
+            timeLimit: "01:00:00",
+        });
+    });
+
+    it("never proposes a configuration over the cluster's limits", () => {
+        const applied = presetToCompute(production, limits);
+        assert.ok(applied.nodes! <= limits.maxNodes);
+        assert.ok(applied.ppn! <= limits.maxPpn);
+        assert.equal(applied.timeLimit, "06:00:00");
+    });
+});
+
+describe("findMatchingPreset", () => {
+    it("recognises a configuration a preset produced", () => {
+        assert.equal(findMatchingPreset(presetToCompute(debug))?.id, "debug");
+    });
+
+    it("matches against the clamped preset, not the nominal one", () => {
+        // On a 2-node cluster, Production is 2×16×6h — that is what the button
+        // sets, so that is what it must be shown as selected for.
+        const applied = presetToCompute(production, limits);
+        assert.equal(findMatchingPreset(applied, limits)?.id, "production");
+        assert.equal(findMatchingPreset(applied)?.id, undefined);
+    });
+
+    it("stops claiming a preset once a field is edited", () => {
+        const edited = { ...presetToCompute(debug), ppn: 8 };
+        assert.equal(findMatchingPreset(edited), undefined);
+    });
+
+    it("claims nothing for a half-filled configuration", () => {
+        assert.equal(findMatchingPreset({ nodes: 1, ppn: 4 }), undefined);
+        assert.equal(findMatchingPreset(null), undefined);
+    });
+});