@qoretechnologies/reqraft 0.10.55-pr.124.g43fa138 → 0.10.55

package/src/components/form/expressions/useRenderExpression.ts

@@ -1,51 +1,36 @@
 // Copyright 2026 Qore Technologies, s.r.o.
-// The "Explain" seam. Turns an expression AST into a readable string.
+// The "Explain" seam. Turns an expression AST into its readable rendering.
 //
-// The canonical rendering is the server's `DataProvider::renderExpression`,
-// reached over the LSP custom method `dpql/renderExpression` (added next to
-// `dpql/serialize` in `QorusLspWebSocketHandler.qc`). All consumers share ONE
-// render socket: the module-level `ReqraftLspClient` below rides the per-endpoint
-// `LspSharedConnection`, and JSON-RPC request ids associate each response
-// with the caller — N expression builders on one form means N independent
-// in-flight requests on one connection, no cross-wiring.
+// The rendering is the server's `DataProvider::renderExpression`, reached over
+// the LSP custom method `dpql/renderExpression` (added next to `dpql/serialize`
+// in `QorusLspWebSocketHandler.qc`). All consumers share ONE render socket: the
+// module-level `ReqraftLspClient` below rides the per-endpoint
+// `LspSharedConnection`, and JSON-RPC request ids associate each response with
+// the caller — N expression builders on one form means N independent in-flight
+// requests on one connection, no cross-wiring.
 //
-// When the LSP is unreachable (or the server predates the method), `render`
-// falls back to the client-side approximation below; `serverRendering` tells
-// consumers which path served.
+// There is no client-side stand-in. A Qorus form does not work without Qorus,
+// so the only time the server was "unreachable" in practice was while the
+// page's first connection was still opening — and racing that with a 1.5s timer
+// replaced the real rendering with an approximation labelled "Approximate", on
+// exactly the first Explain of every page. A rendering now waits for the
+// connection; `null` means the server cannot render at all (it predates the
+// method, or the connection gave up), which the caller says plainly.
 import { nanoid } from 'nanoid';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { ReqraftLspClient } from '../../../utils/lspClient';
-import { IExpressionSchema, IExpressionValue } from './types';
+import { IExpressionValue } from './types';
 
+/* The synchronous summary a collapsed row prints — see `readFirst.ts`. It is
+   not a stand-in for this rendering and is never shown in its place. */
 export { renderExpressionToText } from './renderExpressionToText';
-import { renderExpressionToText } from './renderExpressionToText';
-
-// ── The shared render transport ───────────────────────────────────────
-// One lazy module-level client for ALL `useRenderExpression` consumers.
-// Rendering needs no document/context state, so a single connection (shared
-// further with any open DPQL editors via `LspSharedConnection`) serves
-// every builder on the page.
 
 /** Coalesce rapid re-renders per consumer (live typing) — trailing edge. */
 const RENDER_DEBOUNCE_MS = 300;
-/** How long a render call waits for the socket before falling back. */
-const CONNECT_WAIT_MS = 1500;
-/** After a failed wait, fall back instantly for this long before re-waiting. */
-const CONNECT_RETRY_COOLDOWN_MS = 10000;
 
 let renderClient: ReqraftLspClient | null = null;
 /** Set after a `-32601 method not found` — the server predates the method. */
 let methodUnsupported = false;
