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

package/src/components/form/engine/CompactRow.tsx

@@ -19,19 +19,22 @@ import {
   TQorusFormFieldSchema,
 } from '@qoretechnologies/ts-toolkit';
 import flatten from 'lodash/flatten';
+import isEqual from 'lodash/isEqual';
 import size from 'lodash/size';
 import React, { memo } from 'react';
 import { useContextSelector } from 'use-context-selector';
-import { hasAllDependenciesFullfilled } from '../../../helpers/validations';
+import { hasAllDependenciesFullfilled, parseDependency } from '../../../helpers/validations';
 import {
   findTemplate,
   getTemplateTagStyle,
   isValueTemplate,
+  describeTemplateReference,
+  splitTemplateTokens,
   TTemplateMeta,
 } from '../../../helpers/templates';
-import { richtextToSegments } from '../../../helpers/common';
+import { richtextToSegments, richtextToString } from '../../../helpers/common';
 import { ReadOnlyTemplateTag } from '../fields/template/ReadOnlyTemplateTag';
-import { ReqraftCodeSizeTag } from '../../codeSize';
+import { describeCodeSize, formatCodeChars, formatCodeLines } from '../../codeSize';
 import { Description } from '../../Description';
 import { useMarkdownRenderer } from '../../Description/markdownRendererContext';
 import { FocusedEditing } from '../../FocusedEditing';
