@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.6

package/bundled-test-harness/assets/card-playground-test-D-7bi4PQ.js

@@ -0,0 +1,1491 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL, Lr as testRRI, c as hasExecutableExtension } from "./runtime-common-BTaLJEw-.js";
+import { T as rri } from "./paths-C9-NYXnM.js";
+import { O as baseRealm } from "./constants-Icc0nFW-.js";
+import { A as trimJsonExtension, h as cardDefFormats } from "./bfm-card-references-Cjos2rOp.js";
+import { M as waitUntil, T as settled, d as click, l as triggerEvent, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { D as realmConfigCardJSON, Et as percySnapshot, F as setupLocalIndexing, I as setupOnSave, L as setupRealmCacheTeardown, Z as withCachedRealmSetup, a as SYSTEM_CARD_FIXTURE_CONTENTS, ct as setupApplicationTest, j as setupAcceptanceTestRealm, k as setMonacoContent, mt as setupAuthEndpoints, s as assertMessages, st as visitOperatorMode, t as setupMockMatrix, tt as withoutLoaderMonitoring, z as setupUserSubscription } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { a as getPlaygroundSelections, d as setPlaygroundSelections, f as togglePlaygroundPanel, i as createNewInstance, l as selectDeclaration, o as openFileInPlayground, r as chooseAnotherInstance, s as removePlaygroundSelections, t as assertCardExists, u as selectFormat } from "./playground-B02e8uqB.js";
+import { a as removeRecentFiles, i as removeRecentCards, o as setRecentCards, r as getRecentFiles, s as setRecentFiles, t as assertRecentFileURLs } from "./recent-files-cards-Ccqvv5_n.js";
+import { t as searchCardsForTest } from "./search-cards-DxcB56HL.js";
+//#region tests/acceptance/code-submode/card-playground-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var codeRefDriverCard = `import { CardDef, field, contains } from '@cardstack/base/card-api';
+  import { Component } from '@cardstack/base/card-api';
+  import CodeRefField from '@cardstack/base/code-ref';
+  export class CodeRefDriver extends CardDef {
+    static displayName = "Code Ref Driver";
+    @field ref = contains(CodeRefField);
+}`;
+var testSpecCard = `import { Component } from '@cardstack/base/card-api';
+  import { Spec } from '@cardstack/base/spec';
+  export class TestSpec extends Spec {
+    static displayName = 'TestSpec';
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-subclass-spec>Spec Subclass</div>
+      </template>
+    }
+  }`;
+var authorCard = `import { contains, field, CardDef, Component } from "@cardstack/base/card-api";
+  import MarkdownField from '@cardstack/base/markdown';
+  import StringField from "@cardstack/base/string";
+  export class Author extends CardDef {
+    static displayName = 'Author';
+    @field firstName = contains(StringField);
+    @field lastName = contains(StringField);
+    @field bio = contains(MarkdownField);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Author) {
+        return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      },
+    });
+    static isolated = class Isolated extends Component<typeof this> {
+    <template>
+      <article>
+        <header>
+          <h1 data-test-author-title><@fields.cardTitle /></h1>
+        </header>
+        <div data-test-author-bio><@fields.bio /></div>
+      </article>
+      <style scoped>
+        article {
+          margin-inline: var(--boxel-sp-lg);
+        }
+      </style>
+    </template>
+    }
+}`;
+var blogPostCard = `import { contains, field, linksTo, linksToMany, CardDef, Component, StringField } from "@cardstack/base/card-api";
+  import DateTimeField from '@cardstack/base/datetime';
+  import MarkdownField from '@cardstack/base/markdown';
+  import { Author } from './author';
+
+  export class Category extends CardDef {
+    static displayName = 'Category';
+    static fitted = class Fitted extends Component<typeof this> {
+    <template>
+      <div data-test-category-fitted><@fields.cardTitle /></div>
+    </template>
+    }
+  }
+
+  class LocalCategoryCard extends Category {
+    static displayName = 'Local Category'
+  }
+
+  export class RandomClass {}
+
+  export class BlogPost extends CardDef {
+    static displayName = 'Blog Post';
+    @field publishDate = contains(DateTimeField);
+    @field author = linksTo(Author);
+    @field categories = linksToMany(Category);
+    @field localCategories = linksToMany(LocalCategoryCard);
+    @field body = contains(MarkdownField);
+    @field cardTitle = contains(StringField);
+
+    static isolated = class Isolated extends Component<typeof this> {
+    <template>
+      <article>
+        <header>
+          <h1 data-test-post-title><@fields.cardTitle /></h1>
+        </header>
+        <div data-test-byline><@fields.author /></div>
+        <div data-test-post-body><@fields.body /></div>
+      </article>
+      <style scoped>
+        article {
+          margin-inline: var(--boxel-sp-lg);
+        }
+      </style>
+    </template>
+    }
+}`;
+var personCard = `import { field, linksTo, CardDef } from '@cardstack/base/card-api';
+  export class Pet extends CardDef {
+    static displayName = 'Pet';
+  }
+  export class Person extends CardDef {
+    static displayName = 'Person';
+    @field pet = linksTo(Pet);
+  }
+`;
+var customEditCard = `import { contains, field, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+  export class CustomEdit extends CardDef {
+    static displayName = 'Custom Edit';
+    @field name = contains(StringField);
+    static edit = class Edit extends Component<typeof this> {
+      <template>
+        <div data-test-custom-edit>Custom Edit: <@fields.name /></div>
+      </template>
+    };
+  }`;
+var headPreviewCard = `import { contains, field, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+
+  export class HeadPreview extends CardDef {
+    static displayName = 'Head Preview';
+    @field cardTitle = contains(StringField);
+    @field cardDescription = contains(StringField);
+    @field url = contains(StringField);
+
+    static head = class Head extends Component<typeof this> {
+      <template>
+        <title>{{@model.cardTitle}}</title>
+        <meta name='description' content={{@model.cardDescription}} />
+        <meta property='og:url' content={{@model.url}} />
+      </template>
+    };
+  }
+`;
+async function waitForHeadPreviewText(selector, expectedText, context) {
+	let safeQuerySelector = (selector) => {
+		try {
+			return {
+				element: document.querySelector(selector),
+				error: null
+			};
+		} catch (error) {
+			if (error instanceof Error) return {
+				element: null,
+				error: {
+					name: error.name,
+					message: error.message
+				}
+			};
+			return {
+				element: null,
+				error: {
+					name: "UnknownError",
+					message: String(error)
+				}
+			};
+		}
+	};
+	let readSelectorText = (selector) => {
+		let { element, error } = safeQuerySelector(selector);
+		return {
+			text: element?.textContent?.trim() ?? null,
+			error
+		};
+	};
+	try {
+		await waitUntil(() => readSelectorText(selector).text === expectedText, { timeout: 5e3 });
+	} catch (error) {
+		let actual = readSelectorText(selector);
+		let googleTitle = readSelectorText("[data-test-google-title]");
+		let googleDescription = readSelectorText("[data-test-google-description]");
+		let googleSiteName = readSelectorText("[data-test-google-site-name]");
+		let previewPanel = safeQuerySelector("[data-test-playground-panel]");
+		console.info("head preview diagnostics", {
+			context,
+			selector,
+			expectedText,
+			actualText: actual.text,
+			selectorError: actual.error,
+			googleTitleText: googleTitle.text,
+			googleTitleError: googleTitle.error,
+			googleDescriptionText: googleDescription.text,
+			googleDescriptionError: googleDescription.error,
+			googleSiteNameText: googleSiteName.text,
+			googleSiteNameError: googleSiteName.error,
+			playgroundPreviewHtml: previewPanel.element?.innerHTML?.slice(0, 2e3) ?? null,
+			playgroundPreviewError: previewPanel.error
+		}, error);
+		throw error;
+	}
+}
+var localStyleReferenceCard = { data: {
+	type: "card",
+	attributes: {
+		cardInfo: {
+			title: "Local Style Reference",
+			cardDescription: "Local card instance for style reference tests",
+			cardThumbnailURL: null,
+			notes: null
+		},
+		styleName: "Local Style Reference",
+		visualDNA: "Style reference content for playground edit tests",
+		inspirations: ["Testing"],
+		wallpaperImages: []
+	},
+	meta: { adoptsFrom: {
+		module: "@cardstack/base/style-reference",
+		name: "default"
+	} }
+} };
+(0, import_qunit.module)("Acceptance | code-submode | card playground", function(_hooks) {
+	(0, import_qunit.module)("single realm", function(hooks) {
+		let realm;
+		setupApplicationTest(hooks);
+		setupLocalIndexing(hooks);
+		let mockMatrixUtils = setupMockMatrix(hooks, {
+			loggedInAs: "@testuser:localhost",
+			activeRealms: [testRealmURL]
+		});
+		let { setRealmPermissions, setActiveRealms, createAndJoinRoom } = mockMatrixUtils;
+		setupOnSave(hooks);
+		setupRealmCacheTeardown(hooks);
+		hooks.beforeEach(async function() {
+			let loader = getService("loader-service").loader;
+			let cardsGrid;
+			cardsGrid = await loader.import("@cardstack/base/cards-grid");
+			let { CardsGrid } = cardsGrid;
+			createAndJoinRoom({
+				sender: "@testuser:localhost",
+				name: "room-test"
+			});
+			setupUserSubscription();
+			setupAuthEndpoints();
+			({realm} = await withCachedRealmSetup(async () => setupAcceptanceTestRealm({
+				mockMatrixUtils,
+				realmURL: testRealmURL,
+				contents: {
+					...SYSTEM_CARD_FIXTURE_CONTENTS,
+					"index.json": new CardsGrid(),
+					"author.gts": authorCard,
+					"blog-post.gts": blogPostCard,
+					"code-ref-driver.gts": codeRefDriverCard,
+					"test-spec.gts": testSpecCard,
+					"person.gts": personCard,
+					"head-preview.gts": headPreviewCard,
+					"custom-edit.gts": customEditCard,
+					"CustomEdit/sample.json": { data: {
+						attributes: { name: "Sample" },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}custom-edit`,
+							name: "CustomEdit"
+						} }
+					} },
+					"Author/jane-doe.json": { data: {
+						attributes: {
+							firstName: "Jane",
+							lastName: "Doe",
+							bio: "Jane Doe is the Senior Managing Editor at <em>Ramped.com</em>, where she leads content strategy, editorial direction, and ensures the highest standards of quality across all publications. With over a decade of experience in digital media and editorial management, Jane has a proven track record of shaping impactful narratives, growing engaged audiences, and collaborating with cross-functional teams to deliver compelling content. When she's not editing, you can find her exploring new books, hiking, or indulging in her love of photography."
+						},
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}author`,
+							name: "Author"
+						} }
+					} },
+					"HeadPreview/example.json": { data: {
+						attributes: {
+							cardTitle: "Definition Title",
+							cardDescription: "Definition description",
+							url: "https://example.com/definition"
+						},
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}head-preview`,
+							name: "HeadPreview"
+						} }
+					} },
+					"BlogPost/remote-work.json": { data: {
+						attributes: {
+							title: "The Ultimate Guide to Remote Work",
+							cardDescription: "In today’s digital age, remote work has transformed from a luxury to a necessity. This comprehensive guide will help you navigate the world of remote work, offering tips, tools, and best practices for success."
+						},
+						relationships: { author: { links: { self: `${testRealmURL}Author/jane-doe` } } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "BlogPost"
+						} }
+					} },
+					"BlogPost/mad-hatter.json": { data: {
+						attributes: { cardTitle: "Mad As a Hatter" },
+						relationships: { author: { links: { self: `${testRealmURL}Author/jane-doe` } } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "BlogPost"
+						} }
+					} },
+					"BlogPost/urban-living.json": { data: {
+						attributes: { cardTitle: "The Future of Urban Living: Skyscrapers or Sustainable Communities?" },
+						relationships: { author: { links: { self: `${testRealmURL}Author/jane-doe` } } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "BlogPost"
+						} }
+					} },
+					"Category/city-design.json": { data: {
+						attributes: { cardInfo: { name: "City Design" } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "Category"
+						} }
+					} },
+					"Category/future-tech.json": { data: {
+						attributes: { cardInfo: { name: "Future Tech" } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "Category"
+						} }
+					} },
+					"Category/interior-design.json": { data: {
+						attributes: { cardInfo: { name: "Interior Design" } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "Category"
+						} }
+					} },
+					"Category/landscaping.json": { data: {
+						attributes: { cardInfo: { name: "Landscaping" } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "Category"
+						} }
+					} },
+					"Category/home-gym.json": { data: {
+						attributes: { cardInfo: { name: "Home Gym" } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}blog-post`,
+							name: "Category"
+						} }
+					} },
+					"Person/pet-mango.json": { data: {
+						attributes: { cardInfo: { name: "Mango" } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}person`,
+							name: "Pet"
+						} }
+					} }
+				}
+			})));
+			setRecentFiles([
+				[testRealmURL, "blog-post.gts"],
+				[testRealmURL, "author.gts"],
+				[testRealmURL, "CustomEdit/sample.json"],
+				[testRealmURL, "custom-edit.gts"],
+				[testRealmURL, "BlogPost/mad-hatter.json"],
+				[testRealmURL, "Category/city-design.json"],
+				[testRealmURL, "Category/future-tech.json"],
+				[testRealmURL, "BlogPost/remote-work.json"],
+				[testRealmURL, "BlogPost/urban-living.json"],
+				[testRealmURL, "Author/jane-doe.json"]
+			]);
+			removePlaygroundSelections();
+			setActiveRealms([testRealmURL]);
+			setRealmPermissions({ [testRealmURL]: ["read", "write"] });
+		});
+		(0, import_qunit.test)("can render playground panel when an exported card def is selected", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}blog-post.gts`
+			});
+			assert.dom("[data-test-active-module-inspector-view=\"schema\"]").exists("schema editor is open by default");
+			assert.dom("[data-test-playground-panel]").doesNotExist("do not load playground unless panel is open");
+			await selectDeclaration("Category");
+			await togglePlaygroundPanel();
+			assert.dom("[data-test-playground-panel]").exists("playground panel exists for Category (exported card def)");
+			await click("[data-test-module-inspector-view=\"schema\"]");
+			await selectDeclaration("LocalCategoryCard");
+			await togglePlaygroundPanel();
+			assert.dom("[data-test-playground-panel]").doesNotExist("playground panel exists for Category (exported card def)");
+			assert.dom("[data-test-playground-incompatible-message]").exists();
+			assert.dom("[data-test-playground-incompatible-message] span").containsText("Playground is not currently supported for this type.");
+			await selectDeclaration("RandomClass");
+			assert.dom("[data-test-module-inspector-view=\"preview\"]").exists("inspector exists for RandomClass (not a card or field def)");
+			assert.dom("[data-test-playground-incompatible-message]").exists();
+			assert.dom("[data-test-playground-incompatible-message] span").containsText("Playground is not currently supported for this type.");
+			await selectDeclaration("BlogPost");
+			assert.dom("[data-test-playground-panel]").exists("exists for BlogPost (exported card def)");
+		});
+		(0, import_qunit.test)("playground does not auto-create spec for subclasses of specs", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}test-spec.gts`
+			});
+			await selectDeclaration("TestSpec");
+			await togglePlaygroundPanel();
+			await waitFor("[data-test-playground-panel]");
+			assert.dom("[data-test-subclass-spec]").doesNotExist();
+		});
+		(0, import_qunit.test)("can populate instance chooser dropdown from recent files and pre-select the first card", async function(assert) {
+			removePlaygroundSelections();
+			removeRecentFiles();
+			setRecentFiles([
+				[testRealmURL, "BlogPost/mad-hatter.json"],
+				[testRealmURL, "Category/city-design.json"],
+				[testRealmURL, "Category/future-tech.json"],
+				[testRealmURL, "BlogPost/remote-work.json"],
+				[testRealmURL, "BlogPost/urban-living.json"],
+				[testRealmURL, "Author/jane-doe.json"]
+			]);
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Category" });
+			assert.dom("[data-test-selected-item]").containsText("City Design", "most recent category card is pre-selected");
+			assertCardExists(assert, `${testRealmURL}Category/city-design`);
+			await selectDeclaration("BlogPost");
+			assert.dom("[data-test-selected-item]").containsText("Mad As a Hatter", "pre-selected card is updated when selected card def changes");
+			assertCardExists(assert, `${testRealmURL}BlogPost/mad-hatter`);
+			await selectDeclaration("Category");
+			assert.dom("[data-test-selected-item]").containsText("City Design", "correct card is still pre-selected");
+			assertCardExists(assert, `${testRealmURL}Category/city-design`);
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index] [data-test-category-fitted]").exists({ count: 2 });
+			await click("[data-option-index=\"1\"]");
+			assert.dom("[data-test-selected-item]").containsText("Future Tech");
+			assertCardExists(assert, `${testRealmURL}Category/future-tech`);
+			assert.strictEqual(getPlaygroundSelections()?.[`${testRealmURL}blog-post/Category`]?.cardId, `${testRealmURL}Category/future-tech`, "user-selected card is persisted");
+			await selectDeclaration("BlogPost");
+			assert.dom("[data-test-selected-item]").containsText("Mad As a Hatter", "correct card is pre-selected when selected card def changes");
+			assertCardExists(assert, `${testRealmURL}BlogPost/mad-hatter`);
+			await selectDeclaration("Category");
+			assert.dom("[data-test-selected-item]").containsText("Future Tech", "persisted card is selected");
+			assertCardExists(assert, `${testRealmURL}Category/future-tech`);
+			await percySnapshot(assert);
+		});
+		(0, import_qunit.test)("head format preview renders for card definitions in playground", async function(assert) {
+			removePlaygroundSelections();
+			setPlaygroundSelections({ [`${testRealmURL}head-preview/HeadPreview`]: {
+				cardId: rri(`${testRealmURL}HeadPreview/example`),
+				format: "head"
+			} });
+			await openFileInPlayground("head-preview.gts", testRealmURL, { declaration: "HeadPreview" });
+			await selectFormat("head");
+			await waitForHeadPreviewText("[data-test-google-title]", "Definition Title", "initial head preview render in card playground");
+			assert.dom("[data-test-google-title]").hasText("Definition Title");
+			assert.dom("[data-test-google-description]").hasText("Definition description");
+			assert.dom("[data-test-google-site-name]").hasText("example.com");
+			setMonacoContent(headPreviewCard.replace("</title>", "!!</title>"));
+			await waitForHeadPreviewText("[data-test-google-title]", "Definition Title!!", "updated head preview render in card playground");
+			assert.dom("[data-test-google-title]").hasText("Definition Title!!");
+		});
+		(0, import_qunit.test)("can populate instance chooser options from recent-files and recent-cards, ordered by last viewed timestamp", async function(assert) {
+			removePlaygroundSelections();
+			removeRecentFiles();
+			removeRecentCards();
+			let ts = Date.now();
+			setRecentFiles([
+				[
+					testRealmURL,
+					"Category/home-gym.json",
+					null,
+					ts
+				],
+				[
+					testRealmURL,
+					"BlogPost/remote-work.json",
+					null,
+					ts
+				],
+				[
+					testRealmURL,
+					"Category/future-tech.json",
+					null,
+					ts - 2
+				],
+				[
+					testRealmURL,
+					"Category/city-design.json",
+					null,
+					ts - 5
+				]
+			]);
+			setRecentCards([
+				[`${testRealmURL}Category/landscaping.json`, ts - 1],
+				[`${testRealmURL}BlogPost/mad-hatter.json`, ts - 1],
+				[`${testRealmURL}Category/city-design.json`, ts - 3],
+				[`${testRealmURL}Category/future-tech.json`, ts - 4]
+			]);
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Category" });
+			assert.dom("[data-test-selected-item]").containsText("Home Gym", "most recent category instance is pre-selected");
+			assertCardExists(assert, `${testRealmURL}Category/home-gym`);
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 4 });
+			assert.dom("[data-option-index=\"0\"]").containsText("Home Gym");
+			assert.dom("[data-option-index=\"1\"]").containsText("Landscaping");
+			assert.dom("[data-option-index=\"2\"]").containsText("Future Tech");
+			assert.dom("[data-option-index=\"3\"]").containsText("City Design");
+			await click(`[data-test-recent-file="${testRealmURL}Category/future-tech.json"]`);
+			await click("[data-test-clickable-definition-container]");
+			assert.dom("[data-test-selected-item]").containsText("Home Gym", "selected card has not changed");
+			assertCardExists(assert, `${testRealmURL}Category/home-gym`);
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 4 });
+			assert.dom("[data-option-index=\"0\"]").containsText("Future Tech", "recent card order is updated");
+			assert.dom("[data-option-index=\"1\"]").containsText("Home Gym");
+			assert.dom("[data-option-index=\"2\"]").containsText("Landscaping");
+			assert.dom("[data-option-index=\"3\"]").containsText("City Design");
+			await click("[data-test-more-options-button]");
+			await click("[data-test-boxel-menu-item-text=\"Open in Interact Mode\"]");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Category/home-gym"]`).exists();
+			await click("[data-test-open-search-field]");
+			await waitFor(`[data-test-search-result="${testRealmURL}Category/landscaping"]`, { timeout: 8e3 });
+			await click(`[data-test-search-result="${testRealmURL}Category/landscaping"]`);
+			assert.dom(`[data-test-stack-card="${testRealmURL}Category/landscaping"]`).exists();
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Category" });
+			await togglePlaygroundPanel();
+			assert.dom("[data-test-selected-item]").containsText("Home Gym", "selected card has not changed");
+			assertCardExists(assert, `${testRealmURL}Category/home-gym`);
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 4 });
+			assert.dom("[data-option-index=\"0\"]").containsText("Landscaping", "recent card order is updated");
+			assert.dom("[data-option-index=\"1\"]").containsText("Home Gym");
+			assert.dom("[data-option-index=\"2\"]").containsText("Future Tech");
+			assert.dom("[data-option-index=\"3\"]").containsText("City Design");
+		});
+		(0, import_qunit.test)("can update the instance chooser when selected card def changes (same file)", async function(assert) {
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Category" });
+			assert.dom("[data-test-selected-item]").containsText("City Design");
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 2 });
+			assert.dom("[data-option-index=\"1\"]").containsText("Future Tech");
+			await selectDeclaration("BlogPost");
+			assert.dom("[data-test-selected-item]").containsText("Mad As a Hatter");
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 3 });
+			assert.dom("[data-option-index=\"0\"]").containsText("Mad As a Hatter");
+		});
+		(0, import_qunit.test)("can update the instance chooser when a different file is opened", async function(assert) {
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Category" });
+			assert.dom("[data-test-selected-item]").containsText("City Design");
+			assertCardExists(assert, `${testRealmURL}Category/city-design`);
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 2 });
+			assert.dom("[data-option-index=\"0\"]").containsText("City Design");
+			await click("[data-test-file-browser-toggle]");
+			await click("[data-test-file=\"author.gts\"]");
+			await togglePlaygroundPanel();
+			assert.dom("[data-test-selected-item]").containsText("Jane Doe");
+			assertCardExists(assert, `${testRealmURL}Author/jane-doe`);
+			await click("[data-test-instance-chooser]");
+			assert.dom("li.ember-power-select-option").exists({ count: 1 });
+			assert.dom("[data-option-index=\"0\"]").containsText("Jane Doe");
+		});
+		(0, import_qunit.test)("header context menu omits \"Open in Code Mode\" (already in code submode)", async function(assert) {
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			await click("[data-test-more-options-button]");
+			assert.dom("[data-test-boxel-dropdown-content] [data-test-boxel-menu-item]").exists({ count: 5 });
+			assert.dom("[data-test-boxel-menu-item-text=\"Open in Code Mode\"]").doesNotExist();
+		});
+		(0, import_qunit.test)("can use the header context menu to open instance in interact mode", async function(assert) {
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			await click("[data-test-more-options-button]");
+			await click("[data-test-boxel-menu-item-text=\"Open in Interact Mode\"]");
+			assert.dom(`[data-test-stack-card-index="0"][data-test-stack-card="${testRealmURL}index"]`).exists();
+			assert.dom(`[data-test-stack-card-index="1"][data-test-stack-card="${testRealmURL}Author/jane-doe"]`).exists();
+			assert.dom("[data-test-author-title]").hasText("Jane Doe");
+		});
+		(0, import_qunit.test)("can display selected card in the chosen format", async function(assert) {
+			const cardId = `${testRealmURL}Author/jane-doe`;
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			assert.dom("[data-test-playground-panel] [data-test-boxel-card-header-title]").hasText("Author - Jane Doe");
+			assertCardExists(assert, cardId, "isolated");
+			assert.dom("[data-test-author-title]").hasText("Jane Doe");
+			assert.dom("[data-test-author-bio]").containsText("Jane Doe is the Senior Managing Editor");
+			assert.dom("[data-test-format-chooser=\"isolated\"]").hasClass("active");
+			assert.dom("[data-test-format-chooser]").exists({ count: cardDefFormats.length });
+			await selectFormat("embedded");
+			assert.dom("[data-test-format-chooser=\"isolated\"]").hasNoClass("active");
+			assert.dom("[data-test-format-chooser=\"embedded\"]").hasClass("active");
+			assert.dom("[data-test-playground-panel] [data-test-boxel-card-header-title]").doesNotExist();
+			assertCardExists(assert, cardId, "embedded");
+			await selectFormat("edit");
+			assert.dom("[data-test-format-chooser=\"embedded\"]").hasNoClass("active");
+			assert.dom("[data-test-format-chooser=\"edit\"]").hasClass("active");
+			assert.dom("[data-test-playground-panel] [data-test-boxel-card-header-title]").hasText("Author - Jane Doe");
+			assertCardExists(assert, cardId, "edit");
+			await selectFormat("atom");
+			assert.dom("[data-test-format-chooser=\"edit\"]").hasNoClass("active");
+			assert.dom("[data-test-format-chooser=\"atom\"]").hasClass("active");
+			assert.dom("[data-test-atom-preview]").hasText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Jane Doe tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.");
+			await selectFormat("fitted");
+			assert.dom("[data-test-format-chooser=\"atom\"]").hasNoClass("active");
+			assert.dom("[data-test-format-chooser=\"fitted\"]").hasClass("active");
+			assert.dom("[data-test-playground-panel] [data-test-card-format=\"fitted\"]").exists({ count: 16 });
+			await selectFormat("markdown");
+			assert.dom("[data-test-format-chooser=\"fitted\"]").hasNoClass("active");
+			assert.dom("[data-test-format-chooser=\"markdown\"]").hasClass("active");
+			assert.dom("[data-test-markdown-preview]").exists("markdown preview container renders");
+			assertCardExists(assert, cardId, "markdown");
+		});
+		(0, import_qunit.test)("shows \"form\" format button only for cards with a custom edit template", async function(assert) {
+			const cardId = `${testRealmURL}CustomEdit/sample`;
+			await openFileInPlayground("custom-edit.gts", testRealmURL, { declaration: "CustomEdit" });
+			assertCardExists(assert, cardId, "isolated");
+			assert.dom("[data-test-format-chooser]").exists({ count: cardDefFormats.length + 1 });
+			assert.dom("[data-test-format-chooser=\"form\"]").exists("\"form\" button appears because CustomEdit has a custom edit template");
+			assert.dom("[data-test-format-chooser=\"edit\"]").exists("\"edit\" button still present alongside \"form\"");
+			await selectFormat("form");
+			assert.dom("[data-test-format-chooser=\"form\"]").hasClass("active");
+			assertCardExists(assert, cardId, "edit");
+			assert.dom("[data-test-custom-edit]").doesNotExist("base CardDef template is used, not the custom edit template");
+			await selectFormat("edit");
+			assert.dom("[data-test-format-chooser=\"edit\"]").hasClass("active");
+			assertCardExists(assert, cardId, "edit");
+			assert.dom("[data-test-custom-edit]").exists("custom edit template is used when \"edit\" is selected");
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			assert.dom("[data-test-format-chooser=\"form\"]").doesNotExist("\"form\" button absent for cards without a custom edit template");
+		});
+		(0, import_qunit.test)("can toggle edit format via button on card header", async function(assert) {
+			const cardId = `${testRealmURL}Author/jane-doe`;
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			assert.dom("[data-test-playground-panel] [data-test-boxel-card-header-title]").hasText("Author - Jane Doe");
+			assertCardExists(assert, cardId, "isolated");
+			assert.dom("[data-test-author-title]").hasText("Jane Doe");
+			assert.dom("[data-test-format-chooser=\"isolated\"]").hasClass("active");
+			await click("[data-test-boxel-card-header-actions] [data-test-edit-button]");
+			assertCardExists(assert, cardId, "edit");
+			assert.dom("[data-test-card-header]").hasClass("is-editing");
+			assert.dom("[data-test-format-chooser=\"isolated\"]").hasNoClass("active");
+			assert.dom("[data-test-format-chooser=\"edit\"]").hasClass("active");
+			await click("[data-test-boxel-card-header-actions] [data-test-edit-button]");
+			assertCardExists(assert, cardId, "isolated");
+			assert.dom("[data-test-card-header]").hasNoClass("is-editing");
+			assert.dom("[data-test-format-chooser=\"edit\"]").hasNoClass("active");
+			assert.dom("[data-test-format-chooser=\"isolated\"]").hasClass("active");
+		});
+		(0, import_qunit.test)("can use the header context menu to open instance in edit format in interact mode", async function(assert) {
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			await selectFormat("edit");
+			await click("[data-test-more-options-button]");
+			await click("[data-test-boxel-menu-item-text=\"Open in Interact Mode\"]");
+			assert.dom(`[data-test-stack-card-index="0"][data-test-stack-card="${testRealmURL}index"]`).exists();
+			assert.dom(`[data-test-stack-card-index="1"][data-test-stack-card="${testRealmURL}Author/jane-doe"]`).exists();
+			assert.dom(`[data-test-stack-item-content] [data-test-card-format="edit"]`).exists();
+		});
+		(0, import_qunit.test)("can choose another instance to be opened in playground panel", async function(assert) {
+			removeRecentFiles();
+			let recentFilesService = getService("recent-files-service");
+			assert.strictEqual(recentFilesService.recentFiles?.length, 0);
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "BlogPost" });
+			await chooseAnotherInstance();
+			assert.dom("[data-test-card-chooser-modal]").exists();
+			assert.dom("[data-test-item-button]").exists({ count: 3 });
+			assert.dom(`[data-test-item-button="${testRealmURL}BlogPost/mad-hatter"]`).exists();
+			assert.dom(`[data-test-item-button="${testRealmURL}BlogPost/urban-living"]`).exists();
+			assert.dom(`[data-test-item-button="${testRealmURL}BlogPost/remote-work"]`).exists();
+			await click(`[data-test-item-button="${testRealmURL}BlogPost/mad-hatter"]`);
+			await click("[data-test-card-chooser-go-button]");
+			assertCardExists(assert, `${testRealmURL}BlogPost/mad-hatter`, "isolated");
+			assertRecentFileURLs(assert, recentFilesService.recentFiles, [`${testRealmURL}BlogPost/mad-hatter.json`, `${testRealmURL}blog-post.gts`]);
+		});
+		(0, import_qunit.test)("can create new instance", async function(assert) {
+			removeRecentFiles();
+			let recentFilesService = getService("recent-files-service");
+			assert.strictEqual(recentFilesService.recentFiles?.length, 0);
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}blog-post.gts`
+			});
+			assertRecentFileURLs(assert, recentFilesService.recentFiles, [`${testRealmURL}blog-post.gts`]);
+			await click("[data-boxel-selector-item-text=\"BlogPost\"]");
+			await togglePlaygroundPanel();
+			assert.dom("[data-test-instance-chooser] [data-test-selected-item]").containsText("Mad As a Hatter", "card instance found in realm");
+			assertCardExists(assert, `${testRealmURL}BlogPost/mad-hatter`);
+			let id;
+			this.onSave((url) => {
+				id = url.href;
+			});
+			await createNewInstance();
+			await waitUntil(() => id);
+			assert.strictEqual(recentFilesService.recentFiles?.length, 2, "recent file count is correct");
+			assert.dom("[data-test-instance-chooser] [data-test-selected-item]").containsText("Untitled Blog Post", "created instance is selected");
+			assertCardExists(assert, id, "isolated", "new card is rendered in isolated format");
+			assert.dom("[data-option-index]").exists({ count: 1 }, "dropdown instance count is correct");
+			assert.dom("[data-option-index]").containsText("Blog Post");
+		});
+		(0, import_qunit.test)("can create new instance with CodeRef field", async function(assert) {
+			await openFileInPlayground("code-ref-driver.gts", testRealmURL, { declaration: "CodeRefDriver" });
+			let id;
+			this.onSave((url) => {
+				id = url.href;
+			});
+			await createNewInstance();
+			await waitUntil(() => id);
+			assert.dom("[data-test-instance-chooser] [data-test-selected-item]").containsText("Untitled Code Ref Driver", "created instance is selected");
+			assert.dom(`[data-test-playground-panel] [data-test-card][data-test-card-format="isolated"]`).exists("new card is rendered in edit format");
+			await click("[data-test-edit-button]");
+			assert.dom("[data-test-playground-panel] [data-test-card] [data-test-field=\"ref\"] input").hasNoValue("code ref field is empty");
+		});
+		(0, import_qunit.test)("can set relative CodeRef field", async function(assert) {
+			await openFileInPlayground("code-ref-driver.gts", testRealmURL, { declaration: "CodeRefDriver" });
+			await createNewInstance();
+			await click("[data-test-edit-button]");
+			assert.dom("[data-test-playground-panel] [data-test-card] [data-test-ref] [data-test-boxel-input-validation-state=\"valid\"]").doesNotExist("code ref validity is not set");
+			await fillIn("[data-test-playground-panel] [data-test-card] [data-test-field=\"ref\"] input", `../blog-post/BlogPost`);
+			await waitFor("[data-test-playground-panel] [data-test-card] [data-test-hasValidated]");
+			assert.dom("[data-test-playground-panel] [data-test-card] [data-test-field=\"ref\"] [data-test-boxel-input-validation-state=\"valid\"]").exists("code ref is valid");
+		});
+		(0, import_qunit.test)("playground preview for card with contained fields can live update when module changes", async function(assert) {
+			const authorCard = `import { contains, field, CardDef, Component } from "@cardstack/base/card-api";
+        import MarkdownField from '@cardstack/base/markdown';
+        import StringField from "@cardstack/base/string";
+        export class Author extends CardDef {
+          static displayName = 'Author';
+          @field firstName = contains(StringField);
+          @field lastName = contains(StringField);
+          @field bio = contains(MarkdownField);
+          @field cardTitle = contains(StringField, {
+            computeVia: function (this: Author) {
+              return [this.firstName, this.lastName].filter(Boolean).join(' ');
+            },
+          });
+          static isolated = class Isolated extends Component<typeof this> {
+        <template>
+          <article>
+            <header>
+              <h1 data-test-author-title>Hello <@fields.cardTitle /></h1>
+            </header>
+            <div data-test-author-bio><@fields.bio /></div>
+          </article>
+          <style scoped>
+            article {
+              margin-inline: var(--boxel-sp-lg);
+            }
+          </style>
+        </template>
+          }
+        }`;
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			await waitFor("[data-test-selected-item]");
+			assert.dom("[data-test-selected-item]").containsText("Jane Doe");
+			assert.dom("[data-test-author-title]").containsText("Jane Doe");
+			await realm.write("author.gts", authorCard);
+			await settled();
+			await waitFor("[data-test-selected-item]");
+			assert.dom("[data-test-selected-item]").containsText("Jane Doe");
+			assert.dom("[data-test-author-title]").containsText("Hello Jane Doe");
+		});
+		(0, import_qunit.test)("playground preview for card with linked fields can live update when module changes", async function(assert) {
+			const blogPostCard = `import { contains, field, linksTo, linksToMany, CardDef, Component } from "@cardstack/base/card-api";
+        import DateTimeField from '@cardstack/base/datetime';
+        import MarkdownField from '@cardstack/base/markdown';
+        import StringField from "@cardstack/base/string";
+        import { Author } from './author';
+
+        export class Category extends CardDef {
+          static displayName = 'Category';
+          static fitted = class Fitted extends Component<typeof this> {
+          <template>
+            <div data-test-category-fitted><@fields.cardTitle /></div>
+          </template>
+          }
+        }
+
+        class Status extends StringField {
+          static displayName = 'Status';
+        }
+
+        export class BlogPost extends CardDef {
+          static displayName = 'Blog Post';
+          @field publishDate = contains(DateTimeField);
+          @field author = linksTo(Author);
+          @field categories = linksToMany(Category);
+          @field body = contains(MarkdownField);
+          @field status = contains(Status, {
+            computeVia: function (this: BlogPost) {
+              if (!this.publishDate) {
+                return 'Draft';
+              }
+              if (Date.now() >= Date.parse(String(this.publishDate))) {
+                return 'Published';
+              }
+              return 'Scheduled';
+            },
+          });
+          @field cardTitle = contains(StringField);
+
+          static isolated = class Isolated extends Component<typeof this> {
+          <template>
+            <article>
+              <header>
+                <h1 data-test-post-title>Hello <@fields.cardTitle /></h1>
+              </header>
+              <div data-test-byline><@fields.author /></div>
+              <div data-test-post-body><@fields.body /></div>
+            </article>
+            <style scoped>
+              article {
+                margin-inline: var(--boxel-sp-lg);
+              }
+            </style>
+          </template>
+          }
+      }`;
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "BlogPost" });
+			await waitFor("[data-test-selected-item]");
+			assert.dom("[data-test-selected-item]").exists("title exists on first render");
+			assert.dom("[data-test-selected-item]").containsText("Mad As a Hatter", "selected item title is correct");
+			assert.dom("[data-test-post-title]").hasText("Mad As a Hatter");
+			assert.dom("[data-test-byline]").containsText("Jane Doe");
+			await realm.write("blog-post.gts", blogPostCard);
+			await settled();
+			await waitFor("[data-test-selected-item]");
+			assert.dom("[data-test-selected-item]").exists("title exists on update");
+			assert.dom("[data-test-selected-item]").containsText("Mad As a Hatter");
+			assert.dom("[data-test-post-title]").containsText("Hello Mad As a Hatter");
+			assert.dom("[data-test-byline]").containsText("Jane Doe");
+		});
+		(0, import_qunit.test)("playground edit format refreshes even if code invalidations are ignored", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}person.gts`
+			});
+			let loaderService = getService("loader-service");
+			let resetCount = 0;
+			let originalResetLoader = loaderService.resetLoader.bind(loaderService);
+			loaderService.resetLoader = (options) => {
+				resetCount += 1;
+				return originalResetLoader(options);
+			};
+			let store = getService("store");
+			let originalHandleInvalidations = store.handleInvalidations.bind(store);
+			store.handleInvalidations = (event) => {
+				if (event?.eventName === "index" && event?.indexType === "incremental" && Array.isArray(event?.invalidations) && event.invalidations.some(hasExecutableExtension)) return;
+				return originalHandleInvalidations(event);
+			};
+			try {
+				await click("[data-test-module-inspector-view=\"preview\"]");
+				await waitFor("[data-test-instance-chooser]");
+				await click("[data-test-instance-chooser]");
+				await click("[data-option-index=\"0\"]");
+				await click("[data-test-edit-button]");
+				await waitFor("[data-test-card-format=\"edit\"]");
+				await click("[data-test-module-inspector-view=\"schema\"]");
+				await waitFor("[data-test-add-field-button]");
+				await click("[data-test-add-field-button]");
+				await fillIn("[data-test-field-name-input]", "nickname");
+				await click("[data-test-save-field-button]");
+				await waitFor("[data-test-card-schema=\"Person\"] [data-test-field-name=\"nickname\"]");
+				await waitUntil(() => resetCount > 0);
+				await click("[data-test-module-inspector-view=\"preview\"]");
+				await waitFor("[data-test-instance-chooser]");
+				await waitFor("[data-test-card-format=\"edit\"] [data-test-field=\"nickname\"]");
+				assert.dom("[data-test-card-format=\"edit\"] [data-test-field=\"nickname\"]").exists();
+			} finally {
+				loaderService.resetLoader = originalResetLoader;
+				store.handleInvalidations = originalHandleInvalidations;
+			}
+		});
+		(0, import_qunit.test)("can remember playground selections and format choices via local storage", async function(assert) {
+			const authorModuleId = `${testRealmURL}author/Author`;
+			const categoryModuleId = `${testRealmURL}blog-post/Category`;
+			const blogPostModuleId = `${testRealmURL}blog-post/BlogPost`;
+			const authorId = rri(`${testRealmURL}Author/jane-doe`);
+			const categoryId1 = rri(`${testRealmURL}Category/city-design`);
+			const categoryId2 = rri(`${testRealmURL}Category/future-tech`);
+			const blogPostId1 = rri(`${testRealmURL}BlogPost/mad-hatter`);
+			const blogPostId2 = rri(`${testRealmURL}BlogPost/remote-work`);
+			setPlaygroundSelections({
+				[`${authorModuleId}`]: {
+					cardId: authorId,
+					format: "edit"
+				},
+				[`${categoryModuleId}`]: {
+					cardId: categoryId1,
+					format: "embedded"
+				},
+				[`${blogPostModuleId}`]: {
+					cardId: blogPostId1,
+					format: "isolated"
+				}
+			});
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			assert.dom("[data-test-selected-item]").containsText("Jane Doe");
+			assertCardExists(assert, authorId, "edit");
+			await selectFormat("atom");
+			assertCardExists(assert, authorId, "atom");
+			assert.deepEqual(getPlaygroundSelections()?.[authorModuleId], {
+				cardId: authorId,
+				format: "atom"
+			}, "local storage is updated");
+			await click(`[data-test-recent-file="${testRealmURL}blog-post.gts"]`);
+			await selectDeclaration("Category");
+			await togglePlaygroundPanel();
+			assert.dom("[data-test-selected-item]").containsText("City Design");
+			assertCardExists(assert, categoryId1, "embedded");
+			await click("[data-test-instance-chooser]");
+			await click("[data-option-index=\"1\"]");
+			assert.dom("[data-test-selected-item]").containsText("Future Tech");
+			assertCardExists(assert, categoryId2, "embedded");
+			assert.deepEqual(getPlaygroundSelections()?.[categoryModuleId], {
+				cardId: categoryId2,
+				format: "embedded"
+			}, "local storage is updated");
+			await click("[data-test-inspector-toggle]");
+			await click("[data-test-boxel-selector-item-text=\"BlogPost\"]");
+			assertCardExists(assert, blogPostId1, "isolated");
+			await selectFormat("fitted");
+			assert.deepEqual(getPlaygroundSelections()?.[blogPostModuleId], {
+				cardId: blogPostId1,
+				format: "fitted"
+			});
+			await click("[data-test-instance-chooser]");
+			await click("[data-option-index=\"1\"]");
+			assertCardExists(assert, blogPostId2, "fitted");
+			assert.deepEqual(getPlaygroundSelections()?.[blogPostModuleId], {
+				cardId: blogPostId2,
+				format: "fitted"
+			});
+			assert.strictEqual(JSON.stringify(getPlaygroundSelections()), JSON.stringify({
+				[`${authorModuleId}`]: {
+					cardId: authorId,
+					format: "atom"
+				},
+				[`${categoryModuleId}`]: {
+					cardId: categoryId2,
+					format: "embedded"
+				},
+				[`${blogPostModuleId}`]: {
+					cardId: blogPostId2,
+					format: "fitted"
+				}
+			}));
+		});
+		(0, import_qunit.test)("trigger auto saved in edit format", async function(assert) {
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			await click("[data-test-instance-chooser]");
+			await click("[data-option-index=\"0\"]");
+			await click("[data-test-edit-button]");
+			assert.dom("[data-test-card-format=\"edit\"]").exists();
+			let newFirstName = "John";
+			this.onSave((_, json) => {
+				if (typeof json === "string") throw new Error("expected JSON save data");
+				assert.strictEqual(json.data.attributes?.firstName, newFirstName);
+			});
+			await fillIn("[data-test-field=\"firstName\"] [data-test-boxel-input]", newFirstName);
+		});
+		(0, import_qunit.test)("automatically attaches the selected card to the AI message", async function(assert) {
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			await click("[data-test-instance-chooser]");
+			await click("[data-option-index=\"0\"]");
+			await click("[data-test-open-ai-assistant]");
+			assert.dom(`[data-test-card="${testRealmURL}Author/jane-doe"]`).exists();
+			assert.dom("[data-test-autoattached-card]").hasText("Jane Doe");
+			await triggerEvent(`[data-test-autoattached-card]`, "mouseenter");
+			assert.dom("[data-test-tooltip-content]").hasText("Current card is shared automatically");
+			await click("[data-test-file-browser-toggle]");
+			await click("[data-test-file=\"blog-post.gts\"]");
+			await togglePlaygroundPanel();
+			await click("[data-test-inspector-toggle]");
+			await selectDeclaration("Category");
+			await click("[data-test-instance-chooser]");
+			await click("[data-option-index=\"1\"]");
+			assert.dom(`[data-test-card="${testRealmURL}Category/future-tech"]`).exists();
+			assert.dom("[data-test-autoattached-card]").hasText("Future Tech");
+			await click("[data-test-remove-card-btn]");
+			assert.dom("[data-test-autoattached-card]").doesNotExist();
+			await click("[data-test-instance-chooser]");
+			await click("[data-option-index=\"0\"]");
+			assert.dom(`[data-test-card="${testRealmURL}Category/city-design"]`).exists();
+			assert.dom("[data-test-autoattached-card]").hasText("City Design");
+			await fillIn("[data-test-message-field]", `Message With Card and File`);
+			await click("[data-test-send-message-btn]");
+			await waitUntil(() => document.querySelectorAll("[data-test-message-idx]").length > 0);
+			assertMessages(assert, [{
+				from: "testuser",
+				message: "Message With Card and File",
+				files: [{
+					sourceUrl: `${testRealmURL}blog-post.gts`,
+					name: "blog-post.gts"
+				}],
+				cards: [{
+					id: `${testRealmURL}Category/city-design`,
+					cardTitle: "City Design"
+				}]
+			}]);
+		});
+		(0, import_qunit.test)("instance chooser only appears when panel is opened", async function(assert) {
+			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Author" });
+			assert.dom("[data-test-instance-chooser]").exists();
+			await click("[data-test-module-inspector-view=\"spec\"]");
+			assert.dom("[data-test-instance-chooser]").doesNotExist();
+		});
+		(0, import_qunit.test)("can autogenerate card instance if one does not exist in the realm", async function(assert) {
+			removeRecentFiles();
+			setRecentFiles([[testRealmURL, "person.gts"]]);
+			let recentFiles = getRecentFiles();
+			assert.strictEqual(recentFiles?.length, 1, "recent file count is correct");
+			let { data: results } = await searchCardsForTest(realm.realmIndexQueryEngine, { filter: { type: {
+				module: testRRI("person"),
+				name: "Person"
+			} } });
+			assert.strictEqual(results.length, 0);
+			await openFileInPlayground("person.gts", testRealmURL, { declaration: "Person" });
+			assert.dom("[data-test-selected-item]").containsText("Untitled Person");
+			recentFiles = getRecentFiles();
+			assert.strictEqual(recentFiles?.length, 2, "new card is added to recent files");
+			let newCardId = trimJsonExtension(`${testRealmURL}${recentFiles?.[0][1]}`);
+			assertCardExists(assert, newCardId, "isolated");
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 1 }, "new card shows up in instance chooser dropdown");
+			({data: results} = await searchCardsForTest(realm.realmIndexQueryEngine, { filter: { type: {
+				module: testRRI("person"),
+				name: "Person"
+			} } }));
+			assert.strictEqual(results.length, 1);
+			assert.strictEqual(results[0].id, newCardId);
+		});
+		(0, import_qunit.test)("does not autogenerate card instance if one exists in the realm but is not in recent cards", async function(assert) {
+			removeRecentFiles();
+			const cardId = `${testRealmURL}Person/pet-mango`;
+			let { data: results } = await searchCardsForTest(realm.realmIndexQueryEngine, { filter: { type: {
+				module: testRRI("person"),
+				name: "Pet"
+			} } });
+			assert.strictEqual(results.length, 1);
+			assert.strictEqual(results[0].id, cardId);
+			await openFileInPlayground("person.gts", testRealmURL, { declaration: "Pet" });
+			assert.dom("[data-test-selected-item]").doesNotContainText("Untitled Pet");
+			assert.dom("[data-test-selected-item]").containsText("Mango");
+			assertCardExists(assert, cardId, "isolated");
+			await click("[data-test-instance-chooser]");
+			assert.dom("[data-option-index]").exists({ count: 1 });
+			assert.dom("[data-option-index=\"0\"]").containsText("Mango");
+			({data: results} = await searchCardsForTest(realm.realmIndexQueryEngine, { filter: { type: {
+				module: testRRI("person"),
+				name: "Pet"
+			} } }));
+			assert.strictEqual(results.length, 1);
+			assert.strictEqual(results[0].id, cardId);
+		});
+		(0, import_qunit.test)("can request AI assistant to fill in sample data", async function(assert) {
+			const prompt = `Fill in sample data for the attached card instance.`;
+			const menuItem = "Fill in Sample Data with AI";
+			const commandMessage = {
+				from: "testuser",
+				message: prompt,
+				cards: [{ id: `${testRealmURL}BlogPost/mad-hatter` }],
+				files: [{
+					name: "blog-post.gts",
+					sourceUrl: `${testRealmURL}blog-post.gts`
+				}]
+			};
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "BlogPost" });
+			assertCardExists(assert, `${testRealmURL}BlogPost/mad-hatter`);
+			await click("[data-test-instance-chooser]");
+			await click(`[data-test-boxel-menu-item-text="${menuItem}"]`);
+			assertMessages(assert, [commandMessage]);
+			await click("[data-test-more-options-button]");
+			await click(`[data-test-boxel-menu-item-text="${menuItem}"]`);
+			assertMessages(assert, [commandMessage, commandMessage]);
+		});
+		(0, import_qunit.test)("can request AI assistant to bulk generate samples", async function(assert) {
+			const prompt = `Generate 3 additional instances of the specified card definition, populated with sample data`;
+			const menuItem = `Generate 3 examples with AI`;
+			const commandMessage = {
+				from: "testuser",
+				message: prompt,
+				cards: [{ id: `${testRealmURL}BlogPost/mad-hatter` }],
+				files: [{
+					name: "blog-post.gts",
+					sourceUrl: `${testRealmURL}blog-post.gts`
+				}]
+			};
+			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "BlogPost" });
+			assertCardExists(assert, `${testRealmURL}BlogPost/mad-hatter`);
+			await click("[data-test-instance-chooser]");
+			await click(`[data-test-boxel-menu-item-text="${menuItem}"]`);
+			assertMessages(assert, [commandMessage]);
+			await click("[data-test-more-options-button]");
+			await click(`[data-test-boxel-menu-item-text="${menuItem}"]`);
+			assertMessages(assert, [commandMessage, commandMessage]);
+		});
+	});
+	(0, import_qunit.module)("multiple realms", function(hooks) {
+		let personalRealmURL;
+		let additionalRealmURL;
+		setupApplicationTest(hooks);
+		setupLocalIndexing(hooks);
+		let mockMatrixUtils = setupMockMatrix(hooks, { loggedInAs: "@testuser:localhost" });
+		let { setActiveRealms, setRealmPermissions, createAndJoinRoom } = mockMatrixUtils;
+		setupRealmCacheTeardown(hooks);
+		hooks.beforeEach(async function() {
+			createAndJoinRoom({
+				sender: "@testuser:localhost",
+				name: "room-test"
+			});
+			setupUserSubscription();
+			setupAuthEndpoints();
+			let realmServerService = getService("realm-server");
+			personalRealmURL = `${realmServerService.url}testuser/personal/`;
+			additionalRealmURL = `${realmServerService.url}testuser/aaa/`;
+			setActiveRealms([additionalRealmURL, personalRealmURL]);
+			await withCachedRealmSetup(async () => {
+				await setupAcceptanceTestRealm({
+					mockMatrixUtils,
+					realmURL: personalRealmURL,
+					contents: {
+						...SYSTEM_CARD_FIXTURE_CONTENTS,
+						"author-card.gts": authorCard,
+						"StyleReference/local-style.json": localStyleReferenceCard,
+						"realm.json": realmConfigCardJSON({
+							name: `Test User's Workspace`,
+							backgroundURL: "/test-fixtures/realm-images/4k-origami-flock.jpg",
+							iconURL: "/test-fixtures/realm-images/letter-t.png"
+						})
+					}
+				});
+				await setupAcceptanceTestRealm({
+					mockMatrixUtils,
+					realmURL: additionalRealmURL,
+					contents: {
+						...SYSTEM_CARD_FIXTURE_CONTENTS,
+						"author-card.gts": authorCard,
+						"realm.json": realmConfigCardJSON({
+							name: `Additional Workspace`,
+							backgroundURL: "/test-fixtures/realm-images/4k-powder-puff.jpg",
+							iconURL: "/test-fixtures/realm-images/letter-a.png"
+						})
+					}
+				});
+			});
+			setRealmPermissions({
+				[additionalRealmURL]: [
+					"read",
+					"write",
+					"realm-owner"
+				],
+				[personalRealmURL]: [
+					"read",
+					"write",
+					"realm-owner"
+				]
+			});
+		});
+		(0, import_qunit.test)("can create new instance in currently open realm", async function(assert) {
+			removeRecentFiles();
+			await openFileInPlayground("author-card.gts", additionalRealmURL, { declaration: "Author" });
+			assert.dom("[data-test-playground-panel] [data-test-card][data-test-card-format=\"isolated\"]").exists("new card is autogenerated");
+			let recentFiles = getRecentFiles();
+			assert.strictEqual(recentFiles?.[0][0], additionalRealmURL, "realm is correct");
+			assert.strictEqual(recentFiles?.length, 2);
+			await createNewInstance();
+			recentFiles = getRecentFiles();
+			assert.strictEqual(recentFiles?.length, 3, "recent file count is correct");
+			let newCardId = document.querySelector("[data-test-card]")?.getAttribute("data-test-card");
+			assert.ok(newCardId?.startsWith(additionalRealmURL));
+			assert.notOk(newCardId?.startsWith(personalRealmURL));
+			let recentCardId = trimJsonExtension(`${recentFiles?.[0][0]}${recentFiles?.[0][1]}`);
+			assert.strictEqual(newCardId, recentCardId);
+			assertCardExists(assert, recentCardId, "isolated", "new card is rendered in isolated format");
+		});
+		(0, import_qunit.test)("edit format is enabled for writable instances of read-only card definitions", async function(assert) {
+			removePlaygroundSelections();
+			removeRecentFiles();
+			removeRecentCards();
+			try {
+				setRecentFiles([[personalRealmURL, "StyleReference/local-style.json"]]);
+				await openFileInPlayground("style-reference.gts", baseRealm.url);
+				await waitFor("[data-test-instance-chooser]");
+				assert.dom("[data-test-selected-item]").containsText("Local Style Reference");
+				await waitFor("[data-test-edit-button]");
+				assert.dom("[data-test-edit-button]").exists("edit button is shown for writable instance");
+				await click("[data-test-edit-button]");
+				await waitFor("[data-test-card-format=\"edit\"]");
+				assert.dom("[data-test-card-format=\"edit\"]").exists("playground switches to edit format");
+				await fillIn("[data-test-card-format=\"edit\"] [data-test-contains-many=\"inspirations\"] [data-test-item=\"0\"] input", "Updated Inspiration");
+				assert.dom("[data-test-card-format=\"edit\"] [data-test-contains-many=\"inspirations\"] [data-test-item=\"0\"] input").isNotDisabled("inspirations input is enabled for editing");
+			} finally {
+				removePlaygroundSelections();
+				removeRecentFiles();
+				removeRecentCards();
+			}
+		});
+	});
+	(0, import_qunit.module)("error handling", function(hooks) {
+		let realm;
+		setupApplicationTest(hooks);
+		setupLocalIndexing(hooks);
+		setupOnSave(hooks);
+		setupRealmCacheTeardown(hooks);
+		let mockMatrixUtils = setupMockMatrix(hooks, {
+			loggedInAs: "@testuser:localhost",
+			activeRealms: [testRealmURL]
+		});
+		let { setRealmPermissions, setActiveRealms, createAndJoinRoom } = mockMatrixUtils;
+		const boomPet = `import { contains, field, CardDef, Component, FieldDef, StringField, serialize } from '@cardstack/base/card-api';
+      // this field explodes when serialized (saved)
+      export class BoomField extends FieldDef {
+        @field cardTitle = contains(StringField);
+        static [serialize](_boom: any) {
+          throw new Error('Boom!');
+        }
+        static embedded = class Embedded extends Component<typeof this> {
+          <template>
+            <@fields.cardTitle />
+          </template>
+        };
+      }
+      export class BoomPet extends CardDef {
+        static displayName = 'Boom Pet';
+        @field boom = contains(BoomField);
+      }
+    `;
+		const boomPerson = `import { field, contains, CardDef, FieldDef, Component, StringField } from '@cardstack/base/card-api';
+      export class BoomPerson extends CardDef {
+        static displayName = 'Boom Person';
+        @field firstName = contains(StringField);
+        static isolated = class Isolated extends Component<typeof this> {
+          <template>
+            Hello <@fields.firstName />! {{this.boom}}
+          </template>
+          boom = () => fn();
+        }
+      }
+
+      export class FailingField extends FieldDef {
+        static displayName = 'Failing Field';
+        @field cardTitle = contains(StringField);
+        static embedded = class Embedded extends Component<typeof this> {
+          <template>
+            <p>This will fail.</p> {{this.boom}}
+          </template>
+          boom = () => {
+            throw new Error('boom!');
+          };
+        };
+      }
+
+      export class WorkingCard extends CardDef {
+        static displayName = 'Working Card';
+        static isolated = class Isolated extends Component<typeof this> {
+          <template>
+            <p>I am not broken!</p>
+          </template>
+        }
+      }
+    `;
+		const syntaxError = `
+      import { contains, field, CardDef } from "@cardstack/base/card-api";
+      // missing StringField import
+      export class Boom extends CardDef {
+        @field firstName = contains(StringField);
+      }
+    `;
+		hooks.beforeEach(async function() {
+			createAndJoinRoom({
+				sender: "@testuser:localhost",
+				name: "room-test"
+			});
+			setupUserSubscription();
+			setupAuthEndpoints();
+			setActiveRealms([testRealmURL]);
+			setRealmPermissions({ [testRealmURL]: ["read", "write"] });
+			({realm} = await withCachedRealmSetup(async () => setupAcceptanceTestRealm({
+				mockMatrixUtils,
+				realmURL: testRealmURL,
+				contents: {
+					...SYSTEM_CARD_FIXTURE_CONTENTS,
+					"boom-pet.gts": boomPet,
+					"person.gts": personCard,
+					"boom-person.gts": boomPerson,
+					"syntax-error.gts": syntaxError,
+					"Person/delilah.json": { data: {
+						attributes: { cardInfo: { name: "Delilah" } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}person`,
+							name: "Person"
+						} }
+					} }
+				}
+			})));
+		});
+		(0, import_qunit.test)("it renders a module error", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}syntax-error.gts`
+			});
+			assert.dom("[data-test-syntax-error] [data-test-error-stack]").containsText(`Encountered error while evaluating ${testRealmURL}syntax-error.gts: ReferenceError: StringField is not defined`, "error message is correct (and contains no \"deps\" field)");
+		});
+		(0, import_qunit.test)("it renders a playground instance with an error that has does not have a last known good state", async function(assert) {
+			await realm.write("BoomPet/cassidy.json", JSON.stringify({ data: {
+				attributes: { title: "Cassidy Cat" },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}boom-pet`,
+					name: "BoomPet"
+				} }
+			} }));
+			setPlaygroundSelections({ [`${testRealmURL}boom-pet/BoomPet`]: {
+				cardId: rri(`${testRealmURL}BoomPet/cassidy`),
+				format: "isolated"
+			} });
+			await openFileInPlayground("boom-pet.gts", testRealmURL, { declaration: "BoomPet" });
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Card Error: Internal Server Error");
+			assert.dom("[data-test-playground-panel] [data-test-field=\"cardTitle\"]").doesNotExist();
+			assert.dom("[data-test-card-error]").containsText("This card contains an error.");
+			assert.dom("[data-test-error-message]").hasText("Boom!");
+			assert.dom("[data-test-format-chooser]").doesNotExist();
+			await click("[data-test-toggle-details]");
+			assert.dom("[data-test-error-details]").includesText("Boom! at [cardstack-serialize]");
+		});
+		(0, import_qunit.test)("it renders error info when creating new instance causes error after file was created in realm", async function(assert) {
+			await openFileInPlayground("boom-person.gts", testRealmURL, { declaration: "BoomPerson" });
+			assert.dom("[data-test-instance-chooser]").hasText("Select card instance");
+			assert.dom("[data-test-card-error]").exists("auto-generated card has error in it");
+			await createNewInstance();
+			assert.dom("[data-test-playground-panel] [data-test-card]").doesNotExist();
+			assert.dom("[data-test-card-error]").hasText("This card contains an error.");
+			assert.dom("[data-test-error-message]").hasText("Encountered error rendering HTML for card: fn is not defined");
+			await click("[data-test-toggle-details]");
+			assert.dom("[data-test-error-details]").containsText("fn is not defined");
+			await withoutLoaderMonitoring(async () => {
+				getService("loader-service").resetLoader();
+				await realm.write("boom-person.gts", `import { field, contains, CardDef, Component, StringField } from '@cardstack/base/card-api';
+          export class BoomPerson extends CardDef {
+            static displayName = 'Boom Person';
+            @field firstName = contains(StringField);
+            static isolated = class Isolated extends Component<typeof this> {
+              <template>
+                Hello <@fields.firstName />!
+              </template>
+              boom = () => fn();
+            }
+          }
+        `);
+			});
+			await waitFor(`[data-test-error-container]`, {
+				count: 0,
+				timeout: 5e3
+			});
+			assert.dom("[data-test-error-container]").doesNotExist();
+		});
+		(0, import_qunit.test)("it can clear card-creation error that did not result in new file in the realm", async function(assert) {
+			await openFileInPlayground("boom-pet.gts", testRealmURL, { declaration: "BoomPet" });
+			assert.dom("[data-test-card-error]").exists("auto-generated card has error in it");
+			await createNewInstance();
+			assert.dom("[data-test-playground-panel] [data-test-card]").doesNotExist();
+			assert.dom("[data-test-card-error]").hasText("This card contains an error.");
+			assert.dom("[data-test-error-message]").hasText("Boom!");
+			getService("loader-service").resetLoader();
+			await realm.write("boom-pet.gts", `import { contains, field, CardDef, Component, FieldDef, StringField } from '@cardstack/base/card-api';
+            export class BoomPet extends CardDef {
+              static displayName = 'Boom Pet';
+              @field boom = contains(StringField);
+            }
+          `);
+			await waitFor(`[data-test-error-container]`, {
+				count: 0,
+				timeout: 5e3
+			});
+			assert.dom("[data-test-error-container]").doesNotExist();
+		});
+		(0, import_qunit.test)("it can clear card-creation error (that resulted in new file in the realm) when different card-def is selected", async function(assert) {
+			await openFileInPlayground("boom-person.gts", testRealmURL, { declaration: "BoomPerson" });
+			assert.dom("[data-test-instance-chooser]").containsText("Select card instance");
+			assert.dom("[data-test-error-container]").containsText("This card contains an error", "Auto-generated card has error in it");
+			await selectDeclaration("WorkingCard");
+			assert.dom("[data-test-error-container]").doesNotExist("error clears when selecting different card def");
+			await selectDeclaration("BoomPerson");
+			assert.dom("[data-test-error-container]").exists("can navigate back to the error card def");
+		});
+		(0, import_qunit.test)("it can clear card-creation error for a failing field", async function(assert) {
+			await openFileInPlayground("boom-person.gts", testRealmURL, { declaration: "FailingField" });
+			assert.dom("[data-test-card-error]").exists("auto-generated card has error in it");
+			await createNewInstance();
+			assert.dom("[data-test-playground-panel] [data-test-card]").doesNotExist();
+			assert.dom("[data-test-card-error]").hasText("This card contains an error.");
+			assert.dom("[data-test-error-message]").hasText("Encountered error rendering HTML for card: boom!");
+			await withoutLoaderMonitoring(async () => {
+				getService("loader-service").resetLoader();
+				await realm.write("boom-person.gts", `import { contains, field, CardDef, Component, FieldDef, StringField } from '@cardstack/base/card-api';
+           export class FailingField extends FieldDef {
+             static displayName = 'Failing Field';
+             @field cardTitle = contains(StringField);
+             static embedded = class Embedded extends Component<typeof this> {
+               <template>
+                 <p>This will not fail.</p>
+               </template>
+             };
+           }
+          `);
+			});
+			await waitFor(`[data-test-error-container]`, {
+				count: 0,
+				timeout: 5e3
+			});
+			assert.dom("[data-test-error-container]").doesNotExist();
+		});
+		(0, import_qunit.test)("it can render stale card in edit format when the server is in an error state for the card", async function(assert) {
+			const cardId = rri(`${testRealmURL}Person/delilah`);
+			setRecentFiles([[testRealmURL, "Person/delilah.json"]]);
+			setPlaygroundSelections({ [`${testRealmURL}person/Person`]: {
+				cardId,
+				format: "isolated"
+			} });
+			await openFileInPlayground("person.gts", testRealmURL, { declaration: "Person" });
+			await click("[data-test-edit-button]");
+			assert.dom("[data-test-playground-panel] [data-test-field=\"cardInfo-name\"] input").hasValue("Delilah");
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Person");
+			assert.dom("[data-test-format-chooser]").exists();
+			assert.dom("[data-test-error-container]").doesNotExist();
+			await realm.write("Person/delilah.json", JSON.stringify({ data: {
+				attributes: { cardInfo: { name: "Lila" } },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}Person/missing-person`,
+					name: "MissingPerson"
+				} }
+			} }));
+			await settled();
+			assert.dom("[data-test-playground-panel] [data-test-field=\"cardInfo-name\"] input").hasValue("Delilah");
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Person");
+			assert.dom("[data-test-format-chooser]").exists();
+			assert.dom("[data-test-error-container]").doesNotExist();
+		});
+		(0, import_qunit.test)("it can render the last known good state for card with error when the not in the edit format", async function(assert) {
+			await realm.write("Person/delilah.json", JSON.stringify({ data: {
+				attributes: { cardInfo: { name: "Lila" } },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}Person/missing-person`,
+					name: "MissingPerson"
+				} }
+			} }));
+			const cardId = rri(`${testRealmURL}Person/delilah`);
+			setRecentFiles([[testRealmURL, "Person/delilah.json"]]);
+			setPlaygroundSelections({ [`${testRealmURL}person/Person`]: {
+				cardId,
+				format: "isolated"
+			} });
+			await openFileInPlayground("person.gts", testRealmURL, { declaration: "Person" });
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Card Error");
+			assert.dom("[data-test-card-error]").exists();
+			assert.dom("[data-test-playground-panel] [data-test-field=\"cardInfo-name\"]").containsText("Delilah", "last known good state is rendered");
+			assert.dom("[data-test-error-message]").hasText(`${testRealmURL}Person/missing-person not found`);
+			assert.dom("[data-test-format-chooser]").doesNotExist();
+			await click("[data-test-toggle-details]");
+			assert.dom("[data-test-error-details]").containsText("Person/missing-person not found");
+			assert.dom("[data-test-error-stack]").exists();
+			await realm.write("Person/delilah.json", JSON.stringify({ data: {
+				attributes: { cardInfo: { name: "Lila" } },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}person`,
+					name: "Person"
+				} }
+			} }));
+			await settled();
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Person");
+			assert.dom("[data-test-playground-panel] [data-test-field=\"cardInfo-name\"]").containsText("Lila");
+			assert.dom("[data-test-error-container]").doesNotExist("can recover from missing link error");
+		});
+		(0, import_qunit.test)("it renders error message for missing file", async function(assert) {
+			setPlaygroundSelections({ [`${testRealmURL}person/Person`]: {
+				cardId: rri(`${testRealmURL}Person/chef-mike`),
+				format: "isolated"
+			} });
+			await openFileInPlayground("person.gts", testRealmURL, { declaration: "Person" });
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Card Error: Not Found");
+			assert.dom("[data-test-card-error]").containsText("File not found. Please choose or create another instance.");
+		});
+		(0, import_qunit.test)("it renders error message for a card whose adoptsFrom module is missing", async function(assert) {
+			await realm.write("Person/chef-mike.json", JSON.stringify({ data: {
+				attributes: { title: "Chef Mike" },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}Person/missing-person`,
+					name: "MissingPerson"
+				} }
+			} }));
+			setPlaygroundSelections({ [`${testRealmURL}person/Person`]: {
+				cardId: rri(`${testRealmURL}Person/chef-mike`),
+				format: "isolated"
+			} });
+			await openFileInPlayground("person.gts", testRealmURL, { declaration: "Person" });
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Card Error");
+			assert.dom("[data-test-error-message]").containsText(`${testRealmURL}Person/missing-person not found`);
+		});
+	});
+});
+//#endregion