@qoretechnologies/reqraft 0.10.45-pr.95.gc02205d → 0.10.45

package/src/components/form/engine/_structuredData/SchemaDataView.tsx

@@ -1,4 +1,10 @@
-import { ReqoreCollapsibleContent, ReqoreIcon, ReqoreP, ReqoreTag } from '@qoretechnologies/reqore';
+import {
+  ReqoreCollapsibleContent,
+  ReqoreIcon,
+  ReqoreLink,
+  ReqoreP,
+  ReqoreTag,
+} from '@qoretechnologies/reqore';
 import {
   IQorusFormField,
   IQorusFormSchema,
@@ -8,7 +14,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { useContextSelector } from 'use-context-selector';
 import { CompactRowContext } from '../compactRowContext';
-import { MONO_FONT_STACK, StyledCodePreview, StyledRowLabel, StyledRowValue } from '../compactRowStyles';
+import {
+  MONO_FONT_STACK,
+  StyledCodePreview,
+  StyledRowLabel,
+  StyledRowValue,
+} from '../compactRowStyles';
 import {
   fieldLabel,
   findAllowedValueOption,
@@ -19,7 +30,7 @@ import {
   recordIdentity,
   titleKeyFor,
 } from '../readFirst';
-import { isUiEncodedValue } from './structuredData';
+import { isEmptyUiEnvelope, isUiEncodedValue } from './structuredData';
 
 /**
  * A read-only rendering of a value THROUGH the schema that describes it.
@@ -139,10 +150,38 @@ const StyledItemTitle = styled.div<{ $color: string; $mono: boolean; $accent: st
   ${({ $mono }) => ($mono ? `font-family: ${MONO_FONT_STACK}; font-size: 15px;` : '')}
 `;
 
-/** The rule tying an item's fields to its number. */
-const StyledItemFields = styled.div<{ $border: string }>`
-  border-left: 1px solid ${({ $border }) => $border};
-  padding-left: 10px;
+/**
+ * Does this record have anything to show BELOW its heading?
+ *
+ * The heading consumes the identifying field, so a record holding only that has
+ * an empty body — and a rule drawn down an empty body is a line to nowhere.
+ */
+const hasContentUnderHeading = (record: unknown, schema?: IQorusFormSchema): boolean => {
+  if (!isRecord(record)) {
+    return true;
+  }
+  const titleKey = titleKeyFor(record, schema);
+
+  return Object.entries(record).some(
+    ([key, value]) => key !== titleKey && value !== undefined && value !== null && value !== ''
+  );
+};
+
+/** The rule tying an item's fields to its number.
+ *
+ * Same 3px as the heading's accent bar directly above it: at 1px the two read as
+ * two different devices stacked on each other rather than one rule running down
+ * the item, and the padding drops to 8px so the text stays on the same column.
+ *
+ * The rule is drawn only when something is actually under the heading. The
+ * heading is pulled left of the rule by its own negative margin, so an item
+ * whose record holds nothing but its identity showed a 1-2px sliver of line and
+ * nothing else — which reads as a rendering artefact, because that is what it
+ * was. It keeps a transparent border in that case so the column does not shift.
+ */
+const StyledItemFields = styled.div<{ $border: string; $rule: boolean }>`
+  border-left: 3px solid ${({ $border, $rule }) => ($rule ? $border : 'transparent')};
+  padding-left: 8px;
   min-width: 0;
 `;
 
@@ -349,24 +388,22 @@ const FieldValue = ({
               style={{ flexShrink: 0, marginRight: 6, verticalAlign: 'middle' }}
             />
           : null}
-          {formatted}
           {isNavigableUrl(field.value) ?
-            // The read-only detail views make an address openable, and a
-            // preview that shows the same value should not be the one place it
-            // is inert. A real anchor, so middle-click and "copy link address"
-            // work; `stopPropagation` because the row around it toggles.
-            <a
+            // The address IS the link — it used to render as inert text with a
+            // separate icon button beside it to open it, which is two things
+            // where there is one. ReqoreLink renders a real anchor, so
+            // middle-click and "copy link address" still work;
+            // `stopPropagation` because the row around it toggles.
+            <ReqoreLink
               className='schema-view-open-url'
               href={field.value}
               target='_blank'
               rel='noreferrer noopener'
-              aria-label='Open in a new tab'
-              style={{ marginLeft: 4, verticalAlign: 'middle' }}
-              onClick={(event) => event.stopPropagation()}
+              onClick={(event: React.MouseEvent) => event.stopPropagation()}
             >
-              <ReqoreIcon icon='ExternalLinkLine' size='11px' />
-            </a>
-          : null}
+              {formatted}
+            </ReqoreLink>
+          : formatted}
         </span>
       }
     </StyledRowValue>
@@ -391,92 +428,109 @@ const SchemaRecord = ({
   // The SAME host renderer the row above uses for a `code-editor` field. Read
   // from context rather than threaded through props: a nested level is arbitrarily
   // deep, and the renderer is a property of the form, not of any one level.
-  const codePreviewRenderer = useContextSelector(
-    CompactRowContext,
-    (v) => v.codePreviewRenderer
-  );
+  const codePreviewRenderer = useContextSelector(CompactRowContext, (v) => v.codePreviewRenderer);
   const cHover = useContextSelector(CompactRowContext, (v) => v.cHover);
 
   return (
-  <StyledFields className='schema-view-fields'>
-    {orderedKeys(record, schema)
-      .filter((key) => key !== skipKey)
-      .map((key) => {
-      const fieldSchema = schema[key] as TQorusFormFieldSchema | undefined;
-      const nested = (fieldSchema as { arg_schema?: IQorusFormSchema } | undefined)?.arg_schema;
-      const value = unwrap(record[key]);
-      const label = fieldLabel(key, fieldSchema);
-      const labelWithType =
-        showTypes && fieldSchema?.type ? `${label} · ${fieldSchema.type}` : label;
-
-      // A field that describes its own level renders AS that level, indented
-      // under its name — the same decision, one step down.
-      if (nested && (isRecord(value) || Array.isArray(value))) {
-        return (
-          <React.Fragment key={key}>
-            <StyledNestedLabel>
-              <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
-            </StyledNestedLabel>
-            <StyledNested $border={colors.border}>
-              <SchemaLevel value={value} schema={nested} showTypes={showTypes} colors={colors} />
-            </StyledNested>
-          </React.Fragment>
-        );
-      }
-
-      // A code value is source, and source is read as source: the host's renderer
-      // gives it the syntax highlighting (and read-only LSP hover) it has in the
-      // Source Code field, and "Show more" keeps a long body from taking over the
-      // preview. Flattening it to one mono line — which is what a plain value cell
-      // does — throws all of that away for a field whose whole content is code.
-      if (isCodeField(fieldSchema) && typeof value === 'string') {
-        return (
-          <React.Fragment key={key}>
-            <StyledNestedLabel>
-              <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
-            </StyledNestedLabel>
-            <StyledCodeCell onClick={(event) => event.stopPropagation()}>
-              <ReqoreCollapsibleContent
-                maxCollapsedHeight={96}
-                buttonProps={{ className: 'options-readfirst-viewmore' }}
-              >
-                {codePreviewRenderer ?
-                  codePreviewRenderer({
-                    value,
-                    name: key,
-                    schema: fieldSchema,
-                    options: schema,
-                    values: record as never,
-                  })
-                : <StyledCodePreview
-                    className='options-readfirst-code'
-                    $bg={cHover}
-                    $border={`${colors.border}88`}
-                    $fg={colors.key}
+    <StyledFields className='schema-view-fields'>
+      {orderedKeys(record, schema)
+        .filter((key) => key !== skipKey)
+        .map((key) => {
+          const fieldSchema = schema[key] as TQorusFormFieldSchema | undefined;
+          const nested = (fieldSchema as { arg_schema?: IQorusFormSchema } | undefined)?.arg_schema;
+          // A schema-declared field the form materialised but never filled in
+          // arrives as `{type: 'int'}` with no `value` key. `unwrap` cannot see
+          // that — `isUiEncodedValue` requires a `value` — so it fell through as
+          // CONTENT and was wrapped as one below, and `formatOptionValue` counted
+          // the envelope's own `type` key: an untouched Runtime Defaults read
+          // "Timeout (Seconds) 1 field" three times over while the sub-form it
+          // previews correctly said 0/3 set. `fieldSchema` is what licenses the
+          // reading: the schema declares this field, so a `{type}`-only object
+          // under it is an empty envelope, never somebody's data.
+          const raw = record[key];
+          // `!nested` is the discriminator, and it is not a detail: a field that
+      // declares its OWN level describes what is inside it, so `{type: 'default'}`
+      // there is content — the scheme's Scheme Type, reading "Default RBAC" —
+      // not an envelope. Only a leaf can be empty in this sense.
+      const value =
+        fieldSchema && !nested && isEmptyUiEnvelope(raw) ? undefined : unwrap(raw);
+          const label = fieldLabel(key, fieldSchema);
+          const labelWithType =
+            showTypes && fieldSchema?.type ? `${label} · ${fieldSchema.type}` : label;
+
+          // A field that describes its own level renders AS that level, indented
+          // under its name — the same decision, one step down.
+          if (nested && (isRecord(value) || Array.isArray(value))) {
+            return (
+              <React.Fragment key={key}>
+                <StyledNestedLabel>
+                  <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
+                </StyledNestedLabel>
+                <StyledNested $border={colors.border}>
+                  <SchemaLevel
+                    value={value}
+                    schema={nested}
+                    showTypes={showTypes}
+                    colors={colors}
+                  />
+                </StyledNested>
+              </React.Fragment>
+            );
+          }
+
+          // A code value is source, and source is read as source: the host's renderer
+          // gives it the syntax highlighting (and read-only LSP hover) it has in the
+          // Source Code field, and "Show more" keeps a long body from taking over the
+          // preview. Flattening it to one mono line — which is what a plain value cell
+          // does — throws all of that away for a field whose whole content is code.
+          if (isCodeField(fieldSchema) && typeof value === 'string') {
+            return (
+              <React.Fragment key={key}>
+                <StyledNestedLabel>
+                  <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
+                </StyledNestedLabel>
+                <StyledCodeCell onClick={(event) => event.stopPropagation()}>
+                  <ReqoreCollapsibleContent
+                    maxCollapsedHeight={96}
+                    buttonProps={{ className: 'options-readfirst-viewmore' }}
                   >
-                    {value}
-                  </StyledCodePreview>
-                }
-              </ReqoreCollapsibleContent>
-            </StyledCodeCell>
-          </React.Fragment>
-        );
-      }
+                    {codePreviewRenderer ?
+                      codePreviewRenderer({
+                        value,
+                        name: key,
+                        schema: fieldSchema,
+                        options: schema,
+                        values: record as never,
+                      })
+                    : <StyledCodePreview
+                        className='options-readfirst-code'
+                        $bg={cHover}
+                        $border={`${colors.border}88`}
+                        $fg={colors.key}
+                      >
+                        {value}
+                      </StyledCodePreview>
+                    }
+                  </ReqoreCollapsibleContent>
+                </StyledCodeCell>
+              </React.Fragment>
+            );
+          }
 
-      return (
-        <React.Fragment key={key}>
-          <StyledFieldLabel $color={colors.key} title={label}>
-            {labelWithType}
-          </StyledFieldLabel>
-          <FieldValue
-            field={{ type: fieldSchema?.type, value } as IQorusFormField}
-            fieldSchema={fieldSchema}
-            color={colors.key}
-          />
-        </React.Fragment>
-      );
-    })}
-  </StyledFields>
+          return (
+            <React.Fragment key={key}>
+              <StyledFieldLabel $color={colors.key} title={label}>
+                {labelWithType}
+              </StyledFieldLabel>
+              <FieldValue
+                field={{ type: fieldSchema?.type, value } as IQorusFormField}
+                fieldSchema={fieldSchema}
+                color={colors.key}
+              />
+            </React.Fragment>
+          );
+        })}
+    </StyledFields>
   );
 };
 
@@ -502,7 +556,10 @@ const SchemaLevel = ({
           return (
             <StyledItem key={index} className='schema-view-item'>
               <StyledMarker $color={colors.muted}>{index + 1}.</StyledMarker>
-              <StyledItemFields $border={colors.border}>
+              <StyledItemFields
+                $border={colors.border}
+                $rule={hasContentUnderHeading(record, schema)}
+              >
                 {isRecord(record) ?
                   <>
                     {(() => {

package/src/components/form/engine/_structuredData/structuredData.ts

@@ -52,6 +52,26 @@ export const isRecord = (value: unknown): value is Record<string, unknown> =>
 export const isStructuredContainerValue = (value: unknown): boolean =>
   Array.isArray(value) || isRecord(value);
 
+/**
+ * A field the form materialised but left UNSET: `{type: 'int'}`, no `value` key.
+ *
+ * `fixOptions` omits the key entirely when the value is undefined, so this is
+ * what an untouched sub-field of a schema-declared hash looks like on the wire.
+ * It is an EMPTY ENVELOPE, never content — and every renderer has to agree on
+ * that, because the ones that do not count the envelope's own `type` key and
+ * report an unset field as "1 field" while the sub-form correctly says 0 set.
+ *
+ * Deliberately separate from {@link isUiEncodedValue}, which requires a `value`
+ * and therefore cannot see this shape. Callers gate on knowing the field is
+ * schema-declared: without a schema saying so, a `{type: …}` object could
+ * legitimately be somebody's data.
+ */
+export const isEmptyUiEnvelope = (value: unknown): boolean =>
+  isRecord(value) &&
+  typeof value.type === 'string' &&
+  !('value' in value) &&
+  Object.keys(value).every((key) => UI_ENVELOPE_KEYS.has(key));
+
 export const isUiEncodedValue = (value: unknown): value is IUiEncodedValue => {
   if (!isRecord(value) || typeof value.type !== 'string' || !('value' in value)) {
     return false;

package/src/components/form/engine/compactRowStyles.ts

@@ -61,6 +61,9 @@ export const PANEL_LEFT_CSS = `calc(${LABEL_COL} + ${COMPACT_ROW_PAD_X + COMPACT
 export const StyledCompactPanel = styled(ReqorePanel)<{
   $headerBg: string;
   $nested?: boolean;
+  /** True when the toolbar renders no search row (hidden via `compactToolbar`,
+   *  self-hidden on a single-option form, or no toolbar at all). */
+  $tightHeader?: boolean;
 }>`
   > .reqore-panel-title {
     /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost
@@ -71,7 +74,17 @@ export const StyledCompactPanel = styled(ReqorePanel)<{
         'backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateZ(0);'
       )}
     padding-top: ${GAP_FROM_SIZE[HEADER_GAP]}px;
-    padding-bottom: ${GAP_FROM_SIZE[HEADER_GAP]}px;
+    /* A header with a SEARCH ROW keeps the \`big\` gap below it — a tall
+       interactive control earns separation from the content it filters. A
+       header without one (search hidden via \`compactToolbar\`, self-hidden on
+       a single-option form, or no toolbar at all) is a thin strip, and at
+       \`big\` its padding stacked onto the panel content's own 8px into a 26px
+       dead band between the completion meter and the first status box —
+       rejected on build #140 as "unnecessarily big". \`normal\` lands it at
+       the boxes' own 10px rhythm, and scoping the change here keeps every
+       search-bearing form pixel-identical. */
+    padding-bottom: ${({ $tightHeader }) =>
+      $tightHeader ? GAP_FROM_SIZE.normal : GAP_FROM_SIZE[HEADER_GAP]}px;
   }
 
   /* Group framing. The HORIZONTAL rule is a real element in the header
@@ -690,3 +703,27 @@ export const StyledGroupBody = styled.div<{
     padding-bottom: 0;
   }
 `;
+
+// One absorbed sibling, rendered inside its host row's container rather than
+// on a row of its own (see `absorb_fields`). The pair this exists for is a code
+// editor and its language: reading them as two unrelated rows one above the
+// other said they were separate decisions, and they are not.
+//
+// Laid out as label-then-control on one line so it reads as a property of the
+// element it now sits in, and separated from the editor below it by a hairline
+// rather than a gap — the two share one container, so the seam has to look like
+// a division inside it and not like two stacked things.
+export const StyledAbsorbedField = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid ${({ theme }) => `${theme.main}22`};
+`;
+
+export const StyledAbsorbedLabel = styled(ReqoreP)`
+  flex: 0 0 auto;
+  margin: 0;
+`;

package/src/components/form/engine/compactToolbarContext.ts

@@ -24,6 +24,14 @@ export interface ICompactToolbarOptionalField {
  */
 export interface ICompactToolbarContext {
   readOnly?: boolean;
+  /** Which parts to render, already resolved from the engine's `compactToolbar`
+   *  prop — every key present, no undefined to re-default here. */
+  parts: {
+    completion: boolean;
+    search: boolean;
+    fields: boolean;
+    help: boolean;
+  };
   // Completion meter
   invalidCount: number;
   attentionCount: number;

package/src/components/form/engine/readFirst.ts

@@ -5,7 +5,7 @@ import {
   TQorusType,
 } from '@qoretechnologies/ts-toolkit';
 import { isRendererOnlyUiType } from './rendererTypes';
-import { isUiEncodedValue } from './_structuredData/structuredData';
+import { isEmptyUiEnvelope, isUiEncodedValue } from './_structuredData/structuredData';
 import { renderExpressionToText } from '../expressions/renderExpressionToText';
 import { IExpressionValue } from '../expressions/types';
 import yaml from 'js-yaml';
@@ -155,6 +155,45 @@ export const isOptionValueEmpty = (value: unknown): boolean =>
   value === '' ||
   (Array.isArray(value) && value.length === 0);
 
+/**
+ * A schema-declared hash whose every entry is a materialised-but-unset field.
+ *
+ * `preselected` on a sub-field means "show this in the form so the author sees
+ * it exists" — a FORM instruction. Opening the sub-form materialises each one,
+ * `fixOptions` writes `{type: 'int'}` with no value, and the draft autosaves
+ * that, so the stored hash permanently carries keys that stand for nothing.
+ *
+ * The row then read those keys as content: `Runtime Defaults` listed three
+ * sub-fields with no values, counted toward "7/12 set", and showed a green
+ * set-dot — while the sub-form it summarises correctly said 0/3 set. Nothing
+ * was ever entered.
+ *
+ * Requires the sub-schema, and requires each key to be declared by it: without
+ * that, `{type: 'x'}` could be somebody's data rather than an empty envelope.
+ */
+export const isUnsetSchemaHash = (value: unknown, schema?: TQorusFormFieldSchema): boolean => {
+  const argSchema = (schema as { arg_schema?: Record<string, unknown> } | undefined)?.arg_schema;
+  if (!argSchema || typeof argSchema !== 'object') {
+    return false;
+  }
+  const inner =
+    value && typeof value === 'object' && !Array.isArray(value) && 'value' in (value as object) ?
+      (value as { value: unknown }).value
+    : value;
+  if (!inner || typeof inner !== 'object' || Array.isArray(inner)) {
+    return false;
+  }
+  const keys = Object.keys(inner as object);
+  return (
+    keys.length > 0 &&
+    keys.every(
+      (key) =>
+        !!(argSchema as Record<string, unknown>)[key] &&
+        isEmptyUiEnvelope((inner as Record<string, unknown>)[key])
+    )
+  );
+};
+
 export const isFixedCompactAllowedValueOption = (
   schema: TQorusFormFieldSchema | undefined
 ): boolean => {
@@ -200,6 +239,13 @@ export const shouldAutoCollapseCompactOption = (
  * Prefer the matching allowed_values entry's display_name (fallback `name`)
  * over the raw stored value.
  *
+ * A LIST carries its options under `element_allowed_values` — they constrain
+ * each element, not the list itself — so a multi-select that was missing here
+ * printed what it stores rather than what you picked: `orders, batch` for
+ * fields whose picker reads "Orders, Batch". The gap shows worst exactly where
+ * allowed values earn their keep, since the stored form is often not readable
+ * at all (a permission code, `PO_REQUIRE_TYPES`, an app-specific id).
+ *
  * Exported (as `findAllowedValueOption`) because the form engine's value
  * validation has to answer the SAME question — "is this stored value one of the
  * declared choices?" — and answering it differently loses data. An
@@ -215,13 +261,30 @@ export const findAllowedValueOption = (
   value: unknown,
   schema?: TQorusFormFieldSchema
 ): any | undefined => {
-  const s = schema as { allowed_values?: any[]; items?: any[] } | undefined;
-  const options = s?.allowed_values?.length ? s.allowed_values : s?.items;
+  const s = schema as
+    { allowed_values?: any[]; element_allowed_values?: any[]; items?: any[] } | undefined;
+  const options =
+    (s?.allowed_values?.length && s.allowed_values) ||
+    (s?.element_allowed_values?.length && s.element_allowed_values) ||
+    s?.items;
   if (!options?.length) {
     return undefined;
   }
+  // A stored element can be the bare value or the typed `{type, value}`
+  // envelope the form engine round-trips; match either against either.
+  const stored =
+    value && typeof value === 'object' && 'value' in (value as Record<string, unknown>) ?
+      (value as Record<string, unknown>).value
+    : value;
+
   return options.find(
-    (option) => option?.value?.value === value || option?.value === value || option?.name === value
+    (option) =>
+      option?.value?.value === value ||
+      option?.value === value ||
+      option?.name === value ||
+      option?.value?.value === stored ||
+      option?.value === stored ||
+      option?.name === stored
   );
 };
 
@@ -499,7 +562,7 @@ export const formatOptionValue = (
 ): string => {
   const value = option?.value;
 
-  if (isOptionValueEmpty(value)) {
+  if (isOptionValueEmpty(value) || isUnsetSchemaHash(value, schema)) {
     return '';
   }
 
@@ -641,34 +704,55 @@ export const getHashEntries = (
   const argSchema = (schema as { arg_schema?: Record<string, TQorusFormFieldSchema> } | undefined)
     ?.arg_schema;
 
-  return Object.keys(hashObject).map((key) => {
-    const raw = hashObject![key];
-    const subSchema = argSchema?.[key];
-    // A schema-declared (`arg_schema`) hash stores each entry as a
-    // `{ type, value }` field descriptor — gate on the sub-schema's presence.
-    // A schema-less hash *usually* stores raw values, but the server's typed
-    // serialization can nest envelopes there too (e.g. a hash default_value
-    // whose entries are `{ type: 'string', value: 'x' }`) — recognise those by
-    // their strict shape (a string `type`, a `value`, and no foreign keys) so
-    // the sub-row shows 'x' rather than counting the envelope's own keys.
-    const isFieldShape =
-      (!!subSchema &&
-        !!raw &&
-        typeof raw === 'object' &&
-        !Array.isArray(raw) &&
-        'value' in (raw as object)) ||
-      isTypedEnvelope(raw);
-    const subOption: IQorusFormField =
-      isFieldShape ?
-        (raw as IQorusFormField)
-      : ({ type: subSchema?.type as IQorusFormField['type'], value: raw } as IQorusFormField);
-
-    return {
-      name: key,
-      label: subSchema?.display_name || key,
-      value: formatOptionValue(subOption, subSchema),
-    };
-  });
+  return Object.keys(hashObject)
+    .filter((key) => {
+      // Only sub-fields with a value belong in a read view. `preselected`
+      // materialises a field so the FORM shows it; that is not a statement
+      // that the object has one, and listing it here says the opposite of
+      // what the sub-form says.
+      const subSchema = argSchema?.[key];
+      return !(subSchema && isEmptyUiEnvelope(hashObject![key]));
+    })
+    .map((key) => {
+      const raw = hashObject![key];
+      const subSchema = argSchema?.[key];
+      // A schema-declared (`arg_schema`) hash stores each entry as a
+      // `{ type, value }` field descriptor — gate on the sub-schema's presence.
+      // A schema-less hash *usually* stores raw values, but the server's typed
+      // serialization can nest envelopes there too (e.g. a hash default_value
+      // whose entries are `{ type: 'string', value: 'x' }`) — recognise those by
+      // their strict shape (a string `type`, a `value`, and no foreign keys) so
+      // the sub-row shows 'x' rather than counting the envelope's own keys.
+      // `'value' in raw` is FALSE for a materialised-but-unset field: `fixOptions`
+      // omits the key entirely when the value is undefined, leaving `{type: 'x'}`.
+      // Requiring `value` therefore classed that envelope as a raw hash VALUE and
+      // counted its own `type` key, so an untouched Runtime Defaults collapsed to
+      // "Timeout (Seconds) 1 field" three times over while the sub-form correctly
+      // said 0/3 set. With a sub-schema present, a `type`-only object is an empty
+      // envelope, never content.
+      // Shared with SchemaDataView, which previews this same value one level
+      // down: two renderers disagreeing about what an unset field looks like is
+      // how the row said "1 field" long after this one stopped.
+      const isEmptyEnvelope = !!subSchema && isEmptyUiEnvelope(raw);
+      const isFieldShape =
+        (!!subSchema &&
+          !!raw &&
+          typeof raw === 'object' &&
+          !Array.isArray(raw) &&
+          'value' in (raw as object)) ||
+        isEmptyEnvelope ||
+        isTypedEnvelope(raw);
+      const subOption: IQorusFormField =
+        isFieldShape ?
+          (raw as IQorusFormField)
+        : ({ type: subSchema?.type as IQorusFormField['type'], value: raw } as IQorusFormField);
+
+      return {
+        name: key,
+        label: subSchema?.display_name || key,
+        value: formatOptionValue(subOption, subSchema),
+      };
+    });
 };
 
 const titleCase = (value: string): string =>
@@ -823,7 +907,10 @@ export const isSet = (value: unknown): boolean =>
  * (that is the order the form puts the fields in), then anything stored that the
  * schema does not mention, so undescribed data is shown rather than dropped.
  */
-export const orderedKeys = (record: Record<string, unknown>, schema: IQorusFormSchema): string[] => {
+export const orderedKeys = (
+  record: Record<string, unknown>,
+  schema: IQorusFormSchema
+): string[] => {
   const described = Object.keys(schema).filter((key) => isSet(unwrap(record[key])));
   const extra = Object.keys(record).filter((key) => !(key in schema) && isSet(unwrap(record[key])));
   return [...described, ...extra];
@@ -904,7 +991,10 @@ export const recordIdentity = (
 
   return {
     key,
-    text: formatOptionValue({ type: fieldSchema?.type, value: raw } as IQorusFormField, fieldSchema),
+    text: formatOptionValue(
+      { type: fieldSchema?.type, value: raw } as IQorusFormField,
+      fieldSchema
+    ),
     label: fieldLabel(key, fieldSchema),
     mono: !findAllowedValueOption(raw, fieldSchema),
   };

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

@@ -569,7 +569,9 @@ export const FormField = <T extends TFormFieldType>({
       return (
         <ReqoreControlGroup vertical size='tiny'>
           <ReqoreSpan effect={{ opacity: 0.6, uppercase: true, weight: 'bold' }} size='tiny'>
-            Select one:
+            {/* Headed by the field's own name; "Select one:" only when it has
+                none. Same rule as FieldAllowedValuesCheckGroup. */}
+            {display_name ? `${display_name}:` : 'Select one:'}
           </ReqoreSpan>
           {allowed_values.map((item, index) => {
             const itemValue = item.value?.value;