-let lastConnectWaitFailedAt = 0;
-
-let lastServerRendering = false;
-const serverRenderingListeners = new Set<(on: boolean) => void>();
-const setLastServerRendering = (on: boolean): void => {
-  if (on !== lastServerRendering) {
-    lastServerRendering = on;
-    serverRenderingListeners.forEach((listener) => listener(on));
-  }
-};
 
 const getRenderClient = (): ReqraftLspClient => {
   if (!renderClient) {
@@ -59,55 +44,24 @@ const getRenderClient = (): ReqraftLspClient => {
   return renderClient;
 };
 
-/**
- * Wait (briefly) for the shared connection. `connect()` is re-entrant and the
- * underlying socket keeps its own reconnect schedule, so this only bounds how
- * long a single render call blocks before falling back — after a failed wait
- * we fall back instantly for a cooldown period instead of re-blocking.
- */
-const waitForConnection = async (client: ReqraftLspClient): Promise<boolean> => {
-  if (client.isConnected) return true;
-  if (Date.now() - lastConnectWaitFailedAt < CONNECT_RETRY_COOLDOWN_MS) {
-    return false;
-  }
-  const connected = await Promise.race([
-    client.connect().then(
-      () => true,
-      () => false
-    ),
-    new Promise<boolean>((resolve) => {
-      setTimeout(() => resolve(false), CONNECT_WAIT_MS);
-    }),
-  ]);
-  if (!connected || !client.isConnected) {
-    lastConnectWaitFailedAt = Date.now();
-    return false;
-  }
-  return true;
-};
-
 /** One rendered expression — what `renderRich` resolves with. */
 export interface IRenderedExpression {
   /** The readable rendering (plain text). */
   text: string;
   /**
    * The server's richtext form — template references arrive as `tag` nodes
-   * (the IDE renders them as chips). `null` on the client-side fallback.
-   * Convert with `richtextResponseToSlate` for `RichTextFormField`.
+   * (the IDE renders them as chips). Convert with `richtextResponseToSlate`.
    */
   richtext: unknown | null;
-  /** `true` when the server `dpql/renderExpression` produced this result. */
-  server: boolean;
 }
 
-/** Server-side render; `null` means "fall back to the client-side path". */
-const renderViaServer = async (
-  value: IExpressionValue
-): Promise<{ text: string; richtext: unknown | null } | null> => {
+const renderViaServer = async (value: IExpressionValue): Promise<IRenderedExpression | null> => {
   if (methodUnsupported) return null;
   const client = getRenderClient();
-  if (!(await waitForConnection(client))) return null;
   try {
+    // Waits as long as the connection does: it has its own reconnect schedule
+    // and rejects once it gives up, so this never outlives a dead socket.
+    await client.connect();
     const result = await client.customRequest<{ rendered?: string; richtext?: unknown }>(
       'dpql/renderExpression',
       // The server accepts both the bare `{exp, args}` AST and the
@@ -131,75 +85,50 @@ export const _resetRenderExpressionTransportForTests = (): void => {
   renderClient?.disconnect();
   renderClient = null;
   methodUnsupported = false;
-  lastConnectWaitFailedAt = 0;
-  lastServerRendering = false;
 };
 
 interface IPendingRender {
   value: IExpressionValue;
-  expressions: IExpressionSchema[];
-  resolvers: Array<(rendered: IRenderedExpression) => void>;
+  resolvers: Array<(rendered: IRenderedExpression | null) => void>;
 }
 
 export interface IUseRenderExpressionResult {
-  /** Render an expression AST to a readable string. */
-  render: (value: IExpressionValue, expressions?: IExpressionSchema[]) => Promise<string>;
+  /** The readable rendering of an expression AST, or `null` when the server cannot render. */
+  render: (value: IExpressionValue) => Promise<string | null>;
   /**
    * Like `render`, but also resolves the server's richtext form (template
-   * references as `tag` nodes — chips) and which path served. For consumers
-   * that style the rendering, e.g. the builder's Explain panel.
-   */
-  renderRich: (
-    value: IExpressionValue,
-    expressions?: IExpressionSchema[]
-  ) => Promise<IRenderedExpression>;
-  /**
-   * `true` when the server `dpql/renderExpression` path served the last
-   * render; `false` while on the client-side approximation (LSP unreachable
-   * or the server predates the method).
+   * references as `tag` nodes — chips). `null` when there is nothing to render
+   * or the server cannot render it.
    */
-  serverRendering: boolean;
+  renderRich: (value: IExpressionValue) => Promise<IRenderedExpression | null>;
 }
 
 export const useRenderExpression = (): IUseRenderExpressionResult => {
-  const [serverRendering, setServerRendering] = useState(lastServerRendering);
   const pendingRef = useRef<IPendingRender | null>(null);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastRunRef = useRef(0);
 
-  useEffect(() => {
-    serverRenderingListeners.add(setServerRendering);
-    return () => {
-      serverRenderingListeners.delete(setServerRendering);
+  useEffect(
+    () => () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
       }
-      // Settle any coalesced callers with the synchronous fallback so no
-      // promise is left hanging past unmount.
+      // Settle any coalesced callers so no promise is left hanging past unmount.
       const pending = pendingRef.current;
       pendingRef.current = null;
-      pending?.resolvers.forEach((resolve) =>
-        resolve({
-          text: renderExpressionToText(pending.value, pending.expressions),
-          richtext: null,
-          server: false,
-        })
-      );
-    };
-  }, []);
+      pending?.resolvers.forEach((resolve) => resolve(null));
+    },
+    []
+  );
 
   const renderRich = useCallback(
-    (
-      value: IExpressionValue,
-      expressions: IExpressionSchema[] = []
-    ): Promise<IRenderedExpression> =>
-      new Promise<IRenderedExpression>((resolve) => {
+    (value: IExpressionValue): Promise<IRenderedExpression | null> =>
+      new Promise<IRenderedExpression | null>((resolve) => {
         // Coalesce calls per consumer: rapid live updates collapse to the
         // newest AST; every awaiting caller gets that newest rendering.
         pendingRef.current = {
           value,
-          expressions,
           resolvers: [...(pendingRef.current?.resolvers ?? []), resolve],
         };
 
@@ -208,20 +137,7 @@ export const useRenderExpression = (): IUseRenderExpressionResult => {
           pendingRef.current = null;
           if (!job) return;
           lastRunRef.current = Date.now();
-          let outcome: IRenderedExpression;
-          if (!job.value?.exp) {
-            outcome = { text: '', richtext: null, server: false };
-          } else {
-            const served = await renderViaServer(job.value);
-            setLastServerRendering(served !== null);
-            outcome = served
-              ? { ...served, server: true }
-              : {
-                  text: renderExpressionToText(job.value, job.expressions),
-                  richtext: null,
-                  server: false,
-                };
-          }
+          const outcome = job.value?.exp ? await renderViaServer(job.value) : null;
           job.resolvers.forEach((r) => r(outcome));
         };
 
@@ -240,10 +156,10 @@ export const useRenderExpression = (): IUseRenderExpressionResult => {
   );
 
   const render = useCallback(
-    (value: IExpressionValue, expressions: IExpressionSchema[] = []): Promise<string> =>
-      renderRich(value, expressions).then((r) => r.text),
+    (value: IExpressionValue): Promise<string | null> =>
+      renderRich(value).then((r) => r?.text ?? null),
     [renderRich]
   );
 
-  return { render, renderRich, serverRendering };
+  return { render, renderRich };
 };

package/src/components/form/fields/Field.tsx

@@ -2,7 +2,6 @@ import {
   IReqoreLabelProps,
   ReqoreCheckbox,
   ReqoreControlGroup,
-  ReqoreSkeleton,
   ReqoreSpan,
 } from '@qoretechnologies/reqore';
 import { IWithReqoreSize } from '@qoretechnologies/reqore/dist/types/global';
@@ -26,7 +25,15 @@ import { ReqraftObjectFormField } from './object/Object';
 import { RichTextFormField } from './rich-text/RichText';
 import { rendersCreatableValueSelect } from './allowed-values/AllowedValues';
 import { SelectFormField } from './select/Select';
-import { getSelectItemShortDescription } from './select/SelectCollection';
+import {
+  getSelectItemShortDescription,
+  getSelectItemUnavailability,
+  ISelectFieldCollectionItem,
+  ISelectFieldCollectionItemAction,
+  TSelectFieldCollectionItemTooltip,
+  UNAVAILABLE_ITEM_CLASS,
+} from './select/SelectCollection';
+import { useAllowedValueAvailability } from '../engine/OptionFieldMessages';
 import { StringFormField } from './string/String';
 import { ArrayAutoField } from './array/ArrayAutoField';
 import { AutoFormField } from './auto/AutoFormField';
@@ -38,6 +45,7 @@ import { IDataSchemaDefinition } from './schema-definition/types';
 // Direct import — circular dep (FormEngine → TemplateField → FormField → FormEngine) is safe
 // because modules are all loaded before any component renders
 import { FormEngine } from '../engine/FormEngine';
+import { FormFieldsSkeleton } from '../engine/FormFieldsSkeleton';
 
 /** Soft Qore types (softint, softstring, …) render as their concrete base —
  * the soft/hard distinction is value-level, not UI. */
@@ -68,6 +76,27 @@ const mapQorusTypeToFormFieldType = (type: string): TFormFieldType => {
 // Re-export for consumers who need to construct allowed values
 export type { IQorusAllowedValue };
 
+/**
+ * An allowed value, with the keys reqraft's pickers read.
+ *
+ * ts-toolkit 0.5.82 now declares all three on `IQorusAllowedValue`, so this is no
+ * longer a placeholder waiting on a publish. It stays because two of the three are
+ * WIDER here on purpose: the shared types are JSON-pure, since a form schema has to
+ * survive the wire, while reqraft renders in React and lets a consumer hand it a
+ * live `React.ElementType` for a tooltip's content or an action. Collapsing onto the
+ * shared type would quietly take that away from every consumer. `depends_on` is the
+ * same shape either way. Every key is optional, so a plain `IQorusAllowedValue` still
+ * is one.
+ */
+export interface IReqraftAllowedValue extends IQorusAllowedValue {
+  /** Offered only while every entry holds — a FIELD's `depends_on`, one level down. */
+  depends_on?: (string | string[])[];
+  /** A tooltip on the value's whole row in the picker. */
+  tooltip?: TSelectFieldCollectionItemTooltip;
+  /** Affordances inline with the value's name, where the row already has the height. */
+  title_actions?: ISelectFieldCollectionItemAction[];
+}
+
 export interface IFormFieldProps<T extends TFormFieldType = TFormFieldType> extends Omit<
   IQorusFormFieldSchemaBase,
   'value' | 'default_value' | 'arg_schema' | 'element_type' | 'ui_element_type'
@@ -345,7 +374,8 @@ export const FormField = <T extends TFormFieldType>({
 
       case 'hash': {
         if (argSchemaLoading) {
-          return <ReqoreSkeleton height='80px' />;
+          // A hash renders a nested FORM, so it waits in the shape of one.
+          return <FormFieldsSkeleton rows={2} />;
         }
         if (finalArgSchema) {
           return (
@@ -522,23 +552,47 @@ export const FormField = <T extends TFormFieldType>({
     }
   };
 
+  /* Resolved once for the whole list, against the form this field stands in:
+     the value's own `depends_on`, and a refusal the server had already decided.
+     Values that gate on nothing cost nothing — see the hook. */
+  const availability = useAllowedValueAvailability(allowed_values as IReqraftAllowedValue[]);
+
   /**
    * Maps an IQorusAllowedValue to the shape SelectFormField / checkboxes expect.
    * The actual selectable value lives at item.value.value (the wrapper has type metadata).
+   *
+   * The list used to be a whitelist of eleven keys, which silently dropped the
+   * row affordances (`tooltip`, `title_actions`) and `metadata` — so a host that
+   * built them, as the IDE's kind picker does, had to hand its items straight to
+   * `SelectFormField` and bypass this renderer altogether to keep them.
    */
-  const mapAllowedValue = (item: IQorusAllowedValue) => ({
-    display_name: item.display_name,
-    short_desc: item.short_desc,
-    desc: item.desc,
-    icon: item.icon,
-    image: item.image,
-    badge: item.badge as TReqoreBadge,
-    intent: item.intent,
-    disabled: item.disabled,
-    messages: item.messages,
-    actions: item.actions,
-    value: item.value?.value,
-  });
+  const mapAllowedValue = (item: IQorusAllowedValue, index = -1): ISelectFieldCollectionItem => {
+    const extended = item as IReqraftAllowedValue;
+    const resolved = availability[index];
+
+    return {
+      display_name: item.display_name,
+      short_desc: item.short_desc,
+      desc: item.desc,
+      icon: item.icon,
+      image: item.image,
+      badge: item.badge as TReqoreBadge,
+      intent: item.intent,
+      messages: item.messages,
+      actions: item.actions,
+      title_actions: extended.title_actions,
+      tooltip: extended.tooltip,
+      metadata: item.metadata,
+      // Both sources of a refusal end up here, as one state: the click handler
+      // is dropped and the reason is printed, whichever of them decided.
+      disabled: item.disabled || resolved?.available === false,
+      unavailable:
+        resolved && !resolved.available ?
+          { title: resolved.title, content: resolved.reason as string, intent: resolved.intent }
+        : undefined,
+      value: item.value?.value,
+    };
+  };
 
   /**
    * Renders the allowed-values picker.
@@ -607,17 +661,45 @@ export const FormField = <T extends TFormFieldType>({
           {allowed_values.map((item, index) => {
             const itemValue = item.value?.value;
             const checked = isEqual(value, itemValue);
+            const mapped = mapAllowedValue(item, index);
+            const unavailable = getSelectItemUnavailability(mapped);
             return (
               <ReqoreCheckbox
                 margin='right'
                 key={index}
                 label={item.display_name ?? JSON.stringify(itemValue)}
-                tooltip={getSelectItemShortDescription(mapAllowedValue(item))}
-                disabled={item.disabled}
+                tooltip={getSelectItemShortDescription(mapped)}
+                /* The reason is IN the row, not only on its hover: a checkbox
+                   has no body to bury it in, and a hover is the one affordance
+                   a touch screen and a keyboard never reach. */
+                description={unavailable?.content}
+                className={unavailable ? UNAVAILABLE_ITEM_CLASS : undefined}
+                /* Never reqore's `disabled` — it applies `DisabledElement`
+                   (`pointer-events: none`), which would take the tooltip with
+                   it. Dropping the handler is what makes the box inert; the
+                   `disabled` this used to pass was the ITEM's, and it was the
+                   one path in the picker family that destroyed its own
+                   explanation. */
+                /* `labelEffect`, not `effect`: a non-switch `ReqoreCheckbox`
+                   destructures `effect` out and never applies it — it reaches
+                   only the switch rendering — so the dimming this asked for
+                   never appeared at all. And the NAME is the right thing to
+                   dim: `description` carries the reason, and a reason has to
+                   stay readable. Same rule the collection rows follow. */
+                labelEffect={unavailable ? { opacity: 0.55 } : undefined}
+                /* `cursor: not-allowed` from reqore's own `ReadOnlyElement`
+                   rather than a hand-rolled inline style. It leaves the
+                   pointer events intact, which is what the tooltip is read
+                   through; it does NOT withhold `onClick`, but this row
+                   already withholds it below, so it is purely additive. */
+                readOnly={!!unavailable}
+                uncheckedIcon={unavailable ? 'LockLine' : undefined}
                 checked={checked}
                 intent={checked ? 'info' : undefined}
-                onClick={() =>
-                  handleChange((checked ? undefined : itemValue) as TFormFieldValueType<T>)
+                onClick={
+                  unavailable ? undefined : (
+                    () => handleChange((checked ? undefined : itemValue) as TFormFieldValueType<T>)
+                  )
                 }
               />
             );

package/src/components/form/fields/allowed-values/AllowedValues.tsx

@@ -13,8 +13,14 @@ import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/But
 import { IQorusAllowedValue, TQorusType } from '@qoretechnologies/ts-toolkit';
 import { size as count, isEqual } from 'lodash';
 import { memo, useMemo } from 'react';
-import { getSelectItemShortDescription } from '../select/SelectCollection';
+import {
+  getSelectItemShortDescription,
+  getSelectItemUnavailability,
+  UNAVAILABLE_ITEM_CLASS,
+} from '../select/SelectCollection';
 import { ISelectFormFieldItem, SelectFormField as Select } from '../select/Select';
+import { useAllowedValueAvailability } from '../../engine/OptionFieldMessages';
+import type { IReqraftAllowedValue } from '../Field';
 
 export interface IFieldAllowedValuesProps extends Pick<
   IReqoreButtonProps,
@@ -40,13 +46,23 @@ const DISALLOW_COMPACT_AO_TYPES = ['connection'];
  * Whether a creatable field's value is carried by the chip picker rather than
  * by a raw editor with a suggestion list beside it.
  *
- * `string` only, and only with something to suggest. Every other shape a
+ * String-valued only, and only with something to suggest. Every other shape a
  * creatable field can declare either does not fit a one-line chip (a document
  * — `long-string`, `binary`, `data`; a hash; a list) or would come back out of
  * one as a string (a number, a date), and a field with nothing to offer is
  * better served by the editor it has always had. Those keep today's rendering:
  * the raw editor, with the saved-and-suggested picker under it.
  *
+ * `select-string` counts, and leaving it out was the bug. A picker field
+ * declares its storage type (`*string`) and its `ui_type` (`select-string`),
+ * and by the time a schema reaches here the two have been flattened to one:
+ * `type` arrives as `select-string`. So this returned false for every such
+ * field and NEITHER renderer stood down — the picker drew the value, and the
+ * saved-and-suggested list drew the same candidates again underneath it. A
+ * test's Service and Method fields showed 183 and 7 items twice over, in two
+ * controls that set one value. A select-string's value IS a string and fits the
+ * chip, which is the only thing this predicate is really asking.
+ *
  * Both the renderer of the picker (`FieldAllowedValues`) and the renderer of
  * the raw editor (`AutoFormField`, `FormField`) ask this, so that exactly one
  * of them draws the value.
@@ -55,7 +71,8 @@ export const rendersCreatableValueSelect = (
   type?: string,
   allowCreation?: boolean,
   items?: unknown[]
-): boolean => !!allowCreation && type === 'string' && count(items) > 0;
+): boolean =>
+  !!allowCreation && (type === 'string' || type === 'select-string') && count(items) > 0;
 
 export const FieldAllowedValuesCheckGroup = memo(
   ({
@@ -87,44 +104,71 @@ export const FieldAllowedValuesCheckGroup = memo(
           : multiSelect ? 'Select one or more:'
           : 'Select one:'}
         </ReqoreSpan>
-        {items?.map((item) => (
-          <ReqoreCheckbox
-            margin='right'
-            key={item.value?.toString()}
-            label={item.display_name || JSON.stringify(item.value)}
-            tooltip={getSelectItemShortDescription(item)}
-            disabled={rest.disabled}
-            readOnly={rest.readOnly}
-            intent={item.value === value ? 'info' : undefined}
-            // `isEqual`, and only once there is a value to match. The single
-            // -select branch compared JSON.stringify(value) with
-            // JSON.stringify(item.value), and JSON.stringify(undefined) is
-            // undefined — so an unset field whose items carry no resolved value
-            // compared undefined with undefined and reported EVERY option as
-            // checked, on a field that was simultaneously "This field is
-            // required". Nothing selected must read as nothing selected.
-            checked={
-              multiSelect
-                ? Array.isArray(value) && value.some((v) => isEqual(v, item.value))
-                : value !== undefined && value !== null && isEqual(value, item.value)
-            }
-            onClick={() => {
-              if (multiSelect) {
-                let newValue: unknown[] = Array.isArray(value) ? [...value] : [];
-
-                if (newValue.some((v) => isEqual(v, item.value))) {
-                  newValue = newValue.filter((v) => !isEqual(v, item.value));
-                } else {
-                  newValue.push(item.value);
-                }
+        {items?.map((item) => {
+          const unavailable = getSelectItemUnavailability(item);
 
-                onChange(name, newValue);
-              } else {
-                onChange(name, isEqual(value, item.value) ? undefined : item.value);
+          return (
+            <ReqoreCheckbox
+              margin='right'
+              key={item.value?.toString()}
+              label={item.display_name || JSON.stringify(item.value)}
+              tooltip={getSelectItemShortDescription(item)}
+              /* The reason is IN the row: a checkbox has no body to put it in,
+                 and a hover is the one affordance a touch screen and a keyboard
+                 never reach. */
+              description={unavailable?.content}
+              className={unavailable ? UNAVAILABLE_ITEM_CLASS : undefined}
+              /* `labelEffect`, not `effect`: a non-switch `ReqoreCheckbox`
+                 destructures `effect` out and never applies it, so the dimming
+                 this asked for never appeared. The NAME is also the right
+                 thing to dim — `description` above carries the reason, and a
+                 reason has to stay readable. */
+              labelEffect={unavailable ? { opacity: 0.55 } : undefined}
+              uncheckedIcon={unavailable ? 'LockLine' : undefined}
+              /* The FIELD's `disabled` still goes through reqore — a field nobody
+                 may edit has no explanation to protect. A refused VALUE never
+                 does: `DisabledElement` is `pointer-events: none` and would take
+                 its tooltip with it. */
+              disabled={rest.disabled}
+              /* `cursor: not-allowed` from reqore's own `ReadOnlyElement`,
+                 which keeps the pointer events the tooltip is read through.
+                 It does not withhold `onClick` — the handler below does. */
+              readOnly={rest.readOnly || !!unavailable}
+              intent={item.value === value ? 'info' : undefined}
+              // `isEqual`, and only once there is a value to match. The single
+              // -select branch compared JSON.stringify(value) with
+              // JSON.stringify(item.value), and JSON.stringify(undefined) is
+              // undefined — so an unset field whose items carry no resolved value
+              // compared undefined with undefined and reported EVERY option as
+              // checked, on a field that was simultaneously "This field is
+              // required". Nothing selected must read as nothing selected.
+              checked={
+                multiSelect
+                  ? Array.isArray(value) && value.some((v) => isEqual(v, item.value))
+                  : value !== undefined && value !== null && isEqual(value, item.value)
               }
-            }}
-          />
-        ))}
+              onClick={
+                unavailable ? undefined : (
+                  () => {
+                    if (multiSelect) {
+                      let newValue: unknown[] = Array.isArray(value) ? [...value] : [];
+
+                      if (newValue.some((v) => isEqual(v, item.value))) {
+                        newValue = newValue.filter((v) => !isEqual(v, item.value));
+                      } else {
+                        newValue.push(item.value);
+                      }
+
+                      onChange(name, newValue);
+                    } else {
+                      onChange(name, isEqual(value, item.value) ? undefined : item.value);
+                    }
+                  }
+                )
+              }
+            />
+          );
+        })}
       </ReqoreControlGroup>
     );
   }
@@ -146,17 +190,35 @@ export const FieldAllowedValues = memo(
     readOnly,
     label,
   }: IFieldAllowedValuesProps) => {
+    /* Resolved against the form this field stands in — the value's own
+       `depends_on`, and a refusal the server had already decided. Both end up
+       as one state on the item: no click handler, and a reason to read. */
+    const availability = useAllowedValueAvailability(items as IReqraftAllowedValue[]);
+
     const fullItems = useMemo(() => {
       const result = [
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ...items.map(({ metadata, value, ...rest }) => ({
-          value: value?.value,
-          ...rest,
-        })),
+        ...items.map(({ metadata, value, ...rest }, index) => {
+          const resolved = availability[index];
+
+          return {
+            value: value?.value,
+            ...rest,
+            disabled: rest.disabled || resolved?.available === false,
+            unavailable:
+              resolved && !resolved.available ?
+                {
+                  title: resolved.title,
+                  content: resolved.reason as string,
+                  intent: resolved.intent,
+                }
+              : undefined,
+          };
+        }),
       ] as ISelectFormFieldItem[];
 
       return result;
-    }, [JSON.stringify(items), type, value, showSavedValues, disabled, readOnly]);
+    }, [JSON.stringify(items), availability, type, value, showSavedValues, disabled, readOnly]);
 
     const style = useMemo(() => ({ width: '100%' }), []);