@specverse/engines 4.2.0 → 4.2.2

package/libs/instance-factories/applications/templates/react-starter/api-types-starter-generator.ts

@@ -0,0 +1,98 @@
+/**
+ * API types generator for ReactAppStarter
+ *
+ * Emits per-model TypeScript interfaces that the starter's view
+ * skeletons import (`import type { Task } from '../types/api'`). The
+ * shape mirrors the model's attributes as declared in the spec. No
+ * runtime-specific types (those live in ReactAppRuntime's api-types
+ * generator).
+ */
+
+export interface ApiTypesStarterContext {
+  spec: {
+    models?: Record<string, any>;
+  };
+  manifest?: unknown;
+}
+
+/**
+ * Map SpecVerse attribute types to TypeScript types.
+ *
+ * Strings vs unions: if the attribute has a `values` enum (e.g.
+ * status: String values=[draft,published]), emit a union type.
+ */
+function mapAttrType(attr: any): string {
+  const t = typeof attr === 'string'
+    ? attr.split(/\s+/)[0]
+    : attr?.type;
+  const values = attr?.values;
+  if (Array.isArray(values) && values.length > 0) {
+    return values.map((v: string) => JSON.stringify(v)).join(' | ');
+  }
+  switch ((t || '').toLowerCase()) {
+    case 'string':
+    case 'text':
+    case 'uuid':
+    case 'email':
+    case 'url':
+      return 'string';
+    case 'int':
+    case 'integer':
+    case 'float':
+    case 'number':
+    case 'decimal':
+      return 'number';
+    case 'boolean':
+    case 'bool':
+      return 'boolean';
+    case 'datetime':
+    case 'date':
+    case 'time':
+    case 'timestamp':
+      return 'string';
+    case 'json':
+      return 'Record<string, unknown>';
+    default:
+      return 'unknown';
+  }
+}
+
+function isRequired(attr: any): boolean {
+  if (typeof attr === 'string') return /\brequired\b/.test(attr);
+  return !!attr?.required;
+}
+
+export async function generate(context: ApiTypesStarterContext): Promise<string> {
+  const models = context.spec.models ?? {};
+  const modelNames = Object.keys(models);
+
+  const header = `/**
+ * API types (ReactAppStarter)
+ *
+ * Per-model interfaces generated from the spec's model definitions.
+ * Safe to edit — extend these when your UI needs more than the spec
+ * describes (e.g. optimistic fields, denormalized joins).
+ */
+`;
+
+  const interfaces = modelNames.map(name => {
+    const model = models[name] || {};
+    const attrs = model.attributes || {};
+    const attrKeys = Object.keys(attrs);
+
+    const fields = attrKeys.map(attrName => {
+      const attr = attrs[attrName];
+      const tsType = mapAttrType(attr);
+      const optional = isRequired(attr) ? '' : '?';
+      return `  ${attrName}${optional}: ${tsType};`;
+    }).join('\n');
+
+    return `export interface ${name} {
+${fields || '  [key: string]: unknown;'}
+}`;
+  }).join('\n\n');
+
+  return header + '\n' + interfaces + '\n';
+}
+
+export default generate;

package/libs/instance-factories/applications/templates/react-starter/app-tsx-generator.ts