@@ -45,6 +48,7 @@ import {
   StyledColumn,
   StyledEditCard,
   StyledLabelBlock,
+  StyledAbsorbedField,
   StyledLabelDesc,
   StyledRowActions,
   StyledRowInset,
@@ -135,6 +139,26 @@ const MAX_INLINE_OPTION_ACTIONS = 2;
 // One read-first row: label | value | action collapsed; the real editor (the
 // classic renderOption) expanded. `hidden` = search-surfaced optional —
 // activating the row adds the field first.
+/**
+ * The text inside a rich-text envelope, when a list item is one.
+ *
+ * An option like Gmail's `to` is `type: "list"`, `element_type: "string"`,
+ * `supports_templates: true`: each element is a plain string that may carry
+ * template tags, so its editor is a rich-text one and the element value arrives
+ * wrapped as `{type: "richtext", value: [{type: "paragraph", …}]}`.
+ *
+ * That envelope is a string in a coat, not structured data. The hash-list test
+ * unwraps `item.value`, found the Slate document — an object — and classed a
+ * list of email addresses as a list of hashes, so the row drew an expandable
+ * `type / children / text` tree instead of the address the operator typed.
+ */
+export const richtextItemText = (item: unknown): string | undefined =>
+  item && typeof item === 'object' && (item as { type?: unknown }).type === 'richtext' ?
+    richtextToString(
+      (item as { value?: Parameters<typeof richtextToString>[0] }).value
+    )
+  : undefined;
+
 export const CompactRow = memo(
   ({
     optionName,
@@ -143,10 +167,16 @@ export const CompactRow = memo(
     clustered = false,
     clusterFirst = false,
     clusterLast = false,
+    absorbedFields,
   }: {
     optionName: string;
     optionField: IQorusFormField;
     hidden?: boolean;
+    /** Siblings this row renders inside its own container instead of leaving
+     *  them a row each — declared by the schema's `absorb_fields`. The pair it
+     *  exists for is a code editor and its language: one decision, so one
+     *  element. */
+    absorbedFields?: string[];
     // Rendered inside a required-group cluster: leading status node + rail, and no
     // per-row "one of" chip (the cluster header carries it). first/last trim the
     // rail segment so it spans node-to-node, not past the end members.
@@ -157,6 +187,13 @@ export const CompactRow = memo(
     const readOnly = useContextSelector(CompactRowContext, (v) => v.readOnly);
     const commitMode = useContextSelector(CompactRowContext, (v) => v.commitMode);
     const options = useContextSelector(CompactRowContext, (v) => v.options);
+
+    // An absorbed field keeps its own name — it is a different field, not a
+    // property of its host — so the label comes from its schema exactly as it
+    // would on its own row.
+    const getAbsorbedLabel = (absorbedName: string): string =>
+      (options?.[absorbedName] as { display_name?: string } | undefined)?.display_name ||
+      absorbedName;
     const codePreviewRenderer = useContextSelector(CompactRowContext, (v) => v.codePreviewRenderer);
     const markdownRenderer = useMarkdownRenderer();
     const operators = useContextSelector(CompactRowContext, (v) => v.operators);
@@ -219,6 +256,27 @@ export const CompactRow = memo(
 
     // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
     // its "N fields" summary (sub-fields reveal beneath the row).
+    /**
+     * Flattens the line breaks in one prose segment of a richtext SUMMARY.
+     *
+     * The read-first row is a single line: every other value type reaches it
+     * through `whiteSpace: 'nowrap'`, which collapses newlines for free. The
+     * richtext branch is the only one that opts into `'pre'` — it has to, or the
+     * spaces that separate a word from the chip beside it are dropped — and `pre`
+     * also honours the newlines, which `nowrap` would have eaten.
+     *
+     * So a genuinely multi-line value (an alert rule's Gmail message body is five
+     * `\n`-separated lines) gave each segment after the first a blank first line.
+     * The wrapper centres its items, so a two-line-tall box centred against
+     * one-line chips put every word 12px below the chip beside it, and the row
+     * read as a staircase. Measured on supah: prose boxes 30px against 14px chips.
+     *
+     * A space, not nothing: consecutive prose segments are merged before they get
+     * here, so a value with a break and no chip between its lines would otherwise
+     * lose the word boundary entirely.
+     */
+    const collapseSummaryBreaks = (text: string): string => text.replace(/\s*\r?\n\s*/g, ' ');
+
     const renderReadFirstValue = (
       field: IQorusFormField,
       schema: TQorusFormFieldSchema | undefined,
@@ -296,7 +354,32 @@ export const CompactRow = memo(
       // see `showCodePreview` below. Keeps the row height fixed while making
       // multi-line source readable without opening the full editor.
       if (valueType === 'code-editor' && typeof field?.value === 'string') {
-        return <ReqraftCodeSizeTag code={field.value} />;
+        // An absorbed sibling has no row of its own, so a COLLAPSED host has to
+        // carry its value or it disappears from the form entirely when closed.
+        // It reads as a chip beside the size chip — "Qore · 62 lines" — which
+        // is the same summary the read-only interface pages already show.
+        return (
+          <ReqoreControlGroup gapSize='tiny' verticalAlign='center' wrap>
+            {(absorbedFields ?? []).map((absorbedName) => {
+              const absorbedValue = (
+                availableOptions?.[absorbedName] as IQorusFormField | undefined
+              )?.value;
+              if (absorbedValue === undefined || absorbedValue === null || absorbedValue === '') {
+                return null;
+              }
+              return (
+                <ReqoreTag
+                  key={absorbedName}
+                  className='options-readfirst-absorbed-tag'
+                  size='small'
+                  minimal
+                  label={String(absorbedValue)}
+                  tooltip={getAbsorbedLabel(absorbedName)}
+                />
+              );
+            })}
+          </ReqoreControlGroup>
+        );
       }
 
       // Markdown read summary: the row prints the value's prose (the markdown
@@ -343,6 +426,15 @@ export const CompactRow = memo(
         return <ReadOnlyTemplateTag value={field.value} templates={templates} size='small' />;
       }
 
+      // A LIST whose elements are rich-text envelopes is a list of strings, so it
+      // reads as those strings. Without this the row fell through to the generic
+      // list summary and printed a bare count ("1 item") above the structured
+      // tree, never the address itself.
+      if (Array.isArray(field?.value) && field.value.some((item) => richtextItemText(item) !== undefined)) {
+        const texts = field.value.map((item) => richtextItemText(item) ?? String(item ?? ''));
+        return <span style={textStyle}>{texts.filter((text) => text !== '').join(', ')}</span>;
+      }
+
       // Richtext read-first summary: inline $-chips for embedded template tags
       // with the prose around them (the IDE intent scheme via getTemplateTagStyle),
       // kept lightweight instead of mounting the full editor — that lives in the
@@ -373,6 +465,49 @@ export const CompactRow = memo(
                         ?.metadata as TTemplateMeta | undefined
                     )}
                   />
+                : <span key={index} style={{ whiteSpace: 'pre' }}>
+                    {collapseSummaryBreaks(segment.text)}
+                  </span>
+              )}
+            </span>
+          );
+        }
+      }
+
+      // An expression summarises to one line of text, and a template reference
+      // inside it printed as its own raw token — `$data:{…}` renders a value as
+      // code where a name belongs. Chip every reference here, on the richtext
+      // branch's pattern above, so the wrapper (`trim(`…`)`) still reads as the
+      // text it is while the reference reads as a name.
+      //
+      // Unconditionally: a surface with no catalogue (the Automation Hub
+      // template preview never fetches one) still shows the reference's own
+      // path, which is the point — a conditional chip is no chip at all
+      // exactly where the raw token looks worst.
+      if ((field as { is_expression?: boolean })?.is_expression && formatted) {
+        const segments = splitTemplateTokens(formatted);
+        const named = segments.map((segment) =>
+          segment.kind === 'token' ?
+            { ...segment, ...describeTemplateReference(templates, segment.text) }
+          : segment
+        );
+
+        if (named.some((segment) => segment.kind === 'token')) {
+          return (
+            <span style={{ ...wrapStyle, gap: 4, overflow: 'hidden' }}>
+              {named.map((segment, index) =>
+                segment.kind === 'token' ?
+                  <ReqoreTag
+                    key={index}
+                    size='tiny'
+                    // Inherit the row's font size so the chip shares a baseline
+                    // with the text around it — see the richtext branch above.
+                    style={{ fontSize: 'inherit' }}
+                    icon='ExchangeDollarLine'
+                    label={segment.label}
+                    tooltip={segment.text}
+                    {...getTemplateTagStyle(segment.item?.metadata as TTemplateMeta | undefined)}
+                  />
                 : <span key={index} style={{ whiteSpace: 'pre' }}>
                     {segment.text}
                   </span>
@@ -589,6 +724,41 @@ export const CompactRow = memo(
       return () => window.clearTimeout(id);
     }, [isExpanded, optionName, autoFocusNameRef]);
 
+    // What the field held when it was opened — the baseline Cancel restores.
+    //
+    // Deliberately NOT `originalValue`, which is the whole form's load-time
+    // snapshot. That answers "undo every change ever made to this field", which
+    // is a different question from "forget what I just typed"; a Cancel sitting
+    // next to Done has to mean the second one, or it silently throws away edits
+    // the user made earlier and had already accepted.
+    //
+    // The dependency list is `isExpanded` alone on purpose: adding the value
+    // would re-take the snapshot on every keystroke, leaving nothing to cancel.
+    const editEntryValue = React.useRef<{ value: any; type?: string } | undefined>(undefined);
+    React.useEffect(() => {
+      if (isExpanded) {
+        editEntryValue.current = { value: optionField?.value, type: optionField?.type };
+      } else {
+        editEntryValue.current = undefined;
+      }
+    }, [isExpanded]);
+
+    // True while the open editor holds something other than what it opened with.
+    const editedSinceOpened =
+      isExpanded &&
+      !!editEntryValue.current &&
+      !isEqual(editEntryValue.current.value, optionField?.value);
+
+    // Discard whatever was typed since the field was opened and close it. Used
+    // by both the Cancel button and Escape, so the two cannot diverge.
+    const cancelEdit = React.useCallback(() => {
+      const snapshot = editEntryValue.current;
+      if (snapshot && !isEqual(snapshot.value, optionField?.value)) {
+        handleValueChange(optionName, snapshot.value, snapshot.type);
+      }
+      toggleExpandedOption(optionName);
+    }, [handleValueChange, optionField?.value, optionName, toggleExpandedOption]);
+
     // The sub-schema describing this field's value, when it has one. A value the
     // form knows the shape of is previewed THROUGH that shape (see
     // `SchemaDataView`); only genuinely undescribed data falls through to the
@@ -646,6 +816,18 @@ export const CompactRow = memo(
       [optionField?.value, previewArgSchema]
     );
 
+    // The form-load revert: back to the value the FORM was loaded with.
+    //
+    // In an open editor this is offered only when it would do something
+    // `cancelEditButton` does not — that is, when the field was already
+    // modified BEFORE it was opened, so "undo this edit" and "undo every edit"
+    // are different answers. On the usual path (open an untouched field, type,
+    // change your mind) the two are identical, and two buttons with the same
+    // effect and different names are worse than one.
+    //
+    // It is unconditional on the READ row, where it renders inline in the
+    // status-dot column — there is no edit in progress there to cancel, so the
+    // whole-field revert is the only undo that makes sense.
     const revertButton =
       changed ?
         <ReqoreButton
@@ -727,6 +909,43 @@ export const CompactRow = memo(
         />
       : null;
     const isPassiveCloseAction = fixedAllowedValueOption || readOnly;
+    // Cancel — the counterpart to Done, and the answer to "how do I get out of
+    // here without keeping this". Done was the only way to leave an open field,
+    // so every way out committed: the check, clicking away, and Escape (which
+    // closed without discarding, so it committed too, silently).
+    //
+    // Shown only while there is something to discard. On an untouched field
+    // Cancel and Done would do exactly the same thing, and two buttons that
+    // differ in name but not in effect are worse than one.
+    //
+    // Not offered when the close action is passive (read-only, or a fixed
+    // choice) — nothing can have been typed, so there is nothing to cancel.
+    const cancelEditButton =
+      !isPassiveCloseAction && editedSinceOpened ?
+        <ReqoreButton
+          className='options-readfirst-cancel'
+          size='small'
+          flat
+          minimal
+          fixed
+          icon='CloseLine'
+          intent='warning'
+          // "Cancel edit", not "Cancel": a bare Cancel collides with the one
+          // in Reqore's confirmation modal, and this one is specifically about
+          // abandoning the edit rather than dismissing a dialog.
+          aria-label='Cancel edit'
+          tooltip='Cancel edit — discard the changes made since this field was opened'
+          onClick={(event: React.MouseEvent) => {
+            event.stopPropagation();
+            cancelEdit();
+          }}
+        />
+      : null;
+    // See `revertButton` above for why this is conditional in the edit row.
+    const openedWithFormLoadValue =
+      !editEntryValue.current ||
+      isEqual(editEntryValue.current.value, originalValue.current?.[optionName]?.value);
+    const editRowRevertButton = openedWithFormLoadValue ? null : revertButton;
     const closeExpandedFieldButton = (
       <ReqoreButton
         className='options-readfirst-done'
@@ -825,6 +1044,11 @@ export const CompactRow = memo(
         />
       : null;
 
+    // The gap rides on the message itself rather than on the panel around it:
+    // the panel is a vertical ReqoreControlGroup, which owns its own layout and
+    // stacks children flush, and the class rule that used to carry a 4px gap
+    // never reached this element at all — which is why two messages read as one
+    // two-tone block with no space between them.
     const renderInfoStrip = (m: TInfoMsg, index: number) => (
       <ReqoreMessage
         key={`${m.content}-${index}`}
@@ -833,6 +1057,7 @@ export const CompactRow = memo(
         flat
         intent={m.intent as never}
         title={m.title}
+        style={{ marginBottom: 8 }}
       >
         {m.content}
       </ReqoreMessage>
@@ -911,11 +1136,68 @@ export const CompactRow = memo(
       />
     );
 
+    // The absorbed siblings' controls, rendered inside this row.
+    //
+    // Each keeps its own label so it is still identifiable — it is a different
+    // field, not a property of this one — but it sits inside this row's
+    // container, above the editor, so the pair reads as the single decision it
+    // is. `renderOption` is the same function the row uses for its own editor,
+    // so an absorbed field renders exactly as it would have on its own row.
+    const absorbedNodes =
+      absorbedFields?.length ?
+        absorbedFields
+          .map((absorbedName) => {
+            const absorbedField = availableOptions?.[absorbedName] as IQorusFormField | undefined;
+            if (!absorbedField) return null;
+            return (
+              // No label element of its own: the editor now heads itself with
+              // the field's name (see FieldAllowedValuesCheckGroup), so a label
+              // beside it printed the same word twice.
+              <StyledAbsorbedField key={absorbedName} className='options-readfirst-absorbed'>
+                <div style={{ minWidth: 0, flex: 1 }}>
+                  {renderOption(absorbedName, absorbedField, 'small', true)}
+                </div>
+              </StyledAbsorbedField>
+            );
+          })
+          .filter(Boolean)
+      : null;
+
     // Declared here rather than beside the hash rows below: the `isExpanded`
     // branch returns before that point, and its editor needs to know whether it is
     // holding code.
     const valueType = getValueType(optionField, schema);
 
+    // How much source there is describes the FIELD, not its value, so the count
+    // sits under the field's name — the same rule `lineCountNote` already
+    // follows for a multi-line markdown value, and the same reason: the value
+    // column carries the value and nothing else. It renders on the read row and
+    // the open one alike, because "how much code is here?" is a question that
+    // outlives opening the editor.
+    //
+    // It is a plain monospaced note rather than a tag, and deliberately the same
+    // one `lineCountNote` renders: both answer "how big is this field's value?"
+    // in the same corner of the same column, so stating one as a chip and the
+    // other as text made two spellings of one idea.
+    const codeSizeNode =
+      valueType === 'code-editor' &&
+      typeof optionField?.value === 'string' &&
+      optionField.value !== '' ?
+        (() => {
+          const { lines, chars } = describeCodeSize(optionField.value as string);
+          return (
+            <ReqoreP
+              className='options-readfirst-label-code-size'
+              size='tiny'
+              effect={{ opacity: 0.45, textAlign: 'left' }}
+              style={{ fontFamily: 'monospace' }}
+            >
+              {`${formatCodeChars(chars)} ${formatCodeLines(lines)}`}
+            </ReqoreP>
+          );
+        })()
+      : null;
+
     if (isExpanded) {
       if (inlineEditable) {
         const collapse = () => toggleExpandedOption(optionName);
@@ -931,7 +1213,7 @@ export const CompactRow = memo(
             }
             {...clusterHoverProps}
           >
-            <StyledLabelBlock>
+            <StyledLabelBlock className='options-readfirst-label-block'>
               <StyledRowLabel
                 role='button'
                 tabIndex={0}
@@ -966,6 +1248,7 @@ export const CompactRow = memo(
                   {labelShortDesc}
                 </StyledLabelDesc>
               : null}
+              {codeSizeNode}
             </StyledLabelBlock>
             <div
               ref={editorRef}
@@ -973,7 +1256,11 @@ export const CompactRow = memo(
               onKeyDown={(event) => {
                 if (event.key === 'Escape') {
                   event.stopPropagation();
-                  collapse();
+                  // Escape discards. It used to call `collapse()`, which closed
+                  // the field and KEPT whatever had been typed — the one
+                  // keystroke every editor treats as "get me out of this
+                  // without saving" was the quietest way to commit.
+                  cancelEdit();
                 }
               }}
             >
@@ -989,11 +1276,32 @@ export const CompactRow = memo(
 
                   It renders here, at the top of the value cell, which is exactly where
                   it sits on the read row — so the switch moves nothing. */}
-              {valueType === 'code-editor' && typeof optionField?.value === 'string' ?
-                <div className='options-readfirst-editing-summary'>
-                  <ReqraftCodeSizeTag code={optionField.value} />
-                </div>
+              {/* The field's own schema messages follow it into the editor.
+
+                  A message is guidance about the value, so the moment it matters
+                  most is while the value is being changed — and a diagnostic is
+                  useless anywhere else: it names a line the author can only act
+                  on with the editor in front of them. They used to render on the
+                  READ row alone, so opening the field to fix what one said was
+                  what made it disappear. Worse for a host that opens a field on
+                  arrival: the message was never visible at all.
+
+                  Above the editor rather than below it, and above the absorbed
+                  siblings, because it is the reason the author opened the row. */}
+              {panelMessages.length ?
+                <ReqoreControlGroup
+                  className='options-readfirst-info-panel'
+                  vertical
+                  fluid
+                  gapSize='normal'
+                >
+                  {panelMessages.map(renderInfoStrip)}
+                </ReqoreControlGroup>
               : null}
+              {/* Absorbed siblings sit at the TOP of the value cell, above the
+                  editor they belong to — the language you are writing in is
+                  read before the code, not after it. */}
+              {absorbedNodes}
               {renderOption(optionName, optionField, 'small', true)}
             </div>
             <StyledRowActions>
@@ -1002,7 +1310,8 @@ export const CompactRow = memo(
                   OptionFieldMessages strip below already says it — showing
                   both was redundant. The tag stays on READ rows, where no
                   message strip is visible. */}
-              {revertButton}
+              {editRowRevertButton}
+              {cancelEditButton}
               {clearValueButton}
               {inlineOptionActions.map((action, index) =>
                 renderInjectedOptionAction(action, index)
@@ -1189,6 +1498,10 @@ export const CompactRow = memo(
               {closeExpandedFieldButton}
             </ReqoreControlGroup>
           </div>
+          {/* Absorbed siblings render in the CARD form of an open field too,
+              not only the inline row — which shape a field opens into depends
+              on its type, and absorbing must not depend on that. */}
+          {absorbedNodes}
           {/* Same fullscreen focused-editing affordance as the classic cards —
               the modal mounts when this option is focused. */}
           <FocusedEditing
@@ -1240,6 +1553,9 @@ export const CompactRow = memo(
       Array.isArray(optionField?.value) &&
       optionField.value.length > 0 &&
       optionField.value.some((item) => {
+        if (richtextItemText(item) !== undefined) {
+          return false;
+        }
         const inner =
           item && typeof item === 'object' && 'value' in (item as Record<string, unknown>) ?
             (item as Record<string, unknown>).value
@@ -1257,6 +1573,19 @@ export const CompactRow = memo(
       valueType === 'code-editor' &&
       typeof optionField?.value === 'string' &&
       optionField.value.length > 0;
+    // A richtext value that renders as CHIPS is drawn in full by the row itself:
+    // the chips are the value, and the reader is looking straight at it. The
+    // native `title` below would then hover the raw source of the very thing the
+    // chips replace ("[$fsminput:severity] $fsminput:alert_code") — and, because
+    // each chip carries its own Reqore tooltip, hovering one fires BOTH: the chip
+    // popover and the row's browser tooltip, in different places, saying almost
+    // the same thing. Only the popover shows up in a screenshot, which is what
+    // made the pair hard to report.
+    const showsTemplateChips =
+      !hidden &&
+      valueType === 'richtext' &&
+      Array.isArray(optionField?.value) &&
+      richtextToSegments(optionField.value as never).some((segment) => segment.kind === 'tag');
     // Markdown reads the same way for the same reason: the row itself can only
     // show a line of text, and for markdown that line is the SOURCE — the reader
     // gets `## ` and `**` where the point of the value is what it looks like
@@ -1293,35 +1622,45 @@ export const CompactRow = memo(
       showFieldTypes ?
         `<${(schema?.ui_type as string) || (schema?.type as string) || 'auto'}${(schema as { ui_element_type?: string } | undefined)?.ui_element_type ? `[${(schema as { ui_element_type?: string }).ui_element_type}]` : ''}>`
       : null;
-    // Disabled rows (schema flag or unmet deps) can't open — a lock + reason
-    // renders instead. Form-level readOnly still opens in view mode (Close).
+    // A `readonly` field is one the system owns — an assigned id, a recorded
+    // provenance. The server states that on the field itself; only the older
+    // compat projection also mapped it to `disabled`, so on this path the form
+    // was handed `readonly` alone and rendered an editable control for a value
+    // no answer of the user's can change.
+    const fieldReadonly = !!(schema as { readonly?: boolean } | undefined)?.readonly;
+    // Disabled rows (schema flag, readonly, or unmet deps) can't open — a lock +
+    // reason renders instead. Form-level readOnly still opens in view mode (Close).
     const fieldDisabled =
       !hidden &&
       !readOnly &&
       (!!schema?.disabled ||
+        fieldReadonly ||
         !hasAllDependenciesFullfilled(schema?.depends_on, availableOptions, options || {}));
     const fieldDisabledReason =
-      schema?.disabled ? 'This field is disabled' : 'Disabled — dependencies are not fulfilled';
+      schema?.disabled ? 'This field is disabled'
+      : fieldReadonly ? 'Set by Qorus — not editable'
+      : 'Disabled — dependencies are not fulfilled';
     // Dependency contract: top-level entries must ALL hold; a nested array
-    // means ANY of its entries; `name=value` requires that exact value.
+    // means ANY of its entries; `name=value` requires that exact value, and
+    // `name!=value` requires any other answer. Parsed by the same helper the
+    // predicate uses, so the lock cannot describe a rule the form does not apply.
     const dependencyEntries =
-      fieldDisabled && !schema?.disabled ?
+      fieldDisabled && !schema?.disabled && !fieldReadonly ?
         ((schema?.depends_on || []) as (string | string[])[])
       : [];
     const describeDependency = (dep: string) => {
-      const eqIndex = dep.indexOf('=');
-      const depName = eqIndex === -1 ? dep : dep.slice(0, eqIndex);
-      const expected = eqIndex === -1 ? undefined : dep.slice(eqIndex + 1);
+      const { name: depName, op, value: expected } = parseDependency(dep);
       const depLabel = (options?.[depName]?.display_name as string) || depName;
       const depValue = (availableOptions as TQorusForm)?.[depName]?.value;
       return {
         name: depName,
         exists: !!options?.[depName],
-        label: expected === undefined ? depLabel : `${depLabel} = ${expected}`,
+        label: !op ? depLabel : `${depLabel} ${op === '=' ? '=' : '≠'} ${expected}`,
         fulfilled:
-          expected === undefined ?
-            !isOptionValueEmpty(depValue)
-          : depValue != null && String(depValue) === expected,
+          !op ? !isOptionValueEmpty(depValue)
+          : depValue == null ? false
+          : op === '=' ? String(depValue) === expected
+          : String(depValue) !== expected,
       };
     };
     const depHighlightNames = (flatten(dependencyEntries as never[]) as string[])
@@ -1456,7 +1795,7 @@ export const CompactRow = memo(
         {...clusterHoverProps}
       >
         {clusterNode}
-        <StyledLabelBlock>
+        <StyledLabelBlock className='options-readfirst-label-block'>
           <StyledRowLabel title={schema?.short_desc || undefined} $color={cKey}>
             {rowChromeIcon}
             {/* label + asterisk + help flow as ONE inline run, so the asterisk
@@ -1487,6 +1826,7 @@ export const CompactRow = memo(
               {labelShortDesc}
             </StyledLabelDesc>
           : null}
+          {codeSizeNode}
           {lineCountNote ?
             <ReqoreP
               className='options-readfirst-label-lines'
@@ -1502,14 +1842,17 @@ export const CompactRow = memo(
           // A code field draws its whole value in the preview below, with
           // "Show more" for the rest, so a hover carrying the same text is
           // noise -- and a native tooltip holding a few hundred lines is
-          // unreadable anyway. Every other value keeps its hover, which is the
-          // only way to read one that the row had to truncate.
+          // unreadable anyway. A chipped richtext value is the same case: the row
+          // already draws it in full, and its chips carry their own tooltips.
+          // Every other value keeps its hover, which is the only way to read one
+          // that the row had to truncate.
           title={
             (
               !empty &&
               !hidden &&
               !showCodePreview &&
               !showMarkdownPreview &&
+              !showsTemplateChips &&
               typeof formatted === 'string'
             ) ?
               formatted
@@ -1536,8 +1879,20 @@ export const CompactRow = memo(
               reads less like a summary than like a second, disagreeing answer.
               An UNDESCRIBED value keeps its summary: the data tree beneath it
               says nothing about what the value MEANS, so the summary is still
-              the only line that does. */}
-          {showMarkdownPreview || previewWithSchema ? null : (
+              the only line that does.
+
+              Both suppressions are conditional on the replacement ACTUALLY
+              rendering. `previewWithSchema` only asks whether the value and its
+              `arg_schema` COULD be drawn as a schema preview; whether one is
+              drawn is `showStructuredPreview`, and the two disagree for a field
+              whose value type is a host ui_type rather than a list or a hash —
+              a test's `cases` (`ui_type: "test-cases"`, an array of case hashes
+              with an `arg_schema`) could be previewed but is not, because
+              `isHashList` only recognises `list`/`free-list`/`array`. The row
+              then dropped its summary in favour of a preview that never came
+              and rendered nothing at all: a test with cases read as a bare
+              "Cases" and looked unset until it was opened. */}
+          {showMarkdownPreview || (previewWithSchema && showStructuredPreview) ? null : (
             <span className='options-readfirst-valuetext'>
               {hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted)}
             </span>
@@ -1555,7 +1910,14 @@ export const CompactRow = memo(
               value (full width of the value column) — never pushed down by the
               label's short_desc. */}
           {panelMessages.length ?
-            <div className='options-readfirst-info-panel'>{panelMessages.map(renderInfoStrip)}</div>
+            <ReqoreControlGroup
+              className='options-readfirst-info-panel'
+              vertical
+              fluid
+              gapSize='normal'
+            >
+              {panelMessages.map(renderInfoStrip)}
+            </ReqoreControlGroup>
           : null}
           {/* The structured hash/list preview also lives in the value cell, so it
               starts directly under the value summary ("N fields"), not below the