@qoretechnologies/reqraft 0.10.25 → 0.10.26

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

@@ -10,6 +10,8 @@ import {
   ReqoreTagGroup,
 } from '@qoretechnologies/reqore';
 import { IReqoreDropdownItem } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
+import { IReqorePanelAction } from '@qoretechnologies/reqore/dist/components/Panel';
+import { resolveOptionActions } from './optionActions';
 import {
   IQorusFormField,
   TQorusForm,
@@ -35,17 +37,17 @@ import {
   StyledActionSlot,
   StyledCardHeading,
   StyledCardLabel,
-  StyledClusterNode,
+  StyledCodePreview,
   StyledColorSwatch,
   StyledColumn,
   StyledEditCard,
-  StyledInfoPanel,
   StyledLabelBlock,
   StyledLabelDesc,
   StyledRowActions,
   StyledRowInset,
   StyledRowLabel,
   StyledRowValue,
+  StyledStatusDot,
 } from './compactRowStyles';
 import { getOptionFieldMessages } from './OptionFieldMessages';
 import {
@@ -55,7 +57,9 @@ import {
   getAllowedValueImage,
   getFileSize,
   getHashEntries,
+  getReadFirstStatus,
   getValueType,
+  isFixedCompactAllowedValueOption,
   isOptionValueEmpty,
   optionHasImages,
 } from './readFirst';
@@ -92,7 +96,7 @@ const COMPACT_COMPLEX_TYPES = new Set([
 
 // Card editors that hold a SINGLE value through one text-bearing input — their
 // built-in ReqoreInput clear duplicates the card's own "Clear value" action, so
-// we suppress it (the card ✕ is the single source). Structural/multi-input
+// we suppress it (the card trash action is the single source). Structural/multi-input
 // editors (hash, list, schema…) and polymorphic ones (auto/any) are NOT listed:
 // their per-sub-field clears are distinct affordances and must stay, while the
 // card ✕ clears the whole value. (Operators force a card on a scalar value, so
@@ -106,6 +110,12 @@ const COMPACT_SINGLE_VALUE_TYPES = new Set([
   'method-name',
 ]);
 
+// How many consumer-injected actions may sit inline in a row before the rest
+// overflow into the row's menu. A row's action slot shares space with the
+// value; an unbounded button strip would squeeze the value out, and the
+// consumer controls how many actions it injects.
+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 —
@@ -142,34 +152,23 @@ export const CompactRow = memo(
     const isExpanded = useContextSelector(CompactRowContext, (v) =>
       v.expandedOptions.includes(optionName)
     );
+    const autoFocusNameRef = useContextSelector(CompactRowContext, (v) => v.autoFocusNameRef);
     const isHighlighted = useContextSelector(CompactRowContext, (v) =>
       v.highlightedOptions.includes(optionName)
     );
     const isFlashed = useContextSelector(CompactRowContext, (v) =>
       v.flashedOptions.includes(optionName)
     );
-    const infoPanelOverride = useContextSelector(
-      CompactRowContext,
-      (v) => v.infoPanelOverrides[optionName]
-    );
     const setHighlightedOptions = useContextSelector(
       CompactRowContext,
       (v) => v.setHighlightedOptions
     );
-    const setInfoPanelOverrides = useContextSelector(
-      CompactRowContext,
-      (v) => v.setInfoPanelOverrides
-    );
     const setFocusedEditing = useContextSelector(CompactRowContext, (v) => v.setFocusedEditing);
     const readRowHeights = useContextSelector(CompactRowContext, (v) => v.readRowHeights);
     const originalValue = useContextSelector(CompactRowContext, (v) => v.originalValue);
     const availableOptions = useContextSelector(CompactRowContext, (v) => v.availableOptions);
     const requiredGroupsInfo = useContextSelector(CompactRowContext, (v) => v.requiredGroupsInfo);
     const handleValueChange = useContextSelector(CompactRowContext, (v) => v.handleValueChange);
-    const handleAddOptionalFieldChange = useContextSelector(
-      CompactRowContext,
-      (v) => v.handleAddOptionalFieldChange
-    );
     const toggleExpandedOption = useContextSelector(
       CompactRowContext,
       (v) => v.toggleExpandedOption
@@ -186,18 +185,21 @@ export const CompactRow = memo(
     );
     const getTypeForOption = useContextSelector(CompactRowContext, (v) => v.getTypeForOption);
     const confirmAction = useContextSelector(CompactRowContext, (v) => v.confirmAction);
+    const optionActions = useContextSelector(CompactRowContext, (v) => v.optionActions);
+    const collapseOptionActions = useContextSelector(
+      CompactRowContext,
+      (v) => v.collapseOptionActions
+    );
     const renderOption = useContextSelector(CompactRowContext, (v) => v.renderOption);
     const theme = useContextSelector(CompactRowContext, (v) => v.theme);
     const cMuted = useContextSelector(CompactRowContext, (v) => v.cMuted);
     const templates = useContextSelector(CompactRowContext, (v) => v.templates);
-    const cFaint = useContextSelector(CompactRowContext, (v) => v.cFaint);
     const cKey = useContextSelector(CompactRowContext, (v) => v.cKey);
     const cDivider = useContextSelector(CompactRowContext, (v) => v.cDivider);
     const cHover = useContextSelector(CompactRowContext, (v) => v.cHover);
     const cDanger = useContextSelector(CompactRowContext, (v) => v.cDanger);
     const cWarning = useContextSelector(CompactRowContext, (v) => v.cWarning);
     const cInfo = useContextSelector(CompactRowContext, (v) => v.cInfo);
-    const cBg = useContextSelector(CompactRowContext, (v) => v.cBg);
 
     // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
     // its "N fields" summary (sub-fields reveal beneath the row).
@@ -270,6 +272,26 @@ export const CompactRow = memo(
         );
       }
 
+      // Code-editor read summary: replace the truncated string with a chip
+      // showing line count + character count. The actual code renders below
+      // the row as a monospace `<pre>` inside a `ReqoreCollapsibleContent` —
+      // 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') {
+        const lines = field.value.split('\n').length;
+        const chars = field.value.length;
+        return (
+          <ReqoreTag
+            size='small'
+            minimal
+            intent='info'
+            icon='CodeLine'
+            label={`${lines} ${lines === 1 ? 'line' : 'lines'}`}
+            labelKey={`${chars} ${chars === 1 ? 'char' : 'chars'}`}
+          />
+        );
+      }
+
       // Selected allowed-value / enum item with a logo (e.g. language images):
       // render it beside the value, where it belongs — not as the field's icon.
       const allowedImage = getAllowedValueImage(field?.value, schema);
@@ -330,6 +352,97 @@ export const CompactRow = memo(
 
     const schema = options?.[optionName];
     const label = schema?.display_name || optionName;
+    const injectedOptionActions = React.useMemo<IReqorePanelAction[]>(
+      () =>
+        schema ?
+          resolveOptionActions(optionActions, {
+            name: optionName,
+            schema,
+            value: availableOptions?.[optionName],
+          }).filter((action) => action.show !== false)
+        : [],
+      [availableOptions?.[optionName], optionActions, optionName, schema]
+    );
+    // Which injected actions stay as inline buttons, and which move into the
+    // overflow menu. Everything collapses on touch / narrow viewports — a
+    // hover-gated button is unreachable without a hover — and anything past the
+    // inline cap overflows regardless, so a consumer injecting ten actions can
+    // never push the row's value out of view.
+    const [inlineOptionActions, menuOptionActions] = React.useMemo<
+      [IReqorePanelAction[], IReqorePanelAction[]]
+    >(
+      () =>
+        collapseOptionActions ?
+          [[], injectedOptionActions]
+        : [
+            injectedOptionActions.slice(0, MAX_INLINE_OPTION_ACTIONS),
+            injectedOptionActions.slice(MAX_INLINE_OPTION_ACTIONS),
+          ],
+      [collapseOptionActions, injectedOptionActions]
+    );
+    const injectedOptionActionMenuItems = React.useMemo<IReqoreDropdownItem[]>(
+      () =>
+        menuOptionActions.map(
+          (action, index) =>
+            ({
+              // A panel action labels itself with `label`, but an icon-only one
+              // (the IDE's AI-assist button) carries its name in the tooltip —
+              // a menu row has no hover affordance to fall back on.
+              label: action.label ?? action.tooltip ?? `Action ${index + 1}`,
+              icon: action.icon,
+              intent: action.intent,
+              disabled: action.disabled,
+              onClick: () => action.onClick?.(),
+            }) as IReqoreDropdownItem
+        ),
+      [menuOptionActions]
+    );
+    const renderInjectedOptionAction = (
+      action: IReqorePanelAction,
+      index: number,
+      size: 'tiny' | 'small' = 'small'
+    ) => {
+      // `show` drives visibility here instead of reaching the DOM. The classic
+      // path hands these to ReqorePanel, which honours `show: 'hover'` itself;
+      // the compact slots render plain buttons, so 'hover' becomes a CSS gate on
+      // the containing row/card (see compactRowStyles) — same config, same
+      // behaviour in both modes.
+      // `size` is destructured out and deliberately NOT honoured: the row owns
+      // its action strip's rhythm, and a consumer-supplied size made the
+      // injected button visibly smaller than the revert / more / confirm
+      // buttons beside it. The contextual `size` argument is the row's own
+      // (small when editing or in a card, tiny on a read row), so injected
+      // actions always match their neighbours.
+      const {
+        label: actionLabel,
+        onClick,
+        show,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        size: _ignoredSize,
+        className,
+        ...actionProps
+      } = action;
+
+      return (
+        <ReqoreButton
+          key={`${optionName}-injected-action-${index}`}
+          size={size}
+          minimal
+          flat
+          fixed
+          {...actionProps}
+          className={`${className ? `${className} ` : ''}options-injected-action${
+            show === 'hover' ? ' options-injected-action-hover' : ''
+          }`}
+          onClick={(event: React.MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+            onClick?.();
+          }}
+        >
+          {actionLabel}
+        </ReqoreButton>
+      );
+    };
     const required = !!(schema?.required || schema?.required_groups);
     const removable =
       !readOnly && !schema?.preselected && !schema?.required && !schema?.required_groups;
@@ -408,7 +521,11 @@ export const CompactRow = memo(
           />
         </span>
       : null;
-    const editType = ((schema?.ui_type as string) || (schema?.type as string)) ?? '';
+    const fixedAllowedValueOption = isFixedCompactAllowedValueOption(schema);
+    const editType =
+      (fixedAllowedValueOption
+        ? (schema?.type as string) || (schema?.ui_type as string)
+        : (schema?.ui_type as string) || (schema?.type as string)) ?? '';
     // Scalars edit in place inside the row; complex fields (tall or nested
     // editors) still open the expanded card below.
     const inlineEditable =
@@ -420,6 +537,24 @@ export const CompactRow = memo(
       // A choice with per-option logos (e.g. language) reads better collapsed.
       !optionHasImages(schema) &&
       !COMPACT_COMPLEX_TYPES.has(editType);
+
+    // Auto-focus the editor's first input when a field is opened, so you can type
+    // straight away (matches the prototype's tap-to-edit feel).
+    const editorRef = React.useRef<HTMLDivElement>(null);
+    React.useEffect(() => {
+      if (!isExpanded) return undefined;
+      const id = window.setTimeout(() => {
+        const el = editorRef.current?.querySelector<HTMLElement>(
+          'input:not([type="hidden"]):not([disabled]), textarea, [contenteditable="true"]'
+        );
+        // A user-driven expand scrolls the just-opened editor into view; the
+        // programmatic `autoFocusFirstRequired` expand must NOT — otherwise an
+        // off-screen / below-the-fold form scrolls itself into view on mount.
+        el?.focus(autoFocusNameRef?.current === optionName ? { preventScroll: true } : undefined);
+      }, 60);
+      return () => window.clearTimeout(id);
+    }, [isExpanded, optionName, autoFocusNameRef]);
+
     const revertButton =
       changed ?
         <ReqoreButton
@@ -443,8 +578,9 @@ export const CompactRow = memo(
     // — distinct from the read-row "Remove field" (which deletes an optional
     // field entirely). Once cleared, `changed` flips on and `hasValue` off, so
     // this button gives way to `revertButton` in the same slot — the morph the
-    // edit row's actions are designed around. Neutral (not danger): it's a
-    // reversible step, undone by Revert or by re-typing.
+    // edit row's actions are designed around. Clearing is destructive even
+    // though it can be reverted before saving, so both the trigger and its
+    // confirmation use danger intent.
     //
     // Only editors with NO built-in clear of their own get this button —
     // toggles and fixed-choice pickers. The text/number/date inputs already
@@ -457,6 +593,17 @@ export const CompactRow = memo(
       // CREATABLE one still renders the raw input (with its own ✕), so it keeps
       // its clear — matching the dispatch in AutoFormField/TemplateField.
       (!!size(schema?.allowed_values) && !schema?.allowed_values_creatable);
+    const confirmClearValue = (event?: React.MouseEvent) => {
+      event?.stopPropagation();
+      confirmAction({
+        title: 'Clear value',
+        description: `Clear the current value of "${label}"?`,
+        confirmLabel: 'Clear value',
+        confirmButtonIntent: 'danger',
+        intent: 'danger',
+        onConfirm: () => handleValueChange(optionName, undefined),
+      });
+    };
     const clearValueButton =
       hasValue && !readOnly && editorLacksOwnClear ?
         <ReqoreButton
@@ -464,12 +611,11 @@ export const CompactRow = memo(
           size='small'
           flat
           minimal
-          icon='CloseLine'
+          icon='DeleteBinLine'
+          intent='danger'
+          aria-label='Clear value'
           tooltip='Clear value'
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation();
-            handleValueChange(optionName, undefined);
-          }}
+          onClick={confirmClearValue}
         />
       : null;
     // Batched commit: a changed row is a draft until Save — mark it with the
@@ -489,6 +635,21 @@ export const CompactRow = memo(
           effect={{ uppercase: true, spaced: 1 }}
         />
       : null;
+    const isPassiveCloseAction = fixedAllowedValueOption || readOnly;
+    const closeExpandedFieldButton = (
+      <ReqoreButton
+        className='options-readfirst-done'
+        size='small'
+        intent={!isPassiveCloseAction ? 'success' : undefined}
+        flat={isPassiveCloseAction}
+        minimal={isPassiveCloseAction}
+        fixed
+        icon={isPassiveCloseAction ? 'CloseLine' : 'CheckLine'}
+        aria-label={isPassiveCloseAction ? 'Close field' : 'Done'}
+        tooltip={isPassiveCloseAction ? 'Close field' : 'Done'}
+        onClick={() => toggleExpandedOption(optionName)}
+      />
+    );
 
     // Info tiers: Tier 1 (danger/warning + dependency hints) must be visible
     // without interaction; Tier 2 (info/success, default notes) sits behind ⓘ.
@@ -516,10 +677,13 @@ export const CompactRow = memo(
           .filter((m) => m.label !== 'This field is required')
           .map((m) => ({ intent: m.intent as string, content: String(m.label) }))
       : [];
-    const isCriticalMsg = (m: TInfoMsg) => m.intent === 'danger' || m.intent === 'warning';
-    const tier1 = [...schemaMessages, ...fieldMessages].filter(isCriticalMsg);
-    const tier2: TInfoMsg[] = [
-      ...[...schemaMessages, ...fieldMessages].filter((m) => !isCriticalMsg(m)),
+    // TWO display channels, matching the Focus prototype:
+    //  • dedicated schema `messages` → prominent coloured PANELS below the row;
+    //  • everything else (validation reasons, the unmet-dependency hint, the
+    //    default-value note) → a compact INLINE reason strip — not a panel.
+    const panelMessages = schemaMessages;
+    const inlineMessages: TInfoMsg[] = [
+      ...fieldMessages,
       ...(infoActive && schema?.default_value_desc ?
         [
           {
@@ -529,26 +693,44 @@ export const CompactRow = memo(
         ]
       : []),
     ];
+    const allMsgs = [...panelMessages, ...inlineMessages];
     const worstIntent =
-      tier1.some((m) => m.intent === 'danger') ? 'danger'
-      : tier1.length ? 'warning'
+      allMsgs.some((m) => m.intent === 'danger') ? 'danger'
+      : allMsgs.some((m) => m.intent === 'warning') ? 'warning'
       : undefined;
     const intentColor =
       worstIntent === 'danger' ? cDanger
       : worstIntent === 'warning' ? cWarning
       : undefined;
     const showStripe = infoActive && !!intentColor;
-    // The short_desc renders UNDER the field name (revealed by the ⓘ toggle); the
-    // value-side panel carries only the messages (tier1/tier2).
     const labelShortDesc = schema?.short_desc;
-    const panelHasContent = tier1.length > 0 || tier2.length > 0;
-    const hasInfoPanelContent = infoActive && (panelHasContent || !!labelShortDesc);
-    // Open-state precedence: a per-row ⓘ override is most specific; else the
-    // global toggle when ENGAGED (show all / hide all — overriding the message
-    // auto-open); else the default, where only critical (tier1) messages open.
-    const defaultOpen =
-      showAllDescriptions === undefined ? tier1.length > 0 : showAllDescriptions;
-    const infoPanelOpen = hasInfoPanelContent && (infoPanelOverride ?? defaultOpen);
+    // The per-row ⓘ is gone: short_desc shows under the name only when the global
+    // "descriptions" toggle is engaged (and inside the editor when expanded).
+    const showLabelDesc = !!labelShortDesc && showAllDescriptions === true;
+
+    // The `?` that opens the long-form help dialog. Shared by the read row AND
+    // the inline editor: opening a field used to drop it, leaving an editing row
+    // with no route to the field's description at all. Stops propagation because
+    // both labels are click targets themselves (the row expands / collapses).
+    const helpIcon =
+      schema?.desc ?
+        <ReqoreIcon
+          icon='QuestionLine'
+          size='12px'
+          effect={{ opacity: 0.55 }}
+          margin='left'
+          marginSize='tiny'
+          role='button'
+          tabIndex={-1}
+          aria-label='Help'
+          className='options-readfirst-help'
+          style={{ cursor: 'help' }}
+          onClick={(event) => {
+            event.stopPropagation();
+            handleOptionLabelClick(optionName);
+          }}
+        />
+      : null;
 
     const renderInfoStrip = (m: TInfoMsg, index: number) => (
       <ReqoreMessage
@@ -562,33 +744,14 @@ export const CompactRow = memo(
         {m.content}
       </ReqoreMessage>
     );
+    const reasonColor = (intent?: string) =>
+      intent === 'danger' ? cDanger
+      : intent === 'warning' ? cWarning
+      : intent === 'success' ?
+        (theme?.intents as Record<string, string> | undefined)?.success || cInfo
+      : `${cMuted}cc`;
 
-    const infoToggle =
-      hasInfoPanelContent ?
-        <ReqoreButton
-          className='options-readfirst-info-toggle'
-          size='tiny'
-          minimal
-          flat
-          compact
-          fixed
-          active={infoPanelOpen}
-          intent={worstIntent as never}
-          icon={infoPanelOpen ? 'InformationFill' : 'InformationLine'}
-          tooltip={infoPanelOpen ? 'Hide field information' : 'Show field information'}
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation();
-            setInfoPanelOverrides((prev) => ({ ...prev, [optionName]: !infoPanelOpen }));
-          }}
-        />
-      : null;
-
-    const infoBlock =
-      infoPanelOpen && panelHasContent ?
-        <StyledInfoPanel className='options-readfirst-info-panel'>
-          {[...tier1, ...tier2].map(renderInfoStrip)}
-        </StyledInfoPanel>
-      : null;
+    const infoToggle = null;
 
     // Cluster (required-group connection) — shared by the read row, its block
     // wrapper AND the inline editor, so the rail/node/highlight persist across
@@ -604,20 +767,9 @@ export const CompactRow = memo(
       clustered ?
         `readfirst-cluster-rail${clusterFirst ? ' readfirst-cluster-first' : ''}${clusterLast ? ' readfirst-cluster-last' : ''}${clusterSatisfied ? ' readfirst-cluster-satisfied' : ''}`
       : '';
-    const memberSet = clustered && !hidden && hasValue;
-    const clusterNode =
-      clustered ?
-        <StyledClusterNode
-          className='options-readfirst-node'
-          $filled={!!memberSet}
-          $color={
-            clusterSatisfied ?
-              (theme?.intents as Record<string, string> | undefined)?.success || cInfo
-            : `${cWarning}99`
-          }
-          $bg={cBg}
-        />
-      : null;
+    // The connection rail + status nodes are gone — the "One of the below is
+    // required" box (and the Covers / Covered-by chips) carry the grouping now.
+    const clusterNode = null;
     const clusterHoverProps =
       clustered && clusterMembers.length ?
         {
@@ -626,6 +778,46 @@ export const CompactRow = memo(
         }
       : {};
 
+    // Secondary edit actions tuck into a "More" (⋮) menu so the card header stays
+    // calm: Fullscreen always, plus Remove field for a removable option. Rendered
+    // just before the Done ✓ in both expanded layouts.
+    const moreMenu = (
+      <ReqoreDropdown
+        className='options-readfirst-more'
+        icon='More2Fill'
+        flat
+        minimal
+        fixed
+        size='small'
+        tooltip='More actions'
+        items={[
+          {
+            label: 'Edit fullscreen',
+            icon: 'FullscreenLine',
+            onClick: () => setFocusedEditing(optionName),
+          } as IReqoreDropdownItem,
+          ...(removable && !hidden ?
+            [
+              {
+                label: 'Remove field',
+                icon: 'DeleteBinLine',
+                intent: 'danger',
+                onClick: () =>
+                  confirmAction({
+                    title: 'Remove field',
+                    onConfirm: () => removeSelectedOption(optionName),
+                  }),
+              } as IReqoreDropdownItem,
+            ]
+          : []),
+          // Consumer-injected actions that did not fit inline (or collapsed
+          // wholesale on touch) land here — this row already has a menu, so they
+          // reuse it rather than adding a second one beside it.
+          ...injectedOptionActionMenuItems,
+        ]}
+      />
+    );
+
     if (isExpanded) {
       if (inlineEditable) {
         const collapse = () => toggleExpandedOption(optionName);
@@ -641,25 +833,42 @@ export const CompactRow = memo(
             }
             {...clusterHoverProps}
           >
-            <StyledRowLabel
-              role='button'
-              tabIndex={0}
-              aria-label={`Collapse ${label}`}
-              title={schema?.short_desc || undefined}
-              $color={cKey}
-              $pointer
-              onClick={collapse}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                  event.preventDefault();
-                  collapse();
-                }
-              }}
-            >
-              {label}
-              {required ? <ReqoreIcon icon='Asterisk' color='danger' size='10px' /> : null}
-            </StyledRowLabel>
+            <StyledLabelBlock>
+              <StyledRowLabel
+                role='button'
+                tabIndex={0}
+                aria-label={`Collapse ${label}`}
+                title={schema?.short_desc || undefined}
+                $color={cKey}
+                $pointer
+                onClick={collapse}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    collapse();
+                  }
+                }}
+              >
+                {label}
+                {required ? <ReqoreIcon icon='Asterisk' color='danger' size='10px' /> : null}
+                {helpIcon}
+              </StyledRowLabel>
+              {/* An OPEN field always shows its short_desc — that's where the hint
+                  is needed and there's no per-row button to reveal it (the edit
+                  card does the same). The global descriptions toggle governs READ
+                  rows only, so collapsing the field is what hides it again. */}
+              {labelShortDesc ?
+                <StyledLabelDesc
+                  className='options-readfirst-label-desc'
+                  size='small'
+                  effect={{ opacity: 0.55 }}
+                >
+                  {labelShortDesc}
+                </StyledLabelDesc>
+              : null}
+            </StyledLabelBlock>
             <div
+              ref={editorRef}
               style={{ minWidth: 0 }}
               onKeyDown={(event) => {
                 if (event.key === 'Escape') {
@@ -678,16 +887,11 @@ export const CompactRow = memo(
                   message strip is visible. */}
               {revertButton}
               {clearValueButton}
-              <ReqoreButton
-                className='options-readfirst-done'
-                size='small'
-                flat
-                minimal
-                intent='success'
-                icon='CheckLine'
-                tooltip='Done'
-                onClick={collapse}
-              />
+              {inlineOptionActions.map((action, index) =>
+                renderInjectedOptionAction(action, index)
+              )}
+              {moreMenu}
+              {closeExpandedFieldButton}
             </StyledRowActions>
             {/* Cluster node is rendered LAST (it's absolutely positioned, so DOM
                 order doesn't move it) — keeping it out of the leading cells lets
@@ -709,6 +913,27 @@ export const CompactRow = memo(
             className={clusterBlockClass || undefined}
           >
             {editingRow}
+            {/* Focused editing for an INLINE row. The edit card wraps its editor
+                in <FocusedEditing>, which renders the field in place AND in the
+                modal; an inline row already renders its editor in the row grid,
+                so it mounts the modal alone. Without this the More menu's "Edit
+                fullscreen" set the state and nothing appeared — the modal simply
+                had no mount point on this branch. */}
+            {focusedEditing === optionName ?
+              <FocusedEditing
+                isFullscreen
+                modalOnly
+                onClose={() => setFocusedEditing(undefined)}
+                description={(schema?.display_name as string) || optionName}
+              >
+                <Description
+                  longDescription={schema?.desc}
+                  shortDescription={schema?.short_desc}
+                  longDescriptionShownByDefault
+                />
+                {renderOption(optionName, optionField)}
+              </FocusedEditing>
+            : null}
           </StyledColumn>
         );
       }
@@ -749,7 +974,7 @@ export const CompactRow = memo(
             }}
           >
             <StyledCardHeading>
-              <StyledCardLabel $color={cMuted}>
+              <StyledCardLabel $color={cKey}>
                 {(schema as { icon?: string } | undefined)?.icon || (schema as { image?: string } | undefined)?.image ?
                   <ReqoreIcon
                     icon={(schema as { icon?: string } | undefined)?.icon as never}
@@ -811,40 +1036,27 @@ export const CompactRow = memo(
                   </ReqoreButton>
                 );
               })}
-              <ReqoreButton
-                size='small'
-                icon='FullscreenLine'
-                minimal
-                flat
-                fixed
-                className='options-readfirst-fullscreen'
-                tooltip='Edit fullscreen'
-                onClick={() => setFocusedEditing(optionName)}
-              />
-              {/* Clear-value sits between focus-edit and Done — the card analog of
-                  the inline row's Clear. Empties the value (keeps the field). */}
+              {inlineOptionActions.map((action, index) =>
+                renderInjectedOptionAction(action, index)
+              )}
+              {/* Clear-value sits before the More menu — the card analog of the
+                  inline row's Clear. Empties the value (keeps the field). */}
               {hasValue && !readOnly ?
                 <ReqoreButton
                   size='small'
-                  icon='CloseLine'
+                  icon='DeleteBinLine'
                   minimal
                   flat
                   fixed
+                  intent='danger'
                   className='options-readfirst-clear'
+                  aria-label='Clear value'
                   tooltip='Clear value'
-                  onClick={() => handleValueChange(optionName, undefined)}
+                  onClick={confirmClearValue}
                 />
               : null}
-              <ReqoreButton
-                size='small'
-                icon='CheckLine'
-                intent='success'
-                fixed
-                className='options-readfirst-done'
-                onClick={() => toggleExpandedOption(optionName)}
-              >
-                {readOnly ? 'Close' : 'Done'}
-              </ReqoreButton>
+              {moreMenu}
+              {closeExpandedFieldButton}
             </ReqoreControlGroup>
           </div>
           {/* Same fullscreen focused-editing affordance as the classic cards —
@@ -869,6 +1081,15 @@ export const CompactRow = memo(
 
     const formatted = formatOptionValue(optionField, schema);
     const empty = formatted === '';
+    // Inline reasons shown on the value line: validation / dependency / one-of /
+    // default-value hints, plus a read-only covered-by note (editable covered rows
+    // carry that in their chip instead).
+    const valueReasons: TInfoMsg[] = [
+      ...inlineMessages,
+      ...(empty && coveredByLabel ?
+        [{ content: `Covered by “${coveredByLabel}”`, intent: 'success' }]
+      : []),
+    ];
     // A hash row reveals its sub-fields as read-only sub-rows under a "view
     // more" disclosure; the row itself still expands the real editor on click.
     const valueType = getValueType(optionField, schema);
@@ -878,6 +1099,33 @@ export const CompactRow = memo(
       (schema as { ui_type?: string } | undefined)?.ui_type !== 'schema-definition' ?
         getHashEntries(optionField, schema)
       : [];
+    // A LIST OF HASHES/objects gets the same expandable structured preview a hash
+    // does — the flat "N items" summary can't convey object contents (and must
+    // never print "[object Object]"). StructuredDataView unwraps each item's
+    // {type,value} envelope. Plain scalar lists keep just their joined summary.
+    const isHashList =
+      !hidden &&
+      (valueType === 'list' || valueType === 'free-list' || valueType === 'array') &&
+      Array.isArray(optionField?.value) &&
+      optionField.value.length > 0 &&
+      optionField.value.some((item) => {
+        const inner =
+          item && typeof item === 'object' && 'value' in (item as Record<string, unknown>) ?
+            (item as Record<string, unknown>).value
+          : item;
+        return inner !== null && typeof inner === 'object';
+      });
+    const showStructuredPreview = hashEntries.length > 0 || isHashList;
+    // Multi-line code preview: a `code-editor` field with a non-empty string
+    // value gets a `<pre>`-based code block under the row, capped by a
+    // `ReqoreCollapsibleContent` so the collapsed height stays row-sized and
+    // "Show more" reveals the rest.  Sits in the same inset the hash/list
+    // preview uses — mutually exclusive with `showStructuredPreview`.
+    const showCodePreview =
+      !hidden &&
+      valueType === 'code-editor' &&
+      typeof optionField?.value === 'string' &&
+      optionField.value.length > 0;
     const typeLabel =
       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}]` : ''}>`
@@ -936,8 +1184,7 @@ export const CompactRow = memo(
             flat
             compact
             icon='LockLine'
-            label='Depends on'
-            effect={{uppercase: true, spaced: 1}}
+            tooltip='Disabled — depends on other fields. Click to locate them.'
             items={[
               { divider: true, label: 'Unlocked by:', dividerAlign: 'left' } as IReqoreDropdownItem,
               ...dependencyEntries.flatMap((entry): IReqoreDropdownItem[] => [
@@ -972,9 +1219,10 @@ export const CompactRow = memo(
       if (target?.classList?.contains('readfirst-row')) {
         readRowHeights.current[optionName] = Math.round(target.getBoundingClientRect().height);
       }
-      if (hidden) {
-        handleAddOptionalFieldChange('options', optionName);
-      }
+      // Optional fields aren't "added" — every one is editable in place. Opening a
+      // not-yet-set field just expands its editor (with an empty value); it joins
+      // the form's output the moment a value is set (and moves to Set / Needs
+      // attention), and drops back to Optional when cleared. No explicit add step.
       toggleExpandedOption(optionName);
     };
 
@@ -1002,18 +1250,36 @@ export const CompactRow = memo(
       rowStripeColor ?
         ({ ['--readfirst-stripe']: rowStripeColor } as React.CSSProperties)
       : undefined;
-    const blockWrapped = hashEntries.length > 0 || !!infoBlock;
 
+    // "Focus" trailing status dot, derived from the SHARED status helper (the
+    // same one FormEngine uses to bucket rows into the Needs-attention/Set/Optional
+    // boxes — so the dot and the box can never disagree). Hidden (not-yet-added)
+    // and dependency-locked rows show no dot (the add/lock affordance speaks for
+    // them). worstIntent already folds in schema + validation messages.
+    const cSuccess = (theme?.intents as Record<string, string> | undefined)?.success;
+    const rowStatus = getReadFirstStatus({
+      empty,
+      required,
+      covered: !!coveredByLabel || groupResolved,
+      invalid: worstIntent === 'danger',
+      warned: worstIntent === 'warning',
+    });
+    const dotStatus = hidden || fieldDisabled ? undefined : rowStatus;
+    const dotColor =
+      dotStatus === 'invalid' ? cDanger
+      : dotStatus === 'todo' ? cWarning
+      : dotStatus === 'set' ? cSuccess || cInfo
+      : undefined;
     const row = (
       <div
         key={optionName}
         data-field={optionName}
         role='button'
         tabIndex={0}
-        aria-label={`${label}${hidden ? ' (add field)' : ''}`}
-        className={`readfirst-row options-readfirst-value${hidden ? ' readfirst-row-hidden' : ''}${fieldDisabled ? ' readfirst-row-disabled' : ''}${isHighlighted ? ' readfirst-row-group-highlight' : ''}${isFlashed ? ' readfirst-row-flash' : ''}${labelShortDesc && infoPanelOpen ? ' readfirst-row-info-open' : ''}${!blockWrapped && clusterBlockClass ? ' ' + clusterBlockClass : ''}`}
+        aria-label={label}
+        className={`readfirst-row options-readfirst-value${hidden ? ' readfirst-row-hidden' : ''}${fieldDisabled ? ' readfirst-row-disabled' : ''}${isHighlighted ? ' readfirst-row-group-highlight' : ''}${isFlashed ? ' readfirst-row-flash' : ''}${showLabelDesc ? ' readfirst-row-info-open' : ''}${panelMessages.length || showStructuredPreview || showCodePreview ? ' readfirst-row-tall' : ''}${clusterBlockClass ? ' ' + clusterBlockClass : ''}`}
         aria-disabled={fieldDisabled || undefined}
-        style={blockWrapped ? undefined : stripeStyle}
+        style={stripeStyle}
         onClick={activate}
         onKeyDown={(event) => {
           if (event.key === 'Enter' || event.key === ' ') {
@@ -1027,31 +1293,20 @@ export const CompactRow = memo(
         <StyledLabelBlock>
           <StyledRowLabel title={schema?.short_desc || undefined} $color={cKey}>
             {rowChromeIcon}
-            {label}
-            {required ? <ReqoreIcon icon='Asterisk' color='danger' size='10px' /> : null}
+            {/* label + asterisk + help flow as ONE inline run, so the asterisk
+                stays right after the last word even when the name wraps. */}
+            <span className='options-readfirst-label-text' style={{ minWidth: 0 }}>
+              {label}
+              {required ?
+                <ReqoreIcon icon='Asterisk' color='danger' size='10px' margin='left' marginSize='tiny' />
+              : null}
+              {helpIcon}
+            </span>
             {typeLabel ?
               <ReqoreTag size='tiny' minimal label={typeLabel} labelEffect={{ opacity: 0.55 }} />
             : null}
-            {schema?.desc ?
-              <ReqoreIcon
-                icon='QuestionLine'
-                size='12px'
-                effect={{ opacity: 0.55 }}
-                margin='left'
-                marginSize={5}
-                role='button'
-                tabIndex={-1}
-                aria-label='Help'
-                className='options-readfirst-help'
-                style={{ cursor: 'help' }}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  handleOptionLabelClick(optionName);
-                }}
-              />
-            : null}
           </StyledRowLabel>
-          {labelShortDesc && infoPanelOpen ?
+          {showLabelDesc ?
             <StyledLabelDesc
               className='options-readfirst-label-desc'
               size='small'
@@ -1063,22 +1318,84 @@ export const CompactRow = memo(
         </StyledLabelBlock>
         <StyledRowValue
           title={!empty && !hidden && typeof formatted === 'string' ? formatted : undefined}
-          $color={empty || hidden ? cFaint : `${cMuted}cc`}
+          // A SET value reads at full key brightness so it stands out as the
+          // actual data — crucial when stacked under a (muted) description on
+          // mobile, where a dim value blends into the prose. The bold name still
+          // outranks it; the empty dash stays faint.
+          $color={empty || hidden ? `${cMuted}66` : cKey}
           $empty={empty || hidden}
         >
-          {hidden ?
-            'Not in form — add'
-          : empty ?
-            coveredByLabel ?
-              // Editable rows carry the "covered by" explanation in the group
-              // chip; read-only rows have no chip, so keep it inline here.
-              readOnly ?
-                `Not set — covered by “${coveredByLabel}”`
-              : 'Not set'
-            : required ?
-              'Required — not set'
-            : 'Not set'
-          : renderReadFirstValue(optionField, schema, formatted)}
+          <span className='options-readfirst-valuetext'>
+            {hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted)}
+          </span>
+          {valueReasons.map((m, i) => (
+            <span
+              key={`${m.content}-${i}`}
+              className='options-readfirst-reason'
+              style={{ color: reasonColor(m.intent) }}
+            >
+              {m.content}
+            </span>
+          ))}
+          {/* Dedicated schema message PANELS render right here, directly under the
+              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>
+          : 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
+              label's short_desc. */}
+          {showStructuredPreview ?
+            // The inset lives inside the row now, so a click on a value chip would
+            // bubble to the row's onClick and fire activate() a SECOND time (the
+            // chip's onItemClick already calls it) — toggling the editor shut again.
+            // Stop the bubble here; the chip's own handler still opens the editor.
+            <StyledRowInset
+              className='options-readfirst-inset'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ReqoreCollapsibleContent
+                maxCollapsedHeight={96}
+                buttonProps={{ className: 'options-readfirst-viewmore' }}
+              >
+                <div className='options-readfirst-structured'>
+                  <StructuredDataView
+                    value={optionField?.value}
+                    collapsibleRoot={false}
+                    showTypes={showFieldTypes}
+                    defaultExpandDepth={2}
+                    onItemClick={() => activate()}
+                  />
+                </div>
+              </ReqoreCollapsibleContent>
+            </StyledRowInset>
+          : null}
+          {/* Code-editor preview: same inset placement as hash/list — a monospace
+              `<pre>` block wrapped in `ReqoreCollapsibleContent` so the collapsed
+              row stays row-height while multi-line source reveals via "Show more".
+              Stopping propagation here (like the structured inset) — a click on
+              the collapse button must not also open the field editor. */}
+          {showCodePreview ?
+            <StyledRowInset
+              className='options-readfirst-inset options-readfirst-code-inset'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ReqoreCollapsibleContent
+                maxCollapsedHeight={96}
+                buttonProps={{ className: 'options-readfirst-viewmore' }}
+              >
+                <StyledCodePreview
+                  className='options-readfirst-code'
+                  $bg={cHover}
+                  $border={`${cDivider}88`}
+                  $fg={cKey}
+                >
+                  {optionField.value as string}
+                </StyledCodePreview>
+              </ReqoreCollapsibleContent>
+            </StyledRowInset>
+          : null}
         </StyledRowValue>
         <StyledRowActions>
           {/* Column discipline (table treatment): variable-width chips lead and
@@ -1093,63 +1410,24 @@ export const CompactRow = memo(
               the "One of"/"Covers" chip — keep only "Covered by <X>", the one fact
               the rail can't show. Non-clustered members (split-across-panels or
               narrow mode, where there's no rail) keep the full chip as a fallback. */}
-          {!hidden && !fieldDisabled && (!clustered || !!coveredByLabel) ? requiredGroupChip : null}
+          {!hidden && !fieldDisabled && !clustered && !coveredByLabel ? requiredGroupChip : null}
           {!hidden ? dependsOnChip : null}
           {draftChip}
-          {changed ?
-            <ReqoreButton
-              className='options-readfirst-revert'
-              size='tiny'
-              flat
-              minimal
-              compact
-              icon='HistoryLine'
-              tooltip='Revert changes'
-              onClick={(e: React.MouseEvent) => {
-                e.stopPropagation();
-                handleValueChange(
-                  optionName,
-                  originalValue.current?.[optionName]?.value,
-                  originalValue.current?.[optionName]?.type
-                );
-              }}
-            />
-          : null}
-          {removable && !hidden ?
-            <ReqoreButton
-              className='readfirst-action'
-              size='small'
-              flat
-              minimal
-              intent='danger'
-              icon='DeleteBinLine'
-              tooltip='Remove field'
-              onClick={(e: React.MouseEvent) => {
-                e.stopPropagation();
-                confirmAction({
-                  title: 'Remove field',
-                  onConfirm: () => removeSelectedOption(optionName),
-                });
-              }}
-            />
-          : null}
-          {/* Lock/add slot BEFORE the info slot so the ⓘ keeps the same far-right
-              x on every row — a disabled field's lock sits to the ⓘ's left rather
-              than pushing it inward. ADD for a hidden field; a plain LOCK for a
-              field disabled for a non-dependency reason. Dependency-locked fields
-              show the "Depends on" chip in the chips area instead; the whole row is
-              click-to-edit, so there's no hover edit pencil. */}
-          {hidden || (fieldDisabled && !dependencyEntries.length) ?
+          {/* Remove-field lives in the expanded editor's "More" (⋮) menu now — no
+              standalone delete button on the read row. */}
+          {/* Lock slot BEFORE the info slot so the ⓘ keeps the same far-right x on
+              every row — a disabled field's lock sits to the ⓘ's left rather than
+              pushing it inward. (Not-yet-set optional fields show NO marker now —
+              they're just editable in place, like every other row. Dependency-
+              locked fields show the "Depends on" chip in the chips area instead.) */}
+          {fieldDisabled && !dependencyEntries.length ?
             <StyledActionSlot className='options-readfirst-trailing-slot' $width={18}>
-              {hidden ?
-                <ReqoreIcon icon='AddLine' intent='info' size='14px' />
-              : <span
-                  title={fieldDisabledReason}
-                  style={{ display: 'inline-flex', opacity: 0.45 }}
-                >
-                  <ReqoreIcon className='options-readfirst-locked' icon='LockLine' size='14px' />
-                </span>
-              }
+              <span
+                title={fieldDisabledReason}
+                style={{ display: 'inline-flex', opacity: 0.45 }}
+              >
+                <ReqoreIcon className='options-readfirst-locked' icon='LockLine' size='14px' />
+              </span>
             </StyledActionSlot>
           : null}
           {infoToggle ?
@@ -1157,61 +1435,61 @@ export const CompactRow = memo(
               {infoToggle}
             </StyledActionSlot>
           : null}
+          {inlineOptionActions.map((action, index) =>
+            renderInjectedOptionAction(action, index, 'tiny')
+          )}
+          {injectedOptionActionMenuItems.length ?
+            <StyledActionSlot
+              className='options-readfirst-actions-slot'
+              $width={26}
+              // The read row opens the editor when clicked. Without this the tap
+              // that opens this menu also expands the row, which unmounts the
+              // menu — on touch that made the collapsed actions unreachable,
+              // the exact problem the collapse exists to solve.
+              onClick={(event: React.MouseEvent<HTMLElement>) => event.stopPropagation()}
+            >
+              <ReqoreDropdown
+                className='options-injected-actions-menu'
+                icon='MoreFill'
+                flat
+                minimal
+                fixed
+                size='tiny'
+                tooltip='Field actions'
+                items={injectedOptionActionMenuItems}
+              />
+            </StyledActionSlot>
+          : null}
+          {/* The revert affordance lives in the status-dot column (a changed field
+              swaps its dot for the revert icon) so it sits at the same fixed x as
+              the dot — out of the value's way instead of floating over it. */}
+          <StyledActionSlot className='options-readfirst-statusdot-slot' $width={12}>
+            {changed && !readOnly && !hidden ?
+              <ReqoreButton
+                className='options-readfirst-revert'
+                size='tiny'
+                flat
+                minimal
+                compact
+                icon='HistoryLine'
+                tooltip='Revert changes'
+                onClick={(e: React.MouseEvent) => {
+                  e.stopPropagation();
+                  handleValueChange(
+                    optionName,
+                    originalValue.current?.[optionName]?.value,
+                    originalValue.current?.[optionName]?.type
+                  );
+                }}
+              />
+            : dotColor ?
+              <StyledStatusDot $color={dotColor} $ring={dotStatus !== 'set'} aria-hidden />
+            : null}
+          </StyledActionSlot>
         </StyledRowActions>
       </div>
     );
 
-    if (hashEntries.length) {
-      return (
-        <StyledColumn
-          key={optionName}
-          data-field={optionName}
-          className={`options-readfirst-hash-row${clusterBlockClass ? ' ' + clusterBlockClass : ''}`}
-          style={stripeStyle}
-        >
-          {row}
-          <StyledRowInset className='options-readfirst-inset'>
-            <ReqoreCollapsibleContent
-              maxCollapsedHeight={96}
-              buttonProps={{ className: 'options-readfirst-viewmore' }}
-            >
-              {/* The IDE workflow-orders renderer (ReqoreDataView): a nested,
-                  type-coloured tree. Section summaries own their
-                  expand/collapse clicks, but clicking a VALUE chip opens the
-                  hash's editor. The Fields-menu "Show field types" toggle also
-                  drives the per-scalar type chips here. Depth 2 = root + first
-                  level open; deeper nests start collapsed so the preview stays
-                  short before the fade's "Show more". */}
-              <div className='options-readfirst-structured'>
-                <StructuredDataView
-                  value={optionField?.value}
-                  collapsibleRoot={false}
-                  showTypes={showFieldTypes}
-                  defaultExpandDepth={2}
-                  onItemClick={() => activate()}
-                />
-              </div>
-            </ReqoreCollapsibleContent>
-          </StyledRowInset>
-          {infoBlock}
-        </StyledColumn>
-      );
-    }
-
-    if (infoBlock) {
-      return (
-        <StyledColumn
-          key={optionName}
-          data-field={optionName}
-          className={`options-readfirst-info-row${clusterBlockClass ? ' ' + clusterBlockClass : ''}`}
-          style={stripeStyle}
-        >
-          {row}
-          {infoBlock}
-        </StyledColumn>
-      );
-    }
-
     return row;
   }
 );