@specverse/engines 4.2.1 → 4.3.0

package/dist/libs/instance-factories/applications/templates/react-starter/view-emitter.js

@@ -1,7 +1,9 @@
 import { readFileSync } from "fs";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
-import { extractBelongsToTargets, pluralize as pluralizeShared } from "./belongs-to.js";
+import { walkPatternSection } from "@specverse/runtime/views/core";
+import { extractBelongsToTargets, extractHasManyTargets, pluralize as pluralizeShared } from "./belongs-to.js";
+import { emitJsxSource } from "./emit-jsx-source.js";
 function emitView(context) {
   const skeleton = loadSkeleton(context.view.type);
   const bodyJsx = context.renderBody(context);
@@ -32,6 +34,8 @@ function buildSubstitutions(context, body) {
   const modelName = context.model.name;
   const pluralModel = pluralize(modelName);
   const { imports, hooks } = buildBelongsToWiring(context);
+  const lifecycle = buildLifecycleSubstitutions(context);
+  const { fieldsBody, existingListBody } = buildFormSplitBodies(context);
   return {
     MODEL_NAME: modelName,
     PLURAL_MODEL: pluralModel,
@@ -39,25 +43,234 @@ function buildSubstitutions(context, body) {
     SINGULAR_LOWER: modelName.toLowerCase(),
     BODY: body,
     RELATED_IMPORTS: imports,
-    RELATED_HOOKS: hooks
+    RELATED_HOOKS: hooks,
+    RELATED_TAB_STATE: buildRelatedTabState(context),
+    RELATED_TAB_IMPORT: buildRelatedTabImport(context),
+    FIELDS_BODY: fieldsBody,
+    EXISTING_LIST_BODY: existingListBody,
+    ...lifecycle
   };
 }
+function buildFormSplitBodies(context) {
+  if (context.view.type.toLowerCase() !== "form") {
+    return { fieldsBody: "", existingListBody: "" };
+  }
+  const walkCtx = {
+    model: context.model,
+    modelSchemas: context.modelSchemas,
+    view: context.view
+  };
+  const imports = /* @__PURE__ */ new Set();
+  const fieldsNodes = walkPatternSection("form-view", "fields", walkCtx);
+  const listNodes = walkPatternSection("form-view", "existing-entities-list", walkCtx);
+  return {
+    fieldsBody: emitJsxSource(fieldsNodes, { imports, indent: 10 }),
+    existingListBody: emitJsxSource(listNodes, { imports, indent: 6 })
+  };
+}
+function buildLifecycleSubstitutions(context) {
+  const isForm = context.view.type.toLowerCase() === "form";
+  const lifecycles = extractLifecycles(context.model);
+  if (!isForm || lifecycles.length === 0) {
+    return {
+      LIFECYCLE_IMPORTS: "",
+      LIFECYCLE_HOOK: "",
+      LIFECYCLE_STATE: "",
+      LIFECYCLE_HANDLER: "",
+      LIFECYCLE_PANEL: "",
+      HAS_LIFECYCLES: "false"
+    };
+  }
+  const modelName = context.model.name;
+  const primary = lifecycles[0];
+  const lifecyclesConst = `${modelName.toUpperCase()}_LIFECYCLES`;
+  return {
+    LIFECYCLE_IMPORTS: `  useEvolve${modelName}Mutation,
+  ${lifecyclesConst},`,
+    LIFECYCLE_HOOK: `  const evolveItem = useEvolve${modelName}Mutation();`,
+    LIFECYCLE_STATE: `  const [targetState, setTargetState] = useState<string>('');`,
+    LIFECYCLE_HANDLER: `  const handleEvolveSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!targetState) return;
+    try {
+      const result = await evolveItem.mutateAsync({
+        id: entityId as any,
+        toState: targetState,
+        lifecycleName: '${primary.name}',
+      });
+      onSuccess?.(result as ${modelName});
+    } catch {
+      // Evolve errors are surfaced via evolveItem.isError.
+    }
+  };`,
+    LIFECYCLE_PANEL: buildLifecyclePanel(modelName, primary, lifecyclesConst),
+    HAS_LIFECYCLES: "true"
+  };
+}
+function buildLifecyclePanel(modelName, primary, lifecyclesConst) {
+  return `      {showTabs && activeTab === 'evolve' && (
+        <form onSubmit={handleEvolveSubmit} className="space-y-6">
+          <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
+            <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div>
+                <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Current ${humanize(primary.name)}</dt>
+                <dd className="mt-1">
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
+                    {String((existing as any)?.${primary.name} ?? '')}
+                  </span>
+                </dd>
+              </div>
+              <div>
+                <label htmlFor="evolve-target" className="block text-sm font-medium text-gray-500 dark:text-gray-400">Next ${humanize(primary.name)}</label>
+                <select
+                  id="evolve-target"
+                  value={targetState}
+                  onChange={e => setTargetState(e.target.value)}
+                  className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+                >
+                  <option value="">\u2014 choose \u2014</option>
+                  {${lifecyclesConst}.${primary.name}.states.map(s => (
+                    <option key={s} value={s}>{s}</option>
+                  ))}
+                </select>
+              </div>
+            </dl>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={evolveItem.isPending || !targetState}
+              className="rounded bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-700 disabled:opacity-60"
+            >
+              {evolveItem.isPending ? 'Evolving\u2026' : \`Evolve to \${targetState || '\u2026'}\`}
+            </button>
+          </div>
+
+          {evolveItem.isError && (
+            <div className="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+              Evolve failed: {String(evolveItem.error)}
+            </div>
+          )}
+        </form>
+      )}`;
+}
+function extractLifecycles(model) {
+  const out = [];
+  const lifecycles = model?.lifecycles ?? {};
+  for (const [name, def] of Object.entries(lifecycles)) {
+    if (!def || typeof def !== "object") continue;
+    let states = [];
+    if (Array.isArray(def.states)) {
+      states = def.states.map((s) => typeof s === "string" ? s : s?.name ?? s?.id ?? "").filter(Boolean);
+    } else if (typeof def.flow === "string") {
+      states = def.flow.split(/\s*(?:->|,)\s*/).map((s) => s.trim()).filter(Boolean);
+    }
+    if (states.length > 0) out.push({ name, states });
+  }
+  return out;
+}
+function humanize(name) {
+  return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
+}
+function buildRelatedTabImport(context) {
+  if (context.view.type.toLowerCase() !== "detail") return "";
+  const hasMany = extractHasManyTargets(context.model, context.modelSchemas);
+  if (hasMany.length < 2) return "";
+  return `import { useState } from 'react';`;
+}
+function buildRelatedTabState(context) {
+  if (context.view.type.toLowerCase() !== "detail") return "";
+  const hasMany = extractHasManyTargets(context.model, context.modelSchemas);
+  if (hasMany.length < 2) return "";
+  const firstName = hasMany[0].name;
+  return `  const [relatedTab, setRelatedTab] = useState<string>('${firstName}');`;
+}
 function buildBelongsToWiring(context) {
-  const rels = extractBelongsToTargets(context.model);
-  if (rels.length === 0) return { imports: "", hooks: "" };
+  const belongsTo = extractBelongsToTargets(context.model);
+  const isDetail = context.view.type.toLowerCase() === "detail";
+  const hasMany = isDetail ? extractHasManyTargets(context.model, context.modelSchemas) : [];
+  const crossBelongsTo = [];
+  if (isDetail) {
+    for (const rel of hasMany) {
+      const targetModel = context.modelSchemas[rel.target];
+      if (!targetModel) continue;
+      const targetFK = rel.foreignKey;
+      for (const btm of extractBelongsToTargets(targetModel)) {
+        if (`${btm.name}Id` === targetFK) continue;
+        crossBelongsTo.push(btm);
+      }
+    }
+  }
+  if (belongsTo.length === 0 && hasMany.length === 0 && crossBelongsTo.length === 0) {
+    const vt = context.view.type.toLowerCase();
+    if (vt === "detail") {
+      return {
+        imports: `import { getEntityDisplayName, formatDisplayValue } from '../lib/entity-display';`,
+        hooks: ""
+      };
+    }
+    if (vt === "list" || vt === "dashboard") {
+      return {
+        imports: `import { formatDisplayValue } from '../lib/entity-display';`,
+        hooks: ""
+      };
+    }
+    return { imports: "", hooks: "" };
+  }
   const hookImportNames = /* @__PURE__ */ new Set();
-  for (const rel of rels) {
+  for (const rel of belongsTo) {
+    hookImportNames.add(`use${pluralizeShared(rel.target)}Query`);
+  }
+  for (const rel of hasMany) {
+    hookImportNames.add(`use${pluralizeShared(rel.target)}Query`);
+  }
+  for (const rel of crossBelongsTo) {
     hookImportNames.add(`use${pluralizeShared(rel.target)}Query`);
   }
-  const helperImport = context.view.type.toLowerCase() === "form" ? "getEntityDisplayName" : "resolveEntityDisplayName";
+  const viewType = context.view.type.toLowerCase();
+  const helperImports = /* @__PURE__ */ new Set();
+  if (viewType === "form") {
+    helperImports.add("getEntityDisplayName");
+  } else if (viewType === "detail") {
+    helperImports.add("getEntityDisplayName");
+    helperImports.add("formatDisplayValue");
+    if (belongsTo.length > 0 || crossBelongsTo.length > 0) {
+      helperImports.add("resolveEntityDisplayName");
+    }
+  } else if (viewType === "list" || viewType === "dashboard") {
+    helperImports.add("resolveEntityDisplayName");
+    helperImports.add("formatDisplayValue");
+  } else {
+    helperImports.add("resolveEntityDisplayName");
+  }
   const importLines = [];
   importLines.push(
     `import { ${[...hookImportNames].join(", ")} } from '../hooks/useApi';`
   );
-  importLines.push(`import { ${helperImport} } from '../lib/entity-display';`);
-  const hookLines = rels.map(
-    (rel) => `  const { data: ${rel.name}Options = [] } = use${pluralizeShared(rel.target)}Query();`
-  );
+  if (helperImports.size > 0) {
+    importLines.push(`import { ${[...helperImports].join(", ")} } from '../lib/entity-display';`);
+  }
+  const hookLines = [];
+  for (const rel of belongsTo) {
+    hookLines.push(
+      `  const { data: ${rel.name}Options = [] } = use${pluralizeShared(rel.target)}Query();`
+    );
+  }
+  for (const rel of hasMany) {
+    hookLines.push(
+      `  const { data: ${rel.name}All = [] } = use${pluralizeShared(rel.target)}Query();`
+    );
+  }
+  const emittedOptionsVars = new Set(belongsTo.map((r) => `${r.name}Options`));
+  for (const rel of crossBelongsTo) {
+    const varName = `${rel.name}Options`;
+    if (emittedOptionsVars.has(varName)) continue;
+    emittedOptionsVars.add(varName);
+    hookLines.push(
+      `  const { data: ${varName} = [] } = use${pluralizeShared(rel.target)}Query();`
+    );
+  }
   return {
     imports: importLines.join("\n"),
     hooks: hookLines.join("\n")

package/dist/libs/instance-factories/applications/templates/react-starter/views-generator.js

@@ -3,7 +3,9 @@ import { composeListBody } from "./list-body-composer.js";
 import { composeDetailBody } from "./detail-body-composer.js";
 import { composeFormBody } from "./form-body-composer.js";
 import { composeDashboardBody } from "./dashboard-body-composer.js";
-import { emitEntityDisplay } from "./helpers-emitter.js";
+import { emitEntityDisplay, emitUseResizableSidebar, emitUseAppEvents } from "./helpers-emitter.js";
+import { emitFieldInput, emitOperationExecutor, emitOperationResultView } from "./operation-emitters.js";
+import { collectOperationViews, emitOperationView } from "./operation-view-generator.js";
 const PRIMARY_VIEW_TYPES = ["list", "detail", "form", "dashboard"];
 const COMPOSER_BY_TYPE = {
   list: composeListBody,
@@ -42,7 +44,18 @@ async function generate(context) {
       `[ReactAppStarter] Skipped ${skippedSpecialists.length} specialist view(s) \u2014 implement composers for: ${[...new Set(Object.values(viewsBySpec).filter((v) => !PRIMARY_VIEW_TYPES.includes(v.type)).map((v) => v.type))].join(", ")}. Skipped: ${skippedSpecialists.join(", ")}`
     );
   }
+  const operationViews = collectOperationViews(spec);
+  for (const desc of operationViews) {
+    files[`src/views/${desc.viewName}.tsx`] = emitOperationView(desc);
+  }
   files["src/lib/entity-display.ts"] = emitEntityDisplay();
+  files["src/hooks/useResizableSidebar.ts"] = emitUseResizableSidebar();
+  files["src/hooks/useAppEvents.tsx"] = emitUseAppEvents();
+  if (operationViews.length > 0) {
+    files["src/lib/FieldInput.tsx"] = emitFieldInput();
+    files["src/lib/OperationExecutor.tsx"] = emitOperationExecutor();
+    files["src/lib/OperationResultView.tsx"] = emitOperationResultView();
+  }
   return files;
 }
 function indexViews(views) {

package/dist/libs/instance-factories/controllers/templates/fastify/routes-generator.js

@@ -187,9 +187,21 @@ function generateHandlerBody(operation, modelName, handlerName, isModelControlle
   await handler.delete(id);
   return reply.status(204).send();
 } catch (error) {
+  // Prisma's P2003 is the foreign-key-constraint-violated error. When
+  // a ${lowerModel} has children (hasMany relationships not declared
+  // with 'cascade'), SQLite / Postgres refuse the delete and we land
+  // here. Return a 409 Conflict with a specific hint rather than a 500
+  // with a raw Prisma dump \u2014 the frontend shows the message verbatim.
+  const msg = error instanceof Error ? error.message : String(error);
+  if (msg.includes('P2003') || msg.toLowerCase().includes('foreign key constraint')) {
+    return reply.status(409).send({
+      error: 'Cannot delete ${lowerModel}',
+      message: \`This ${lowerModel} has related records. Delete those first, or declare the relationship with 'cascade' in your spec to delete them automatically.\`
+    });
+  }
   return reply.status(500).send({
     error: 'Failed to delete ${lowerModel}',
-    message: error instanceof Error ? error.message : String(error)
+    message: msg
   });
 }`;
     case "list":

package/dist/libs/instance-factories/controllers/templates/fastify/server-generator.js

@@ -118,6 +118,24 @@ ${hasEvents ? `    // Register WebSocket bridge for real-time frontend events
     console.log(\`API endpoints: ${modelNames.map((n) => `/api/${pluralizeLower(n)}`).join(", ")}\`);
 ${hasEvents ? `    console.log(\`WebSocket: ws://localhost:\${port}/ws\`);
     console.log(\`Events: ${specEvents.length} wired (GET /api/runtime/events for the full list)\`);` : ""}
+
+    // Graceful shutdown \u2014 without these handlers, Ctrl-C leaves open
+    // WebSocket connections + Prisma clients hanging, and tsx watch
+    // reports "Previous process hasn't exited yet. Force killing...".
+    // Drain Fastify (closes HTTP + WS), then disconnect Prisma, then exit.
+    const shutdown = async (signal: string) => {
+      try {
+        fastify.log.info(\`Received \${signal}, closing server...\`);
+        await fastify.close();
+        try { await (prisma as any).$disconnect?.(); } catch { /* ignore */ }
+        process.exit(0);
+      } catch (err) {
+        fastify.log.error({ err }, 'Error during shutdown');
+        process.exit(1);
+      }
+    };
+    process.on('SIGINT', () => shutdown('SIGINT'));
+    process.on('SIGTERM', () => shutdown('SIGTERM'));
   } catch (err) {
     fastify.log.error(err);
     process.exit(1);

package/libs/instance-factories/applications/templates/react/index-html-generator.ts

@@ -13,7 +13,7 @@ export default function generateIndexHtml(context: TemplateContext): string {
   const description = spec.metadata?.description || 'Generated by SpecVerse';
 
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -21,7 +21,7 @@ export default function generateIndexHtml(context: TemplateContext): string {
     <meta name="description" content="${description}" />
     <title>${appName}</title>
   </head>
-  <body>
+  <body class="bg-gray-950 text-gray-100">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

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

@@ -130,7 +130,9 @@ describe('composeDashboardBody — recent preview', () => {
 describe('composeDashboardBody — TODO comments', () => {
   it('flags the extension point for aggregation metrics', () => {
     const body = composeDashboardBody(makeContext());
-    expect(body).toContain('TODO: add aggregation metrics');
+    // Phase 2: the TODO now sits in the 'charts' section (not the
+    // 'metrics' row) since metrics are rendered as count cards.
+    expect(body).toContain('TODO: add aggregation charts');
   });
 });
 

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

@@ -50,7 +50,7 @@ function assertValidTsx(source: string, label: string): void {
 }
 
 describe('composeDetailBody — direct output', () => {
-  it('groups fields into business / belongsTo / metadata sections', () => {
+  it('groups fields into business and belongsTo sections; omits metadata', () => {
     const body = composeDetailBody(makeContext());
 
     // Business fields (first <dl>)
@@ -63,24 +63,20 @@ describe('composeDetailBody — direct output', () => {
     expect(body).toContain('>Author<');
     expect(body).toContain('resolveEntityDisplayName((item as any).authorId, authorOptions)');
 
-    // Metadata section (id / createdAt / publishedAt) — muted styling
-    expect(body).toContain('>Id<');
-    expect(body).toContain('>Created At<');
-    expect(body).toContain('>Published At<');
-    expect(body).toContain('text-xs text-gray-500');
-
-    // Business section is separate from metadata (no mixing)
-    const businessIdx = body.indexOf('>Title<');
-    const metadataIdx = body.indexOf('>Id<');
-    expect(businessIdx).toBeLessThan(metadataIdx);
+    // Metadata (id / createdAt / publishedAt) is deliberately NOT rendered
+    // in the detail view — the list view surfaces it when users need it.
+    expect(body).not.toContain('>Id<');
+    expect(body).not.toContain('>Created At<');
+    expect(body).not.toContain('>Published At<');
   });
 
-  it('emits one <dt>/<dd> per field with (item as any).FIELD access', () => {
+  it('emits one <dt>/<dd> per business field with (item as any).FIELD access', () => {
     const body = composeDetailBody(makeContext());
-    expect(body).toContain('(item as any).title ??');
-    expect(body).toContain('(item as any).body ??');
-    expect(body).toContain('(item as any).id ??');
-    expect(body).toContain('(item as any).createdAt ??');
+    expect(body).toContain('formatDisplayValue((item as any).title)');
+    expect(body).toContain('formatDisplayValue((item as any).body)');
+    // Metadata access expressions are absent.
+    expect(body).not.toContain('formatDisplayValue((item as any).id)');
+    expect(body).not.toContain('formatDisplayValue((item as any).createdAt)');
   });
 
   it('falls back to a "no business fields" message when all attrs are metadata', () => {
@@ -125,22 +121,25 @@ describe('emitView wired to composeDetailBody — end-to-end', () => {
     assertValidTsx(source, 'PostDetailView');
   });
 
-  it('wires the skeleton: component, hooks, actions, body', () => {
+  it('wires the skeleton: component, query hook, picker, body', () => {
     const source = emitView(makeContext());
     expect(source).toContain('export function PostDetailView');
     expect(source).toContain('usePostsQuery');
-    expect(source).toContain('useDeletePostMutation');
-    expect(source).toContain('Post detail');
-    expect(source).toContain('onEdit(item)');
-    expect(source).toContain("confirm('Delete this post?')");
-    expect(source).toContain('(item as any).title ??');
+    expect(source).toContain('Select Post:');
+    expect(source).toContain('formatDisplayValue((item as any).title)');
     expect(source).not.toMatch(/\{\{[A-Z_]+\}\}/);
+    // Detail is inspection-only — delete/edit live in the form view.
+    expect(source).not.toContain('useDeletePostMutation');
+    expect(source).not.toContain('onEdit(item)');
+    expect(source).not.toContain("confirm('Delete this post?')");
   });
 
-  it('handles plural singular correctly for the loading / not-found copy', () => {
+  it('handles plural / singular correctly for loading + empty copy', () => {
     const source = emitView(makeContext());
     expect(source).toContain('Loading…');
-    // SINGULAR_LOWER substitution: "No post matching id ..."
-    expect(source).toContain('No post matching id');
+    // SINGULAR_LOWER substitution: "No post to display."
+    expect(source).toContain('No post to display');
+    // PLURAL_LOWER substitution: "No posts yet" (picker empty state)
+    expect(source).toContain('No posts yet');
   });
 });

package/libs/instance-factories/applications/templates/react-starter/__tests__/list-body-composer.test.ts

@@ -82,11 +82,11 @@ describe('composeListBody — direct output', () => {
     expect(body).toContain('onClick={() => onSelect?.(item)}');
 
     // Count how many times each field name appears in cell-context (inside
-    // the `<td>...item.FIELD ??` substring). Metadata should appear 0 times;
-    // business fields exactly once each.
+    // the `<td>...formatDisplayValue((item as any).FIELD)...` substring).
+    // Metadata should appear 0 times; business fields exactly once each.
     const cellsRegion = body.slice(body.indexOf('<tbody'));
     const cellAppearances = (field: string) =>
-      (cellsRegion.match(new RegExp(`item as any\\)\\.${field} \\?\\?`, 'g')) ?? []).length;
+      (cellsRegion.match(new RegExp(`formatDisplayValue\\(\\(item as any\\)\\.${field}\\)`, 'g')) ?? []).length;
 
     expect(cellAppearances('title')).toBe(1);
     expect(cellAppearances('body')).toBe(1);

package/libs/instance-factories/applications/templates/react-starter/__tests__/orchestrator.test.ts

@@ -88,6 +88,8 @@ describe('orchestrator — first-run (empty project)', () => {
       `${HASHES_DIR}/${HASHES_FILE}`,
       'package.json',
       'src/App.tsx',
+      'src/hooks/useAppEvents.tsx',
+      'src/hooks/useResizableSidebar.ts',
       'src/lib/entity-display.ts',
       'src/views/PostDashboardView.tsx',
       'src/views/PostDetailView.tsx',

package/libs/instance-factories/applications/templates/react-starter/__tests__/parity-p3-rendered-output.test.ts

@@ -151,7 +151,7 @@ describe('P3 — list view table shell parity', () => {
     expect(body).toContain('overflow-x-auto');
     expect(body).toContain('min-w-full');
     expect(body).toContain('divide-y divide-gray-200');
-    expect(body).toContain('bg-gray-50 dark:bg-gray-800');
+    expect(body).toContain('bg-gray-50 dark:bg-gray-700');
   });
 
   it('rows are synthesized by Factory B (the adapter emits placeholder for react mount)', () => {

package/libs/instance-factories/applications/templates/react-starter/__tests__/starter-generators.test.ts

@@ -40,15 +40,16 @@ describe('app-tsx-generator', () => {
     // One import per (model, view) pair — 2 models × 4 view types = 8 imports
     const importLines = source.match(/^import \{ \w+View \} from '\.\/views\//gm) ?? [];
     expect(importLines.length).toBe(8);
-    // Navigation wiring
-    expect(source).toContain("select('Post', 'list')");
-    expect(source).toContain("select('Author', 'dashboard')");
+    // Navigation wiring — post-R0, setSelection is inlined (no select() helper).
+    // Selection state is a discriminated union with kind='model' for CRUD views.
+    expect(source).toContain(`setSelection({ kind: 'model', model: 'Post', view: 'list' })`);
+    expect(source).toContain(`setSelection({ kind: 'model', model: 'Author', view: 'dashboard' })`);
   });
 
   it('handles an empty spec gracefully', async () => {
     const source = await generateAppTsx({ spec: { models: {}, views: {} } });
     assertValidTsx(source, 'App.tsx (empty spec)');
-    expect(source).toContain('No models in this spec.');
+    expect(source).toContain('No models or operations');
     // Still renders a QueryClientProvider
     expect(source).toContain('QueryClientProvider');
   });

package/libs/instance-factories/applications/templates/react-starter/__tests__/views-generator.test.ts

@@ -58,8 +58,11 @@ describe('views-generator.generate', () => {
     expect(paths).toContain('src/views/AuthorFormView.tsx');
     expect(paths).toContain('src/views/AuthorDashboardView.tsx');
     expect(paths).toContain('src/lib/entity-display.ts');
-    // 2 models × 4 view types + 1 helper = 9 files.
-    expect(paths.length).toBe(9);
+    expect(paths).toContain('src/hooks/useResizableSidebar.ts');
+    expect(paths).toContain('src/hooks/useAppEvents.tsx');
+    // 2 models × 4 view types + 3 helpers (entity-display, useResizableSidebar,
+    // useAppEvents) = 11 files.
+    expect(paths.length).toBe(11);
   });
 
   it('every emitted view file parses as valid TSX', async () => {
@@ -133,7 +136,11 @@ describe('views-generator.generate', () => {
 
   it('handles an empty models map gracefully', async () => {
     const files = await generate({ spec: { models: {}, views: {} } });
-    // Only the helpers file is emitted; no view files.
-    expect(Object.keys(files)).toEqual(['src/lib/entity-display.ts']);
+    // Only the helper files are emitted; no view files.
+    expect(Object.keys(files).sort()).toEqual([
+      'src/hooks/useAppEvents.tsx',
+      'src/hooks/useResizableSidebar.ts',
+      'src/lib/entity-display.ts',
+    ]);
   });
 });