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

package/bundled-test-harness/assets/file-tree-test--0ZCPRe9.js

@@ -0,0 +1,851 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { O as baseRealm, it as baseRealmRRI } from "./constants-Icc0nFW-.js";
+import { n as registerDestructor } from "./destroyable-mdLYRn_o.js";
+import { n as src_default } from "./src-DPaAwa4H.js";
+import { m as ScrollPositions } from "./local-storage-keys-CS7XLz7J.js";
+import { M as waitUntil, T as settled, a as find, c as triggerKeyEvent, d as click, l as triggerEvent, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
+import { t as WriteTextFileTool } from "./write-text-file-Cd_BozS6.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { D as realmConfigCardJSON, F as setupLocalIndexing, H as testModuleRealm, L as setupRealmCacheTeardown, Z as withCachedRealmSetup, a as SYSTEM_CARD_FIXTURE_CONTENTS, ct as setupApplicationTest, j as setupAcceptanceTestRealm, mt as setupAuthEndpoints, st as visitOperatorMode, t as setupMockMatrix, v as elementIsVisible, z as setupUserSubscription } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+//#region tests/acceptance/code-submode/file-tree-test.ts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var indexCardSource = `
+  import { CardDef, Component } from "@cardstack/base/card-api";
+
+  export class Index extends CardDef {
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-index-card>
+          Hello, world!
+        </div>
+      </template>
+    };
+  }
+`;
+var personCardSource = `
+  import { contains, containsMany, field, linksToMany, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+import WriteTextFileTool from '../../../app/tools/write-text-file';
+  import { Friend } from './friend';
+
+  export class Person extends CardDef {
+    static displayName = 'Person';
+    @field firstName = contains(StringField);
+    @field lastName = contains(StringField);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Person) {
+        return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      },
+    });
+    @field friends = linksToMany(Friend);
+    @field address = containsMany(StringField);
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-person>
+          <p>First name: <@fields.firstName /></p>
+          <p>Last name: <@fields.lastName /></p>
+          <p>Title: <@fields.cardTitle /></p>
+          <p>Address List: <@fields.address /></p>
+          <p>Friends: <@fields.friends /></p>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }
+`;
+var employeeCardSource = `
+  import {
+    contains,
+    field,
+    Component,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+  import { Person } from './person';
+
+  export class Employee extends Person {
+    static displayName = 'Employee';
+    @field department = contains(StringField);
+
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <@fields.firstName /> <@fields.lastName />
+
+        Department: <@fields.department />
+      </template>
+    };
+  }
+`;
+var inThisFileSource = `
+  import {
+    contains,
+    field,
+    CardDef,
+    FieldDef,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+
+  export const exportedVar = 'exported var';
+
+  const localVar = 'local var';
+
+  class LocalClass {}
+  export class ExportedClass {}
+
+  export class ExportedClassInheritLocalClass extends LocalClass {}
+
+  function localFunction() {}
+  export function exportedFunction() {}
+
+  export { LocalClass as AClassWithExportName };
+
+  class LocalCard extends CardDef {
+    static displayName = 'local card';
+  }
+
+  export class ExportedCard extends CardDef {
+    static displayName = 'exported card';
+    @field someString = contains(StringField);
+  }
+
+  export class ExportedCardInheritLocalCard extends LocalCard {
+    static displayName = 'exported card extends local card';
+  }
+
+  class LocalField extends FieldDef {
+    static displayName = 'local field';
+  }
+  export class ExportedField extends FieldDef {
+    static displayName = 'exported field';
+    @field someString = contains(StringField);
+  }
+
+  export class ExportedFieldInheritLocalField extends LocalField {
+    static displayName = 'exported field extends local field';
+  }
+
+  export default class DefaultClass {}
+`;
+var friendCardSource = `
+  import { contains, linksTo, field, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+
+  export class Friend extends CardDef {
+    static displayName = 'Friend';
+    @field name = contains(StringField);
+    @field friend = linksTo(() => Friend);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Person) {
+        return name;
+      },
+    });
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-person>
+          <p>First name: <@fields.firstName /></p>
+          <p>Last name: <@fields.lastName /></p>
+          <p>Title: <@fields.cardTitle /></p>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }
+`;
+function traceFileTreeScrolling(owner) {
+	let trace = [];
+	let shorten = (key) => key.replace(testRealmURL, "");
+	let scrollPositionService = owner.lookup("service:scroll-position-service");
+	let setScrollPosition = scrollPositionService.setScrollPosition;
+	scrollPositionService.setScrollPosition = function(container, key, position) {
+		trace.push(`set ${container} ${shorten(key)} ${position}`);
+		return setScrollPosition.call(this, container, key, position);
+	};
+	let onScroll = (event) => {
+		let target = event.target;
+		if (target instanceof HTMLElement && target.matches("[data-test-togglable-left-panel]")) {
+			let entry = `${event.type} ${target.scrollTop}`;
+			if (trace[trace.length - 1] !== entry) trace.push(entry);
+		}
+	};
+	document.addEventListener("scroll", onScroll, true);
+	document.addEventListener("scrollend", onScroll, true);
+	registerDestructor(owner, () => {
+		document.removeEventListener("scroll", onScroll, true);
+		document.removeEventListener("scrollend", onScroll, true);
+	});
+	return trace;
+}
+function fileTreeScrollDiagnostics(trace) {
+	let panel = document.querySelector("[data-test-togglable-left-panel]");
+	let selected = document.querySelector("[data-test-file-selected]");
+	return JSON.stringify({
+		storedScrollPositions: src_default.localStorage.getItem(ScrollPositions),
+		panelScrollTop: panel?.scrollTop,
+		panelScrollHeight: panel?.scrollHeight,
+		panelClientHeight: panel?.clientHeight,
+		selectedFile: selected?.getAttribute("data-test-file"),
+		selectedFileOffsetTop: selected?.offsetTop,
+		testingContainerScrollTop: document.getElementById("ember-testing-container")?.scrollTop,
+		trace: trace?.join(" | ")
+	});
+}
+var realmInfo = {
+	name: "Test Workspace B",
+	backgroundURL: "/test-fixtures/realm-images/pawel-czerwinski-Ly-ZLa-A5jti-Y-unsplash.jpg",
+	iconURL: "/test-fixtures/realm-images/boxel-logo.png",
+	showAsCatalog: null,
+	visibility: "public",
+	publishable: null
+};
+(0, import_qunit.module)("Acceptance | code submode | file-tree tests", function(hooks) {
+	let adapter;
+	setupApplicationTest(hooks);
+	setupLocalIndexing(hooks);
+	setupRealmCacheTeardown(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [testRealmURL]
+	});
+	let { setRealmPermissions, createAndJoinRoom } = mockMatrixUtils;
+	hooks.beforeEach(async function() {
+		setRealmPermissions({ [testRealmURL]: ["read", "write"] });
+		createAndJoinRoom({
+			sender: "@testuser:localhost",
+			name: "room-test"
+		});
+		setupUserSubscription();
+		setupAuthEndpoints();
+		const numStubFiles = 100;
+		let stubFiles = {};
+		for (let i = 0; i < numStubFiles; i++) stubFiles[`z${String(i).padStart(2, "0")}.json`] = "{}";
+		({adapter} = await withCachedRealmSetup(async () => {
+			return setupAcceptanceTestRealm({
+				mockMatrixUtils,
+				contents: {
+					...SYSTEM_CARD_FIXTURE_CONTENTS,
+					"index.gts": indexCardSource,
+					"pet-person.gts": personCardSource,
+					"person.gts": personCardSource,
+					"friend.gts": friendCardSource,
+					"employee.gts": employeeCardSource,
+					"in-this-file.gts": inThisFileSource,
+					"person-entry.json": { data: {
+						type: "card",
+						attributes: {
+							cardTitle: "Person",
+							cardDescription: "Spec",
+							specType: "card",
+							ref: {
+								module: `./person`,
+								name: "Person"
+							}
+						},
+						meta: { adoptsFrom: {
+							module: `${baseRealmRRI}spec`,
+							name: "Spec"
+						} }
+					} },
+					"index.json": { data: {
+						type: "card",
+						attributes: {},
+						meta: { adoptsFrom: {
+							module: "./index",
+							name: "Index"
+						} }
+					} },
+					"not-json.json": "I am not JSON.",
+					"Person/1.json": { data: {
+						type: "card",
+						attributes: {
+							firstName: "Hassan",
+							lastName: "Abdel-Rahman"
+						},
+						meta: { adoptsFrom: {
+							module: "../person",
+							name: "Person"
+						} }
+					} },
+					...stubFiles,
+					"zzz/zzz/file.json": "{}",
+					"realm.json": realmConfigCardJSON(realmInfo)
+				}
+			});
+		}));
+	});
+	(0, import_qunit.test)("can navigate file tree, file view mode is persisted in query parameter", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-realm-name]");
+		assert.dom(`[data-test-realm-icon-url="${realmInfo.iconURL}"]`).exists();
+		assert.dom("[data-test-realm-name]").hasText(`In ${realmInfo.name}`);
+		await waitFor("[data-test-file]");
+		assert.dom("[data-test-directory=\"Person/\"]").exists("Person/ directory entry is rendered").hasAttribute("title", "Person/");
+		assert.dom("[data-test-directory=\"Person/\"] .icon").hasClass("closed");
+		assert.dom("[data-test-file=\"person.gts\"]").exists("person.gts file entry is rendered").hasAttribute("title", "person.gts");
+		await click("[data-test-directory=\"Person/\"]");
+		assert.dom("[data-test-directory=\"Person/\"] .icon").hasClass("open");
+		await waitFor("[data-test-file=\"Person/1.json\"]");
+		assert.dom("[data-test-file=\"Person/1.json\"]").exists("Person/1.json file entry is rendered");
+		await click("[data-test-directory=\"Person/\"]");
+		assert.dom("[data-test-file=\"Person/1.json\"]").doesNotExist("Person/1.json file entry is not rendered");
+	});
+	(0, import_qunit.test)("can open files", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-realm-name]");
+		assert.dom(`[data-test-realm-icon-url="${realmInfo.iconURL}"]`).exists();
+		assert.dom("[data-test-realm-name]").hasText(`In ${realmInfo.name}`);
+		assert.dom("[data-test-realm-read-only]").doesNotExist();
+		await waitFor("[data-test-file=\"pet-person.gts\"]");
+		await click("[data-test-file=\"pet-person.gts\"]");
+		await waitFor("[data-test-file=\"pet-person.gts\"]");
+		assert.dom("[data-test-file=\"pet-person.gts\"]").hasClass("selected");
+		assert.dom("[data-test-file=\"person.gts\"]").doesNotHaveClass("selected");
+		await click("[data-test-file=\"Person/1.json\"]");
+		assert.dom("[data-test-person]").exists();
+	});
+	(0, import_qunit.module)("when the user lacks write permissions", function(hooks) {
+		hooks.beforeEach(function() {
+			setRealmPermissions({ [testRealmURL]: ["read"] });
+		});
+		(0, import_qunit.test)("it is reflected in the realm header", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				fileView: "browser",
+				codePath: `${testRealmURL}Person/1.json`
+			});
+			await waitFor("[data-test-realm-name]");
+			assert.dom("[data-test-realm-read-only]").exists();
+		});
+		(0, import_qunit.test)("file tree does not show context menu in read-only realm", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				fileView: "browser",
+				codePath: `${testRealmURL}friend.gts`
+			});
+			await waitFor("[data-test-file=\"friend.gts\"]");
+			assert.dom("[data-test-file-row=\"friend.gts\"] .file-menu-trigger").doesNotExist("no context menu trigger shown in read-only realm");
+		});
+	});
+	(0, import_qunit.test)("can switch realms", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-realm-name=\"Test Workspace B\"]");
+		assert.dom("[data-test-realm-name]").hasText("In Test Workspace B");
+		await waitFor("[data-test-realm-dropdown-trigger]");
+		await click("[data-test-realm-dropdown-trigger]");
+		assert.dom("[data-test-boxel-menu-item-text=\"Base Workspace\"]").exists();
+		await click("[data-test-boxel-menu-item-text=\"Base Workspace\"]");
+		await waitFor("[data-test-realm-name=\"Base Workspace\"]");
+		assert.dom("[data-test-realm-name]").hasText("In Base Workspace READ ONLY");
+		assert.dom("[data-test-realm-read-only]").exists();
+	});
+	(0, import_qunit.test)("can filter the realm dropdown by name", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-realm-name=\"Test Workspace B\"]");
+		await click("[data-test-realm-dropdown-trigger]");
+		assert.dom("[data-test-realm-dropdown-search]").isFocused();
+		assert.dom("[data-test-boxel-menu-item-text=\"Base Workspace\"]").exists();
+		assert.dom("[data-test-boxel-menu-item-text=\"Test Workspace B\"]").exists();
+		await fillIn("[data-test-realm-dropdown-search]", "base");
+		assert.dom("[data-test-boxel-menu-item-text=\"Base Workspace\"]").exists();
+		assert.dom("[data-test-boxel-menu-item-text=\"Test Workspace B\"]").doesNotExist();
+		await fillIn("[data-test-realm-dropdown-search]", "no such workspace");
+		assert.dom("[data-test-boxel-menu-item]").doesNotExist();
+		assert.dom("[data-test-realm-dropdown-no-results]").exists();
+		await fillIn("[data-test-realm-dropdown-search]", "BASE");
+		await triggerKeyEvent("[data-test-realm-dropdown-search]", "keydown", "Enter");
+		await waitFor("[data-test-realm-name=\"Base Workspace\"]");
+		assert.dom("[data-test-realm-dropdown-menu]").doesNotExist();
+		await click("[data-test-realm-dropdown-trigger]");
+		assert.dom("[data-test-realm-dropdown-search]").hasValue("", "the search is cleared when the dropdown reopens");
+		assert.dom("[data-test-boxel-menu-item-text=\"Test Workspace B\"]").exists();
+	});
+	(0, import_qunit.test)("switch realm with recent file exists should open the recent file", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-realm-name]");
+		assert.dom("[data-test-realm-name]").hasText("In Test Workspace B");
+		await fillIn("[data-test-card-url-bar-input]", `${testModuleRealm}mango.png`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		await waitFor("[data-test-realm-dropdown-trigger]");
+		await click("[data-test-realm-dropdown-trigger]");
+		assert.dom("[data-test-boxel-menu-item-text=\"Test Workspace B\"]").exists();
+		await click("[data-test-boxel-menu-item-text=\"Test Workspace B\"]");
+		await waitFor("[data-test-realm-name=\"Test Workspace B\"]");
+		assert.dom("[data-test-realm-name]").hasText("In Test Workspace B");
+		assert.dom("[data-test-realm-read-only]").doesNotExist();
+		await waitFor("[data-test-file=\"Person/1.json\"]");
+		assert.dom("[data-test-file=\"Person/1.json\"]").hasClass("selected");
+	});
+	(0, import_qunit.test)("navigating to a file in a different realm causes it to become active in the file tree", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`,
+			openDirs: { [testRealmURL]: ["Person/"] }
+		});
+		await waitFor("[data-test-realm-name]");
+		assert.dom(`[data-test-realm-icon-url="${realmInfo.iconURL}"]`).exists();
+		assert.dom("[data-test-realm-name]").hasText(`In ${realmInfo.name}`);
+		await fillIn("[data-test-card-url-bar-input]", `${testModuleRealm}mango.png`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		await waitFor("[data-test-realm-name=\"Test Workspace A\"]");
+		assert.dom("[data-test-realm-icon-url=\"https://boxel-images.boxel.ai/icons/cardstack.png\"]").exists();
+		assert.dom("[data-test-realm-name]").hasText("In Test Workspace A READ ONLY");
+		await waitFor("[data-test-file=\"mango.png\"]");
+		assert.dom("[data-test-file=\"mango.png\"]").hasClass("selected");
+	});
+	(0, import_qunit.test)("open directories are persisted", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`,
+			openDirs: { [testRealmURL]: ["Person/"] }
+		});
+		await waitFor("[data-test-realm-name]");
+		assert.dom(`[data-test-realm-icon-url="${realmInfo.iconURL}"]`).exists();
+		assert.dom("[data-test-realm-name]").hasText(`In ${realmInfo.name}`);
+		await waitFor("[data-test-file]");
+		assert.dom("[data-test-directory=\"Person/\"] .icon").hasClass("open");
+	});
+	(0, import_qunit.test)("open file is within view when the file browser renders", async function(assert) {
+		let openFilename = "z19.json";
+		await visitOperatorMode({
+			stacks: [[{
+				id: "http://test-realm/test/index",
+				format: "isolated"
+			}]],
+			submode: "code",
+			codePath: `http://test-realm/test/${openFilename}`,
+			fileView: "browser",
+			openDirs: { [testRealmURL]: ["Person/"] }
+		});
+		await waitFor("[data-test-realm-name]");
+		assert.dom(`[data-test-realm-icon-url="${realmInfo.iconURL}"]`).exists();
+		assert.dom("[data-test-realm-name]").hasText(`In ${realmInfo.name}`);
+		await waitFor("[data-test-file]");
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		let fileElement = find(`[data-test-file="${openFilename}"]`);
+		assert.ok(await elementIsVisible(fileElement), "expected open file to be scrolled into view");
+	});
+	(0, import_qunit.test)("open file is within view even when its parent directory is not stored as open", async function(assert) {
+		let openFilename = "zzz/zzz/file.json";
+		await visitOperatorMode({
+			stacks: [[{
+				id: "http://test-realm/test/index",
+				format: "isolated"
+			}]],
+			submode: "code",
+			codePath: `http://test-realm/test/index`,
+			openDirs: { [testRealmURL]: ["Person/"] }
+		});
+		await fillIn("[data-test-card-url-bar-input]", `${testRealmURL}${openFilename}`);
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		await click("[data-test-file-browser-toggle]");
+		await waitFor("[data-test-realm-name]");
+		assert.dom(`[data-test-realm-icon-url="${realmInfo.iconURL}"]`).exists();
+		assert.dom("[data-test-realm-name]").hasText(`In ${realmInfo.name}`);
+		await waitFor(`[data-test-file="${openFilename}"]`);
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		let fileElement = find(`[data-test-file="${openFilename}"]`);
+		if (!fileElement) assert.ok(fileElement, "file element should exist");
+		else {
+			let isVisible = false;
+			for (let i = 0; i < 20 && !isVisible; i++) {
+				isVisible = await elementIsVisible(fileElement);
+				if (!isVisible) await new Promise((r) => setTimeout(r, 100));
+			}
+			assert.ok(isVisible, "expected open file to be scrolled into view");
+		}
+		await click("[data-test-directory=\"zzz/\"]");
+		assert.dom(`[data-test-file="${openFilename}"]`).doesNotExist();
+	});
+	(0, import_qunit.test)("opening another file preserves the scroll position", async function(assert) {
+		let openFilename = "person.gts";
+		let filenameToOpen = "z19.json";
+		await visitOperatorMode({
+			stacks: [[{
+				id: "http://test-realm/test/index",
+				format: "isolated"
+			}]],
+			submode: "code",
+			codePath: `http://test-realm/test/${openFilename}`,
+			fileView: "browser",
+			openDirs: { [testRealmURL]: ["Person/"] }
+		});
+		await waitFor("[data-test-realm-name]");
+		assert.dom(`[data-test-realm-icon-url="${realmInfo.iconURL}"]`).exists();
+		assert.dom("[data-test-realm-name]").hasText(`In ${realmInfo.name}`);
+		await waitFor("[data-test-file]");
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		let openFileSelector = `[data-test-file="${openFilename}"]`;
+		let openFileElement = find(openFileSelector);
+		assert.ok(await elementIsVisible(openFileElement), "expected near-top file to be visible");
+		let fileToOpenSelector = `[data-test-file="${filenameToOpen}"]`;
+		let fileToOpenElement = find(fileToOpenSelector);
+		assert.notOk(await elementIsVisible(fileToOpenElement), "expected near-bottom file to not be visible");
+		fileToOpenElement.scrollIntoView({ block: "center" });
+		assert.notOk(await elementIsVisible(openFileElement), "expected near-top file to not be visible after scrolling to near bottom");
+		assert.ok(await elementIsVisible(fileToOpenElement), "expected near-bottom file to be visible after scrolling to near bottom");
+		await click(fileToOpenElement);
+		await waitFor(openFileSelector);
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		openFileElement = find(openFileSelector);
+		fileToOpenElement = find(fileToOpenSelector);
+		assert.notOk(await elementIsVisible(openFileElement), "expected near-top file to not be visible after opening near-bottom file");
+		assert.ok(await elementIsVisible(fileToOpenElement), "expected near-bottom file to be visible after opening it");
+	});
+	(0, import_qunit.test)("scroll position is restored when returning to file view but only for one file per realm", async function(assert) {
+		let scrollTrace = traceFileTreeScrolling(this.owner);
+		src_default.localStorage.setItem("code-mode-panel-widths", JSON.stringify({ leftPanel: 200 }));
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`,
+			openDirs: { [testRealmURL]: ["Person/"] }
+		});
+		let endDirectorySelector = `[data-test-directory="zzz/"]`;
+		await waitFor(endDirectorySelector);
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		let endDirectoryElement = find(endDirectorySelector);
+		if (!endDirectoryElement) assert.ok(endDirectoryElement, "end directory should exist");
+		else {
+			assert.notOk(await elementIsVisible(endDirectoryElement), "expected end directory not to be within view");
+			endDirectoryElement.scrollIntoView({ block: "center" });
+			assert.ok(await elementIsVisible(endDirectoryElement), "expected end directory to now be within view");
+		}
+		await click("[data-test-inspector-toggle]");
+		assert.dom(endDirectorySelector).doesNotExist();
+		await click("[data-test-file-browser-toggle]");
+		await waitFor(endDirectorySelector);
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		endDirectoryElement = find(endDirectorySelector);
+		let testingContainer = document.getElementById("ember-testing-container");
+		let fileTreeHeight = document.querySelector(".inner-container.file-browser").getBoundingClientRect().height;
+		try {
+			testingContainer.scrollTop = fileTreeHeight;
+			if (!endDirectoryElement) assert.ok(endDirectoryElement, "end directory should exist");
+			else assert.ok(await elementIsVisible(endDirectoryElement), "expected end directory to be within view after returning to the file tree");
+		} finally {
+			testingContainer.scrollTop = 0;
+		}
+		await click("[data-test-file=\"pet-person.gts\"]");
+		await click("[data-test-file=\"Person/1.json\"]");
+		await click("[data-test-inspector-toggle]");
+		assert.dom(endDirectorySelector).doesNotExist();
+		await click("[data-test-file-browser-toggle]");
+		await waitFor(endDirectorySelector);
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		await settled();
+		endDirectoryElement = find(endDirectorySelector);
+		if (!endDirectoryElement) assert.ok(endDirectoryElement, "end directory should exist");
+		else {
+			let diagnostics = fileTreeScrollDiagnostics(scrollTrace);
+			assert.notOk(await elementIsVisible(endDirectoryElement), `expected previously-stored scroll position to have been forgotten after choosing another file; ${diagnostics}`);
+			endDirectoryElement.scrollIntoView({ block: "center" });
+			assert.ok(await elementIsVisible(endDirectoryElement), "expected end directory to again be within view");
+		}
+		await fillIn("[data-test-card-url-bar-input]", `${testModuleRealm}mango.png`);
+		scrollTrace.push("mark visit other realm");
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		await waitFor("[data-test-realm-name=\"Test Workspace A\"]", { timeout: 2e3 });
+		await waitFor("[data-test-file=\"mango.png\"]");
+		scrollTrace.push("mark other realm rendered");
+		await fillIn("[data-test-card-url-bar-input]", `http://test-realm/test/Person/1.json`);
+		scrollTrace.push("mark return to Person/1.json");
+		await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+		await waitFor("[data-test-realm-name=\"Test Workspace B\"]");
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		await waitFor("[data-test-file=\"Person/1.json\"]");
+		await settled();
+		endDirectoryElement = find(endDirectorySelector);
+		if (!endDirectoryElement) assert.ok(endDirectoryElement, "end directory should exist");
+		else {
+			let diagnostics = fileTreeScrollDiagnostics(scrollTrace);
+			assert.notOk(await elementIsVisible(endDirectoryElement), `expected previously-stored scroll position to have been forgotten after visiting another realm; ${diagnostics}`);
+		}
+	});
+	(0, import_qunit.test)("collapsing and reopening a directory restores nested open directories", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		let rootDirectorySelector = "[data-test-directory=\"zzz/\"]";
+		let nestedDirectorySelector = "[data-test-directory=\"zzz/zzz/\"]";
+		let nestedFileSelector = "[data-test-file=\"zzz/zzz/file.json\"]";
+		await waitFor(rootDirectorySelector);
+		await click(rootDirectorySelector);
+		assert.dom(`${rootDirectorySelector} .icon`).hasClass("open");
+		await waitFor(nestedDirectorySelector);
+		await click(nestedDirectorySelector);
+		assert.dom(`${nestedDirectorySelector} .icon`).hasClass("open");
+		await waitFor(nestedFileSelector);
+		await click(rootDirectorySelector);
+		assert.dom(`${rootDirectorySelector} .icon`).hasClass("closed");
+		await waitUntil(() => !document.querySelector(nestedFileSelector));
+		assert.dom(nestedFileSelector).doesNotExist("nested file disappears when root directory collapses");
+		await click(rootDirectorySelector);
+		assert.dom(`${rootDirectorySelector} .icon`).hasClass("open");
+		await waitFor(nestedDirectorySelector);
+		assert.dom(`${nestedDirectorySelector} .icon`).hasClass("open", "nested directory stays open after reopening root");
+		await waitFor(nestedFileSelector);
+		assert.dom(nestedFileSelector).exists("nested file is visible again without toggling nested directory");
+	});
+	(0, import_qunit.test)("scroll position does not change when switching to another file within view", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}z79.json`
+		});
+		await waitFor("[data-test-file=\"z80.json\"]");
+		let scrollablePanel = find("[data-test-togglable-left-panel]");
+		let currentScrollTop = scrollablePanel?.scrollTop;
+		await click("[data-test-file=\"z80.json\"]");
+		let newScrollTop = scrollablePanel?.scrollTop;
+		assert.strictEqual(currentScrollTop, newScrollTop, "expected scroll position not to have changed when choosing a neighbouring file");
+	});
+	(0, import_qunit.test)("persisted scroll position is restored on refresh", async function(assert) {
+		src_default.localStorage.setItem(ScrollPositions, JSON.stringify({ "file-tree": ["http://test-realm/test/Person/1.json", 300] }));
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`,
+			openDirs: { [testRealmURL]: ["Person/"] }
+		});
+		await waitFor("[data-test-togglable-left-panel]");
+		await settled();
+		let scrollablePanel = find("[data-test-togglable-left-panel]");
+		assert.strictEqual(scrollablePanel?.scrollTop, 300);
+	});
+	(0, import_qunit.test)("can open files in base realm", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${baseRealm.url}cards-grid.gts`
+		});
+		await waitFor("[data-test-file=\"cards-grid.gts\"]");
+		await click("[data-test-file=\"cards-grid.gts\"]");
+		await waitFor("[data-test-file=\"cards-grid.gts\"].selected");
+		assert.dom("[data-test-file=\"cards-grid.gts\"]").hasClass("selected");
+	});
+	(0, import_qunit.test)("can scroll to bottom of the file tree", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${baseRealm.url}cards-grid.gts`
+		});
+		await waitFor("[data-test-togglable-left-panel]");
+		await settled();
+		let scrollablePanel = find("[data-test-togglable-left-panel]");
+		let expectedScrollTop;
+		if (scrollablePanel) {
+			scrollablePanel.scrollTop = scrollablePanel.scrollHeight;
+			expectedScrollTop = scrollablePanel.scrollTop;
+			await triggerEvent("[data-test-togglable-left-panel]", "scrollend");
+		}
+		assert.strictEqual(scrollablePanel?.scrollTop, expectedScrollTop);
+	});
+	(0, import_qunit.test)("new directory appears in the file tree when a new file is created within it via dialog", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		let newDirName = "new-dir";
+		let newFileName = "new-file";
+		await click("[data-test-new-file-button]");
+		await click("[data-test-boxel-menu-item-text=\"Card Definition\"]");
+		await fillIn("[data-test-display-name-field]", "New File");
+		await fillIn("[data-test-file-name-field]", `${newDirName}/${newFileName}`);
+		await click("[data-test-create-definition]");
+		assert.dom(`[data-test-directory="${newDirName}/"]`).exists();
+		assert.dom(`[data-test-directory="${newDirName}/"] .icon`).hasClass("open");
+		assert.dom(`[data-test-file="${newDirName}/${newFileName}.gts"]`).exists();
+	});
+	(0, import_qunit.test)("new directory appears in the file tree when a new file is created within it via command", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-file-tree-mask]", { count: 0 });
+		let newDirName = "new-dir";
+		let newFileName = "new-file.gts";
+		await new WriteTextFileTool(getService("tool-service").toolContext).execute({
+			path: `${newDirName}/${newFileName}`,
+			content: "import { CardDef, Component } from \"@cardstack/base/card-api\";\n\nexport class NewFile extends CardDef {\n  static isolated = class Isolated extends Component<typeof this> {\n    <template>\n      <div data-test-new-file>New File Content</div>\n    </template>\n  };\n}",
+			realm: testRealmURL
+		});
+		await settled();
+		assert.dom(`[data-test-directory="${newDirName}/"]`).exists();
+		assert.dom(`[data-test-directory="${newDirName}/"] .icon`).hasClass("closed");
+		await click(`[data-test-directory="${newDirName}/"]`);
+		assert.dom(`[data-test-directory="${newDirName}/"] .icon`).hasClass("open");
+		assert.dom(`[data-test-file="${newDirName}/${newFileName}"]`).exists();
+		assert.dom(`[data-test-file="${newDirName}/${newFileName}"]`).hasText(newFileName, "New file is created with the correct name");
+	});
+	(0, import_qunit.test)("can delete a file from file tree context menu", async function(assert) {
+		let recentFilesService = getService("recent-files-service");
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}friend.gts`
+		});
+		await waitFor("[data-test-file=\"friend.gts\"]");
+		assert.dom("[data-test-file=\"friend.gts\"]").exists("friend.gts is in tree");
+		assert.dom("[data-test-delete-modal-container]").doesNotExist();
+		await triggerEvent("[data-test-file-row=\"friend.gts\"] .file-menu-trigger", "click");
+		await waitFor("[data-test-boxel-menu-item-text=\"Delete\"]");
+		assert.dom("[data-test-boxel-menu-item-text=\"Delete\"]").exists("Delete menu item is present");
+		await click("[data-test-boxel-menu-item-text=\"Delete\"]");
+		await waitFor(`[data-test-delete-modal="${testRealmURL}friend.gts"]`);
+		assert.dom(`[data-test-delete-modal="${testRealmURL}friend.gts"]`).exists("Delete confirmation modal appears");
+		await click("[data-test-confirm-delete-button]");
+		await waitUntil(() => !document.querySelector("[data-test-file=\"friend.gts\"]"));
+		assert.dom("[data-test-file=\"friend.gts\"]").doesNotExist("friend.gts is removed from file tree");
+		assert.dom("[data-test-delete-modal-container]").doesNotExist("Delete modal is dismissed");
+		let notFound = await adapter.openFile("friend.gts");
+		assert.strictEqual(notFound, void 0, "friend.gts file is deleted");
+		assert.notOk(recentFilesService.recentFiles.some((f) => `${f.realmURL}${f.filePath}` === `${testRealmURL}friend.gts`), "deleted file is removed from recent files");
+	});
+	(0, import_qunit.test)("can cancel delete from file tree context menu", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}friend.gts`
+		});
+		await waitFor("[data-test-file=\"friend.gts\"]");
+		await triggerEvent("[data-test-file-row=\"friend.gts\"] .file-menu-trigger", "click");
+		await waitFor("[data-test-boxel-menu-item-text=\"Delete\"]");
+		await click("[data-test-boxel-menu-item-text=\"Delete\"]");
+		await waitFor(`[data-test-delete-modal="${testRealmURL}friend.gts"]`);
+		await click("[data-test-confirm-cancel-button]");
+		assert.dom("[data-test-delete-modal-container]").doesNotExist("Delete modal is dismissed");
+		assert.dom("[data-test-file=\"friend.gts\"]").exists("friend.gts is still in the file tree after cancel");
+		let fileContent = await adapter.openFile("friend.gts");
+		assert.notStrictEqual(fileContent, void 0, "friend.gts still exists in the realm");
+	});
+	(0, import_qunit.test)("can delete a file via right-click in file tree", async function(assert) {
+		await visitOperatorMode({
+			stacks: [[{
+				id: `${testRealmURL}Person/1`,
+				format: "isolated"
+			}]],
+			submode: "code",
+			fileView: "browser",
+			codePath: `${testRealmURL}friend.gts`
+		});
+		await waitFor("[data-test-file=\"friend.gts\"]");
+		assert.dom("[data-test-delete-modal-container]").doesNotExist();
+		await triggerEvent("[data-test-file-row=\"friend.gts\"]", "contextmenu");
+		await waitFor("[data-test-boxel-menu-item-text=\"Delete\"]");
+		assert.dom("[data-test-boxel-menu-item-text=\"Delete\"]").exists("Delete menu item appears on right-click");
+		await click("[data-test-boxel-menu-item-text=\"Delete\"]");
+		await waitFor(`[data-test-delete-modal="${testRealmURL}friend.gts"]`);
+		assert.dom(`[data-test-delete-modal="${testRealmURL}friend.gts"]`).exists("Delete confirmation modal appears");
+	});
+});
+//#endregion