@@ -107,7 +107,7 @@ function buildNavEntries(models: string[]): string {
             </div>
             <button type="button" onClick={() => select('${m}', 'list')} className="${navButtonCls('list')}">List</button>
             <button type="button" onClick={() => select('${m}', 'dashboard')} className="${navButtonCls('dashboard')}">Dashboard</button>
-            <button type="button" onClick={() => select('${m}', 'form')} className="${navButtonCls('form')}">New</button>
+            <button type="button" onClick={() => select('${m}', 'form')} className="${navButtonCls('form')}">Form</button>
           </div>`).join('\n');
 }
 

package/libs/instance-factories/applications/templates/react-starter/belongs-to.ts

@@ -0,0 +1,82 @@
+/**
+ * Shared helper: extract belongsTo relationships from a model.
+ *
+ * Used by both the form-body composer (emits <select> dropdowns) and
+ * view-emitter (generates the import + hook wiring for those
+ * dropdowns). Keeping this in one place means form JSX and skeleton
+ * substitutions can't drift.
+ *
+ * Supports both shapes a parsed spec can use:
+ *   - Convention string: "belongsTo User cascade"
+ *   - Structured object: { type: "belongsTo", target: "User" }
+ */
+
+import type { ModelSpec } from './view-emitter.js';
+
+export interface BelongsToRel {
+  /** Relationship name — e.g. "owner", "assignee". */
+  name: string;
+  /** Target model name — e.g. "User". */
+  target: string;
+}
+
+export function extractBelongsToTargets(model: ModelSpec): BelongsToRel[] {
+  const rels = (model.relationships ?? {}) as Record<string, unknown>;
+  const out: BelongsToRel[] = [];
+
+  for (const [name, rawDef] of Object.entries(rels)) {
+    const parsed = parseBelongsTo(rawDef);
+    if (parsed) out.push({ name, target: parsed });
+  }
+  return out;
+}
+
+function parseBelongsTo(def: unknown): string | null {
+  // Convention string: "belongsTo User cascade" / "belongsTo User"
+  if (typeof def === 'string') {
+    const parts = def.trim().split(/\s+/);
+    if (parts[0] === 'belongsTo' && parts[1]) return parts[1];
+    return null;
+  }
+  // Structured: { type: "belongsTo", target: "User" } — support all
+  // of the field names the parsed spec can use ("target", "to",
+  // "model", "targetModel"). The normalizer upstream is inconsistent
+  // and normalizing it there is out of scope for this composer.
+  if (def && typeof def === 'object') {
+    const o = def as { type?: string; target?: string; to?: string; model?: string; targetModel?: string };
+    if (o.type === 'belongsTo') {
+      return o.target || o.to || o.model || o.targetModel || null;
+    }
+  }
+  return null;
+}
+
+/**
+ * Minimal English pluralizer, matching view-emitter's and
+ * use-api-hooks-starter-generator's convention. Centralizing it here
+ * keeps the generated hook names (useUsersQuery) aligned with what
+ * the emitter imports.
+ */
+export function pluralize(s: string): string {
+  if (/[^aeiou]y$/i.test(s)) return s.slice(0, -1) + 'ies';
+  if (/(s|x|z|ch|sh)$/i.test(s)) return s + 'es';
+  return s + 's';
+}
+
+/**
+ * Build a map from FK column name → belongsTo relationship. Used by
+ * every view composer (list, detail, dashboard, form) to detect when
+ * an attribute is really a foreign key and should render as a resolved
+ * display name, not a raw UUID.
+ *
+ * Convention: a belongsTo relationship named `owner` pointing at `User`
+ * implies a column `ownerId: UUID` on the owning model. This function
+ * materializes that convention.
+ */
+export function buildFKMap(model: ModelSpec): Map<string, BelongsToRel> {
+  const map = new Map<string, BelongsToRel>();
+  for (const rel of extractBelongsToTargets(model)) {
+    map.set(`${rel.name}Id`, rel);
+  }
+  return map;
+}

package/libs/instance-factories/applications/templates/react-starter/dashboard-body-composer.ts

@@ -12,6 +12,7 @@
 
 import { METADATA_FIELDS } from '@specverse/runtime/views/core';
 import type { EmitContext, ModelSpec } from './view-emitter.js';
+import { buildFKMap } from './belongs-to.js';
 
 const METADATA_FIELD_NAMES = new Set(METADATA_FIELDS);
 
@@ -19,6 +20,7 @@ export function composeDashboardBody(context: EmitContext): string {
   const modelName = context.model.name;
   const previewColumns = inferPreviewColumns(context.model);
   const enumFields = inferEnumFields(context.model);
+  const fkMap = buildFKMap(context.model);
 
   const lines: string[] = [];
 
@@ -55,9 +57,11 @@ export function composeDashboardBody(context: EmitContext): string {
     lines.push('    <thead>');
     lines.push('      <tr>');
     for (const col of previewColumns) {
+      const fk = fkMap.get(col);
+      const headerLabel = humanize(fk ? fk.name : col);
       lines.push(
         `        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">` +
-        humanize(col) +
+        headerLabel +
         `</th>`
       );
     }
