@qoretechnologies/reqraft 0.10.25 → 0.10.26

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

@@ -1,4 +1,9 @@
-import { IQorusFormField, TQorusFormFieldSchema } from '@qoretechnologies/ts-toolkit';
+import {
+  IQorusFormField,
+  TQorusFormFieldSchema,
+  TQorusType,
+} from '@qoretechnologies/ts-toolkit';
+import { isRendererOnlyUiType } from './rendererTypes';
 import { isUiEncodedValue } from './_structuredData/structuredData';
 import { renderExpressionToText } from '../expressions/renderExpressionToText';
 import { IExpressionValue } from '../expressions/types';
@@ -17,12 +22,33 @@ const pluralize = (count: number, noun: string): string =>
 // full server allow-list, incl. keys like `sensitive`/`required`).
 const isTypedEnvelope = (raw: unknown): raw is IQorusFormField => isUiEncodedValue(raw);
 
-/** Summarise a list value: join item names, or fall back to an "N items" count. */
+/** Reduce ONE list item to a short, human label — never an object. Unwraps a
+ * typed `{type, value}` envelope, prefers a `name`/`display_name`, and returns
+ * undefined for a bare object (no name) so the caller falls back to a count
+ * instead of printing "[object Object]". */
+const summarizeListItem = (item: unknown): string | number | undefined => {
+  if (item === null || item === undefined) return undefined;
+  if (typeof item !== 'object') return item as string | number;
+  const obj = item as Record<string, unknown>;
+  // A named object (or allowed-value) → its label.
+  if (typeof obj.name === 'string' || typeof obj.name === 'number') return obj.name;
+  if (typeof obj.display_name === 'string') return obj.display_name;
+  // A typed envelope ({type, value}) or a {value} wrapper → look inside once.
+  if ('value' in obj) {
+    const inner = obj.value;
+    if (inner === null || inner === undefined) return undefined;
+    if (typeof inner !== 'object') return inner as string | number;
+    const innerName = (inner as Record<string, unknown>).name;
+    return typeof innerName === 'string' || typeof innerName === 'number' ? innerName : undefined;
+  }
+  return undefined;
+};
+
+/** Summarise a list value: join item labels, or fall back to an "N items" count
+ * (e.g. a list of anonymous hashes). Never prints raw objects. */
 const formatList = (items: unknown[]): string => {
   const parts = items
-    .map((item) =>
-      item && typeof item === 'object' ? ((item as any).name ?? (item as any).value ?? '') : item
-    )
+    .map(summarizeListItem)
     .filter((part) => part !== '' && part !== undefined && part !== null);
 
   return parts.length ? parts.join(', ') : pluralize(items.length, 'item');
@@ -61,6 +87,48 @@ export const isOptionValueEmpty = (value: unknown): boolean =>
   value === '' ||
   (Array.isArray(value) && value.length === 0);
 
+export const isFixedCompactAllowedValueOption = (
+  schema: TQorusFormFieldSchema | undefined
+): boolean => {
+  if (!schema) {
+    return false;
+  }
+
+  const selectableSchema = schema as TQorusFormFieldSchema & { items?: unknown[] };
+  const options = selectableSchema.allowed_values?.length
+    ? selectableSchema.allowed_values
+    : selectableSchema.items;
+
+  return !!(
+    options?.length &&
+    !schema.allowed_values_creatable &&
+    !schema.multiselect &&
+    !schema.arg_schema
+  );
+};
+
+export const shouldAutoCollapseCompactAllowedValueOption = (
+  schema: TQorusFormFieldSchema | undefined,
+  value: unknown
+): boolean => !isOptionValueEmpty(value) && isFixedCompactAllowedValueOption(schema);
+
+/** Boolean fields have three meaningful states: unset, Yes, and No. Once the
+ * user chooses either boolean value in compact mode, the choice is complete
+ * and the inline editor can close without a separate confirmation. */
+export const isCompactBooleanOption = (
+  schema: TQorusFormFieldSchema | undefined
+): boolean => {
+  const type = (schema?.ui_type || schema?.type)?.toLowerCase();
+  return type === 'bool' || type === 'boolean';
+};
+
+export const shouldAutoCollapseCompactOption = (
+  schema: TQorusFormFieldSchema | undefined,
+  value: unknown
+): boolean =>
+  !isOptionValueEmpty(value) &&
+  (isCompactBooleanOption(schema) || isFixedCompactAllowedValueOption(schema));
+
 /** Prefer the matching allowed_values entry's display_name (fallback `name`)
  * over the raw stored value. */
 const findAllowedOption = (value: unknown, schema?: TQorusFormFieldSchema): any | undefined => {
@@ -202,15 +270,29 @@ export const getFileSize = (value: unknown): number | undefined => {
   return typeof size === 'number' && Number.isFinite(size) && size >= 0 ? size : undefined;
 };
 
-/** Effective UI type for display: the stored `type` wins (any/auto picks),
- * then schema `ui_type`, then `type`. */
+/**
+ * Effective UI type for DISPLAY — which preview/summary a value renders as.
+ *
+ * A renderer-only `ui_type` wins outright: the field's stored `type` holds the
+ * STORAGE type for those (a `code-editor` stores a string), so consulting the
+ * stored type here would render the bespoke editor's value as a plain string and
+ * silently drop its preview. Every other case keeps the stored type first, so an
+ * `any`/`auto` field still displays as whatever concrete type the user picked.
+ */
 export const getValueType = (
   option?: IQorusFormField,
   schema?: TQorusFormFieldSchema
-): string | undefined =>
-  (option?.type ||
-    (schema as { ui_type?: string; type?: string } | undefined)?.ui_type ||
+): string | undefined => {
+  const uiType = (schema as { ui_type?: string } | undefined)?.ui_type;
+
+  if (isRendererOnlyUiType(uiType as TQorusType)) {
+    return uiType;
+  }
+
+  return (option?.type ||
+    uiType ||
     (schema as { type?: string } | undefined)?.type) as string | undefined;
+};
 
 /** Human-readable byte count (e.g. `1.2 KB`). */
 export const formatBytes = (bytes: number): string => {
@@ -435,6 +517,41 @@ export interface IReadFirstCompletion {
   pct: number;
 }
 
+/** Read-first row status, shared by the status DOT (CompactRow) and the
+ * status BOX bucketing (FormEngine) so the two can never disagree:
+ *   invalid  — a value fails validation, or a danger message is present (red)
+ *   todo     — empty & required (or has a warning message), needs a value (amber)
+ *   set      — has a valid value (green)
+ *   optional — empty & not required, or covered by a one-of sibling (calm) */
+export type TReadFirstStatus = 'invalid' | 'todo' | 'set' | 'optional';
+
+export const getReadFirstStatus = (s: {
+  empty: boolean;
+  required: boolean;
+  /** Empty member of a one-of required group already satisfied by a sibling. */
+  covered: boolean;
+  /** Non-empty value fails validation, or a danger message is attached. */
+  invalid: boolean;
+  /** A warning message is attached (surfaces an empty field for attention). */
+  warned: boolean;
+}): TReadFirstStatus => {
+  if (s.invalid) return 'invalid';
+  if (!s.empty) return 'set';
+  // A one-of member covered by a satisfied sibling reads as "set" (green) — the
+  // requirement is met; the row just shows a "Covered by …" note.
+  if (s.covered) return 'set';
+  if (s.required || s.warned) return 'todo';
+  return 'optional';
+};
+
+/** Coarse bucket for the three status boxes (Needs attention / Set / Optional). */
+export const getReadFirstBucket = (
+  status: TReadFirstStatus
+): 'attention' | 'set' | 'optional' =>
+  status === 'set' ? 'set'
+  : status === 'optional' ? 'optional'
+  : 'attention';
+
 /** Count how many of the shown options have a value set, for the progress meter. */
 export const getReadFirstCompletion = (
   shownOptions: Record<string, IQorusFormField | undefined> = {}
@@ -446,3 +563,45 @@ export const getReadFirstCompletion = (
 
   return { total, set, pct };
 };
+
+/** What the "first field to fix" selector needs to know about one field.
+ * Kept deliberately minimal — both verdicts are supplied by the caller — so the
+ * selector is decoupled from the engine's value/schema shapes and unit-testable
+ * in isolation. */
+export interface IFirstAttentionFieldMeta {
+  /** Whether the field can actually receive focus — the caller folds in
+   *  disabled / readonly / read-only-form / unmet-dependency gating here. */
+  focusable: boolean;
+  /** Whether the form considers this field to "need attention". The caller
+   *  supplies this from the SAME `getOptionBucket` the read-first status boxes
+   *  use, so it covers every attention case — empty-required, an unsatisfied
+   *  one-of group, AND a filled-but-invalid value — and the autofocus target can
+   *  never drift from the visible needs-attention set. */
+  needsAttention: boolean;
+}
+
+/**
+ * Pick the first field the user must fix: the first focusable field — in the
+ * supplied (already ordered) name list — that the form buckets as "needs
+ * attention".
+ *
+ * Pure and side-effect free. It deliberately does NOT re-derive emptiness /
+ * required / validity itself; the caller passes `needsAttention` straight from
+ * the engine's own `getOptionBucket`, so there is a single source of truth and
+ * the "focus the first field to fix" affordance can never disagree with the
+ * per-row status the user sees (including filled-but-invalid rows). Returns
+ * `undefined` when nothing needs attention.
+ */
+export const getFirstAttentionOptionName = (
+  orderedNames: string[],
+  getFieldMeta: (name: string) => IFirstAttentionFieldMeta | undefined
+): string | undefined => {
+  for (const name of orderedNames) {
+    const meta = getFieldMeta(name);
+    if (meta?.focusable && meta.needsAttention) {
+      return name;
+    }
+  }
+
+  return undefined;
+};

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

@@ -0,0 +1,55 @@
+import { TQorusType } from '@qoretechnologies/ts-toolkit';
+
+/**
+ * A schema entry carries two type-ish keys with different jobs:
+ *
+ * - `type` names how the value is STORED and validated (`string`, `hash`, `list`…).
+ * - `ui_type` names which EDITOR renders it.
+ *
+ * For most fields `ui_type` is a storage-compatible refinement (`long-string`,
+ * `enum`, `url`) and it is safe to let it win for both jobs. But some `ui_type`s
+ * name a bespoke editor whose value is still stored as the plainer `type` — a
+ * `cron` editor stores a string, `processor-mappings` stores a hash. Writing
+ * those renderer names into the field's `type` breaks validation and round-trips
+ * the value through the wrong branch, which is what `RENDERER_ONLY_UI_TYPES`
+ * exists to prevent.
+ *
+ * There is deliberately no derivation here: a renderer-only `ui_type` is not
+ * distinguishable from a storage-compatible one by inspecting the value or the
+ * `TQorusType` union (`code-editor` and `tool-catalog` are members of it, and
+ * the validator has cases for `cron` and `schema-definition`). It is a fact
+ * about which editor a name selects, so it has to be declared.
+ */
+export const BUILT_IN_RENDERER_ONLY_UI_TYPES: readonly string[] = [
+  'active-windows',
+  'alert-threshold',
+  'code-editor',
+  'cron',
+  'dpql',
+  'processor-mappings',
+  'schema-definition',
+  'test-cases',
+  'test-value-contract',
+  'tool-catalog',
+];
+
+/**
+ * Build the renderer-only predicate for one FormEngine instance.
+ *
+ * Consumers inject their own editors through `componentOverrides`, so the set of
+ * renderer-only names is open-ended — the IDE ships editors reqraft has never
+ * heard of. `extraTypes` (the `rendererOnlyUiTypes` prop) lets a consumer declare
+ * its own without waiting on a reqraft release, which is what previously made
+ * every new IDE editor a silent value-corruption bug until this list caught up.
+ */
+export const createRendererOnlyUiTypeCheck = (
+  extraTypes?: readonly string[]
+): ((type?: TQorusType | TQorusType[]) => boolean) => {
+  const known = new Set<string>([...BUILT_IN_RENDERER_ONLY_UI_TYPES, ...(extraTypes ?? [])]);
+
+  return (type?: TQorusType | TQorusType[]): boolean =>
+    typeof type === 'string' && known.has(type);
+};
+
+/** The default predicate — built-ins only, for module-scope callers with no props. */
+export const isRendererOnlyUiType = createRendererOnlyUiTypeCheck();

package/src/components/form/engine/variants/FormEngineVariants.stories.tsx

@@ -0,0 +1,159 @@
+import { ReqoreP, ReqorePanel } from '@qoretechnologies/reqore';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { IQorusFormField } from '@qoretechnologies/ts-toolkit';
+import { basicFormValue, getBasicFormOptions } from '../__fixtures__/basicFormOptions';
+import {
+  focusDemoGroupLabels,
+  focusDemoInvalid,
+  focusDemoValue,
+  getFocusDemoOptions,
+} from './focusDemo';
+import { VariantCalmTable } from './VariantCalmTable';
+import { VariantCards } from './VariantCards';
+import { VariantFocus } from './VariantFocus';
+import { VariantMinimal } from './VariantMinimal';
+
+/**
+ * VARIANTS PLAYGROUND for the compact FormEngine read-first view.
+ * All four render the SAME schema + values as `Form/Engine/FormEngine › Basic`
+ * (the reference screenshot), so the comparison is purely about layout / chrome
+ * / UX. Resize the Storybook viewport (or the canvas) to ~390px to check phone.
+ * See design/FORM_ENGINE_COMPACT_UX_PLAN.md for the rationale behind each.
+ */
+const options = getBasicFormOptions();
+
+// Merge declared default_values into the values map so "set via default" fields
+// (number=42, bool=true, the file) render as set — matching the real engine.
+const values: Record<string, IQorusFormField> = (() => {
+  const merged: Record<string, IQorusFormField> = { ...(basicFormValue as any) };
+  Object.entries(options).forEach(([name, schema]: [string, any]) => {
+    if (!merged[name] && schema?.default_value) merged[name] = schema.default_value;
+  });
+  return merged;
+})();
+
+// Fill the available width (the IDE form panel context); no artificial cap.
+// Focus uses the richer demo schema (named groups, a one-of required group,
+// complex nested fields) to show full engine parity.
+const focusOptions = getFocusDemoOptions();
+const focusValues: Record<string, IQorusFormField> = (() => {
+  const merged: Record<string, IQorusFormField> = { ...focusDemoValue };
+  Object.entries(focusOptions).forEach(([name, schema]: [string, any]) => {
+    if (!merged[name] && schema?.default_value) merged[name] = schema.default_value;
+  });
+  return merged;
+})();
+const focusConfig = { groupLabels: focusDemoGroupLabels, invalidReasons: focusDemoInvalid };
+
+const Frame = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ width: '100%', padding: '16px 32px', boxSizing: 'border-box' }}>{children}</div>
+);
+
+const meta = {
+  title: 'Form/Engine/FormEngine Variants',
+  parameters: { layout: 'fullscreen', chromatic: { viewports: [1440, 390] } },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const V1CalmTable: Story = {
+  name: '1 · Calm Table',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the "Calm Table" compact-form variant over the shared basic schema — one of four visual candidates for the read-first FormEngine view.',
+      },
+    },
+  },
+  render: () => (
+    <Frame>
+      <VariantCalmTable options={options} values={values} />
+    </Frame>
+  ),
+};
+
+export const V2Cards: Story = {
+  name: '2 · Cards',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the "Cards" compact-form variant over the shared basic schema — each field group is a card so the presentation reads as chunked panels.',
+      },
+    },
+  },
+  render: () => (
+    <Frame>
+      <VariantCards options={options} values={values} />
+    </Frame>
+  ),
+};
+
+export const V3Focus: Story = {
+  name: '3 · Focus',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the "Focus" compact-form variant over the richer focus-demo schema (named groups, required-group choices) so the variant is compared under full engine parity.',
+      },
+    },
+  },
+  render: () => (
+    <Frame>
+      <VariantFocus options={focusOptions} values={focusValues} config={focusConfig} />
+    </Frame>
+  ),
+};
+
+export const V4Minimal: Story = {
+  name: '4 · Minimal',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the "Minimal" compact-form variant over the shared basic schema — the sparest of the four candidates, only labels and values.',
+      },
+    },
+  },
+  render: () => (
+    <Frame>
+      <VariantMinimal options={options} values={values} />
+    </Frame>
+  ),
+};
+
+/** All four stacked, labelled — for a quick scroll-through comparison. */
+export const CompareAll: Story = {
+  name: '★ Compare all',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders all four compact-form variants stacked in a single scroll — the Calm Table, Cards, Focus and Minimal layouts sit under labelled panels so they can be compared side by side.',
+      },
+    },
+  },
+  render: () => {
+    const items: [string, React.ReactNode][] = [
+      ['1 · Calm Table', <VariantCalmTable key='v1' options={options} values={values} />],
+      ['2 · Cards', <VariantCards key='v2' options={options} values={values} />],
+      ['3 · Focus', <VariantFocus key='v3' options={focusOptions} values={focusValues} config={focusConfig} />],
+      ['4 · Minimal', <VariantMinimal key='v4' options={options} values={values} />],
+    ];
+    return (
+      <div style={{ maxWidth: 1100, margin: '0 auto', padding: 16, display: 'flex', flexFlow: 'column', gap: 28 }}>
+        {items.map(([label, node]) => (
+          <ReqorePanel key={label} label={label} flat minimal collapsible>
+            <div style={{ padding: 8 }}>{node}</div>
+          </ReqorePanel>
+        ))}
+        <ReqoreP size='small' effect={{ opacity: 0.5 }}>
+          Same data as “FormEngine › Basic”. Resize the viewport to ~390px to test phone layout.
+        </ReqoreP>
+      </div>
+    );
+  },
+};

