From 35cbf96cbcfd7c24c5588df8bc887722b4e110d6 Mon Sep 17 00:00:00 2001
From: Chris Tse <2302191+christse@users.noreply.github.com>
Date: Fri, 24 Jul 2026 12:09:47 -0400
Subject: [PATCH] Fix default templates crashing when card model is transiently
 undefined
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The default isolated/edit template derived the card class from
model.constructor inside tracked getters. The host can render a format
component for a tick while the model instance is still resolving
(initial load, or a store re-resolve after an incremental index
invalidation lands under an open card), which crashed the render with
"Cannot read properties of undefined (reading 'constructor')".

The class is already passed to every format component as @cardOrField —
head.gts and embedded.gts use it for exactly this reason — so take it
from there instead of digging it out of the instance. Same rework in
field-edit.gts, which had the identical pattern. Guard the remaining
@fields dereferences and render the CardInfo edit header and notes
footer only when @fields is populated, so a render pass with no data
produces an empty shell instead of throwing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../base/default-templates/field-edit.gts     |  5 +--
 .../default-templates/isolated-and-edit.gts   | 36 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/base/default-templates/field-edit.gts b/packages/base/default-templates/field-edit.gts
index 0bdbaec7ce8..e465a23af52 100644
--- a/packages/base/default-templates/field-edit.gts
+++ b/packages/base/default-templates/field-edit.gts
@@ -1,5 +1,5 @@
 import GlimmerComponent from '@glimmer/component';
-import type { FieldDef } from '../card-api';
+import type { BaseDef, FieldDef } from '../card-api';
 import { FieldContainer } from '@cardstack/boxel-ui/components';
 import { eq } from '@cardstack/boxel-ui/helpers';
 import { startCase } from 'lodash-es';
@@ -7,12 +7,13 @@ import { getField } from '@cardstack/runtime-common';
 
 export default class FieldDefEditTemplate extends GlimmerComponent<{
   Args: {
+    cardOrField: typeof BaseDef;
     model: FieldDef;
     fields: Record<string, new () => GlimmerComponent>;
   };
 }> {
   getFieldIcon = (key: string) => {
-    return getField(this.args.model.constructor, key)?.card?.icon;
+    return getField(this.args.cardOrField, key)?.card?.icon;
   };
   <template>
     <div class='field-def-edit-template'>
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 89ccae24ed1..d5866baec3f 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -1,5 +1,5 @@
 import GlimmerComponent from '@glimmer/component';
-import type { CardDef, FieldsTypeFor, Format } from '../card-api';
+import type { BaseDef, CardDef, FieldsTypeFor, Format } from '../card-api';
 import { FieldContainer, Header } from '@cardstack/boxel-ui/components';
 import { cn, eq } from '@cardstack/boxel-ui/helpers';
 import { startCase } from 'lodash-es';
@@ -12,6 +12,7 @@ import CardInfoTemplates from './card-info';
 
 export default class DefaultCardDefTemplate extends GlimmerComponent<{
   Args: {
+    cardOrField: typeof BaseDef;
     model: CardDef;
     fields: FieldsTypeFor<CardDef>;
     format: Format;
@@ -29,7 +30,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
   // then display its edit format alongside other top-level fields.
   private get cardInfoFieldDisplayNames(): string[] | undefined {
     let fieldNames = this.standardComputedFields.filter((fieldName) => {
-      const field = getField(this.args.model.constructor, fieldName);
+      // the card class arrives as @cardOrField, so this works even while
+      // the model instance is still loading
+      const field = getField(this.args.cardOrField, fieldName);
       return field?.computeVia == undefined;
     });
 
@@ -38,6 +41,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
 
   // Fields to display in between the cardInfo header and notes footer
   private get displayFields(): FieldsTypeFor<CardDef> | undefined {
+    if (!this.args.fields) {
+      return undefined;
+    }
     let excludedFields = this.excludedFields.filter(
       (name) => !this.cardInfoFieldDisplayNames?.includes(name),
     );
@@ -52,7 +58,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
 
   private get isThemeCard() {
     return Boolean(
-      Object.entries(this.args.fields).find(([key]) => key === 'cssVariables'),
+      Object.entries(this.args.fields ?? {}).find(
+        ([key]) => key === 'cssVariables',
+      ),
     );
   }
 
@@ -69,7 +77,7 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
             @cardThumbnailURL={{@model.cardThumbnailURL}}
             @icon={{@model.constructor.icon}}
           />
-        {{else}}
+        {{else if @fields.cardInfo}}
           <CardInfoTemplates.edit
             @fields={{@fields}}
             @model={{@model}}
@@ -90,15 +98,17 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
           {{/each-in}}
         </section>
       {{/if}}
-      <footer class='notes-footer'>
-        <FieldContainer
-          @label='Notes'
-          @icon={{getFieldIcon @model.cardInfo 'notes'}}
-          data-test-field='cardInfo-notes'
-        >
-          <@fields.cardInfo.notes />
-        </FieldContainer>
-      </footer>
+      {{#if @fields.cardInfo.notes}}
+        <footer class='notes-footer'>
+          <FieldContainer
+            @label='Notes'
+            @icon={{getFieldIcon @model.cardInfo 'notes'}}
+            data-test-field='cardInfo-notes'
+          >
+            <@fields.cardInfo.notes />
+          </FieldContainer>
+        </footer>
+      {{/if}}
     </div>
     <style scoped>
       .default-card-template {