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

package/bundled-test-harness/assets/operator-mode-ui-test-BG6I7-Hc.js

@@ -0,0 +1,1045 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.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-CEslVSTe.js";
+import { o as TypeSummariesResource } from "./mini-YXjrY_tH.js";
+import { M as waitUntil, T as settled, a as find, c as triggerKeyEvent, d as click, l as triggerEvent, o as waitFor, p as blur, r as typeIn, s as fillIn } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { Et as percySnapshot } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { n as renderComponent } from "./render-component-B15Z0e2v.js";
+import { t as setupOperatorModeTests } from "./setup-CssMNvui.js";
+//#region tests/integration/components/operator-mode-ui-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+async function copiedBy(selector) {
+	let original = navigator.clipboard.writeText;
+	let copied;
+	navigator.clipboard.writeText = async (text) => {
+		copied = text;
+	};
+	try {
+		await click(selector);
+	} finally {
+		navigator.clipboard.writeText = original;
+	}
+	return copied;
+}
+(0, import_qunit.module)("Integration | operator-mode | ui", function(hooks) {
+	let ctx = setupOperatorModeTests(hooks);
+	let noop = () => {};
+	(0, import_qunit.test)("displays realm name and URL in tooltip when hovering realm icon", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-boxel-card-header-title]", { timeout: 1e4 });
+		await waitFor(`[data-test-card-header-realm-icon="https://boxel-images.boxel.ai/icons/Letter-o.png"]`, { timeout: 1e4 });
+		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();
+		await triggerEvent(`[data-test-card-header-realm-icon]`, "mouseenter");
+		assert.dom("[data-test-tooltip-content]").includesText("In Operator Mode Workspace");
+		assert.dom("[data-test-tooltip-content] [data-test-card-header-realm-url]").hasText("test-realm/test");
+		await triggerEvent(`[data-test-card-header-realm-icon]`, "mouseleave");
+		assert.dom("[data-test-boxel-card-header-title]").hasText("Person - Fadhlan");
+	});
+	(0, import_qunit.test)(`it has an option to copy the card url`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/burcu`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-more-options-button]");
+		await click("[data-test-more-options-button]");
+		let copied = await copiedBy("[data-test-boxel-menu-item-text=\"Copy Card URL\"]");
+		assert.strictEqual(copied, getService("network").virtualNetwork.keyForIdentifier(`${testRealmURL}Person/burcu`), "copies the URL the realm serves the card from");
+		assert.dom("[data-test-boxel-menu-item]").doesNotExist();
+	});
+	(0, import_qunit.test)(`click on "links to" the embedded card will open it on the stack`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await click("[data-test-author]");
+		await waitFor("[data-test-stack-card-index=\"1\"]");
+		assert.dom("[data-test-stack-card-index]").exists({ count: 2 });
+		assert.dom("[data-test-stack-card-index=\"1\"] [data-test-boxel-card-header-title]").includesText("Author");
+	});
+	(0, import_qunit.test)(`click on "links to" the embedded file will open it on the stack`, async function(assert) {
+		let linkedFileId = `${testRealmURL}FileLinkCard/notes.txt`;
+		await ctx.testRealm.write("file-link-card.gts", `
+        import { CardDef, Component, field, contains, linksTo, StringField } from '@cardstack/base/card-api';
+        import { FileDef } from '@cardstack/base/file-api';
+
+        export class FileLinkCard extends CardDef {
+          static displayName = 'File Link Card';
+          @field title = contains(StringField);
+          @field attachment = linksTo(FileDef);
+
+          static isolated = class Isolated extends Component<typeof this> {
+            <template>
+              <h2 data-test-file-link-card-title><@fields.title /></h2>
+              <div data-test-file-link-attachment>
+                <@fields.attachment />
+              </div>
+            </template>
+          };
+        }
+      `);
+		await ctx.testRealm.write("FileLinkCard/notes.txt", "Hello from a file link");
+		await ctx.testRealm.write("FileLinkCard/with-file.json", JSON.stringify({ data: {
+			type: "card",
+			attributes: { title: "Linked file example" },
+			relationships: { attachment: {
+				links: { self: "./notes.txt" },
+				data: {
+					type: "file-meta",
+					id: "./notes.txt"
+				}
+			} },
+			meta: { adoptsFrom: {
+				module: "../file-link-card",
+				name: "FileLinkCard"
+			} }
+		} }));
+		ctx.setCardInOperatorModeState(`${testRealmURL}FileLinkCard/with-file`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-file-link-attachment] [data-test-card]");
+		await click("[data-test-file-link-attachment] [data-test-card]");
+		await waitFor("[data-test-stack-card-index=\"1\"]");
+		assert.dom("[data-test-stack-card-index]").exists({ count: 2 });
+		assert.dom(`[data-test-stack-card="${linkedFileId}"]`).exists("linked file opens as a second stack card");
+		assert.strictEqual(ctx.operatorModeStateService.state?.stacks?.[0]?.[1]?.id, linkedFileId, "operator mode state targets the linked file");
+		assert.strictEqual(ctx.operatorModeStateService.state?.stacks?.[0]?.[1]?.type, "file", "stack item type is file");
+	});
+	(0, import_qunit.test)(`toggles mode switcher`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").exists();
+		assert.dom("[data-test-submode-switcher]").hasText("Interact");
+		await click("[data-test-submode-switcher-button]");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").hasText("Code");
+		assert.dom("[data-test-submode-arrow-direction=\"down\"]").exists();
+		await click("[data-test-submode-switcher-button]");
+		await click("[data-test-boxel-menu-item-text=\"Interact\"]");
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").hasText("Interact");
+		assert.dom("[data-test-submode-arrow-direction=\"down\"]").exists();
+	});
+	(0, import_qunit.test)(`hovering the card url bar realm info shows the realm URL`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-submode-switcher]");
+		await click("[data-test-submode-switcher-button]");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitFor("[data-test-card-url-bar-realm-info] [data-test-realm-url-tooltip-trigger]");
+		await triggerEvent("[data-test-card-url-bar-realm-info] [data-test-realm-url-tooltip-trigger]", "mouseenter");
+		assert.dom("[data-test-realm-url-tooltip]").hasText("test-realm/test");
+	});
+	(0, import_qunit.test)(`card url bar shows realm info of valid URL`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").exists();
+		assert.dom("[data-test-submode-switcher]").hasText("Interact");
+		await click("[data-test-submode-switcher] .submode-switcher-dropdown-trigger");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").hasText("Code");
+		await waitUntil(() => document.querySelector("[data-test-card-url-bar-realm-info]")?.textContent?.includes("Operator Mode Workspace"));
+		assert.dom("[data-test-card-url-bar]").exists();
+		assert.dom("[data-test-card-url-bar-realm-info]").hasText("in Operator Mode Workspace");
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}BlogPost/1.json`);
+		await fillIn("[data-test-card-url-bar-input]", `${testRealmURL}Pet/mango.json`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		await blur("[data-test-card-url-bar-input]");
+		assert.dom("[data-test-card-url-bar-realm-info]").hasText("in Operator Mode Workspace");
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}Pet/mango.json`);
+		assert.dom("[data-test-card-url-bar-error]").doesNotExist();
+	});
+	(0, import_qunit.test)(`card url bar shows error message when URL is invalid`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-submode-switcher]");
+		await click("[data-test-submode-switcher] .submode-switcher-dropdown-trigger");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitUntil(() => document.querySelector("[data-test-card-url-bar-realm-info]")?.textContent?.includes("Operator Mode Workspace"));
+		assert.dom("[data-test-card-url-bar]").exists();
+		assert.dom("[data-test-card-url-bar-realm-info]").hasText("in Operator Mode Workspace");
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}BlogPost/1.json`);
+		await fillIn("[data-test-card-url-bar-input]", `${testRealmURL}Pet/NotFoundCard`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		assert.dom("[data-test-card-url-bar-error]").containsText("This resource does not exist");
+		await percySnapshot(assert);
+		await fillIn("[data-test-card-url-bar-input]", `Wrong URL`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		assert.dom("[data-test-card-url-bar-error]").containsText("Not a valid URL");
+	});
+	(0, import_qunit.test)("user can dismiss url bar error message", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-submode-switcher]");
+		await click("[data-test-submode-switcher] .submode-switcher-dropdown-trigger");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").hasText("Code");
+		await waitUntil(() => document.querySelector("[data-test-card-url-bar-realm-info]")?.textContent?.includes("Operator Mode Workspace"));
+		await fillIn("[data-test-card-url-bar-input]", `${testRealmURL}Pet/NotFoundCard`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		assert.dom("[data-test-card-url-bar-error]").exists();
+		await click("[data-test-dismiss-url-error-button]");
+		assert.dom("[data-test-card-url-bar-error]").doesNotExist();
+		await fillIn("[data-test-card-url-bar-input]", `${testRealmURL}Pet/NotFoundCard_2`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		assert.dom("[data-test-card-url-bar-error]").exists();
+		await fillIn("[data-test-card-url-bar-input]", `${testRealmURL}Pet/mango.json`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		assert.dom("[data-test-card-url-bar-error]").doesNotExist();
+	});
+	(0, import_qunit.test)(`card url bar URL reacts to external changes of code path when user is not editing`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").exists();
+		assert.dom("[data-test-submode-switcher]").hasText("Interact");
+		await click("[data-test-submode-switcher] .submode-switcher-dropdown-trigger");
+		await waitFor("[data-test-boxel-menu-item-text]");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").hasText("Code");
+		await waitUntil(() => document.querySelector("[data-test-card-url-bar-realm-info]")?.textContent?.includes("Operator Mode Workspace"));
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}BlogPost/1.json`);
+		await ctx.operatorModeStateService.updateCodePath(new URL(`${testRealmURL}person.gts`));
+		await waitUntil(() => document.querySelector("[data-test-card-url-bar-realm-info]")?.textContent?.includes("Operator Mode Workspace"));
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}person.gts`);
+	});
+	(0, import_qunit.test)(`card url bar URL does not react to external changes when user is editing`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/1`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").exists();
+		assert.dom("[data-test-submode-switcher]").hasText("Interact");
+		await click("[data-test-submode-switcher] .submode-switcher-dropdown-trigger");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").hasText("Code");
+		await waitUntil(() => document.querySelector("[data-test-card-url-bar-realm-info]")?.textContent?.includes("Operator Mode Workspace"));
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}BlogPost/1.json`);
+		let someRandomText = "I am still typing a url";
+		await typeIn("[data-test-card-url-bar-input]", someRandomText);
+		await ctx.operatorModeStateService.updateCodePath(new URL(`${testRealmURL}person.gts`));
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}BlogPost/1.json${someRandomText}`);
+		blur("[data-test-card-url-bar-input]");
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}BlogPost/1.json${someRandomText}`);
+	});
+	(0, import_qunit.test)("cards-grid \"All Cards\" group stays cards-only", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-cards-grid-item="${testRealmURL}BlogPost/1"]`).exists({ count: 1 }, "a card appears once — its `.json` file row is not a second grid item");
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}blog-post"]`).doesNotExist("a module file row is not an \"All Cards\" grid item");
+	});
+	(0, import_qunit.test)(`can open and close search sheet`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		await click(`[data-test-search-sheet] .search-sheet-content`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		await typeIn(`[data-test-search-field]`, "A");
+		await waitFor("[data-test-search-sheet=\"search-results\"]", { timeout: 8e3 });
+		assert.dom(`[data-test-search-sheet="search-results"]`).exists();
+		await click(`[data-test-operator-mode-stack]`);
+		assert.dom(`[data-test-search-sheet="closed"]`).exists();
+	});
+	(0, import_qunit.test)("search sheet expands to results when realm filter is changed", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists("search sheet starts in prompt mode");
+		await click(document.querySelector("[data-test-realm-picker] .ember-power-select-trigger") ?? document.querySelector("[data-test-realm-picker]"));
+		await waitFor(".ember-power-select-option", { timeout: 3e3 });
+		const options = document.querySelectorAll(".ember-power-select-option");
+		const testRealmOption = Array.from(options).find((el) => el.textContent?.includes(ctx.realmName));
+		assert.ok(testRealmOption, `option for "${ctx.realmName}" should exist`);
+		await click(testRealmOption);
+		await waitFor("[data-test-search-sheet=\"search-results\"]", { timeout: 5e3 });
+		assert.dom(`[data-test-search-sheet="search-results"]`).exists("search sheet expands to results after realm filter change");
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").containsText("Any Type (", "type picker shows total type count");
+		const typeOptionCount = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])").length;
+		assert.ok(typeOptionCount > 2, `type picker shows more than 2 types (got ${typeOptionCount})`);
+	});
+	(0, import_qunit.test)("search sheet expands to results when type filter is changed", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists("search sheet starts in prompt mode");
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		const typeOptions = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])");
+		assert.ok(typeOptions.length > 0, "at least one type option is available");
+		let firstOptionId = typeOptions[0].getAttribute("data-test-boxel-picker-option-row");
+		assert.dom(`[data-test-boxel-picker-option-row="${firstOptionId}"] .picker-option-row__checkbox--selected`).doesNotExist("type option checkbox is unchecked before selecting");
+		await click(typeOptions[0]);
+		assert.dom(`[data-test-boxel-picker-option-row="${firstOptionId}"] .picker-option-row__checkbox--selected`).exists("type option checkbox is checked after selecting");
+		await waitFor("[data-test-search-sheet=\"search-results\"]");
+		assert.dom(`[data-test-search-sheet="search-results"]`).exists("search sheet expands to results after type filter change");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").containsText("Any Type (", "type picker shows total type count");
+		const allTypeOptions = document.querySelectorAll(".ember-power-select-options [data-test-boxel-picker-option-row]").length;
+		assert.strictEqual(allTypeOptions, 16, `type picker shows 16 types (got ${allTypeOptions})`);
+	});
+	(0, import_qunit.test)("search sheet shows realm picker when expanded and filters by selected realm", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		assert.dom("[data-test-search-sheet-search-bar]").exists();
+		assert.dom("[data-test-realm-picker]").exists();
+		assert.dom("[data-test-realm-picker] [data-test-boxel-picker-selected-item]").hasText("All", "realm picker shows shortLabel \"All\" when select-all is active");
+		await click(document.querySelector("[data-test-realm-picker] .ember-power-select-trigger") ?? document.querySelector("[data-test-realm-picker]"));
+		await waitFor(".ember-power-select-option", { timeout: 3e3 });
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").containsText("Select All (", "realm select-all shows count");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"] .picker-option-row__checkbox--selected").exists("select-all checkbox is checked by default");
+		assert.dom(`[data-test-boxel-picker-option-label="${ctx.realmName}"]`).exists(`option for "${ctx.realmName}" should exist`);
+		await click(`[data-test-boxel-picker-option-label="${ctx.realmName}"]`);
+		assert.dom(`[data-test-boxel-picker-option-label="${ctx.realmName}"] .picker-option-row__checkbox--selected`).exists("test realm checkbox is checked after clicking");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"] .picker-option-row__checkbox--selected").doesNotExist("select-all checkbox is unchecked after selecting a realm");
+	});
+	(0, import_qunit.test)("clicking outside search sheet preserves the realm filter", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		await click(document.querySelector("[data-test-realm-picker] .ember-power-select-trigger") ?? document.querySelector("[data-test-realm-picker]"));
+		await waitFor(".ember-power-select-option", { timeout: 3e3 });
+		assert.dom(`[data-test-boxel-picker-option-label="${ctx.realmName}"]`).exists(`option for "${ctx.realmName}" should exist`);
+		await click(`[data-test-boxel-picker-option-label="${ctx.realmName}"]`);
+		assert.dom(`[data-test-boxel-picker-option-label="${ctx.realmName}"] .picker-option-row__checkbox--selected`).exists("test realm checkbox is checked after clicking");
+		await click(`[data-test-operator-mode-stack]`);
+		assert.dom(`[data-test-search-sheet="closed"]`).exists();
+		await click(`[data-test-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-results"]`).exists();
+		await click(document.querySelector("[data-test-realm-picker] .ember-power-select-trigger") ?? document.querySelector("[data-test-realm-picker]"));
+		await waitFor(".ember-power-select-option", { timeout: 3e3 });
+		assert.dom(`[data-test-boxel-picker-option-label="${ctx.realmName}"] .picker-option-row__checkbox--selected`).exists("realm selection is preserved after clicking outside");
+	});
+	(0, import_qunit.test)("displays card in interact mode when clicking `Open in Interact Mode` menu in preview panel", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		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}BlogPost/1"] .field-component-card`);
+		await waitFor(`[data-test-stack-card="${testRealmURL}BlogPost/1"]`);
+		await click(`[data-test-stack-card="${testRealmURL}BlogPost/1"] [data-test-edit-button]`);
+		await click(`[data-test-links-to-editor="authorBio"] [data-test-author="Alien"]`);
+		await waitFor(`[data-test-stack-card="${testRealmURL}Author/1"]`);
+		assert.dom(`[data-test-stack-card]`).exists({ count: 3 });
+		assert.dom(`[data-test-stack-card="${testRealmURL}grid"]`).exists();
+		assert.dom(`[data-test-stack-card="${testRealmURL}BlogPost/1"]`).exists();
+		assert.dom(`[data-test-stack-card="${testRealmURL}Author/1"]`).exists();
+		await click("[data-test-submode-switcher] .submode-switcher-dropdown-trigger");
+		await click("[data-test-boxel-menu-item-text=\"Code\"]");
+		await waitFor("[data-test-submode-switcher]");
+		assert.dom("[data-test-submode-switcher]").hasText("Code");
+		await fillIn("[data-test-card-url-bar-input]", `${testRealmURL}Pet/mango.json`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		await blur("[data-test-card-url-bar-input]");
+		assert.dom("[data-test-card-url-bar-realm-info]").hasText("in Operator Mode Workspace");
+		assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}Pet/mango.json`);
+		await click(`[data-test-more-options-button]`);
+		await click(`[data-test-boxel-menu-item-text="Open in Interact Mode"]`);
+		await waitFor(`[data-test-stack-card]`);
+		assert.dom(`[data-test-stack-card]`).exists({ count: 2 });
+		assert.dom(`[data-test-stack-card="${testRealmURL}index"]`).exists();
+		assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).exists();
+	});
+	(0, import_qunit.test)("editing a card and finishing keeps the same stack card element", async function(assert) {
+		let cardSelector = `[data-test-stack-card="${testRealmURL}Person/fadhlan"]`;
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(cardSelector);
+		let cardElement = find(cardSelector);
+		await click(`${cardSelector} [data-test-edit-button]`);
+		assert.strictEqual(find(cardSelector), cardElement, "entering edit keeps the card element");
+		await click("[data-test-edit-button]");
+		await waitFor(cardSelector);
+		assert.strictEqual(find(cardSelector), cardElement, "finishing editing keeps the card element");
+	});
+	(0, import_qunit.test)("closing the top card keeps the element of the card it uncovers", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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"]`);
+		let gridElement = find(`[data-test-stack-card-index="0"]`);
+		await click(`[data-test-stack-card-index="1"] [data-test-close-button]`);
+		assert.dom(`[data-test-stack-card-index="1"]`).doesNotExist();
+		assert.strictEqual(find(`[data-test-stack-card-index="0"]`), gridElement, "the uncovered card keeps its element");
+	});
+	(0, import_qunit.test)("stack item with custom header color does not lose the color when opening other cards in the stack", async function(assert) {
+		const cardId = `${testRealmURL}PublishingPacket/story`;
+		const customStyle = {
+			backgroundColor: "rgb(102, 56, 255)",
+			color: "rgb(255, 255, 255)"
+		};
+		ctx.setCardInOperatorModeState(cardId);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		assert.dom(`[data-test-stack-card="${cardId}"]`).exists();
+		assert.dom(`[data-stack-card="${cardId}"] [data-test-card-header]`).hasStyle(customStyle);
+		await click(`[data-test-card="${testRealmURL}BlogPost/1"]`);
+		assert.dom(`[data-test-stack-card="${testRealmURL}BlogPost/1"]`).exists();
+		assert.dom(`[data-stack-card="${testRealmURL}BlogPost/1"] [data-test-card-header]`).hasStyle({
+			backgroundColor: "rgb(255, 255, 255)",
+			color: "rgb(0, 0, 0)"
+		});
+		assert.dom(`[data-stack-card="${cardId}"] [data-test-card-header]`).hasStyle(customStyle);
+		await click(`[data-stack-card="${testRealmURL}BlogPost/1"] [data-test-close-button]`);
+		await waitFor(`[data-test-stack-card="${testRealmURL}BlogPost/1"]`, { count: 0 });
+		assert.dom(`[data-stack-card="${cardId}"] [data-test-card-header]`).hasStyle(customStyle);
+	});
+	(0, import_qunit.test)("search sheet shows type picker in the search bar", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		assert.dom("[data-test-search-sheet-search-bar]").exists();
+		assert.dom("[data-test-type-picker]").exists("type picker is shown in search bar");
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-trigger-label]").hasText("Type", "type picker label is \"Type\"");
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item]").hasText("Any", "type picker shows shortLabel \"Any\" when select-all is active");
+	});
+	(0, import_qunit.test)("type picker options reflect card types in search results", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		await typeIn("[data-test-search-field]", "Mango");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").exists("\"Any\" option is present");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").containsText("Any Type (", "select-all option shows count");
+		const typeOptions = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])");
+		assert.ok(typeOptions.length > 0, "at least one card type option appears based on search results");
+	});
+	(0, import_qunit.test)("clicking outside search sheet preserves the type filter selection", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		await typeIn("[data-test-search-field]", "Mango");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		const typeOptions = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])");
+		if (typeOptions.length > 0) {
+			await click(typeOptions[0]);
+			assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item]").exists("a type is selected in the picker");
+		}
+		await click(`[data-test-operator-mode-stack]`);
+		assert.dom(`[data-test-search-sheet="closed"]`).exists();
+		await click(`[data-test-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-results"]`).exists();
+		assert.dom("[data-test-search-field]").hasValue("Mango", "the search term is preserved after clicking outside");
+		if (typeOptions.length > 0) assert.dom("[data-test-type-picker] [data-test-boxel-picker-remove-button]").exists("the type filter selection is preserved after clicking outside");
+	});
+	(0, import_qunit.test)("type options derived from realm types when no search term, sorted alphabetically", async function(assert) {
+		let recentCardsService = getService("recent-cards-service");
+		recentCardsService.add(`${testRealmURL}Pet/mango`);
+		recentCardsService.add(`${testRealmURL}Person/fadhlan`);
+		recentCardsService.add(`${testRealmURL}BlogPost/1`);
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").exists("\"Any Type\" option is present");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").containsText("Any Type (17)", "select-all shows count of all realm types");
+		assert.dom("[data-test-boxel-picker-option-label=\"Blog Post\"]").exists("Blog Post type option present from realm types");
+		assert.dom("[data-test-boxel-picker-option-label=\"Person\"]").exists("Person type option present from realm types");
+		assert.dom("[data-test-boxel-picker-option-label=\"Pet\"]").exists("Pet type option present from realm types");
+		const optionLabels = [...document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])")].map((row) => row.getAttribute("data-test-boxel-picker-option-label") ?? "");
+		const sorted = [...optionLabels].sort((a, b) => a.localeCompare(b));
+		assert.deepEqual(optionLabels, sorted, "type options are sorted alphabetically");
+	});
+	(0, import_qunit.test)("type options show all realm types even without recent cards", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").exists("\"Any Type\" option is present");
+		assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").containsText("Any Type (17)", "select-all shows count of all realm types");
+		const nonSelectAllOptions = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])");
+		assert.strictEqual(nonSelectAllOptions.length, 16, "all realm types are shown even without recent cards");
+	});
+	(0, import_qunit.test)("selecting a specific type filters search results and recent cards", async function(assert) {
+		let recentCardsService = getService("recent-cards-service");
+		recentCardsService.add(`${testRealmURL}Pet/mango`);
+		recentCardsService.add(`${testRealmURL}Person/fadhlan`);
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		await typeIn("[data-test-search-field]", "Mango");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+		await click("[data-test-boxel-picker-option-label=\"Pet\"]");
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item]").exists("Pet type is selected");
+		assert.dom(`[data-test-search-result="${testRealmURL}Pet/mango"]`).exists("Pet/mango is visible in search results");
+		assert.dom(`[data-test-recent-card-result="${testRealmURL}Person/fadhlan"]`).doesNotExist("Person/fadhlan is hidden from recent cards when Pet type is selected");
+	});
+	(0, import_qunit.test)("multi-type selection shows cards of all selected types, deselect-all reverts", async function(assert) {
+		let recentCardsService = getService("recent-cards-service");
+		recentCardsService.add(`${testRealmURL}Pet/mango`);
+		recentCardsService.add(`${testRealmURL}Person/fadhlan`);
+		recentCardsService.add(`${testRealmURL}BlogPost/1`);
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		await typeIn("[data-test-search-field]", "a");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+		await click("[data-test-boxel-picker-option-label=\"Pet\"]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		await click("[data-test-boxel-picker-option-label=\"Person\"]");
+		assert.dom(`[data-test-recent-card-result="${testRealmURL}Pet/mango"]`).exists("Pet/mango is visible with multi-type selection");
+		assert.dom(`[data-test-recent-card-result="${testRealmURL}Person/fadhlan"]`).exists("Person/fadhlan is visible with multi-type selection");
+		assert.dom(`[data-test-recent-card-result="${testRealmURL}BlogPost/1"]`).doesNotExist("BlogPost/1 is hidden when only Pet and Person types selected");
+		while (document.querySelector("[data-test-type-picker] [data-test-boxel-picker-remove-button]")) await click("[data-test-type-picker] [data-test-boxel-picker-remove-button]");
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-remove-button]").doesNotExist("no specific type selections remain after deselecting all");
+		assert.dom(`[data-test-recent-card-result="${testRealmURL}BlogPost/1"]`).exists("BlogPost/1 is visible again after reverting to Any Type");
+	});
+	(0, import_qunit.test)("type selection persists when search term changes if type still available", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		await typeIn("[data-test-search-field]", "Mango");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+		await click("[data-test-boxel-picker-option-label=\"Pet\"]");
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item]").exists("Pet type is selected");
+		await fillIn("[data-test-search-field]", "");
+		await typeIn("[data-test-search-field]", "Ma");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item]").exists("Pet type selection persists after search change");
+		await fillIn("[data-test-search-field]", "");
+		await typeIn("[data-test-search-field]", "Fadhlan");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item]").exists("type selection persists since type options are realm-level, not search-dependent");
+	});
+	(0, import_qunit.test)("type filter works with search term together", async function(assert) {
+		let recentCardsService = getService("recent-cards-service");
+		recentCardsService.add(`${testRealmURL}Pet/mango`);
+		recentCardsService.add(`${testRealmURL}Person/fadhlan`);
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		await typeIn("[data-test-search-field]", "a");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		assert.dom("[data-test-realm-picker]").exists("realm picker is accessible");
+		assert.dom("[data-test-type-picker]").exists("type picker is accessible");
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+		await click("[data-test-boxel-picker-option-label=\"Pet\"]");
+		assert.dom(`[data-test-search-result="${testRealmURL}Pet/mango"]`).exists("Pet/mango visible when Pet type selected with search term");
+		assert.dom(`[data-test-search-result="${testRealmURL}Person/fadhlan"]`).doesNotExist("Person/fadhlan hidden in search results when Pet type selected");
+	});
+	(0, import_qunit.test)("type options show icons in the picker", async function(assert) {
+		getService("recent-cards-service").add(`${testRealmURL}Person/fadhlan`);
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		await typeIn("[data-test-search-field]", "Mango");
+		await click("[data-test-search-sheet] .search-sheet-content");
+		await waitFor("[data-test-search-label]", { timeout: 8e3 });
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		const iconElements = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"]) .picker-option-row__icon");
+		assert.ok(iconElements.length > 0, "at least one type option shows an icon");
+	});
+	(0, import_qunit.test)("clearing type picker search restores all types and preserves selection", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "njjTxjdL",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		await settled();
+		await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+		await waitFor("[data-test-boxel-picker-option-row]");
+		await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+		let initialOptionCount = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])").length;
+		assert.ok(initialOptionCount > 1, "multiple type options are shown initially");
+		await fillIn("[data-test-boxel-picker-search] input", "Pet");
+		let filteredOptionCount = document.querySelectorAll("[data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])").length;
+		assert.ok(filteredOptionCount <= initialOptionCount, "search filters the type options");
+		await click("[data-test-boxel-picker-option-label=\"Pet\"]");
+		assert.dom("[data-test-boxel-picker-option-label=\"Pet\"] .picker-option-row__checkbox--selected").exists("Pet checkbox is checked after selecting");
+		await fillIn("[data-test-boxel-picker-search] input", "");
+		await waitFor("[data-test-boxel-picker-option-label=\"Person\"]");
+		let restoredOptionCount = document.querySelectorAll(".ember-power-select-options [data-test-boxel-picker-option-row]:not([data-test-boxel-picker-option-row=\"select-all\"])").length;
+		assert.strictEqual(restoredOptionCount, initialOptionCount, "all type options are restored after clearing search");
+		assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item=\"Pet\"]").exists("Pet selection is preserved after clearing search");
+		assert.dom("[data-test-boxel-picker-option-label=\"Pet\"] .picker-option-row__checkbox--selected").exists("Pet checkbox is still checked after clearing search");
+	});
+	(0, import_qunit.test)("selected types are preserved after clearing type search when selection is beyond first page", async function(assert) {
+		let originalPageSize = TypeSummariesResource.PAGE_SIZE;
+		TypeSummariesResource.PAGE_SIZE = 3;
+		try {
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "njjTxjdL",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+			assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+			await settled();
+			await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+			await waitFor("[data-test-boxel-picker-option-row]");
+			await fillIn("[data-test-boxel-picker-search] input", "Pet");
+			await waitFor("[data-test-boxel-picker-option-label=\"Pet\"]");
+			await click("[data-test-boxel-picker-option-label=\"Pet\"]");
+			assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item=\"Pet\"]").exists("Pet is selected");
+			assert.dom("[data-test-boxel-picker-option-label=\"Pet\"] .picker-option-row__checkbox--selected").exists("Pet checkbox is checked after selecting");
+			await fillIn("[data-test-boxel-picker-search] input", "");
+			assert.dom("[data-test-type-picker] [data-test-boxel-picker-selected-item=\"Pet\"]").exists("Pet selection is preserved even when it is beyond the first page of results");
+			assert.dom("[data-test-boxel-picker-option-label=\"Pet\"] .picker-option-row__checkbox--selected").exists("Pet checkbox is still checked after clearing search beyond first page");
+		} finally {
+			TypeSummariesResource.PAGE_SIZE = originalPageSize;
+		}
+	});
+	(0, import_qunit.test)("type picker total count reflects API total, not loaded options count", async function(assert) {
+		let originalPageSize = TypeSummariesResource.PAGE_SIZE;
+		TypeSummariesResource.PAGE_SIZE = 3;
+		try {
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "njjTxjdL",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-ui-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-open-search-field]`);
+			assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+			await settled();
+			await click("[data-test-type-picker] [data-test-boxel-picker-trigger]");
+			await waitFor("[data-test-boxel-picker-option-row]");
+			assert.dom("[data-test-boxel-picker-option-row=\"select-all\"]").containsText("Any Type (17)", "select-all shows total count from API, not loaded options count");
+		} finally {
+			TypeSummariesResource.PAGE_SIZE = originalPageSize;
+		}
+	});
+});
+//#endregion