@@ -71,9 +75,13 @@ export function composeDashboardBody(context: EmitContext): string {
     lines.push('          className="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"');
     lines.push('        >');
     for (const col of previewColumns) {
+      const fk = fkMap.get(col);
+      const expr = fk
+        ? `{resolveEntityDisplayName((item as any).${col}, ${fk.name}Options)}`
+        : `{String((item as any).${col} ?? '')}`;
       lines.push(
         `          <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">` +
-        `{String((item as any).${col} ?? '')}</td>`
+        `${expr}</td>`
       );
     }
     lines.push('        </tr>');
@@ -161,9 +169,16 @@ function inferEnumFields(model: ModelSpec): EnumField[] {
 
 function inferPreviewColumns(model: ModelSpec): string[] {
   const attrs = model.attributes ?? {};
-  return Object.keys(attrs)
-    .filter(n => !METADATA_FIELD_NAMES.has(n))
-    .slice(0, 4);   // cap to keep the table readable
+  const attrCols = Object.keys(attrs).filter(n => !METADATA_FIELD_NAMES.has(n));
+
+  // Include belongsTo FK columns so the preview shows "who does this
+  // belong to" at a glance. Matches the list-view convention.
+  const fkCols = [...buildFKMap(model).keys()].filter(k => !attrCols.includes(k));
+
+  // FKs are always useful at-a-glance, so keep them all. Cap the
+  // combined set at 5 to keep the preview table readable without
+  // crowding out the "who" columns.
+  return [...fkCols, ...attrCols].slice(0, Math.max(5, fkCols.length + 1));
 }
 
 function humanize(name: string): string {

package/libs/instance-factories/applications/templates/react-starter/detail-body-composer.ts

@@ -2,24 +2,18 @@
  * Detail-view body composer for ReactAppStarter
  *
  * Renders the interior of a detail view as a JSX-safe definition list:
- * business fields first (prominent), metadata fields second (muted).
+ * business fields first (prominent), belongsTo relationships resolved
+ * to display names in a dedicated section, metadata fields last (muted).
  * The outer card + actions live in `skeletons/detail.tsx.template`.
  *
- * Unlike list view, the interior here is mostly label→value pairs, not
- * a table. We use `<dl>` / `<dt>` / `<dd>` directly rather than routing
- * through a specific atomic component — the field-list shape isn't one
- * of the adapter's atomic components, and forcing it through a `card`
- * adapter would add structure without clarifying anything in the
- * generated code.
- *
- * BelongsTo relationships: today we emit the raw FK id. A future pass
- * will resolve FK → entity display name (matches runtime's
- * getEntityDisplayName). Marked with a TODO comment in the output so
- * users inspecting the generated file see the hook.
+ * belongsTo FK columns are resolved via `resolveEntityDisplayName`
+ * using option arrays (${relName}Options) wired in by view-emitter's
+ * RELATED_HOOKS substitution.
  */
 
 import { METADATA_FIELDS } from '@specverse/runtime/views/core';
 import type { EmitContext, ModelSpec } from './view-emitter.js';
+import { extractBelongsToTargets, type BelongsToRel } from './belongs-to.js';
 
 /**
  * Metadata attribute names rendered in a muted style. Sourced from
@@ -29,8 +23,12 @@ import type { EmitContext, ModelSpec } from './view-emitter.js';
 const METADATA_FIELD_NAMES = new Set(METADATA_FIELDS);
 
 export function composeDetailBody(context: EmitContext): string {
-  const { business, metadata } = partitionFields(context.model);
-  const belongsTo = extractBelongsTo(context.model);
+  // FK columns are excluded from business so we don't emit the raw
+  // UUID next to the resolved name. They surface in the belongsTo
+  // section instead, rendered via resolveEntityDisplayName.
+  const belongsTo = extractBelongsToTargets(context.model);
+  const fkExcludes = new Set(belongsTo.map(r => `${r.name}Id`));
+  const { business, metadata } = partitionFields(context.model, fkExcludes);
 
   const lines: string[] = [];
   lines.push('<div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">');
@@ -41,18 +39,15 @@ export function composeDetailBody(context: EmitContext): string {
       lines.push(...renderField(field, { muted: false }));
     }
     lines.push('  </dl>');
-  } else {
+  } else if (belongsTo.length === 0) {
     lines.push('  <p className="text-sm text-gray-400">No business fields defined for this model.</p>');
   }
 
   if (belongsTo.length > 0) {
     lines.push('');
-    lines.push('  {/* TODO: resolve FK ids → related entity display names.');
-    lines.push('      See @specverse/runtime/views/core/entity-display for the');
-    lines.push('      canonical resolver, or load the related record in a hook. */}');
     lines.push('  <dl className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 border-t border-gray-200 dark:border-gray-700 pt-4">');
     for (const rel of belongsTo) {
-      lines.push(...renderField({ name: `${rel}Id`, label: humanize(rel) }, { muted: false }));
+      lines.push(...renderRelationshipField(rel));
     }
     lines.push('  </dl>');
   }
@@ -76,11 +71,15 @@ interface Field {
   label?: string;
 }
 
-function partitionFields(model: ModelSpec): { business: Field[]; metadata: Field[] } {
+function partitionFields(
+  model: ModelSpec,
+  exclude: Set<string> = new Set(),
+): { business: Field[]; metadata: Field[] } {
   const attrs = Object.keys(model.attributes ?? {});
   const business: Field[] = [];
   const metadata: Field[] = [];
   for (const name of attrs) {
+    if (exclude.has(name)) continue;
     const field = { name, label: humanize(name) };
     if (METADATA_FIELD_NAMES.has(name)) {
       metadata.push(field);
@@ -92,20 +91,21 @@ function partitionFields(model: ModelSpec): { business: Field[]; metadata: Field
 }
 
 /**
- * Extract belongsTo relationship names from the model. Returns e.g.
- * `['author']` for a Post that `belongsTo Author`. The skeleton's
- * item already has `authorId` as a scalar field — we surface it
- * explicitly in its own section so the generated UI separates "this
- * entity's data" from "related entities."
+ * Render a belongsTo row as a label + resolved display name. The
+ * options array (${relName}Options) is populated by the hook call
+ * wired into the detail skeleton via view-emitter's RELATED_HOOKS.
  */
-function extractBelongsTo(model: ModelSpec): string[] {
-  const rels = model.relationships ?? {};
-  const out: string[] = [];
-  for (const [name, def] of Object.entries(rels)) {
-    const d = def as { type?: string };
-    if (d?.type === 'belongsTo') out.push(name);
-  }
-  return out;
+function renderRelationshipField(rel: BelongsToRel): string[] {
+  const label = humanize(rel.name);
+  const fkName = `${rel.name}Id`;
+  const optionsVar = `${rel.name}Options`;
+  return [
+    '    <div>',
+    `      <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${label}</dt>`,
+    `      <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 break-words">` +
+      `{resolveEntityDisplayName((item as any).${fkName}, ${optionsVar})}</dd>`,
+    '    </div>',
+  ];
 }
 
 function renderField(field: Field, opts: { muted: boolean }): string[] {

package/libs/instance-factories/applications/templates/react-starter/form-body-composer.ts

@@ -10,15 +10,16 @@
  * Auto-generated fields (id, timestamps, `auto=...` markers) are
  * omitted — the backend assigns them.
  *
- * Relationship fields (belongsTo) are emitted as plain-text inputs
- * for the FK column with a TODO comment. Wiring them to a proper
- * dropdown requires a hook that loads the related list at form render
- * time; deferred to a later pass. The inline TODO is the hook for
- * users who want to upgrade.
+ * Relationship fields (belongsTo) are emitted as <select> dropdowns
+ * backed by the related model's list query. The corresponding hook
+ * calls and imports are wired by view-emitter via the RELATED_HOOKS /
+ * RELATED_IMPORTS substitutions — this composer only emits the JSX
+ * that consumes the `${relName}Options` variable.
  */
 
 import { METADATA_FIELDS } from '@specverse/runtime/views/core';
 import type { EmitContext, ModelSpec } from './view-emitter.js';
+import { extractBelongsToTargets, type BelongsToRel } from './belongs-to.js';
 
 /**
  * Attribute names the backend always generates — never render as
@@ -32,11 +33,12 @@ const AUTO_GENERATED_FIELD_NAMES = new Set(METADATA_FIELDS);
  * Compose the form body as JSX-safe source. Dropped at `{{BODY}}`.
  */
 export function composeFormBody(context: EmitContext): string {
-  const belongsTo = extractBelongsTo(context.model);
+  const belongsTo = extractBelongsToTargets(context.model);
   // FK columns shadowed by a belongsTo relationship are emitted in the
-  // belongsTo section with a nicer label ("Author" instead of
-  // "Author Id") — skip them in the main loop so we don't render twice.
-  const shadowedFKs = new Set(belongsTo.map(rel => `${rel}Id`));
+  // belongsTo section as <select>s — skip them in the main loop so we
+  // don't render both a plain-text input and a dropdown for the same
+  // column.
+  const shadowedFKs = new Set(belongsTo.map(rel => `${rel.name}Id`));
   const fields = selectFormFields(context.model, shadowedFKs);
 
   const lines: string[] = [];
@@ -52,24 +54,43 @@ export function composeFormBody(context: EmitContext): string {
     lines.push(...renderInput(field));
   }
 
-  if (belongsTo.length > 0) {
-    lines.push('');
-    lines.push('  {/* TODO: swap these text inputs for <select>s that load the related');
-    lines.push('      entities. See useEntitiesQuery(TargetModel) in the runtime hooks. */}');
-    for (const rel of belongsTo) {
-      lines.push(...renderInput({
-        name: `${rel}Id`,
-        label: humanize(rel),
-        type: 'String',
-        required: true,
-      }));
-    }
+  for (const rel of belongsTo) {
+    lines.push(...renderRelationshipSelect(rel));
   }
 
   lines.push('</div>');
   return lines.join('\n');
 }
 
+/**
+ * Emit a <select> dropdown for a belongsTo relationship. The options
+ * array (`${relName}Options`) is populated by the hook call wired in
+ * via view-emitter's RELATED_HOOKS substitution. Labels use
+ * `getEntityDisplayName` so users see human names instead of UUIDs.
+ */
+function renderRelationshipSelect(rel: BelongsToRel): string[] {
+  const fkName = `${rel.name}Id`;
+  const varName = `${rel.name}Options`;
+  const label = humanize(rel.name);
+
+  return [
+    '  <div>',
+    `    <label className="${LABEL_CLS}" htmlFor="${fkName}">${label} *</label>`,
+    `    <select`,
+    `      id="${fkName}"`,
+    `      className="${INPUT_CLS}"`,
+    `      value={String((formData as any).${fkName} ?? '')}`,
+    `      onChange={e => handleChange('${fkName}', e.target.value)} required`,
+    `    >`,
+    `      <option value="">— choose —</option>`,
+    `      {${varName}.map((opt: any) => (`,
+    `        <option key={opt.id} value={opt.id}>{getEntityDisplayName(opt)}</option>`,
+    `      ))}`,
+    `    </select>`,
+    '  </div>',
+  ];
+}
+
 // ──────────────────────────────────────────────────────────────────────
 // Field selection
 // ──────────────────────────────────────────────────────────────────────
@@ -90,6 +111,8 @@ function selectFormFields(
 ): FieldInfo[] {
   const out: FieldInfo[] = [];
   const attrs = model.attributes ?? {};
+  const lifecycleStates = extractLifecycleStates(model);
+
   for (const [name, rawDef] of Object.entries(attrs)) {
     if (AUTO_GENERATED_FIELD_NAMES.has(name)) continue;
     if (skip.has(name)) continue;
@@ -102,7 +125,14 @@ function selectFormFields(
     // they're present.
     const type = (def?.type ?? parseTypeFromConvention(def)) ?? 'String';
     const required = def?.required === true || hasConventionFlag(def, 'required');
-    const values = def?.values as string[] | undefined;
+    const declaredValues = def?.values as string[] | undefined;
+    // Lifecycle-backed attributes: if the model declares a lifecycle
+    // with the same name as this attribute, the attribute's valid
+    // values are the lifecycle states. Matches the FK rule's spirit —
+    // any attribute whose legal values are declared elsewhere in the
+    // spec should render as a <select>, not free text.
+    const lifecycleValues = lifecycleStates.get(name);
+    const values = declaredValues ?? lifecycleValues;
     const maxLength = def?.maxLength ?? def?.max as number | undefined;
     const isLongString =
       typeof maxLength === 'number' && maxLength > 100;
@@ -119,6 +149,58 @@ function selectFormFields(
   return out;
 }
 
+/**
+ * Map from attribute name → list of lifecycle states, extracted from
+ * the model's `lifecycles` section. Supports both the convention-string
+ * shape (`flow: "a -> b -> c"`) and structured (`states: ["a", ...]`).
+ *
+ * Example:
+ *   lifecycles:
+ *     status:
+ *       flow: "planning -> active -> completed -> archived"
+ * returns { status → ['planning', 'active', 'completed', 'archived'] }
+ */
+function extractLifecycleStates(model: ModelSpec): Map<string, string[]> {
+  const out = new Map<string, string[]>();
+  const lifecycles = (model as ModelSpec & { lifecycles?: Record<string, unknown> }).lifecycles ?? {};
+
+  for (const [name, rawDef] of Object.entries(lifecycles)) {
+    if (!rawDef || typeof rawDef !== 'object') continue;
+    // The parser normalizes lifecycles into a rich structured form:
+    //   { flow: "a -> b -> c",
+    //     states: [{ name: "a" }, { name: "b" }, { name: "c" }],
+    //     transitions: [...],
+    //     initialState: "a" }
+    // Also support the pre-normalization shape (states as plain strings,
+    // or just a flow string) so the composer works on raw specs too.
+    const def = rawDef as {
+      flow?: string;
+      states?: Array<string | { name?: string; id?: string }>;
+    };
+
+    if (Array.isArray(def.states) && def.states.length > 0) {
+      const names = def.states
+        .map(s => (typeof s === 'string' ? s : s?.name ?? s?.id ?? ''))
+        .filter(Boolean);
+      if (names.length > 0) {
+        out.set(name, names);
+        continue;
+      }
+    }
+
+    if (typeof def.flow === 'string') {
+      // Split on -> with optional whitespace. Also accept commas as a
+      // fallback separator so a state list like "a, b, c" still works.
+      const states = def.flow
+        .split(/\s*(?:->|,)\s*/)
+        .map(s => s.trim())
+        .filter(Boolean);
+      if (states.length > 0) out.set(name, states);
+    }
+  }
+  return out;
+}
+
 /** Structured attribute object from the parsed spec. */
 interface AttributeShape {
   type?: string;
@@ -152,14 +234,9 @@ function normalizeType(type: string): string {
   return type.replace(/[^A-Za-z].*$/, '');
 }
 
-function extractBelongsTo(model: ModelSpec): string[] {
-  const rels = model.relationships ?? {};
-  const out: string[] = [];
-  for (const [name, def] of Object.entries(rels)) {
-    if ((def as { type?: string })?.type === 'belongsTo') out.push(name);
-  }
-  return out;
-}
+// (`extractBelongsTo` was removed — the shared helper in
+// `./belongs-to.ts` returns both the relationship name AND the target
+// model so view-emitter can wire the hook call for each dropdown.)
 
 // ──────────────────────────────────────────────────────────────────────
 // Input rendering

package/libs/instance-factories/applications/templates/react-starter/helpers-emitter.ts

@@ -46,14 +46,20 @@ export function getEntityDisplayName(entity: Record<string, unknown> | null | un
 /**
  * Map an entity id to the display name of the record with that id in
  * a provided list. Handy for resolving belongsTo FK columns in
- * list / detail views.
+ * list / detail / dashboard views.
+ *
+ * Typed as \`readonly unknown[]\` so callers can pass arrays of
+ * specific model types (e.g. \`User[]\`) without needing to cast; the
+ * runtime check on \`.id\` narrows safely.
  */
 export function resolveEntityDisplayName(
   id: unknown,
-  records: ReadonlyArray<Record<string, unknown>>
+  records: readonly unknown[]
 ): string {
   if (id == null) return '';
-  const match = records.find(r => r.id === id);
+  const match = records.find((r): r is Record<string, unknown> =>
+    typeof r === 'object' && r !== null && (r as { id?: unknown }).id === id
+  );
   return match ? getEntityDisplayName(match) : String(id);
 }
 `;