package/src/components/form/engine/variants/VariantCalmTable.tsx

@@ -0,0 +1,242 @@
+/**
+ * VARIANT 1 — "Calm Table"
+ *
+ * Direction: treat it like a clean data table. One status channel (segmented
+ * meter), one mark per row (a status dot), whitespace instead of borders/boxes.
+ * Errors are quiet inline text, not full-width red boxes. WHOLE-ROW hover.
+ * ONE unified description control (tap to reveal short+long inline). Click a row
+ * to edit it inline. Responsive: collapses to stacked label/value on phone.
+ */
+import { ReqoreIcon, ReqoreP } from '@qoretechnologies/reqore';
+import { IQorusFormField, IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
+import styled from 'styled-components';
+import {
+  InlineEdit,
+  StatusDot,
+  TVariantForm,
+  ValueView,
+  VariantToolbar,
+  useDisclosure,
+  useVariantColors,
+  useVariantForm,
+} from './variantParts';
+
+const Wrap = styled.div<{ $line: string; $hover: string; $muted: string; $faint: string }>`
+  display: flex;
+  flex-flow: column;
+  gap: 22px;
+  font-size: 13px;
+
+  .vct-row {
+    display: grid;
+    grid-template-columns: minmax(180px, 320px) minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 18px;
+    min-height: 40px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.12s ease;
+  }
+  /* WHOLE-row hover (fixes: hover used to only tint the label cell) */
+  .vct-row:hover,
+  .vct-row:focus-within {
+    background: ${({ $hover }) => $hover};
+  }
+  .vct-label {
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+  .vct-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    opacity: 0.85;
+  }
+  .vct-desc {
+    grid-column: 1 / -1;
+    padding: 2px 2px 6px 0;
+    color: ${({ $muted }) => $muted};
+  }
+  .vct-reason {
+    font-size: 12px;
+    margin-left: 8px;
+  }
+  .vct-info {
+    background: none;
+    border: none;
+    color: ${({ $faint }) => $faint};
+    cursor: pointer;
+    padding: 4px;
+    display: inline-flex;
+    border-radius: 6px;
+  }
+  .vct-info:hover {
+    color: ${({ $muted }) => $muted};
+  }
+
+  @media (max-width: 620px) {
+    .vct-row {
+      grid-template-columns: 1fr auto;
+      grid-template-areas: 'label actions' 'value value';
+      row-gap: 2px;
+    }
+    .vct-label {
+      grid-area: label;
+    }
+    .vct-value {
+      grid-area: value;
+    }
+    .vct-actions {
+      grid-area: actions;
+    }
+  }
+`;
+
+const Meter = ({ form }: { form: TVariantForm }) => {
+  const c = useVariantColors();
+  const s = form.summary;
+  const filtering = form.filter === 'attention';
+  return (
+    <div style={{ display: 'flex', flexFlow: 'column', gap: 8 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: c.muted }}>
+        <ReqoreP
+          size='small'
+          effect={{
+            uppercase: true,
+            spaced: 1,
+            weight: 'bold',
+            color: (s.attention ? c.warning : c.success) as never,
+          }}
+        >
+          {s.attention ? 'Draft' : 'Ready'}
+        </ReqoreP>
+        <span>
+          {s.set} of {s.total} set
+        </span>
+        {s.attention ?
+          <button
+            type='button'
+            onClick={form.toggleAttention}
+            style={{
+              marginLeft: 'auto',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: c.warning,
+              fontSize: 12,
+              textDecoration: 'underline',
+              textUnderlineOffset: 3,
+            }}
+          >
+            {filtering ? '← show all fields' : `${s.attention} need attention →`}
+          </button>
+        : <span style={{ color: c.success, marginLeft: 'auto' }}>All clear</span>}
+      </div>
+      <div style={{ display: 'flex', height: 6, borderRadius: 3, overflow: 'hidden', background: c.line }}>
+        <div style={{ width: `${(s.set / s.total) * 100}%`, background: c.success }} />
+        <div style={{ width: `${(s.attention / s.total) * 100}%`, background: c.warning }} />
+      </div>
+    </div>
+  );
+};
+
+export const VariantCalmTable = ({
+  options,
+  values,
+}: {
+  options: IQorusFormSchema;
+  values: Record<string, IQorusFormField>;
+}) => {
+  const c = useVariantColors();
+  const form = useVariantForm(options, values);
+  const disc = useDisclosure();
+
+  return (
+    <Wrap $line={c.line} $hover={c.hover} $muted={c.muted} $faint={c.faint}>
+      <Meter form={form} />
+      <VariantToolbar form={form} />
+      {form.visibleGroups.map((g) => (
+        <div key={g.name} style={{ display: 'flex', flexFlow: 'column', gap: 2 }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              padding: '0 10px 6px',
+              borderBottom: `1px solid ${c.line}`,
+              marginBottom: 4,
+            }}
+          >
+            <ReqoreP effect={{ weight: 'bold' }}>{g.label}</ReqoreP>
+            <span style={{ color: c.faint, fontSize: 12 }}>{g.rows.length}</span>
+          </div>
+          {g.rows.map((r) => {
+            const hasDesc = !!(r.shortDesc || r.longDesc);
+            const open = disc.isOpen(r.name);
+            const editing = form.editing === r.name;
+            return (
+              <div
+                key={r.name}
+                className='vct-row'
+                role='button'
+                tabIndex={0}
+                aria-label={r.label}
+                onClick={() => !r.readOnly && form.startEdit(r.name)}
+              >
+                <span className='vct-label' style={{ color: c.text }}>
+                  {r.label}
+                  {r.required ?
+                    <ReqoreIcon icon='Asterisk' size='9px' style={{ color: c.danger }} />
+                  : null}
+                </span>
+                <span className='vct-value' style={{ minWidth: 0, color: c.muted }}>
+                  <ValueView value={r.value} />
+                  {r.status === 'invalid' || r.status === 'todo' ?
+                    <span
+                      className='vct-reason'
+                      style={{ color: r.status === 'invalid' ? c.danger : c.warning }}
+                    >
+                      {r.reason}
+                    </span>
+                  : null}
+                </span>
+                <span className='vct-actions'>
+                  <StatusDot status={r.status} />
+                  {hasDesc ?
+                    <button
+                      type='button'
+                      className='vct-info'
+                      aria-label='Toggle description'
+                      aria-expanded={open}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        disc.toggle(r.name);
+                      }}
+                    >
+                      <ReqoreIcon icon={open ? 'InformationFill' : 'InformationLine'} size='14px' />
+                    </button>
+                  : null}
+                </span>
+                {hasDesc && open ?
+                  <div className='vct-desc'>
+                    {r.shortDesc ? <div>{r.shortDesc}</div> : null}
+                    {r.longDesc ?
+                      <div style={{ opacity: 0.8, marginTop: r.shortDesc ? 4 : 0 }}>
+                        {r.longDesc.replace(/[#`*]/g, '')}
+                      </div>
+                    : null}
+                  </div>
+                : null}
+                {editing ? <InlineEdit row={r} onDone={form.stopEdit} /> : null}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </Wrap>
+  );
+};