@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/operator-mode-test-BZnnxO9q.js

@@ -0,0 +1,683 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Ar as testRealmURL, Sc as Deferred } from "./runtime-common-ClpqhbwG.js";
+import { y as rri } from "./paths-BYHDgqsT.js";
+import { V as localId } from "./constants-CqKWhRfY.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import "./template-factory-ds9s0u8l.js";
+import { t as OperatorModeContainer } from "./container-Dj-5prh9.js";
+import { M as waitUntil, d as click, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { L as setupRealmCacheTeardown, et as withSlowSave, wt as percySnapshot } from "./mock-matrix-DPQ0j2MD.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { n as renderComponent } from "./render-component-B15Z0e2v.js";
+import { t as setupOperatorModeTests } from "./setup-Dgn0s6Zk.js";
+//#region tests/integration/components/operator-mode-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+(0, import_qunit.module)("Integration | operator-mode | basics", function(hooks) {
+	let ctx = setupOperatorModeTests(hooks);
+	let noop = () => {};
+	(0, import_qunit.test)("it loads a card and renders its isolated view", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-boxel-card-header-title]");
+		await waitFor(`[data-test-card-header-realm-icon="https://boxel-images.boxel.ai/icons/Letter-o.png"]`);
+		assert.dom("[data-test-boxel-card-header-title]").hasText("Person - Fadhlan");
+		assert.dom(`[data-test-card-header-realm-icon="https://boxel-images.boxel.ai/icons/Letter-o.png"]`).exists();
+		assert.dom("[data-test-person]").hasText("Fadhlan");
+		assert.dom("[data-test-first-letter-of-the-name]").hasText("F");
+		assert.dom("[data-test-city]").hasText("Bandung");
+		assert.dom("[data-test-country]").hasText("Indonesia");
+		assert.dom("[data-test-stack-card]").exists({ count: 1 });
+		await waitFor("[data-test-pet=\"Mango\"]");
+		await click("[data-test-pet=\"Mango\"]");
+		await waitFor(`[data-test-stack-card="${testRealmURL}Pet/mango"]`);
+		assert.dom("[data-test-stack-card]").exists({ count: 2 });
+		assert.dom("[data-test-stack-card-index=\"1\"]").includesText("Mango");
+	});
+	(0, import_qunit.test)("it renders a card with an error that has does not have a last known good state", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}ExplodingCard/exploded`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		assert.dom("[data-test-boxel-card-header-title]").containsText("Card Error", "card error title is displayed");
+		assert.dom("[data-test-error-message]").containsText("Boom!");
+		await percySnapshot(assert);
+		await click("[data-test-toggle-details]");
+		assert.dom("[data-test-error-details]").exists();
+		assert.dom("[data-test-error-stack]").exists();
+		assert.strictEqual(ctx.operatorModeStateService.state?.submode, "interact", "in interact mode");
+		await click("[data-test-view-in-code-mode-button]");
+		assert.strictEqual(ctx.operatorModeStateService.state?.submode, "code", "in code mode");
+		assert.strictEqual(ctx.operatorModeStateService.state?.codePath, `${testRealmURL}ExplodingCard/exploded.json`, "codePath is correct");
+	});
+	(0, import_qunit.test)("navigating to an archived realm shows the sealed state, not card chrome or a generic error", async function(assert) {
+		getService("network").virtualNetwork.mount(async (req) => {
+			if (req.method === "GET" && req.url.includes("Person/fadhlan")) return new Response(JSON.stringify({ errors: [{
+				status: "403",
+				code: "archived",
+				title: "Realm Archived",
+				detail: `Realm ${testRealmURL} is archived`
+			}] }), {
+				status: 403,
+				headers: {
+					"Content-Type": "application/vnd.api+json",
+					"X-Boxel-Realm-Archived": "true",
+					"X-Boxel-Realm-Url": testRealmURL
+				}
+			});
+			return null;
+		}, { prepend: true });
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-archived-realm-state]");
+		assert.dom("[data-test-archived-realm-state]").containsText("This workspace is archived", "the sealed/archived state is shown");
+		assert.dom("[data-test-boxel-card-header-title]").containsText("Workspace Archived", "the archived header is shown");
+		assert.dom("[data-test-card-error]").doesNotExist("a generic card error is not shown for an archived realm");
+	});
+	(0, import_qunit.module)("card with an error that has a last known good state", function(hooks) {
+		setupRealmCacheTeardown(hooks);
+		hooks.beforeEach(async function() {
+			await ctx.testRealm.write("ExplodingCard/1.json", JSON.stringify({ data: {
+				type: "card",
+				attributes: {
+					name: "Stable Example",
+					status: "boom"
+				},
+				meta: { adoptsFrom: {
+					module: rri("../exploding-card.gts"),
+					name: "ExplodingCard"
+				} }
+			} }));
+		});
+		(0, import_qunit.test)("it renders a card with an error that has a last known good state", async function(assert) {
+			ctx.setCardInOperatorModeState(`${testRealmURL}ExplodingCard/1`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "HclvCZca",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			assert.dom("[data-test-boxel-card-header-title]").containsText("Card Error", "card error title is displayed");
+			assert.dom("[data-test-card-error]").includesText("Stable Example", "the last known good HTML is rendered");
+			await percySnapshot(assert);
+			await click("[data-test-toggle-details]");
+			assert.dom("[data-test-error-details]").containsText("Boom!");
+			assert.dom("[data-test-error-stack]").exists();
+			assert.strictEqual(ctx.operatorModeStateService.state?.submode, "interact", "in interact mode");
+			await click("[data-test-view-in-code-mode-button]");
+			assert.strictEqual(ctx.operatorModeStateService.state?.submode, "code", "in code mode");
+			assert.strictEqual(ctx.operatorModeStateService.state?.codePath, `${testRealmURL}ExplodingCard/1.json`, "codePath is correct");
+		});
+		(0, import_qunit.test)("it has the ability to delete the card that has an error", async function(assert) {
+			ctx.setCardInOperatorModeState(`${testRealmURL}ExplodingCard/1`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "HclvCZca",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await click("[data-test-more-options-button]");
+			await click("[data-test-boxel-menu-item-text=\"Delete Card\"]");
+			assert.dom("[data-test-delete-modal-container]").includesText("Delete the card");
+			await click("[data-test-confirm-delete-button]");
+			assert.dom(`[data-test-stack-card="${testRealmURL}ExplodingCard/1"]`).doesNotExist();
+			assert.dom(`[data-test-stack-card="${testRealmURL}index"]`).exists();
+		});
+	});
+	(0, import_qunit.test)("it auto saves the field value", async function(assert) {
+		assert.expect(7);
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-person]");
+		await click("[data-test-edit-button]");
+		let finishedSaving = false;
+		this.onSave((_, json) => {
+			if (typeof json === "string") throw new Error("expected JSON save data");
+			finishedSaving = true;
+			assert.strictEqual(json.data.attributes?.firstName, "EditedName");
+		});
+		fillIn("[data-test-field=\"firstName\"] [data-test-boxel-input]", "EditedName");
+		await waitUntil(() => document.querySelector("[data-test-auto-save-indicator]")?.textContent?.trim() === "Saving…", { timeout: 5e3 });
+		assert.dom("[data-test-auto-save-indicator]").containsText("Saving…");
+		assert.false(finishedSaving, "save in-flight message is correct");
+		await waitUntil(() => finishedSaving, { timeout: 1e4 });
+		assert.true(finishedSaving, "finished saving message is correct");
+		await waitFor("[data-test-last-saved]");
+		assert.dom("[data-test-last-saved]").containsText("Saved");
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await waitFor("[data-test-person=\"EditedName\"]");
+		assert.dom("[data-test-person]").hasText("EditedName");
+		assert.dom("[data-test-first-letter-of-the-name]").hasText("E");
+	});
+	(0, import_qunit.test)("an error in auto-save is handled gracefully", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BoomPet/paper`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-pet]");
+		await waitFor("[data-test-edit-button]");
+		await click("[data-test-edit-button]");
+		fillIn("[data-test-field=\"boom\"] input", "Bad cat!");
+		await waitUntil(() => document.querySelector("[data-test-auto-save-indicator]")?.textContent?.trim() == "Saving…");
+		await waitUntil(() => document.querySelector("[data-test-auto-save-indicator]")?.textContent?.trim() == "Failed to save: Boom!");
+		await click("[data-test-edit-button]");
+		assert.dom("[data-test-card-error]").exists("last known good state is displayed in isolated mode");
+	});
+	(0, import_qunit.test)("toggling edit format mutates the StackItem in place (no remount)", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-stack-item-content]");
+		let itemBefore = ctx.operatorModeStateService.state.stacks[0][0];
+		assert.strictEqual(itemBefore.format, "isolated", "starts in isolated");
+		let wrapperBefore = document.querySelector("[data-test-stack-item-content]");
+		await click("[data-test-edit-button]");
+		await waitFor("[data-test-field=\"firstName\"]");
+		let itemAfter = ctx.operatorModeStateService.state.stacks[0][0];
+		assert.strictEqual(itemAfter, itemBefore, "StackItem instance is preserved (mutated in place, not replaced)");
+		assert.strictEqual(itemAfter.format, "edit", "format is now edit");
+		let wrapperAfter = document.querySelector("[data-test-stack-item-content]");
+		assert.strictEqual(wrapperAfter, wrapperBefore, "stack-item content wrapper is the same DOM node (no remount)");
+		await click("[data-test-edit-button]");
+		await waitFor("[data-test-person]");
+		let stackBack = ctx.operatorModeStateService.state.stacks[0];
+		assert.strictEqual(stackBack[0], itemBefore, "StackItem identity preserved across edit → isolated round-trip");
+		assert.strictEqual(stackBack[0].format, "isolated", "format is back to isolated");
+		assert.strictEqual(document.querySelector("[data-test-stack-item-content]"), wrapperBefore, "wrapper still the same DOM node after round-trip");
+	});
+	(0, import_qunit.test)("a 403 from Web Application Firewall is handled gracefully when auto-saving", async function(assert) {
+		getService("network").virtualNetwork.mount(async (req) => {
+			if (req.method === "PATCH" && req.url.includes("test/Pet/buzz")) return new Response("{ message: \"Request blocked by Web Application Firewall. See x-blocked-by-waf-rule response header for detail.\" }", {
+				status: 403,
+				headers: {
+					"Content-Type": "application/json",
+					"X-Blocked-By-WAF-Rule": "CrossSiteScripting_BODY"
+				}
+			});
+			return null;
+		}, { prepend: true });
+		ctx.setCardInOperatorModeState(`${testRealmURL}Pet/buzz`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-field=\"name\"]");
+		await waitFor("[data-test-edit-button]");
+		await click("[data-test-edit-button]");
+		fillIn("[data-test-field=\"name\"] input", "Fuzz");
+		await waitUntil(() => document.querySelector("[data-test-auto-save-indicator]")?.textContent?.trim() == "Saving…", { timeoutMessage: "Waiting for Saving... to appear" });
+		await waitUntil(() => document.querySelector("[data-test-auto-save-indicator]")?.textContent?.trim() == "Failed to save: Request blocked by Web Application Firewall. X-blocked-by-waf-rule response header specifies rule: CrossSiteScripting_BODY", { timeoutMessage: "Waiting for \"Failed to save\" to appear" });
+		assert.dom("[data-test-auto-save-indicator]").containsText("Failed to save: Request blocked by Web Application Firewall. X-blocked-by-waf-rule response header specifies rule: CrossSiteScripting_BODY");
+	});
+	(0, import_qunit.test)("opens workspace chooser after closing the only remaining card on the stack", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-person]");
+		assert.dom("[data-test-person]").isVisible();
+		await click("[data-test-close-button]");
+		assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).doesNotExist();
+		assert.dom(`[data-test-stack-card="${testRealmURL}index"]`).exists();
+		await percySnapshot(assert);
+	});
+	(0, import_qunit.test)("displays cards on cards-grid and includes `spec` instances", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+		await waitFor(`[data-test-cards-grid-item]`);
+		assert.dom(`[data-test-stack-card-index="0"]`).exists();
+		assert.dom(`[data-test-cards-grid-item]`).exists();
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}BlogPost/1"] `).includesText("Outer Space Journey");
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}Spec/publishing-packet"]`).exists("publishing-packet spec is displayed on cards-grid");
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}Spec/pet-room"]`).exists("pet-room spec instance is displayed on cards-grid");
+	});
+	(0, import_qunit.test)("can optimistically create a card using the cards-grid", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		let saved = new Deferred();
+		let savedCards = /* @__PURE__ */ new Set();
+		this.onSave((url) => {
+			savedCards.add(url.href);
+			saved.fulfill();
+		});
+		await withSlowSave(1e3, async () => {
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			assert.dom(`[data-test-stack-card-index="0"]`).exists();
+			await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+			await click("[data-test-create-new-card-button]");
+			assert.dom("[data-test-card-chooser-modal] [data-test-boxel-header-title]").containsText("Choose a Spec card");
+			await waitFor(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`);
+			assert.dom(`[data-test-realm="${ctx.realmName}"] [data-test-item-button]`).exists({ count: 3 });
+			await click(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`);
+			click("[data-test-card-chooser-go-button]");
+			await waitFor("[data-test-stack-card-index=\"1\"]");
+			assert.dom("[data-test-stack-card-index=\"1\"] [data-test-field=\"blogPost\"]").exists();
+			assert.strictEqual(savedCards.size, 0, "the new card has not been saved yet");
+			await click("[data-test-stack-card-index=\"1\"] [data-test-more-options-button]");
+			await fillIn(`[data-test-field="cardInfo-name"] input`, "New Post");
+			await saved.promise;
+			let packetId = [...savedCards].find((k) => k.includes("PublishingPacket"));
+			ctx.setCardInOperatorModeState(packetId);
+			await waitFor(`[data-test-stack-card="${packetId}"]`);
+			assert.dom(`[data-test-stack-card="${packetId}"]`).exists();
+		});
+	});
+	(0, import_qunit.test)("can open a card from the cards-grid and close it", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await waitFor(`[data-test-stack-card-index]`);
+		assert.dom(`[data-test-stack-card-index="0"]`).exists();
+		await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-cards-grid-item="${testRealmURL}Person/burcu"] .field-component-card`);
+		await waitFor(`[data-test-stack-card-index="1"]`);
+		assert.dom(`[data-test-stack-card-index="1"]`).exists();
+		assert.dom(`[data-test-stack-card-index="1"] [data-test-boxel-card-header-title]`).includesText("Person");
+		await click("[data-test-stack-card-index=\"1\"] [data-test-close-button]");
+		await waitFor("[data-test-stack-card-index=\"1\"]", { count: 0 });
+		assert.dom(`[data-test-stack-card-index="1"]`).doesNotExist();
+	});
+	(0, import_qunit.test)("create new card editor opens in the stack at each nesting level", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		let savedCards = /* @__PURE__ */ new Set();
+		this.onSave((url) => savedCards.add(url.href));
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		assert.dom(`[data-test-stack-card-index="0"]`).exists();
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await click("[data-test-create-new-card-button]");
+		await waitFor(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`);
+		assert.dom("[data-test-card-chooser-modal] [data-test-boxel-header-title]").containsText("Choose a Spec card");
+		assert.dom(`[data-test-realm="${ctx.realmName}"] [data-test-item-button]`).exists({ count: 3 });
+		await click(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`);
+		await click("[data-test-card-chooser-go-button]");
+		await waitFor("[data-test-stack-card-index=\"1\"]");
+		assert.dom("[data-test-stack-card-index=\"1\"] [data-test-field=\"blogPost\"]").exists();
+		await click("[data-test-add-new=\"blogPost\"]");
+		await waitFor(`[data-test-card-chooser-modal]`);
+		await click(`[data-test-item-button-create-new]`);
+		await waitFor(`[data-test-stack-card-index="2"]`);
+		assert.dom("[data-test-stack-card-index]").exists({ count: 3 });
+		assert.dom("[data-test-stack-card-index=\"2\"] [data-test-field=\"authorBio\"]").exists();
+		await fillIn("[data-test-stack-card-index=\"2\"] [data-test-field=\"cardTitle\"] [data-test-boxel-input]", "Mad As a Hatter");
+		await click("[data-test-stack-card-index=\"2\"] [data-test-field=\"authorBio\"] [data-test-add-new]");
+		await waitFor(`[data-test-card-chooser-modal]`);
+		await click(`[data-test-item-button-create-new]`);
+		await waitFor(`[data-test-stack-card-index="3"]`);
+		assert.dom("[data-test-field=\"firstName\"] [data-test-boxel-input]").exists();
+		await fillIn("[data-test-field=\"firstName\"] [data-test-boxel-input]", "Alice");
+		await waitFor(`[data-test-stack-card-index="3"] [data-test-card="${[...savedCards].find((k) => k.includes("Author"))}"]`);
+		await fillIn("[data-test-field=\"lastName\"] [data-test-boxel-input]", "Enwunder");
+		await click("[data-test-stack-card-index=\"3\"] [data-test-close-button]");
+		await waitFor("[data-test-stack-card-index=\"3\"]", { count: 0 });
+		await waitUntil(() => /Alice\s*Enwunder/.test(document.querySelector("[data-test-stack-card-index=\"2\"] [data-test-field=\"authorBio\"]").textContent));
+		await click("[data-test-stack-card-index=\"2\"] [data-test-close-button]");
+		await waitFor("[data-test-stack-card-index=\"2\"]", { count: 0 });
+		let packetId = [...savedCards].find((k) => k.includes("PublishingPacket"));
+		await waitFor(`[data-test-stack-card-index="1"] [data-test-card="${packetId}"]`);
+		await fillIn("[data-test-stack-card-index=\"1\"] [data-test-field=\"socialBlurb\"] [data-test-boxel-input]", `Everyone knows that Alice ran the show in the Brady household. But when Alice’s past comes to light, things get rather topsy turvy…`);
+		assert.dom("[data-test-stack-card-index=\"1\"] [data-test-field=\"blogPost\"]").containsText("Mad As a Hatter by Alice Enwunder");
+		await click("[data-test-stack-card-index=\"1\"] [data-test-edit-button]");
+		await waitUntil(() => {
+			return document.querySelector(`[data-test-stack-item-content] >[data-test-card="${packetId}"]`)?.textContent?.includes("Everyone knows that Alice ran the show in the Brady household.");
+		});
+	});
+	(0, import_qunit.test)("can close cards by clicking the header of a card deeper in the stack", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`);
+		await waitFor(`[data-test-stack-card-index="1"]`);
+		assert.dom(`[data-test-stack-card-index="1"]`).exists();
+		await waitFor("[data-test-person]");
+		await waitFor("[data-test-cards-grid-item]");
+		await click("[data-test-cards-grid-item] .field-component-card");
+		await waitFor(`[data-test-stack-card-index="2"]`);
+		assert.dom(`[data-test-stack-card-index="2"]`).exists();
+		await click("[data-test-stack-card-index=\"0\"] [data-test-card-header]");
+		await waitFor("[data-test-stack-card-index=\"2\"]", { count: 0 });
+		await waitFor("[data-test-stack-card-index=\"1\"]", { count: 0 });
+		assert.dom(`[data-test-stack-card-index="2"]`).doesNotExist();
+		assert.dom(`[data-test-stack-card-index="1"]`).doesNotExist();
+		assert.dom(`[data-test-stack-card-index="0"]`).exists();
+	});
+	(0, import_qunit.test)(`displays realm name as cards grid card title and card's display name as other card titles`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		assert.dom(`[data-test-stack-card-header]`).containsText(ctx.realmName);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`);
+		await waitFor(`[data-test-stack-card-index="1"]`);
+		assert.dom(`[data-test-stack-card-index="1"]`).exists();
+		assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-boxel-card-header-title]`).containsText("Person");
+		assert.dom(`[data-test-cards-grid-cards]`).isNotVisible();
+		assert.dom(`[data-test-create-new-card-button]`).isNotVisible();
+	});
+	(0, import_qunit.test)("can toggle between custom and base edit template", async function(assert) {
+		const cardId = `${testRealmURL}PublishingPacket/story`;
+		const customEdit = "[data-test-pubpacket-edit]";
+		const baseEdit = "[data-test-base-template=\"edit\"]";
+		ctx.setCardInOperatorModeState(cardId, "edit");
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		assert.dom(`[data-test-stack-card="${cardId}"]`).exists();
+		assert.dom(customEdit).exists("custom edit template is shown");
+		assert.dom(baseEdit).doesNotExist();
+		await click("[data-test-more-options-button]");
+		await click("[data-test-boxel-menu-item-text=\"Toggle Standard View\"]");
+		assert.dom(baseEdit).exists("switched to base edit template");
+		assert.dom(customEdit).doesNotExist();
+		await click("[data-test-more-options-button]");
+		await click("[data-test-boxel-menu-item-text=\"Toggle Standard View\"]");
+		assert.dom(customEdit).exists("custom edit template is restored");
+		await click("[data-test-more-options-button]");
+		assert.dom("[data-test-boxel-menu-item-text=\"Toggle Standard View\"]").exists("Toggle Standard View is offered again");
+	});
+	(0, import_qunit.test)("can toggle between custom and base isolated template", async function(assert) {
+		const cardId = `${testRealmURL}PublishingPacket/story`;
+		const customIsolated = "[data-test-pubpacket-isolated]";
+		const baseIsolated = "[data-test-base-template=\"isolated\"]";
+		ctx.setCardInOperatorModeState(cardId);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		assert.dom(`[data-test-stack-card="${cardId}"]`).exists();
+		assert.dom(customIsolated).exists("custom isolated template is shown");
+		assert.dom(baseIsolated).doesNotExist();
+		await click("[data-test-more-options-button]");
+		await click("[data-test-boxel-menu-item-text=\"Toggle Standard View\"]");
+		assert.dom(baseIsolated).exists("switched to base isolated template");
+		assert.dom(customIsolated).doesNotExist();
+		await click("[data-test-more-options-button]");
+		await click("[data-test-boxel-menu-item-text=\"Toggle Standard View\"]");
+		assert.dom(customIsolated).exists("custom isolated template is restored");
+		await click("[data-test-more-options-button]");
+		assert.dom("[data-test-boxel-menu-item-text=\"Toggle Standard View\"]").exists("Toggle Standard View is offered again");
+	});
+	(0, import_qunit.test)("clicking Edit updates an unsaved local-id-backed stack item in place", async function(assert) {
+		let store = getService("store");
+		let { Person } = await ctx.loader.import(`${testRealmURL}person`);
+		let instance = new Person({ firstName: "Unsaved Person" });
+		await store.addWithoutPersisting(instance, { realm: testRealmURL });
+		ctx.operatorModeStateService.restore({ stacks: [[{
+			id: instance[localId],
+			format: "isolated"
+		}]] });
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		assert.dom("[data-test-stack-card-index]").exists({ count: 1 });
+		assert.dom("[data-test-person]").hasText("Unsaved Person");
+		await click("[data-test-edit-button]");
+		assert.dom("[data-test-stack-card-index]").exists({ count: 1 });
+		assert.dom("[data-test-field=\"firstName\"] input").exists();
+		assert.strictEqual(ctx.operatorModeStateService.state.stacks[0][0].id, instance[localId], "the same local-id-backed stack item is retained");
+		assert.strictEqual(ctx.operatorModeStateService.state.stacks[0][0].format, "edit", "the existing stack item switches to edit mode");
+	});
+	(0, import_qunit.module)("expand to full width", function(hooks) {
+		setupRealmCacheTeardown(hooks);
+		(0, import_qunit.test)("can expand card to full width via more options menu and collapse via header button", async function(assert) {
+			let personCard = `${testRealmURL}Person/fadhlan`;
+			ctx.setCardInOperatorModeState(personCard);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "HclvCZca",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${personCard}"]`);
+			assert.dom("[data-test-expand-button]").doesNotExist();
+			await click("[data-test-more-options-button]");
+			await click("[data-test-boxel-menu-item-text=\"Expand to Full Width\"]");
+			assert.dom(`[data-test-stack-card="${personCard}"]`).hasClass("expanded", "stack card has expanded class");
+			await click("[data-test-more-options-button]");
+			assert.dom("[data-test-boxel-menu-item-text=\"Expand to Full Width\"]").doesNotExist("\"Expand to full width\" is no longer in the menu after expansion");
+			await click("[data-test-expand-button=\"active\"]");
+			assert.dom(`[data-test-stack-card="${personCard}"]`).doesNotHaveClass("expanded", "expanded class is removed after collapse");
+			assert.dom("[data-test-expand-button]").doesNotExist("restore button is gone after collapse");
+		});
+		(0, import_qunit.test)("on a phone-width viewport every card is full width and cannot be restored", async function(assert) {
+			let personCard = `${testRealmURL}Person/fadhlan`;
+			let petCard = `${testRealmURL}Pet/mango`;
+			ctx.operatorModeStateService.isMobileViewport = true;
+			ctx.operatorModeStateService.restore({ stacks: [[{
+				id: personCard,
+				format: "isolated"
+			}, {
+				id: petCard,
+				format: "isolated"
+			}]] });
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "HclvCZca",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${petCard}"]`);
+			assert.dom(`[data-test-stack-card="${petCard}"]`).hasClass("expanded", "the top card is expanded");
+			assert.dom(`[data-test-stack-card="${personCard}"]`).doesNotHaveClass("buried", "the card underneath keeps its own layout for the slide");
+			assert.dom("[data-test-expand-button]").doesNotExist("there is no restore button");
+			await click("[data-test-more-options-button]");
+			assert.dom("[data-test-boxel-menu-item-text=\"Copy Card URL\"]").exists("the top card’s menu is open");
+			assert.dom("[data-test-boxel-menu-item-text=\"Restore Width\"]").doesNotExist("there is no Restore Width menu item");
+			assert.dom("[data-test-boxel-menu-item-text=\"Expand to Full Width\"]").doesNotExist();
+		});
+	});
+	(0, import_qunit.test)("can toggle isolated template in place when the stack stores a saved card by local id", async function(assert) {
+		const cardId = `${testRealmURL}PublishingPacket/story`;
+		const customIsolated = "[data-test-pubpacket-isolated]";
+		const baseIsolated = "[data-test-base-template=\"isolated\"]";
+		let packet = await getService("store").get(cardId);
+		ctx.operatorModeStateService.restore({ stacks: [[{
+			id: packet[localId],
+			format: "isolated"
+		}]] });
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "HclvCZca",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		assert.dom("[data-test-stack-card]").exists({ count: 1 });
+		assert.dom(customIsolated).exists("custom isolated template is shown");
+		assert.dom(baseIsolated).doesNotExist();
+		await click("[data-test-more-options-button]");
+		await click("[data-test-boxel-menu-item-text=\"Toggle Standard View\"]");
+		assert.dom("[data-test-stack-card]").exists({ count: 1 });
+		assert.dom(baseIsolated).exists("switched to base isolated template");
+		assert.dom(customIsolated).doesNotExist();
+		assert.strictEqual(ctx.operatorModeStateService.state.stacks[0][0].id, packet[localId], "the stack item keeps its local id");
+		assert.true(Boolean(ctx.operatorModeStateService.state.stacks[0][0].useBaseTemplate), "the existing stack item toggles to the base template");
+	});
+});
+//#endregion