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/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 4386aca..ad9447e 100644
--- a/dist/components/Compute.d.ts
+++ b/dist/components/Compute.d.ts
@@ -28,6 +28,11 @@ declare namespace Compute {
         let showStatusTrack: PropTypes.Requireable<boolean>;
         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 6b37021..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, } = 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, 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 = {
@@ -81,6 +81,16 @@ 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,
+    /** 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 bae6671..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 {
@@ -27,9 +28,33 @@ 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;
+    /**
+     * 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;
+    /** 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,14 +62,41 @@ 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;
     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 83bbe81..f1ef603 100644
--- a/dist/components/ComputeForm.js
+++ b/dist/components/ComputeForm.js
@@ -27,6 +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";
@@ -97,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 }) {
@@ -213,10 +225,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");
                 }
@@ -226,12 +247,38 @@ 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);
         });
         this.state = {
             formData,
+            touchedFields: new Set(),
         };
         this.handleFormUpdate = this.handleFormUpdate.bind(this);
         this.onNotifyUpdate = this.onNotifyUpdate.bind(this);
@@ -241,8 +288,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();
         });
     }
@@ -270,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) => {
@@ -299,8 +376,8 @@ export class ComputeForm extends React.Component {
         }
     }
     render() {
-        var _a;
-        const { editable, showAdvancedOptions, user, accountUsers, isAccountUsersLoading, compute, gridParams, pathForClusters, } = 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);
@@ -319,12 +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, { 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: [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, 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/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);
+}
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",
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 799850e..1e0c0d0 100644
--- a/src/components/Compute.jsx
+++ b/src/components/Compute.jsx
@@ -88,6 +88,11 @@ class Compute extends React.Component {
             showAdvancedOptions,
             accountUsers,
             isAccountUsersLoading,
+            showAllErrors,
+            useComputeCards,
+            clusterMetadata,
+            computeQuota,
+            runs,
         } = this.props;
 
         return (
@@ -126,6 +131,11 @@ class Compute extends React.Component {
                         showAdvancedOptions={showAdvancedOptions}
                         accountUsers={accountUsers}
                         isAccountUsersLoading={isAccountUsersLoading}
+                        showAllErrors={showAllErrors}
+                        useComputeCards={useComputeCards}
+                        clusterMetadata={clusterMetadata}
+                        computeQuota={computeQuota}
+                        runs={runs}
                     />
                 )}
                 {this.showStatusTrack && (
@@ -150,6 +160,16 @@ 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,
+    /** 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 b988010..8cab915 100644
--- a/src/components/ComputeForm.tsx
+++ b/src/components/ComputeForm.tsx
@@ -28,6 +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";
 
@@ -141,7 +147,8 @@ function QueueSelectWidget(props: Record<string, any>) {
                 anchorOrigin={{
                     vertical: "bottom",
                     horizontal: "left",
-                }}>
+                }}
+            >
                 <QueuesTable queues={queues} onQueueClick={handleSelect} />
             </Popover>
         </>
@@ -173,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) => {
@@ -186,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>
                 );
             })}
@@ -309,10 +326,34 @@ 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;
+    /**
+     * 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;
+    /** Form-data keys the reader has edited; see `utils/touchedFields`. */
+    touchedFields: ReadonlySet<string>;
 }
 
 export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormState> {
@@ -334,6 +375,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 +386,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>) {
@@ -392,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;
     }
@@ -404,9 +459,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");
@@ -418,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;
 
@@ -459,6 +582,12 @@ export class ComputeForm extends React.Component<ComputeFormProps, ComputeFormSt
             compute,
             gridParams,
             pathForClusters,
+            showAllErrors = false,
+            useComputeCards = false,
+            clusters,
+            clusterMetadata,
+            computeQuota,
+            runs = 1,
         } = this.props;
         const { formData } = this.state;
         const disableFields = !editable;
@@ -485,24 +614,73 @@ 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
+                                // 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}
+                                formContext={{ useComputeCards }}
                                 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/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 bf55121..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",
@@ -177,6 +203,25 @@ 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);
+    // 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);
+
+    /**
+     * 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 +250,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);
         }
@@ -218,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>
@@ -230,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>
@@ -256,6 +313,31 @@ 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"
+                        />
+                        {/* 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>
                     </Stack>
                 </Stack>
 
@@ -264,6 +346,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 +358,10 @@ function App() {
                             accountUsers={mockAccountUsers}
                             isAccountUsersLoading={false}
                             showHeader
+                            showAllErrors={showAllErrors}
+                            useComputeCards={useComputeCards}
+                            clusterMetadata={mockClusterMetadata}
+                            computeQuota={mockQuota}
                         />
                     </Box>
 
@@ -289,7 +376,8 @@ function App() {
                             display: "flex",
                             flexDirection: "column",
                             gap: 2,
-                        }}>
+                        }}
+                    >
                         <Typography variant="subtitle1" fontWeight={600}>
                             Live Serialized Compute State (JSON)
                         </Typography>
@@ -304,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",
@@ -317,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/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/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);
+    });
+});
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,
+        );
+    });
+});