From 8185d225ba62f4ae2e42507f2f6e6c4820068c77 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 19 Sep 2023 19:20:43 +0800
Subject: [PATCH 01/29] get file extension and realm info

---
 .../operator-mode/card-inheritance-panel.gts  | 35 ++++++------
 .../definition-container/base.gts             | 57 +++++++++++--------
 packages/host/app/resources/adoption-chain.ts | 18 +++++-
 packages/host/app/resources/card-type.ts      | 47 ++++++++++++++-
 4 files changed, 107 insertions(+), 50 deletions(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index ecf5bb416a6..c119ae5e8d0 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -11,15 +11,14 @@ import { Ready } from '@cardstack/host/resources/file';
 import { tracked } from '@glimmer/tracking';
 import moment from 'moment';
 import { type AdoptionChainResource } from '@cardstack/host/resources/adoption-chain';
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 import { hash, array } from '@ember/helper';
-import type OperatorModeStateService from '../../services/operator-mode-state-service';
 import { action } from '@ember/object';
 
-interface Args {
+interface Signature {
   Element: HTMLElement;
   Args: {
     realmInfo: RealmInfo | null;
-    realmIconURL: string | null | undefined;
     readyFile: Ready;
     cardInstance: CardDef | null;
     adoptionChain?: AdoptionChainResource;
@@ -27,10 +26,14 @@ interface Args {
   };
 }
 
-export default class CardInheritancePanel extends Component<Args> {
+export default class CardInheritancePanel extends Component<Signature> {
   @tracked cardInstance: CardDef | undefined;
   @service declare operatorModeStateService: OperatorModeStateService;
 
+  get adoptionChainTypes() {
+    return this.args.adoptionChain?.types;
+  }
+
   @action
   updateCodePath(url: URL | undefined) {
     if (url) {
@@ -38,10 +41,6 @@ export default class CardInheritancePanel extends Component<Args> {
     }
   }
 
-  get adoptionChainTypes() {
-    return this.args.adoptionChain?.types;
-  }
-
   <template>
     <div class='container' ...attributes>
 
@@ -51,8 +50,7 @@ export default class CardInheritancePanel extends Component<Args> {
           <InstanceDefinitionContainer
             @name={{@cardInstance.title}}
             @fileExtension='.JSON'
-            @realmInfo={{@realmInfo}}
-            @realmIconURL={{@realmIconURL}}
+            @realmInfo={{this.args.realmInfo}}
             @infoText={{this.lastModified}}
             @actions={{array
               (hash label='Delete' handler=@delete icon='icon-trash')
@@ -62,21 +60,21 @@ export default class CardInheritancePanel extends Component<Args> {
 
           <ClickableModuleDefinitionContainer
             @name={{t.displayName}}
-            @fileExtension={{this.fileExtension}}
-            @realmInfo={{@realmInfo}}
-            @realmIconURL={{@realmIconURL}}
+            @fileExtension={{t.moduleMeta.extension}}
+            @realmInfo={{t.moduleMeta.realmInfo}}
             @onSelectDefinition={{this.updateCodePath}}
             @url={{t.module}}
           />
         {{/each}}
       {{else}}
+
         {{! Module case when visting, eg author.gts }}
         {{#each this.adoptionChainTypes as |t|}}
+
           <ModuleDefinitionContainer
             @name={{t.displayName}}
-            @fileExtension={{this.fileExtension}}
-            @realmInfo={{@realmInfo}}
-            @realmIconURL={{@realmIconURL}}
+            @fileExtension={{t.moduleMeta.extension}}
+            @realmInfo={{t.moduleMeta.realmInfo}}
             @isActive={{true}}
             @actions={{array
               (hash label='Delete' handler=@delete icon='icon-trash')
@@ -85,9 +83,8 @@ export default class CardInheritancePanel extends Component<Args> {
           <div>Inherits from</div>
           <ClickableModuleDefinitionContainer
             @name={{t.super.displayName}}
-            @fileExtension={{this.fileExtension}}
-            @realmInfo={{@realmInfo}}
-            @realmIconURL={{@realmIconURL}}
+            @fileExtension={{t.super.moduleMeta.extension}}
+            @realmInfo={{t.super.moduleMeta.realmInfo}}
             @onSelectDefinition={{this.updateCodePath}}
             @url={{t.super.module}}
           />
diff --git a/packages/host/app/components/operator-mode/definition-container/base.gts b/packages/host/app/components/operator-mode/definition-container/base.gts
index 900280e7f3d..67a822cf603 100644
--- a/packages/host/app/components/operator-mode/definition-container/base.gts
+++ b/packages/host/app/components/operator-mode/definition-container/base.gts
@@ -13,9 +13,8 @@ interface Action {
 export interface BaseArgs {
   title: string | undefined;
   name: string | undefined;
-  fileExtension: string;
-  realmInfo: RealmInfo | null;
-  realmIconURL: string | null | undefined;
+  fileExtension: string | undefined;
+  realmInfo: RealmInfo | undefined | null;
   isActive: boolean;
 }
 
@@ -32,32 +31,40 @@ export class BaseDefinitionContainer extends Component<BaseSignature> {
     return this.args.realmInfo?.name;
   }
 
+  get realmIcon(): string | undefined | null {
+    return this.args.realmInfo?.iconURL;
+  }
+
   <template>
-    <div class='container {{if @isActive "active"}}' ...attributes>
-      <div class='banner'>
-        <Label class='banner-title'>
-          {{@title}}</Label>
-        <span
-          class='banner-title'
-          data-test-definition-file-extension
-        >{{@fileExtension}}</span>
-      </div>
-      <div class='content'>
-        <div class='definition-info'>
-          <div class='realm-info'>
-            <img src={{@realmIconURL}} alt='realm-icon' />
-            <Label class='realm-name' data-test-definition-realm-name>in
-              {{this.realmName}}</Label>
+    {{#if @realmInfo}}
+      <div class='container {{if @isActive "active"}}' ...attributes>
+        <div class='banner'>
+          <Label class='banner-title'>
+            {{@title}}</Label>
+          <span
+            class='banner-title'
+            data-test-definition-file-extension
+          >{{@fileExtension}}</span>
+        </div>
+        <div class='content'>
+          <div class='definition-info'>
+            <div class='realm-info'>
+              <img src={{this.realmIcon}} alt='realm-icon' />
+              <Label class='realm-name' data-test-definition-realm-name>in
+                {{this.realmName}}</Label>
+            </div>
+            <div
+              data-test-definition-name
+              class='definition-name'
+            >{{@name}}</div>
           </div>
-          <div data-test-definition-name class='definition-name'>{{@name}}</div>
+          {{#if @isActive}}
+            {{yield to='activeContent'}}
+          {{/if}}
         </div>
-        {{#if @isActive}}
-          {{yield to='activeContent'}}
-        {{/if}}
-      </div>
-
-    </div>
 
+      </div>
+    {{/if}}
     <style>
       .container {
         background-color: var(--boxel-light);
diff --git a/packages/host/app/resources/adoption-chain.ts b/packages/host/app/resources/adoption-chain.ts
index 3aba5896c1c..0a7ca00a70d 100644
--- a/packages/host/app/resources/adoption-chain.ts
+++ b/packages/host/app/resources/adoption-chain.ts
@@ -10,6 +10,8 @@ import {
   getCardType,
   type CardType,
 } from '@cardstack/host/resources/card-type';
+import { restartableTask } from 'ember-concurrency';
+import type CardService from '@cardstack/host/services/card-service';
 
 interface AdoptionChainResourceArgs {
   named: { module: ImportResource | undefined; loader: Loader };
@@ -17,21 +19,31 @@ interface AdoptionChainResourceArgs {
 
 export class AdoptionChainResource extends Resource<AdoptionChainResourceArgs> {
   @service declare loaderService: LoaderService;
+  @service declare cardService: CardService;
   @tracked cards: (typeof BaseDef)[] = [];
   @tracked _cardTypes: CardType[] = [];
 
   modify(_positional: never[], named: AdoptionChainResourceArgs['named']) {
     let importResource = named['module'];
     if (importResource && importResource.module) {
-      let module = importResource.module;
-      this.cards = cardsOrFieldsFromModule(module);
-      this._cardTypes = this.cards.map((c) => getCardType(this, () => c));
+      this.load.perform(importResource.module);
     }
   }
 
   get types() {
     return this._cardTypes.map((t) => t.type);
   }
+
+  private load = restartableTask(async (module: object) => {
+    this.cards = cardsOrFieldsFromModule(module);
+    this._cardTypes = this.cards.map((c) =>
+      getCardType(
+        this,
+        () => c,
+        (url: URL) => this.cardService.getRealmInfoByRealmURL(url),
+      ),
+    );
+  });
 }
 
 function cardsOrFieldsFromModule(
diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index f691c774e52..26d48c28ebe 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -7,6 +7,7 @@ import {
   baseRealm,
   moduleFrom,
   getAncestor,
+  RealmInfo,
 } from '@cardstack/runtime-common';
 import { Loader } from '@cardstack/runtime-common/loader';
 import { getOwner } from '@ember/application';
@@ -18,11 +19,13 @@ import type {
 } from 'https://cardstack.com/base/card-api';
 import { isCodeRef, type CodeRef } from '@cardstack/runtime-common/code-ref';
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
+import { SupportedMimeType } from '@cardstack/runtime-common';
 
 interface Args {
   named: {
     definition: typeof BaseDef;
     loader: Loader;
+    getRealmInfo: (url: URL) => Promise<RealmInfo>;
   };
 }
 export interface Type {
@@ -31,16 +34,22 @@ export interface Type {
   displayName: string;
   super: Type | undefined;
   fields: { name: string; card: Type | CodeRef; type: FieldType }[];
+  moduleMeta: {
+    extension: string;
+    realmInfo: RealmInfo;
+  };
 }
 
 export class CardType extends Resource<Args> {
   @tracked type: Type | undefined;
   declare loader: Loader;
+  declare getRealmInfo: (url: URL) => Promise<RealmInfo>;
   typeCache: Map<string, Type> = new Map();
 
   modify(_positional: never[], named: Args['named']) {
-    let { definition, loader } = named;
+    let { definition, loader, getRealmInfo } = named;
     this.loader = loader;
+    this.getRealmInfo = getRealmInfo;
     this.assembleType.perform(definition);
   }
 
@@ -98,22 +107,54 @@ export class CardType extends Resource<Args> {
         }),
       ),
     );
+
+    let moduleIdentifier = moduleFrom(ref);
+    let moduleMeta = await this.moduleMeta(new URL(moduleIdentifier));
     let type: Type = {
       id,
-      module: moduleFrom(ref),
+      module: moduleIdentifier,
       super: superType,
       displayName: card.prototype.constructor.displayName || 'Card',
       fields: fieldTypes,
+      moduleMeta,
     };
     this.typeCache.set(id, type);
     return type;
   }
+
+  private moduleMeta = async (url: URL) => {
+    let response = await this.loader.fetch(url, {
+      headers: { Accept: SupportedMimeType.CardSource },
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Could not get file ${url.href}, status ${response.status}: ${
+          response.statusText
+        } - ${await response.text()}`,
+      );
+    }
+    let realmURL = response.headers.get('x-boxel-realm-url');
+    if (realmURL === null) {
+      throw new Error(`Could not get realm url for ${url.href}`);
+    }
+    let realmInfo = await this.getRealmInfo(new URL(realmURL));
+    return {
+      realmInfo,
+      extension: '.' + response.url.split('.').pop() || '',
+    };
+  };
 }
 
-export function getCardType(parent: object, card: () => typeof BaseDef) {
+export function getCardType(
+  parent: object,
+  card: () => typeof BaseDef,
+  getRealmInfo: (url: URL) => Promise<RealmInfo>,
+) {
   return CardType.from(parent, () => ({
     named: {
       definition: card(),
+      getRealmInfo: getRealmInfo,
       loader: (
         (getOwner(parent) as any).lookup(
           'service:loader-service',

From bce717fb5f05f7cc24a589f1b9bf96c2852eed49 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 19 Sep 2023 19:32:56 +0800
Subject: [PATCH 02/29] reinclude test

---
 packages/host/tests/acceptance/code-mode-test.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/host/tests/acceptance/code-mode-test.ts b/packages/host/tests/acceptance/code-mode-test.ts
index 25acbde7e9c..0c37e99ca6a 100644
--- a/packages/host/tests/acceptance/code-mode-test.ts
+++ b/packages/host/tests/acceptance/code-mode-test.ts
@@ -500,12 +500,11 @@ module('Acceptance | code mode tests', function (hooks) {
     await waitUntil(() => find('[data-test-card-instance-definition]'));
 
     assert.dom('[data-test-card-module-definition]').includesText('Card');
-    //TODO: CS-5957 deriving extension
-    // assert
-    //   .dom(
-    //     '[data-test-card-module-definition] [data-test-definition-file-extension]',
-    //   )
-    //   .includesText('.gts');
+    assert
+      .dom(
+        '[data-test-card-module-definition] [data-test-definition-file-extension]',
+      )
+      .includesText('.gts');
     assert
       .dom(
         '[data-test-card-module-definition] [data-test-definition-realm-name]',

From 33bb5eb48be4a2f446fc39c1c0d957f1f0dec1e5 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 19 Sep 2023 19:33:25 +0800
Subject: [PATCH 03/29] put getRealmInfo in resource

---
 .../definition-container/index.gts              |  3 ---
 packages/host/app/resources/adoption-chain.ts   | 10 +---------
 packages/host/app/resources/card-type.ts        | 17 ++++++-----------
 3 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/packages/host/app/components/operator-mode/definition-container/index.gts b/packages/host/app/components/operator-mode/definition-container/index.gts
index 214bdee8dba..aacf1fba960 100644
--- a/packages/host/app/components/operator-mode/definition-container/index.gts
+++ b/packages/host/app/components/operator-mode/definition-container/index.gts
@@ -16,7 +16,6 @@ export class ModuleDefinitionContainer extends Component<ModuleSignature> {
       @name={{@name}}
       @fileExtension={{@fileExtension}}
       @realmInfo={{@realmInfo}}
-      @realmIconURL={{@realmIconURL}}
       @isActive={{@isActive}}
       data-test-card-module-definition
     >
@@ -43,7 +42,6 @@ export class InstanceDefinitionContainer extends Component<InstanceSignature> {
       @fileExtension='.JSON'
       @name={{@name}}
       @realmInfo={{@realmInfo}}
-      @realmIconURL={{@realmIconURL}}
       @isActive={{true}}
       data-test-card-instance-definition
     >
@@ -75,7 +73,6 @@ export class ClickableModuleDefinitionContainer extends Component<ClickableModul
         @name={{@name}}
         @fileExtension={{@fileExtension}}
         @realmInfo={{@realmInfo}}
-        @realmIconURL={{@realmIconURL}}
         @isActive={{false}}
         data-test-card-module-definition
       />
diff --git a/packages/host/app/resources/adoption-chain.ts b/packages/host/app/resources/adoption-chain.ts
index 0a7ca00a70d..7c3fa01e627 100644
--- a/packages/host/app/resources/adoption-chain.ts
+++ b/packages/host/app/resources/adoption-chain.ts
@@ -11,7 +11,6 @@ import {
   type CardType,
 } from '@cardstack/host/resources/card-type';
 import { restartableTask } from 'ember-concurrency';
-import type CardService from '@cardstack/host/services/card-service';
 
 interface AdoptionChainResourceArgs {
   named: { module: ImportResource | undefined; loader: Loader };
@@ -19,7 +18,6 @@ interface AdoptionChainResourceArgs {
 
 export class AdoptionChainResource extends Resource<AdoptionChainResourceArgs> {
   @service declare loaderService: LoaderService;
-  @service declare cardService: CardService;
   @tracked cards: (typeof BaseDef)[] = [];
   @tracked _cardTypes: CardType[] = [];
 
@@ -36,13 +34,7 @@ export class AdoptionChainResource extends Resource<AdoptionChainResourceArgs> {
 
   private load = restartableTask(async (module: object) => {
     this.cards = cardsOrFieldsFromModule(module);
-    this._cardTypes = this.cards.map((c) =>
-      getCardType(
-        this,
-        () => c,
-        (url: URL) => this.cardService.getRealmInfoByRealmURL(url),
-      ),
-    );
+    this._cardTypes = this.cards.map((c) => getCardType(this, () => c));
   });
 }
 
diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index 26d48c28ebe..b25b2b363bc 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -20,12 +20,13 @@ import type {
 import { isCodeRef, type CodeRef } from '@cardstack/runtime-common/code-ref';
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
 import { SupportedMimeType } from '@cardstack/runtime-common';
+import type CardService from '@cardstack/host/services/card-service';
+import { service } from '@ember/service';
 
 interface Args {
   named: {
     definition: typeof BaseDef;
     loader: Loader;
-    getRealmInfo: (url: URL) => Promise<RealmInfo>;
   };
 }
 export interface Type {
@@ -42,14 +43,13 @@ export interface Type {
 
 export class CardType extends Resource<Args> {
   @tracked type: Type | undefined;
+  @service declare cardService: CardService;
   declare loader: Loader;
-  declare getRealmInfo: (url: URL) => Promise<RealmInfo>;
   typeCache: Map<string, Type> = new Map();
 
   modify(_positional: never[], named: Args['named']) {
-    let { definition, loader, getRealmInfo } = named;
+    let { definition, loader } = named;
     this.loader = loader;
-    this.getRealmInfo = getRealmInfo;
     this.assembleType.perform(definition);
   }
 
@@ -138,7 +138,7 @@ export class CardType extends Resource<Args> {
     if (realmURL === null) {
       throw new Error(`Could not get realm url for ${url.href}`);
     }
-    let realmInfo = await this.getRealmInfo(new URL(realmURL));
+    let realmInfo = await this.cardService.getRealmInfoByRealmURL(url);
     return {
       realmInfo,
       extension: '.' + response.url.split('.').pop() || '',
@@ -146,15 +146,10 @@ export class CardType extends Resource<Args> {
   };
 }
 
-export function getCardType(
-  parent: object,
-  card: () => typeof BaseDef,
-  getRealmInfo: (url: URL) => Promise<RealmInfo>,
-) {
+export function getCardType(parent: object, card: () => typeof BaseDef) {
   return CardType.from(parent, () => ({
     named: {
       definition: card(),
-      getRealmInfo: getRealmInfo,
       loader: (
         (getOwner(parent) as any).lookup(
           'service:loader-service',

From dd5d140cc7a119ca8784318663e48cf54eaf5910 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 19 Sep 2023 19:39:11 +0800
Subject: [PATCH 04/29] fix url bug

---
 packages/host/app/resources/card-type.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index b25b2b363bc..aa9004f2357 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -138,7 +138,9 @@ export class CardType extends Resource<Args> {
     if (realmURL === null) {
       throw new Error(`Could not get realm url for ${url.href}`);
     }
-    let realmInfo = await this.cardService.getRealmInfoByRealmURL(url);
+    let realmInfo = await this.cardService.getRealmInfoByRealmURL(
+      new URL(realmURL),
+    );
     return {
       realmInfo,
       extension: '.' + response.url.split('.').pop() || '',

From 21defef5ce09ed51325357ecfad26775e5054d1a Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 19 Sep 2023 21:25:10 +0800
Subject: [PATCH 05/29] cache request

---
 packages/host/app/resources/card-type.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index aa9004f2357..aa0754718ea 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -46,6 +46,8 @@ export class CardType extends Resource<Args> {
   @service declare cardService: CardService;
   declare loader: Loader;
   typeCache: Map<string, Type> = new Map();
+  moduleMetaCache: Map<string, { extension: string; realmInfo: RealmInfo }> =
+    new Map();
 
   modify(_positional: never[], named: Args['named']) {
     let { definition, loader } = named;
@@ -109,7 +111,10 @@ export class CardType extends Resource<Args> {
     );
 
     let moduleIdentifier = moduleFrom(ref);
-    let moduleMeta = await this.moduleMeta(new URL(moduleIdentifier));
+    let moduleMeta =
+      this.moduleMetaCache.get(moduleIdentifier) ??
+      (await this.moduleMeta(new URL(moduleIdentifier)));
+    this.moduleMetaCache.set(moduleIdentifier, moduleMeta);
     let type: Type = {
       id,
       module: moduleIdentifier,

From f754c0fbe0df1f764646dfce904a4004c4da2f3d Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 19 Sep 2023 21:37:33 +0800
Subject: [PATCH 06/29] lint

---
 packages/host/app/components/operator-mode/code-mode.gts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/host/app/components/operator-mode/code-mode.gts b/packages/host/app/components/operator-mode/code-mode.gts
index 541ae507913..c4139ae7710 100644
--- a/packages/host/app/components/operator-mode/code-mode.gts
+++ b/packages/host/app/components/operator-mode/code-mode.gts
@@ -547,7 +547,6 @@ export default class CodeMode extends Component<Signature> {
                         @cardInstance={{this.cardResource.value}}
                         @readyFile={{this.readyFile}}
                         @realmInfo={{this.realmInfo}}
-                        @realmIconURL={{this.realmIconURL}}
                         @adoptionChain={{this.adoptionChain}}
                         @delete={{this.delete}}
                         data-test-card-inheritance-panel

From 69e3ef5add8092f7fbf9825e35c1387b2fdffc3b Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 12:20:12 +0800
Subject: [PATCH 07/29] Use adoption manager and use loading states

---
 .../operator-mode/card-inheritance-panel.gts  | 66 +++++++++++--------
 .../components/operator-mode/code-mode.gts    |  8 +--
 ...ion-chain.ts => adoption-chain-manager.ts} | 56 +++++++++++-----
 packages/host/app/resources/card-type.ts      |  9 ++-
 4 files changed, 87 insertions(+), 52 deletions(-)
 rename packages/host/app/resources/{adoption-chain.ts => adoption-chain-manager.ts} (52%)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index c119ae5e8d0..d754671bbd0 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -10,7 +10,7 @@ import {
 import { Ready } from '@cardstack/host/resources/file';
 import { tracked } from '@glimmer/tracking';
 import moment from 'moment';
-import { type AdoptionChainResource } from '@cardstack/host/resources/adoption-chain';
+import { type AdoptionChainManager } from '@cardstack/host/resources/adoption-chain-manager';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 import { hash, array } from '@ember/helper';
 import { action } from '@ember/object';
@@ -21,7 +21,7 @@ interface Signature {
     realmInfo: RealmInfo | null;
     readyFile: Ready;
     cardInstance: CardDef | null;
-    adoptionChain?: AdoptionChainResource;
+    adoptionChainManager?: AdoptionChainManager;
     delete: () => void;
   };
 }
@@ -31,7 +31,11 @@ export default class CardInheritancePanel extends Component<Signature> {
   @service declare operatorModeStateService: OperatorModeStateService;
 
   get adoptionChainTypes() {
-    return this.args.adoptionChain?.types;
+    return this.args.adoptionChainManager?.types;
+  }
+
+  get defaultType() {
+    return this.args.adoptionChainManager?.defaultType;
   }
 
   @action
@@ -46,7 +50,9 @@ export default class CardInheritancePanel extends Component<Signature> {
 
       {{#if @cardInstance}}
         {{! JSON case when visting, eg Author/1.json }}
-        {{#each this.adoptionChainTypes as |t|}}
+        {{#if @adoptionChainManager.loadingAllChains}}
+          <div>Loading...</div>
+        {{else}}
           <InstanceDefinitionContainer
             @name={{@cardInstance.title}}
             @fileExtension='.JSON'
@@ -59,36 +65,40 @@ export default class CardInheritancePanel extends Component<Signature> {
           <div>Adopts from</div>
 
           <ClickableModuleDefinitionContainer
-            @name={{t.displayName}}
-            @fileExtension={{t.moduleMeta.extension}}
-            @realmInfo={{t.moduleMeta.realmInfo}}
+            @name={{this.defaultType.displayName}}
+            @fileExtension={{this.defaultType.moduleMeta.extension}}
+            @realmInfo={{this.defaultType.moduleMeta.realmInfo}}
             @onSelectDefinition={{this.updateCodePath}}
-            @url={{t.module}}
+            @url={{this.defaultType.module}}
           />
-        {{/each}}
+        {{/if}}
       {{else}}
 
         {{! Module case when visting, eg author.gts }}
-        {{#each this.adoptionChainTypes as |t|}}
+        {{#if @adoptionChainManager.loadingAllChains}}
+          <div>Loading...</div>
+        {{else}}
+          {{#each this.adoptionChainTypes as |t|}}
 
-          <ModuleDefinitionContainer
-            @name={{t.displayName}}
-            @fileExtension={{t.moduleMeta.extension}}
-            @realmInfo={{t.moduleMeta.realmInfo}}
-            @isActive={{true}}
-            @actions={{array
-              (hash label='Delete' handler=@delete icon='icon-trash')
-            }}
-          />
-          <div>Inherits from</div>
-          <ClickableModuleDefinitionContainer
-            @name={{t.super.displayName}}
-            @fileExtension={{t.super.moduleMeta.extension}}
-            @realmInfo={{t.super.moduleMeta.realmInfo}}
-            @onSelectDefinition={{this.updateCodePath}}
-            @url={{t.super.module}}
-          />
-        {{/each}}
+            <ModuleDefinitionContainer
+              @name={{t.displayName}}
+              @fileExtension={{t.moduleMeta.extension}}
+              @realmInfo={{t.moduleMeta.realmInfo}}
+              @isActive={{true}}
+              @actions={{array
+                (hash label='Delete' handler=@delete icon='icon-trash')
+              }}
+            />
+            <div>Inherits from</div>
+            <ClickableModuleDefinitionContainer
+              @name={{t.super.displayName}}
+              @fileExtension={{t.super.moduleMeta.extension}}
+              @realmInfo={{t.super.moduleMeta.realmInfo}}
+              @onSelectDefinition={{this.updateCodePath}}
+              @url={{t.super.module}}
+            />
+          {{/each}}
+        {{/if}}
       {{/if}}
     </div>
     <style>
diff --git a/packages/host/app/components/operator-mode/code-mode.gts b/packages/host/app/components/operator-mode/code-mode.gts
index c4139ae7710..e611997c976 100644
--- a/packages/host/app/components/operator-mode/code-mode.gts
+++ b/packages/host/app/components/operator-mode/code-mode.gts
@@ -54,6 +54,7 @@ import {
 } from '@cardstack/host/resources/file';
 import { importResource } from '@cardstack/host/resources/import';
 import { maybe } from '@cardstack/host/resources/maybe';
+import { adoptionChainManager } from '@cardstack/host/resources/adoption-chain-manager';
 
 // host services
 import type CardService from '@cardstack/host/services/card-service';
@@ -63,7 +64,6 @@ import RecentFilesService from '@cardstack/host/services/recent-files-service';
 import type { MonacoSDK } from '@cardstack/host/services/monaco-service';
 import type { FileView } from '@cardstack/host/services/operator-mode-state-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
-import { adoptionChainResource } from '@cardstack/host/resources/adoption-chain';
 
 interface Signature {
   Args: {
@@ -300,9 +300,9 @@ export default class CodeMode extends Component<Signature> {
     }
   });
 
-  @use adoptionChain = resource(() => {
+  @use adoptionChainManager = resource(() => {
     if (this.importedModule) {
-      return adoptionChainResource(this, this.importedModule);
+      return adoptionChainManager(this, this.importedModule);
     } else {
       return undefined;
     }
@@ -547,7 +547,7 @@ export default class CodeMode extends Component<Signature> {
                         @cardInstance={{this.cardResource.value}}
                         @readyFile={{this.readyFile}}
                         @realmInfo={{this.realmInfo}}
-                        @adoptionChain={{this.adoptionChain}}
+                        @adoptionChainManager={{this.adoptionChainManager}}
                         @delete={{this.delete}}
                         data-test-card-inheritance-panel
                       />
diff --git a/packages/host/app/resources/adoption-chain.ts b/packages/host/app/resources/adoption-chain-manager.ts
similarity index 52%
rename from packages/host/app/resources/adoption-chain.ts
rename to packages/host/app/resources/adoption-chain-manager.ts
index 7c3fa01e627..06bb2be49ee 100644
--- a/packages/host/app/resources/adoption-chain.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -3,36 +3,56 @@ import { Resource } from 'ember-resources';
 import { tracked } from '@glimmer/tracking';
 import { Loader } from '@cardstack/runtime-common/loader';
 import { getOwner } from '@ember/application';
-import type LoaderService from '../services/loader-service';
-import { service } from '@ember/service';
 import { type BaseDef } from 'https://cardstack.com/base/card-api';
+import type LoaderService from '../services/loader-service';
 import {
   getCardType,
   type CardType,
 } from '@cardstack/host/resources/card-type';
 import { restartableTask } from 'ember-concurrency';
 
-interface AdoptionChainResourceArgs {
-  named: { module: ImportResource | undefined; loader: Loader };
+interface AdoptionChainManagerArgs {
+  named: { importResource: ImportResource | undefined; loader: Loader };
 }
 
-export class AdoptionChainResource extends Resource<AdoptionChainResourceArgs> {
-  @service declare loaderService: LoaderService;
+// forwards the card type resource (doesn't care about the card type resource)
+export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
+  importResource: ImportResource | undefined;
   @tracked cards: (typeof BaseDef)[] = [];
-  @tracked _cardTypes: CardType[] = [];
+  @tracked _cardTypes: CardType[] = []; // all cards exported in module
+  ready: Promise<void> | undefined;
 
-  modify(_positional: never[], named: AdoptionChainResourceArgs['named']) {
-    let importResource = named['module'];
-    if (importResource && importResource.module) {
-      this.load.perform(importResource.module);
-    }
+  modify(_positional: never[], named: AdoptionChainManagerArgs['named']) {
+    this.importResource = named['importResource'];
+    this.ready = this.load.perform();
+  }
+
+  get loading() {
+    return this.load.isRunning;
+  }
+
+  get cardTypes() {
+    return this._cardTypes;
   }
 
   get types() {
     return this._cardTypes.map((t) => t.type);
   }
 
-  private load = restartableTask(async (module: object) => {
+  get defaultType() {
+    return this.types[0];
+  }
+
+  get loadingAllChains() {
+    return this._cardTypes.some((t) => t.loading);
+  }
+
+  private load = restartableTask(async () => {
+    await this.importResource?.loaded;
+    let module = this.importResource?.module;
+    if (module === undefined) {
+      throw new Error('module is undefined');
+    }
     this.cards = cardsOrFieldsFromModule(module);
     this._cardTypes = this.cards.map((c) => getCardType(this, () => c));
   });
@@ -49,18 +69,18 @@ export function isCardOrField(cardOrField: any): cardOrField is typeof BaseDef {
   return typeof cardOrField === 'function' && 'baseDef' in cardOrField;
 }
 
-export function adoptionChainResource(
+export function adoptionChainManager(
   parent: object,
-  module: ImportResource | undefined,
+  importResource: ImportResource | undefined,
 ) {
-  return AdoptionChainResource.from(parent, () => ({
+  return AdoptionChainManager.from(parent, () => ({
     named: {
-      module,
+      importResource,
       loader: (
         (getOwner(parent) as any).lookup(
           'service:loader-service',
         ) as LoaderService
       ).loader,
     },
-  })) as AdoptionChainResource;
+  })) as AdoptionChainManager;
 }
diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index aa0754718ea..3c1f35cf2c2 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -48,11 +48,16 @@ export class CardType extends Resource<Args> {
   typeCache: Map<string, Type> = new Map();
   moduleMetaCache: Map<string, { extension: string; realmInfo: RealmInfo }> =
     new Map();
+  ready: Promise<void> | undefined;
 
   modify(_positional: never[], named: Args['named']) {
     let { definition, loader } = named;
     this.loader = loader;
-    this.assembleType.perform(definition);
+    this.ready = this.assembleType.perform(definition);
+  }
+
+  get loading() {
+    return this.assembleType.isRunning;
   }
 
   private assembleType = restartableTask(async (card: typeof BaseDef) => {
@@ -63,7 +68,7 @@ export class CardType extends Resource<Args> {
     this.type = maybeType;
   });
 
-  async toType(
+  private async toType(
     card: typeof BaseDef,
     stack: (typeof BaseDef)[] = [],
   ): Promise<Type | CodeRef> {

From 97d686e1fdc538b82c666a9e58a2f3ad268e7886 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 14:28:04 +0800
Subject: [PATCH 08/29] add selection of card

---
 .../operator-mode/card-inheritance-panel.gts  | 93 +++++++++++--------
 .../app/resources/adoption-chain-manager.ts   | 22 ++++-
 2 files changed, 76 insertions(+), 39 deletions(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index d754671bbd0..dcc3ed38b0f 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -34,8 +34,12 @@ export default class CardInheritancePanel extends Component<Signature> {
     return this.args.adoptionChainManager?.types;
   }
 
-  get defaultType() {
-    return this.args.adoptionChainManager?.defaultType;
+  get cardType() {
+    return this.args.adoptionChainManager?.selectedCardType;
+  }
+
+  get cardTypes() {
+    return this.args.adoptionChainManager?.cardTypes;
   }
 
   @action
@@ -53,24 +57,26 @@ export default class CardInheritancePanel extends Component<Signature> {
         {{#if @adoptionChainManager.loadingAllChains}}
           <div>Loading...</div>
         {{else}}
-          <InstanceDefinitionContainer
-            @name={{@cardInstance.title}}
-            @fileExtension='.JSON'
-            @realmInfo={{this.args.realmInfo}}
-            @infoText={{this.lastModified}}
-            @actions={{array
-              (hash label='Delete' handler=@delete icon='icon-trash')
-            }}
-          />
-          <div>Adopts from</div>
+          <div class='inheritance-chain'>
+            <InstanceDefinitionContainer
+              @name={{@cardInstance.title}}
+              @fileExtension='.JSON'
+              @realmInfo={{this.args.realmInfo}}
+              @infoText={{this.lastModified}}
+              @actions={{array
+                (hash label='Delete' handler=@delete icon='icon-trash')
+              }}
+            />
+            <div>Adopts from</div>
 
-          <ClickableModuleDefinitionContainer
-            @name={{this.defaultType.displayName}}
-            @fileExtension={{this.defaultType.moduleMeta.extension}}
-            @realmInfo={{this.defaultType.moduleMeta.realmInfo}}
-            @onSelectDefinition={{this.updateCodePath}}
-            @url={{this.defaultType.module}}
-          />
+            <ClickableModuleDefinitionContainer
+              @name={{this.cardType.type.displayName}}
+              @fileExtension={{this.cardType.type.moduleMeta.extension}}
+              @realmInfo={{this.cardType.type.moduleMeta.realmInfo}}
+              @onSelectDefinition={{this.updateCodePath}}
+              @url={{this.cardType.type.module}}
+            />
+          </div>
         {{/if}}
       {{else}}
 
@@ -78,25 +84,32 @@ export default class CardInheritancePanel extends Component<Signature> {
         {{#if @adoptionChainManager.loadingAllChains}}
           <div>Loading...</div>
         {{else}}
-          {{#each this.adoptionChainTypes as |t|}}
+          {{#each this.cardTypes as |ct|}}
+            <div
+              class='inheritance-chain
+                {{if (@adoptionChainManager.isSelected ct) "selected"}}'
+            >
 
-            <ModuleDefinitionContainer
-              @name={{t.displayName}}
-              @fileExtension={{t.moduleMeta.extension}}
-              @realmInfo={{t.moduleMeta.realmInfo}}
-              @isActive={{true}}
-              @actions={{array
-                (hash label='Delete' handler=@delete icon='icon-trash')
-              }}
-            />
-            <div>Inherits from</div>
-            <ClickableModuleDefinitionContainer
-              @name={{t.super.displayName}}
-              @fileExtension={{t.super.moduleMeta.extension}}
-              @realmInfo={{t.super.moduleMeta.realmInfo}}
-              @onSelectDefinition={{this.updateCodePath}}
-              @url={{t.super.module}}
-            />
+              <ModuleDefinitionContainer
+                @name={{ct.type.displayName}}
+                @fileExtension={{ct.type.moduleMeta.extension}}
+                @realmInfo={{ct.type.moduleMeta.realmInfo}}
+                @isActive={{true}}
+                @actions={{array
+                  (hash label='Delete' handler=@delete icon='icon-trash')
+                }}
+              />
+              {{#if ct.type.super}}
+                <div>Inherits from</div>
+                <ClickableModuleDefinitionContainer
+                  @name={{ct.type.super.displayName}}
+                  @fileExtension={{ct.type.super.moduleMeta.extension}}
+                  @realmInfo={{ct.type.super.moduleMeta.realmInfo}}
+                  @onSelectDefinition={{this.updateCodePath}}
+                  @url={{ct.type.super.module}}
+                />
+              {{/if}}
+            </div>
           {{/each}}
         {{/if}}
       {{/if}}
@@ -107,6 +120,12 @@ export default class CardInheritancePanel extends Component<Signature> {
         flex-direction: column;
         gap: var(--boxel-sp-xs);
       }
+      .selected {
+        outline: 2px solid var(--boxel-highlight);
+      }
+      .inheritance-chain {
+        padding: var(--boxel-sp-sm);
+      }
     </style>
   </template>
 
diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
index 06bb2be49ee..aa495c4b3ee 100644
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -10,6 +10,7 @@ import {
   type CardType,
 } from '@cardstack/host/resources/card-type';
 import { restartableTask } from 'ember-concurrency';
+import { TrackedMap } from 'tracked-built-ins';
 
 interface AdoptionChainManagerArgs {
   named: { importResource: ImportResource | undefined; loader: Loader };
@@ -21,6 +22,7 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
   @tracked cards: (typeof BaseDef)[] = [];
   @tracked _cardTypes: CardType[] = []; // all cards exported in module
   ready: Promise<void> | undefined;
+  selections = new TrackedMap<CardType, boolean>();
 
   modify(_positional: never[], named: AdoptionChainManagerArgs['named']) {
     this.importResource = named['importResource'];
@@ -31,6 +33,13 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     return this.load.isRunning;
   }
 
+  isSelected(cardType: CardType | undefined) {
+    if (cardType === undefined) {
+      return false;
+    }
+    return this.selections.get(cardType) || false;
+  }
+
   get cardTypes() {
     return this._cardTypes;
   }
@@ -39,8 +48,13 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     return this._cardTypes.map((t) => t.type);
   }
 
-  get defaultType() {
-    return this.types[0];
+  get selectedCardType() {
+    for (let [type, selected] of this.selections.entries()) {
+      if (selected) {
+        return type;
+      }
+    }
+    return undefined;
   }
 
   get loadingAllChains() {
@@ -55,6 +69,10 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     }
     this.cards = cardsOrFieldsFromModule(module);
     this._cardTypes = this.cards.map((c) => getCardType(this, () => c));
+    //setting default card type
+    if (this._cardTypes.length > 0) {
+      this.selections.set(this._cardTypes[0], true);
+    }
   });
 }
 

From 2fb1bc39f453311f75d000139fe167248f88a361 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 15:08:02 +0800
Subject: [PATCH 09/29] mock out some ui

---
 .../operator-mode/card-inheritance-panel.gts  | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index dcc3ed38b0f..4c3ca654960 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -57,6 +57,7 @@ export default class CardInheritancePanel extends Component<Signature> {
         {{#if @adoptionChainManager.loadingAllChains}}
           <div>Loading...</div>
         {{else}}
+          <h3>Inheritance Panel</h3>
           <div class='inheritance-chain'>
             <InstanceDefinitionContainer
               @name={{@cardInstance.title}}
@@ -79,8 +80,8 @@ export default class CardInheritancePanel extends Component<Signature> {
           </div>
         {{/if}}
       {{else}}
-
         {{! Module case when visting, eg author.gts }}
+        <h3>In This File</h3>
         {{#if @adoptionChainManager.loadingAllChains}}
           <div>Loading...</div>
         {{else}}
@@ -89,29 +90,30 @@ export default class CardInheritancePanel extends Component<Signature> {
               class='inheritance-chain
                 {{if (@adoptionChainManager.isSelected ct) "selected"}}'
             >
-
-              <ModuleDefinitionContainer
-                @name={{ct.type.displayName}}
-                @fileExtension={{ct.type.moduleMeta.extension}}
-                @realmInfo={{ct.type.moduleMeta.realmInfo}}
-                @isActive={{true}}
-                @actions={{array
-                  (hash label='Delete' handler=@delete icon='icon-trash')
-                }}
-              />
-              {{#if ct.type.super}}
-                <div>Inherits from</div>
-                <ClickableModuleDefinitionContainer
-                  @name={{ct.type.super.displayName}}
-                  @fileExtension={{ct.type.super.moduleMeta.extension}}
-                  @realmInfo={{ct.type.super.moduleMeta.realmInfo}}
-                  @onSelectDefinition={{this.updateCodePath}}
-                  @url={{ct.type.super.module}}
-                />
-              {{/if}}
+              <div>{{ct.type.displayName}}</div>
             </div>
           {{/each}}
         {{/if}}
+        <h3>Inheritance Panel</h3>
+        <ModuleDefinitionContainer
+          @name={{this.cardType.type.displayName}}
+          @fileExtension={{this.cardType.type.moduleMeta.extension}}
+          @realmInfo={{this.cardType.type.moduleMeta.realmInfo}}
+          @isActive={{true}}
+          @actions={{array
+            (hash label='Delete' handler=@delete icon='icon-trash')
+          }}
+        />
+        {{#if this.cardType.type.super}}
+          <div>Inherits from</div>
+          <ClickableModuleDefinitionContainer
+            @name={{this.cardType.type.super.displayName}}
+            @fileExtension={{this.cardType.type.super.moduleMeta.extension}}
+            @realmInfo={{this.cardType.type.super.moduleMeta.realmInfo}}
+            @onSelectDefinition={{this.updateCodePath}}
+            @url={{this.cardType.type.super.module}}
+          />
+        {{/if}}
       {{/if}}
     </div>
     <style>

From 4a98b737006a49ec16c0786ca1a95b0e95dfaf61 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 15:23:07 +0800
Subject: [PATCH 10/29] fix lint

---
 .../app/components/operator-mode/card-inheritance-panel.gts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index 8a1497b5c56..2a87c445f66 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -62,7 +62,7 @@ export default class CardInheritancePanel extends Component<Signature> {
             <InstanceDefinitionContainer
               @name={{@cardInstance.title}}
               @fileExtension='.JSON'
-              @realmInfo={{this.args.realmInfo}}
+              @realmInfo={{@realmInfo}}
               @infoText={{this.lastModified}}
               @actions={{array
                 (hash label='Delete' handler=@delete icon='icon-trash')

From 9133227f0dcc9ebcb91b41099e95eef2fe6f7ac7 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 18:21:27 +0800
Subject: [PATCH 11/29] refactor for better loading pattern and clearer role

---
 .../operator-mode/card-inheritance-panel.gts  | 84 +++++++++----------
 .../app/resources/adoption-chain-manager.ts   | 50 +++++------
 2 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index 2a87c445f66..0adc8dd06c2 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { type CardDef } from 'https://cardstack.com/base/card-api';
-import { type RealmInfo } from '@cardstack/runtime-common';
+import { BaseDef, type CardDef } from 'https://cardstack.com/base/card-api';
+import { cardTypeDisplayName, type RealmInfo } from '@cardstack/runtime-common';
 import {
   InstanceDefinitionContainer,
   ModuleDefinitionContainer,
@@ -30,16 +30,16 @@ export default class CardInheritancePanel extends Component<Signature> {
   @tracked cardInstance: CardDef | undefined;
   @service declare operatorModeStateService: OperatorModeStateService;
 
-  get adoptionChainTypes() {
-    return this.args.adoptionChainManager?.types;
+  get cardType() {
+    return this.args.adoptionChainManager?.selectedElement?.cardType;
   }
 
-  get cardType() {
-    return this.args.adoptionChainManager?.selectedCardType;
+  get elementsInFile() {
+    return this.args.adoptionChainManager?.elementsInFile;
   }
 
-  get cardTypes() {
-    return this.args.adoptionChainManager?.cardTypes;
+  get isLoading() {
+    return this.args.adoptionChainManager?.loading || this.cardType?.loading;
   }
 
   @action
@@ -51,12 +51,11 @@ export default class CardInheritancePanel extends Component<Signature> {
 
   <template>
     <div class='container' ...attributes>
-
-      {{#if @cardInstance}}
-        {{! JSON case when visting, eg Author/1.json }}
-        {{#if @adoptionChainManager.loadingAllChains}}
-          <div>Loading...</div>
-        {{else}}
+      {{#if this.isLoading}}
+        <div>Loading...</div>
+      {{else}}
+        {{#if @cardInstance}}
+          {{! JSON case when visting, eg Author/1.json }}
           <h3>Inheritance Panel</h3>
           <div class='inheritance-chain'>
             <InstanceDefinitionContainer
@@ -78,41 +77,37 @@ export default class CardInheritancePanel extends Component<Signature> {
               @url={{this.cardType.type.module}}
             />
           </div>
-        {{/if}}
-      {{else}}
-        {{! Module case when visting, eg author.gts }}
-        <h3>In This File</h3>
-        {{#if @adoptionChainManager.loadingAllChains}}
-          <div>Loading...</div>
         {{else}}
-          {{#each this.cardTypes as |ct|}}
+          {{! Module case when visting, eg author.gts }}
+          <h3>In This File</h3>
+          {{#each this.elementsInFile as |el|}}
             <div
               class='inheritance-chain
-                {{if (@adoptionChainManager.isSelected ct) "selected"}}'
+                {{if (@adoptionChainManager.isSelected el) "selected"}}'
             >
-              <div>{{ct.type.displayName}}</div>
+              <div>{{this.getCardTypeDisplayName el.card}}</div>
             </div>
           {{/each}}
-        {{/if}}
-        <h3>Inheritance Panel</h3>
-        <ModuleDefinitionContainer
-          @name={{this.cardType.type.displayName}}
-          @fileExtension={{this.cardType.type.moduleMeta.extension}}
-          @realmInfo={{this.cardType.type.moduleMeta.realmInfo}}
-          @isActive={{true}}
-          @actions={{array
-            (hash label='Delete' handler=@delete icon='icon-trash')
-          }}
-        />
-        {{#if this.cardType.type.super}}
-          <div>Inherits from</div>
-          <ClickableModuleDefinitionContainer
-            @name={{this.cardType.type.super.displayName}}
-            @fileExtension={{this.cardType.type.super.moduleMeta.extension}}
-            @realmInfo={{this.cardType.type.super.moduleMeta.realmInfo}}
-            @onSelectDefinition={{this.updateCodePath}}
-            @url={{this.cardType.type.super.module}}
+          <h3>Inheritance Panel</h3>
+          <ModuleDefinitionContainer
+            @name={{this.cardType.type.displayName}}
+            @fileExtension={{this.cardType.type.moduleMeta.extension}}
+            @realmInfo={{this.cardType.type.moduleMeta.realmInfo}}
+            @isActive={{true}}
+            @actions={{array
+              (hash label='Delete' handler=@delete icon='icon-trash')
+            }}
           />
+          {{#if this.cardType.type.super}}
+            <div>Inherits from</div>
+            <ClickableModuleDefinitionContainer
+              @name={{this.cardType.type.super.displayName}}
+              @fileExtension={{this.cardType.type.super.moduleMeta.extension}}
+              @realmInfo={{this.cardType.type.super.moduleMeta.realmInfo}}
+              @onSelectDefinition={{this.updateCodePath}}
+              @url={{this.cardType.type.super.module}}
+            />
+          {{/if}}
         {{/if}}
       {{/if}}
     </div>
@@ -147,4 +142,9 @@ export default class CardInheritancePanel extends Component<Signature> {
       return '';
     }
   }
+
+  getCardTypeDisplayName(t: typeof BaseDef) {
+    let card = new t();
+    return cardTypeDisplayName(card);
+  }
 }
diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
index aa495c4b3ee..cc412f41b83 100644
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -16,13 +16,21 @@ interface AdoptionChainManagerArgs {
   named: { importResource: ImportResource | undefined; loader: Loader };
 }
 
+type ElementInFile = CardInFile;
+
+// There should be a more generic interface to this
+interface CardInFile {
+  cardType: CardType;
+  card: typeof BaseDef;
+}
+
 // forwards the card type resource (doesn't care about the card type resource)
 export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
   importResource: ImportResource | undefined;
   @tracked cards: (typeof BaseDef)[] = [];
-  @tracked _cardTypes: CardType[] = []; // all cards exported in module
   ready: Promise<void> | undefined;
-  selections = new TrackedMap<CardType, boolean>();
+  @tracked elementsInFile: ElementInFile[] = [];
+  selections = new TrackedMap<ElementInFile, boolean>();
 
   modify(_positional: never[], named: AdoptionChainManagerArgs['named']) {
     this.importResource = named['importResource'];
@@ -33,45 +41,37 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     return this.load.isRunning;
   }
 
-  isSelected(cardType: CardType | undefined) {
-    if (cardType === undefined) {
+  isSelected(elementsInFile: CardInFile | undefined) {
+    if (elementsInFile === undefined) {
       return false;
     }
-    return this.selections.get(cardType) || false;
-  }
-
-  get cardTypes() {
-    return this._cardTypes;
+    return this.selections.get(elementsInFile) || false;
   }
 
-  get types() {
-    return this._cardTypes.map((t) => t.type);
-  }
-
-  get selectedCardType() {
-    for (let [type, selected] of this.selections.entries()) {
+  get selectedElement() {
+    for (let [el, selected] of this.selections.entries()) {
       if (selected) {
-        return type;
+        return el;
       }
     }
     return undefined;
   }
 
-  get loadingAllChains() {
-    return this._cardTypes.some((t) => t.loading);
-  }
-
   private load = restartableTask(async () => {
     await this.importResource?.loaded;
     let module = this.importResource?.module;
     if (module === undefined) {
       throw new Error('module is undefined');
     }
-    this.cards = cardsOrFieldsFromModule(module);
-    this._cardTypes = this.cards.map((c) => getCardType(this, () => c));
-    //setting default card type
-    if (this._cardTypes.length > 0) {
-      this.selections.set(this._cardTypes[0], true);
+    let cards = cardsOrFieldsFromModule(module);
+    cards.map((card) => {
+      this.elementsInFile.push({
+        cardType: getCardType(this, () => card),
+        card: card,
+      });
+    });
+    if (this.elementsInFile.length > 0) {
+      this.selections.set(this.elementsInFile[0], true);
     }
   });
 }

From 6efc1efc4069d1247dd7b1b67d3fd208f3f8a0ba Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 18:32:05 +0800
Subject: [PATCH 12/29] Change selections to a single object

---
 .../app/resources/adoption-chain-manager.ts   | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
index cc412f41b83..25fc8d4a2d8 100644
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -10,7 +10,6 @@ import {
   type CardType,
 } from '@cardstack/host/resources/card-type';
 import { restartableTask } from 'ember-concurrency';
-import { TrackedMap } from 'tracked-built-ins';
 
 interface AdoptionChainManagerArgs {
   named: { importResource: ImportResource | undefined; loader: Loader };
@@ -27,10 +26,9 @@ interface CardInFile {
 // forwards the card type resource (doesn't care about the card type resource)
 export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
   importResource: ImportResource | undefined;
-  @tracked cards: (typeof BaseDef)[] = [];
   ready: Promise<void> | undefined;
   @tracked elementsInFile: ElementInFile[] = [];
-  selections = new TrackedMap<ElementInFile, boolean>();
+  @tracked selected: ElementInFile | undefined;
 
   modify(_positional: never[], named: AdoptionChainManagerArgs['named']) {
     this.importResource = named['importResource'];
@@ -41,20 +39,12 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     return this.load.isRunning;
   }
 
-  isSelected(elementsInFile: CardInFile | undefined) {
-    if (elementsInFile === undefined) {
-      return false;
-    }
-    return this.selections.get(elementsInFile) || false;
+  get selectedElement() {
+    return this.selected;
   }
 
-  get selectedElement() {
-    for (let [el, selected] of this.selections.entries()) {
-      if (selected) {
-        return el;
-      }
-    }
-    return undefined;
+  isSelected(el: ElementInFile) {
+    return el == this.selected;
   }
 
   private load = restartableTask(async () => {
@@ -71,7 +61,7 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
       });
     });
     if (this.elementsInFile.length > 0) {
-      this.selections.set(this.elementsInFile[0], true);
+      this.selected = this.elementsInFile[0];
     }
   });
 }

From a664938d184e63c543dcaf8a614674f32ad5dbaf Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 18:37:55 +0800
Subject: [PATCH 13/29] might as well use a select button

---
 .../operator-mode/card-inheritance-panel.gts        | 13 ++++++++++++-
 .../host/app/resources/adoption-chain-manager.ts    |  8 +++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index 0adc8dd06c2..f93fd6dfad0 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -10,10 +10,15 @@ import {
 import { Ready } from '@cardstack/host/resources/file';
 import { tracked } from '@glimmer/tracking';
 import moment from 'moment';
-import { type AdoptionChainManager } from '@cardstack/host/resources/adoption-chain-manager';
+import {
+  type AdoptionChainManager,
+  type ElementInFile,
+} from '@cardstack/host/resources/adoption-chain-manager';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 import { hash, array } from '@ember/helper';
 import { action } from '@ember/object';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
 
 interface Signature {
   Element: HTMLElement;
@@ -49,6 +54,11 @@ export default class CardInheritancePanel extends Component<Signature> {
     }
   }
 
+  @action
+  select(el: ElementInFile) {
+    this.args.adoptionChainManager?.select(el);
+  }
+
   <template>
     <div class='container' ...attributes>
       {{#if this.isLoading}}
@@ -86,6 +96,7 @@ export default class CardInheritancePanel extends Component<Signature> {
                 {{if (@adoptionChainManager.isSelected el) "selected"}}'
             >
               <div>{{this.getCardTypeDisplayName el.card}}</div>
+              <button {{on 'click' (fn this.select el)}}>Select</button>
             </div>
           {{/each}}
           <h3>Inheritance Panel</h3>
diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
index 25fc8d4a2d8..038ed2ec61c 100644
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -10,12 +10,13 @@ import {
   type CardType,
 } from '@cardstack/host/resources/card-type';
 import { restartableTask } from 'ember-concurrency';
+import { action } from '@ember/object';
 
 interface AdoptionChainManagerArgs {
   named: { importResource: ImportResource | undefined; loader: Loader };
 }
 
-type ElementInFile = CardInFile;
+export type ElementInFile = CardInFile;
 
 // There should be a more generic interface to this
 interface CardInFile {
@@ -47,6 +48,11 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     return el == this.selected;
   }
 
+  @action
+  select(el: ElementInFile) {
+    this.selected = el;
+  }
+
   private load = restartableTask(async () => {
     await this.importResource?.loaded;
     let module = this.importResource?.module;

From 7d329015b063acfa7cbf8bfa761b53531e91972d Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 18:38:48 +0800
Subject: [PATCH 14/29] add comment

---
 packages/host/app/resources/adoption-chain-manager.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
index 038ed2ec61c..0107ec18bcd 100644
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -16,9 +16,8 @@ interface AdoptionChainManagerArgs {
   named: { importResource: ImportResource | undefined; loader: Loader };
 }
 
-export type ElementInFile = CardInFile;
+export type ElementInFile = CardInFile; // can add more types here
 
-// There should be a more generic interface to this
 interface CardInFile {
   cardType: CardType;
   card: typeof BaseDef;

From f8a2140f5c398fa293f2328665ee97928f9865e8 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 18:40:45 +0800
Subject: [PATCH 15/29] fix loading

---
 .../app/components/operator-mode/card-inheritance-panel.gts   | 4 +++-
 packages/host/app/resources/adoption-chain-manager.ts         | 2 +-
 packages/host/app/resources/card-type.ts                      | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index f93fd6dfad0..cbb19dc1df3 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -44,7 +44,9 @@ export default class CardInheritancePanel extends Component<Signature> {
   }
 
   get isLoading() {
-    return this.args.adoptionChainManager?.loading || this.cardType?.loading;
+    return (
+      this.args.adoptionChainManager?.isLoading || this.cardType?.isLoading
+    );
   }
 
   @action
diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
index 0107ec18bcd..4e5a2971d29 100644
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -35,7 +35,7 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     this.ready = this.load.perform();
   }
 
-  get loading() {
+  get isLoading() {
     return this.load.isRunning;
   }
 
diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index 3c1f35cf2c2..3256ab80e06 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -56,7 +56,7 @@ export class CardType extends Resource<Args> {
     this.ready = this.assembleType.perform(definition);
   }
 
-  get loading() {
+  get isLoading() {
     return this.assembleType.isRunning;
   }
 

From a1594a3d86d93387efc8159d3c9bd57527a6c516 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 18:45:16 +0800
Subject: [PATCH 16/29] place realm info deeper in definition info

---
 .../definition-container/base.gts             | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/host/app/components/operator-mode/definition-container/base.gts b/packages/host/app/components/operator-mode/definition-container/base.gts
index 67a822cf603..4a490cbc709 100644
--- a/packages/host/app/components/operator-mode/definition-container/base.gts
+++ b/packages/host/app/components/operator-mode/definition-container/base.gts
@@ -36,35 +36,32 @@ export class BaseDefinitionContainer extends Component<BaseSignature> {
   }
 
   <template>
-    {{#if @realmInfo}}
-      <div class='container {{if @isActive "active"}}' ...attributes>
-        <div class='banner'>
-          <Label class='banner-title'>
-            {{@title}}</Label>
-          <span
-            class='banner-title'
-            data-test-definition-file-extension
-          >{{@fileExtension}}</span>
-        </div>
-        <div class='content'>
-          <div class='definition-info'>
+    <div class='container {{if @isActive "active"}}' ...attributes>
+      <div class='banner'>
+        <Label class='banner-title'>
+          {{@title}}</Label>
+        <span
+          class='banner-title'
+          data-test-definition-file-extension
+        >{{@fileExtension}}</span>
+      </div>
+      <div class='content'>
+        <div class='definition-info'>
+          {{#if @realmInfo}}
             <div class='realm-info'>
               <img src={{this.realmIcon}} alt='realm-icon' />
               <Label class='realm-name' data-test-definition-realm-name>in
                 {{this.realmName}}</Label>
             </div>
-            <div
-              data-test-definition-name
-              class='definition-name'
-            >{{@name}}</div>
-          </div>
-          {{#if @isActive}}
-            {{yield to='activeContent'}}
           {{/if}}
+          <div data-test-definition-name class='definition-name'>{{@name}}</div>
         </div>
-
+        {{#if @isActive}}
+          {{yield to='activeContent'}}
+        {{/if}}
       </div>
-    {{/if}}
+
+    </div>
     <style>
       .container {
         background-color: var(--boxel-light);

From efb06916eecf7b1113ac24f579bf1084fee7c515 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 18:57:02 +0800
Subject: [PATCH 17/29] maintain selected card type api

---
 packages/host/app/resources/adoption-chain-manager.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
index 4e5a2971d29..2fcd0f83c9c 100644
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ b/packages/host/app/resources/adoption-chain-manager.ts
@@ -43,6 +43,10 @@ export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
     return this.selected;
   }
 
+  get selectedCardType() {
+    return this.selected?.cardType;
+  }
+
   isSelected(el: ElementInFile) {
     return el == this.selected;
   }

From 20f00a61c230812c72e97e1a65b642f86a66ca30 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 20:34:26 +0800
Subject: [PATCH 18/29] TODO for test

---
 packages/host/tests/acceptance/code-mode-test.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/host/tests/acceptance/code-mode-test.ts b/packages/host/tests/acceptance/code-mode-test.ts
index 635cee234f5..4ee4fa9706b 100644
--- a/packages/host/tests/acceptance/code-mode-test.ts
+++ b/packages/host/tests/acceptance/code-mode-test.ts
@@ -90,6 +90,7 @@ module('Acceptance | code mode tests', function (hooks) {
       'index.gts': indexCardSource,
       'pet-person.gts': personCardSource,
       'person.gts': personCardSource,
+      person: personCardSource, //TODO:CS-5982
       'person-entry.json': {
         data: {
           type: 'card',
@@ -587,11 +588,11 @@ module('Acceptance | code mode tests', function (hooks) {
     await waitUntil(() => find('[data-test-card-instance-definition]'));
 
     assert.dom('[data-test-card-module-definition]').includesText('Card');
-    assert
-      .dom(
-        '[data-test-card-module-definition] [data-test-definition-file-extension]',
-      )
-      .includesText('.gts');
+    // assert
+    //   .dom(
+    //     '[data-test-card-module-definition] [data-test-definition-file-extension]',
+    //   )
+    //   .includesText('.gts'); //TODO:CS-5982
     assert
       .dom(
         '[data-test-card-module-definition] [data-test-definition-realm-name]',

From d1df4384c9b3a3d5e4d71fd254eac52b4d23cf17 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 21:00:10 +0800
Subject: [PATCH 19/29] TODO test

---
 .../host/tests/acceptance/code-mode-test.ts   | 10 ++++-----
 .../tests/acceptance/operator-mode-test.ts    | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/host/tests/acceptance/code-mode-test.ts b/packages/host/tests/acceptance/code-mode-test.ts
index 4ee4fa9706b..ae951ad63b2 100644
--- a/packages/host/tests/acceptance/code-mode-test.ts
+++ b/packages/host/tests/acceptance/code-mode-test.ts
@@ -644,11 +644,11 @@ module('Acceptance | code mode tests', function (hooks) {
       .hasValue(`${testRealmURL}person.gts`);
 
     assert.dom('[data-test-card-module-definition]').hasClass('active');
-    assert
-      .dom(
-        '[data-test-card-module-definition] [data-test-definition-file-extension]',
-      )
-      .includesText('.gts');
+    // assert
+    //   .dom(
+    //     '[data-test-card-module-definition] [data-test-definition-file-extension]',
+    //   )
+    //   .includesText('.gts'); //TODO:CS-5982
 
     assert
       .dom('[data-test-card-url-bar-input]')
diff --git a/packages/host/tests/acceptance/operator-mode-test.ts b/packages/host/tests/acceptance/operator-mode-test.ts
index b2978e1e7a0..f70cb7555cd 100644
--- a/packages/host/tests/acceptance/operator-mode-test.ts
+++ b/packages/host/tests/acceptance/operator-mode-test.ts
@@ -74,6 +74,27 @@ module('Acceptance | operator mode tests', function (hooks) {
           }
         }
       `,
+      pet: `
+      import { contains, field, Component, CardDef } from "https://cardstack.com/base/card-api";
+      import StringCard from "https://cardstack.com/base/string";
+
+      export class Pet extends CardDef {
+        static displayName = 'Pet';
+        @field name = contains(StringCard);
+        @field title = contains(StringCard, {
+          computeVia: function (this: Pet) {
+            return this.name;
+          },
+        });
+        static embedded = class Embedded extends Component<typeof this> {
+          <template>
+            <h3 data-test-pet={{@model.name}}>
+              <@fields.name/>
+            </h3>
+          </template>
+        }
+      }
+    `,
       'shipping-info.gts': `
         import { contains, field, Component, FieldDef } from "https://cardstack.com/base/card-api";
         import StringCard from "https://cardstack.com/base/string";

From edd0e6090894b0c123c5b3e211db564a9afcda47 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 22:08:32 +0800
Subject: [PATCH 20/29] wokraround 4 redirect in host test

---
 packages/host/tests/helpers/index.gts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/host/tests/helpers/index.gts b/packages/host/tests/helpers/index.gts
index e8d9c62db7c..a2a45ab39f8 100644
--- a/packages/host/tests/helpers/index.gts
+++ b/packages/host/tests/helpers/index.gts
@@ -8,6 +8,7 @@ import {
   createResponse,
   RealmInfo,
   Deferred,
+  executableExtensions,
 } from '@cardstack/runtime-common';
 import GlimmerComponent from '@glimmer/component';
 import { type TestContext, visit } from '@ember/test-helpers';
@@ -450,10 +451,12 @@ export class TestRealmAdapter implements RealmAdapter {
         throw new Error(`tried to use file as directory`);
       }
       this.#lastModified.set(this.#paths.fileURL(path).href, now);
-      if (typeof content === 'string') {
-        dir[last] = content;
-      } else {
-        dir[last] = JSON.stringify(content);
+      content = typeof content === 'string' ? content : JSON.stringify(content);
+      dir[last] = content;
+      // for handling redirects
+      let [lastWithoutExtension, extension] = last.split('.');
+      if (executableExtensions.includes(extension)) {
+        dir[lastWithoutExtension] = content;
       }
     }
   }

From 346767f373a76b0c730b65bac041649ef9e112a5 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 22:09:03 +0800
Subject: [PATCH 21/29] Revert "TODO test"

This reverts commit d1df4384c9b3a3d5e4d71fd254eac52b4d23cf17.
---
 .../host/tests/acceptance/code-mode-test.ts   | 10 ++++-----
 .../tests/acceptance/operator-mode-test.ts    | 21 -------------------
 2 files changed, 5 insertions(+), 26 deletions(-)

diff --git a/packages/host/tests/acceptance/code-mode-test.ts b/packages/host/tests/acceptance/code-mode-test.ts
index ae951ad63b2..4ee4fa9706b 100644
--- a/packages/host/tests/acceptance/code-mode-test.ts
+++ b/packages/host/tests/acceptance/code-mode-test.ts
@@ -644,11 +644,11 @@ module('Acceptance | code mode tests', function (hooks) {
       .hasValue(`${testRealmURL}person.gts`);
 
     assert.dom('[data-test-card-module-definition]').hasClass('active');
-    // assert
-    //   .dom(
-    //     '[data-test-card-module-definition] [data-test-definition-file-extension]',
-    //   )
-    //   .includesText('.gts'); //TODO:CS-5982
+    assert
+      .dom(
+        '[data-test-card-module-definition] [data-test-definition-file-extension]',
+      )
+      .includesText('.gts');
 
     assert
       .dom('[data-test-card-url-bar-input]')
diff --git a/packages/host/tests/acceptance/operator-mode-test.ts b/packages/host/tests/acceptance/operator-mode-test.ts
index f70cb7555cd..b2978e1e7a0 100644
--- a/packages/host/tests/acceptance/operator-mode-test.ts
+++ b/packages/host/tests/acceptance/operator-mode-test.ts
@@ -74,27 +74,6 @@ module('Acceptance | operator mode tests', function (hooks) {
           }
         }
       `,
-      pet: `
-      import { contains, field, Component, CardDef } from "https://cardstack.com/base/card-api";
-      import StringCard from "https://cardstack.com/base/string";
-
-      export class Pet extends CardDef {
-        static displayName = 'Pet';
-        @field name = contains(StringCard);
-        @field title = contains(StringCard, {
-          computeVia: function (this: Pet) {
-            return this.name;
-          },
-        });
-        static embedded = class Embedded extends Component<typeof this> {
-          <template>
-            <h3 data-test-pet={{@model.name}}>
-              <@fields.name/>
-            </h3>
-          </template>
-        }
-      }
-    `,
       'shipping-info.gts': `
         import { contains, field, Component, FieldDef } from "https://cardstack.com/base/card-api";
         import StringCard from "https://cardstack.com/base/string";

From cc90d68bb5603bebae30c5df573083e288ac105b Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Wed, 20 Sep 2023 22:09:17 +0800
Subject: [PATCH 22/29] Revert "TODO for test"

This reverts commit 20f00a61c230812c72e97e1a65b642f86a66ca30.
---
 packages/host/tests/acceptance/code-mode-test.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/host/tests/acceptance/code-mode-test.ts b/packages/host/tests/acceptance/code-mode-test.ts
index 4ee4fa9706b..635cee234f5 100644
--- a/packages/host/tests/acceptance/code-mode-test.ts
+++ b/packages/host/tests/acceptance/code-mode-test.ts
@@ -90,7 +90,6 @@ module('Acceptance | code mode tests', function (hooks) {
       'index.gts': indexCardSource,
       'pet-person.gts': personCardSource,
       'person.gts': personCardSource,
-      person: personCardSource, //TODO:CS-5982
       'person-entry.json': {
         data: {
           type: 'card',
@@ -588,11 +587,11 @@ module('Acceptance | code mode tests', function (hooks) {
     await waitUntil(() => find('[data-test-card-instance-definition]'));
 
     assert.dom('[data-test-card-module-definition]').includesText('Card');
-    // assert
-    //   .dom(
-    //     '[data-test-card-module-definition] [data-test-definition-file-extension]',
-    //   )
-    //   .includesText('.gts'); //TODO:CS-5982
+    assert
+      .dom(
+        '[data-test-card-module-definition] [data-test-definition-file-extension]',
+      )
+      .includesText('.gts');
     assert
       .dom(
         '[data-test-card-module-definition] [data-test-definition-realm-name]',

From aa1e1fb95f2c11d04b4dfbf3dfb72dee6f8c5b0e Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Fri, 22 Sep 2023 22:29:47 +0800
Subject: [PATCH 23/29] fix due to card no longer being resource. TODO: solve
 .json identification

---
 .../app/components/operator-mode/card-inheritance-panel.gts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/host/app/components/operator-mode/card-inheritance-panel.gts b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
index cbb19dc1df3..5b2b8377856 100644
--- a/packages/host/app/components/operator-mode/card-inheritance-panel.gts
+++ b/packages/host/app/components/operator-mode/card-inheritance-panel.gts
@@ -56,6 +56,10 @@ export default class CardInheritancePanel extends Component<Signature> {
     }
   }
 
+  get isCardInstance() {
+    return this.args.readyFile.url.endsWith('.json');
+  }
+
   @action
   select(el: ElementInFile) {
     this.args.adoptionChainManager?.select(el);
@@ -66,7 +70,7 @@ export default class CardInheritancePanel extends Component<Signature> {
       {{#if this.isLoading}}
         <div>Loading...</div>
       {{else}}
-        {{#if @cardInstance}}
+        {{#if this.isCardInstance}}
           {{! JSON case when visting, eg Author/1.json }}
           <h3>Inheritance Panel</h3>
           <div class='inheritance-chain'>

From 466ee513b60b53482b256a496923d37e40d449cb Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Mon, 25 Sep 2023 21:02:44 +0800
Subject: [PATCH 24/29] Fix test using a mock redirected response (#667)

* register a redirect handler that returns redirected response

* revert original change

* fix

* fix

* fix

* fix lint

* fix

* reposition

* clean up & organise useage

* fix file response.url not returning

* fix url parts using pathname

* arg to pass in realm

* make realm url explicit to guard from the wrong use of handle
---
 packages/host/app/resources/file.ts           | 15 +--
 .../host/tests/acceptance/code-mode-test.ts   | 10 ++
 .../tests/acceptance/operator-mode-test.ts    | 10 ++
 packages/host/tests/helpers/index.gts         | 95 +++++++++++++++++--
 .../components/operator-mode-test.gts         | 13 ++-
 packages/runtime-common/loader.ts             |  4 +-
 packages/runtime-common/realm.ts              | 46 +++++----
 7 files changed, 147 insertions(+), 46 deletions(-)

diff --git a/packages/host/app/resources/file.ts b/packages/host/app/resources/file.ts
index a74d5c68811..3ab09484567 100644
--- a/packages/host/app/resources/file.ts
+++ b/packages/host/app/resources/file.ts
@@ -9,7 +9,6 @@ import type MessageService from '../services/message-service';
 import type CardService from '@cardstack/host/services/card-service';
 import type RecentFilesService from '@cardstack/host/services/recent-files-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
-import config from '@cardstack/host/config/environment';
 
 const log = logger('resource:file');
 
@@ -156,24 +155,14 @@ class _FileResource extends Resource<Args> {
 
     let content = await response.text();
     let self = this;
-    // Inside test, The loader occasionally doesn't do a network request and creates Response object manually
-    // This means that reading response.url will give url = '' and we cannot manually alter the url in Response
-    // The below condition is a workaround
-    // TODO: CS-5982
-    let url: string;
-    if (config.environment === 'test') {
-      url = response.url === '' ? this._url : response.url;
-    } else {
-      url = response.url;
-    }
 
     this.updateState({
       state: 'ready',
       lastModified,
       realmURL,
       content,
-      name: url.split('/').pop()!,
-      url: url,
+      name: response.url.split('/').pop()!,
+      url: response.url,
       write(content: string, flushLoader?: true) {
         self.writing = self.writeTask.perform(this, content, flushLoader);
       },
diff --git a/packages/host/tests/acceptance/code-mode-test.ts b/packages/host/tests/acceptance/code-mode-test.ts
index 773b9cb61e4..4b769bd1b26 100644
--- a/packages/host/tests/acceptance/code-mode-test.ts
+++ b/packages/host/tests/acceptance/code-mode-test.ts
@@ -15,6 +15,8 @@ import {
   setupLocalIndexing,
   setupMockMessageService,
   testRealmURL,
+  sourceFetchRedirectHandle,
+  sourceFetchReturnUrlHandle,
 } from '../helpers';
 import stringify from 'safe-stable-stringify';
 import { Realm } from '@cardstack/runtime-common/realm';
@@ -169,6 +171,14 @@ module('Acceptance | code mode tests', function (hooks) {
 
     realm = await TestRealm.createWithAdapter(adapter, loader, this.owner, {
       isAcceptanceTest: true,
+      overridingHandlers: [
+        async (req: Request) => {
+          return sourceFetchRedirectHandle(req, adapter, testRealmURL);
+        },
+        async (req: Request) => {
+          return sourceFetchReturnUrlHandle(req, realm.maybeHandle.bind(realm));
+        },
+      ],
     });
     await realm.ready;
   });
diff --git a/packages/host/tests/acceptance/operator-mode-test.ts b/packages/host/tests/acceptance/operator-mode-test.ts
index d1a7a994733..53de6467c6d 100644
--- a/packages/host/tests/acceptance/operator-mode-test.ts
+++ b/packages/host/tests/acceptance/operator-mode-test.ts
@@ -22,6 +22,8 @@ import {
   waitForSyntaxHighlighting,
   type TestContextWithSSE,
   type TestContextWithSave,
+  sourceFetchRedirectHandle,
+  sourceFetchReturnUrlHandle,
 } from '../helpers';
 import { type LooseSingleCardDocument } from '@cardstack/runtime-common';
 import stringify from 'safe-stable-stringify';
@@ -259,6 +261,14 @@ module('Acceptance | operator mode tests', function (hooks) {
 
     realm = await TestRealm.createWithAdapter(adapter, loader, this.owner, {
       isAcceptanceTest: true,
+      overridingHandlers: [
+        async (req: Request) => {
+          return sourceFetchRedirectHandle(req, adapter, testRealmURL);
+        },
+        async (req: Request) => {
+          return sourceFetchReturnUrlHandle(req, realm.maybeHandle.bind(realm));
+        },
+      ],
     });
     await realm.ready;
   });
diff --git a/packages/host/tests/helpers/index.gts b/packages/host/tests/helpers/index.gts
index 40aa2978766..1acc330ddb6 100644
--- a/packages/host/tests/helpers/index.gts
+++ b/packages/host/tests/helpers/index.gts
@@ -1,4 +1,4 @@
-import { parse } from 'date-fns';
+import { formatRFC7231, parse } from 'date-fns';
 import {
   Kind,
   RealmAdapter,
@@ -9,7 +9,10 @@ import {
   RealmInfo,
   Deferred,
   executableExtensions,
+  SupportedMimeType,
 } from '@cardstack/runtime-common';
+import { type RequestHandler } from '@cardstack/runtime-common/loader';
+import { getFileWithFallbacks } from '@cardstack/runtime-common/stream';
 import GlimmerComponent from '@glimmer/component';
 import { type TestContext, visit } from '@ember/test-helpers';
 import { LocalPath } from '@cardstack/runtime-common/paths';
@@ -127,6 +130,7 @@ interface Options {
   realmURL?: string;
   isAcceptanceTest?: true;
   onFetch?: (req: Request) => Promise<Request>;
+  overridingHandlers?: RequestHandler[];
 }
 
 // We use a rendered component to facilitate our indexing (this emulates
@@ -164,7 +168,14 @@ export const TestRealm = {
     } else {
       await makeRenderer();
     }
-    return makeRealm(adapter, loader, owner, opts?.realmURL, opts?.onFetch);
+    return makeRealm(
+      adapter,
+      loader,
+      owner,
+      opts?.realmURL,
+      opts?.onFetch,
+      opts?.overridingHandlers,
+    );
   },
 };
 
@@ -362,6 +373,7 @@ function makeRealm(
   owner: Owner,
   realmURL = testRealmURL,
   onFetch?: (req: Request) => Promise<Request>,
+  overridingHandlers?: RequestHandler[],
 ) {
   let localIndexer = owner.lookup(
     'service:local-indexer',
@@ -380,6 +392,9 @@ function makeRealm(
       return realm.maybeHandle(req);
     });
   }
+  if (overridingHandlers && overridingHandlers.length > 0) {
+    loader.prependURLHandlers(overridingHandlers);
+  }
   realm = new Realm(
     realmURL,
     adapter,
@@ -451,12 +466,10 @@ export class TestRealmAdapter implements RealmAdapter {
         throw new Error(`tried to use file as directory`);
       }
       this.#lastModified.set(this.#paths.fileURL(path).href, now);
-      content = typeof content === 'string' ? content : JSON.stringify(content);
-      dir[last] = content;
-      // for handling redirects
-      let [lastWithoutExtension, extension] = last.split('.');
-      if (executableExtensions.includes(extension)) {
-        dir[lastWithoutExtension] = content;
+      if (typeof content === 'string') {
+        dir[last] = content;
+      } else {
+        dir[last] = JSON.stringify(content);
       }
     }
   }
@@ -670,7 +683,67 @@ export function diff(
   };
 }
 
-export class MockResponse extends Response {
+function isCardSourceFetch(request: Request) {
+  return (
+    request.method === 'GET' &&
+    request.headers.get('Accept') === SupportedMimeType.CardSource &&
+    request.url.includes(testRealmURL)
+  );
+}
+
+export async function sourceFetchReturnUrlHandle(
+  request: Request,
+  defaultHandle: (req: Request) => Promise<Response | null>,
+) {
+  if (isCardSourceFetch(request)) {
+    let r = await defaultHandle(request);
+    if (r) {
+      return new MockRedirectedResponse(r.body, r, request.url) as Response;
+    }
+  }
+  return null;
+}
+
+export async function sourceFetchRedirectHandle(
+  request: Request,
+  adapter: RealmAdapter,
+  realmURL: string,
+) {
+  let urlParts = new URL(request.url).pathname.split('.');
+  if (
+    isCardSourceFetch(request) &&
+    urlParts.length === 1 //has no extension
+  ) {
+    const realmPaths = new RealmPaths(realmURL);
+    const localPath = realmPaths.local(request.url);
+    const ref = await getFileWithFallbacks(
+      localPath,
+      adapter.openFile.bind(adapter),
+      executableExtensions,
+    );
+    let maybeExtension = ref?.path.split('.').pop();
+    let responseUrl = maybeExtension
+      ? `${request.url}.${maybeExtension}`
+      : request.url;
+
+    if (
+      ref &&
+      (ref.content instanceof ReadableStream ||
+        ref.content instanceof Uint8Array ||
+        typeof ref.content === 'string')
+    ) {
+      let r = createResponse(realmURL, ref.content, {
+        headers: {
+          'last-modified': formatRFC7231(ref.lastModified),
+        },
+      });
+      return new MockRedirectedResponse(r.body, r, responseUrl) as Response;
+    }
+  }
+  return null;
+}
+
+export class MockRedirectedResponse extends Response {
   private _mockUrl: string;
 
   constructor(
@@ -682,6 +755,10 @@ export class MockResponse extends Response {
     this._mockUrl = url || '';
   }
 
+  get redirected() {
+    return true;
+  }
+
   get url() {
     return this._mockUrl;
   }
diff --git a/packages/host/tests/integration/components/operator-mode-test.gts b/packages/host/tests/integration/components/operator-mode-test.gts
index 934b3f84abf..c4465c3e0a4 100644
--- a/packages/host/tests/integration/components/operator-mode-test.gts
+++ b/packages/host/tests/integration/components/operator-mode-test.gts
@@ -17,6 +17,8 @@ import {
   TestRealmAdapter,
   TestRealm,
   type TestContextWithSave,
+  sourceFetchRedirectHandle,
+  sourceFetchReturnUrlHandle,
 } from '../../helpers';
 import { MockMatrixService } from '../../helpers/mock-matrix-service';
 import {
@@ -622,7 +624,16 @@ module('Integration | operator-mode', function (hooks) {
       '.realm.json': `{ "name": "${realmName}", "iconURL": "https://example-icon.test" }`,
       ...Object.fromEntries(personCards),
     });
-    realm = await TestRealm.createWithAdapter(adapter, loader, this.owner);
+    realm = await TestRealm.createWithAdapter(adapter, loader, this.owner, {
+      overridingHandlers: [
+        async (req: Request) => {
+          return sourceFetchRedirectHandle(req, adapter, testRealmURL);
+        },
+        async (req: Request) => {
+          return sourceFetchReturnUrlHandle(req, realm.maybeHandle.bind(realm));
+        },
+      ],
+    });
     await realm.ready;
 
     setCardInOperatorModeState = async (cardURL: string) => {
diff --git a/packages/runtime-common/loader.ts b/packages/runtime-common/loader.ts
index 9d94572e9aa..de44b6d4b59 100644
--- a/packages/runtime-common/loader.ts
+++ b/packages/runtime-common/loader.ts
@@ -152,8 +152,8 @@ export class Loader {
     this.urlHandlers.push(handler);
   }
 
-  setURLHandlers(handlers: RequestHandler[]) {
-    this.urlHandlers = handlers;
+  prependURLHandlers(handlers: RequestHandler[]) {
+    this.urlHandlers = [...handlers, ...this.urlHandlers];
   }
 
   shimModule(moduleIdentifier: string, module: Record<string, any>) {
diff --git a/packages/runtime-common/realm.ts b/packages/runtime-common/realm.ts
index 001a3ec0a48..0d386e2cd70 100644
--- a/packages/runtime-common/realm.ts
+++ b/packages/runtime-common/realm.ts
@@ -438,29 +438,33 @@ export class Realm {
     if (this.#router.handles(request)) {
       return this.#router.handle(request);
     } else {
-      let url = new URL(request.url);
-      let localPath = this.paths.local(url);
-      let maybeHandle = await this.getFileWithFallbacks(
-        localPath,
-        executableExtensions,
-      );
+      return this.fallbackHandle(request);
+    }
+  }
 
-      if (!maybeHandle) {
-        return notFound(this.url, request, `${request.url} not found`);
-      }
+  async fallbackHandle(request: Request) {
+    let url = new URL(request.url);
+    let localPath = this.paths.local(url);
+    let maybeHandle = await this.getFileWithFallbacks(
+      localPath,
+      executableExtensions,
+    );
 
-      let handle = maybeHandle;
-
-      if (
-        executableExtensions.some((extension) =>
-          handle.path.endsWith(extension),
-        ) &&
-        !localPath.startsWith(assetsDir)
-      ) {
-        return this.makeJS(await fileContentToText(handle), handle.path);
-      } else {
-        return await this.serveLocalFile(handle);
-      }
+    if (!maybeHandle) {
+      return notFound(this.url, request, `${request.url} not found`);
+    }
+
+    let handle = maybeHandle;
+
+    if (
+      executableExtensions.some((extension) =>
+        handle.path.endsWith(extension),
+      ) &&
+      !localPath.startsWith(assetsDir)
+    ) {
+      return this.makeJS(await fileContentToText(handle), handle.path);
+    } else {
+      return await this.serveLocalFile(handle);
     }
   }
 

From e6ef76eef154f68323622e8ed37e0b167453ea80 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Mon, 25 Sep 2023 21:09:20 +0800
Subject: [PATCH 25/29] use pathname

---
 packages/host/app/resources/card-type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index aa589b9a359..9285f9aa916 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -155,7 +155,7 @@ export class CardType extends Resource<Args> {
     );
     return {
       realmInfo,
-      extension: '.' + response.url.split('.').pop() || '',
+      extension: '.' + new URL(response.url).pathname.split('.').pop() || '',
     };
   };
 }

From 3debe8ecf2e60d01c62f9f60d9128d707de49e85 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 13:17:34 +0800
Subject: [PATCH 26/29] move everything to code mode

---
 .../components/operator-mode/code-mode.gts    | 109 ++++++++++++++++--
 .../components/operator-mode/detail-panel.gts |  32 +++--
 .../app/resources/adoption-chain-manager.ts   | 103 -----------------
 3 files changed, 111 insertions(+), 133 deletions(-)
 delete mode 100644 packages/host/app/resources/adoption-chain-manager.ts

diff --git a/packages/host/app/components/operator-mode/code-mode.gts b/packages/host/app/components/operator-mode/code-mode.gts
index a78143fba70..ddea904752f 100644
--- a/packages/host/app/components/operator-mode/code-mode.gts
+++ b/packages/host/app/components/operator-mode/code-mode.gts
@@ -55,10 +55,12 @@ import {
   type FileResource,
 } from '@cardstack/host/resources/file';
 
-import { importResource } from '@cardstack/host/resources/import';
+import {
+  importResource,
+  type ImportResource,
+} from '@cardstack/host/resources/import';
 
 import { maybe } from '@cardstack/host/resources/maybe';
-import { adoptionChainManager } from '@cardstack/host/resources/adoption-chain-manager';
 
 import type CardService from '@cardstack/host/services/card-service';
 
@@ -85,6 +87,12 @@ import CardPreviewPanel from './card-preview-panel';
 import CardURLBar from './card-url-bar';
 import DetailPanel from './detail-panel';
 
+import {
+  getCardType,
+  type CardType,
+} from '@cardstack/host/resources/card-type';
+import { type BaseDef } from 'https://cardstack.com/base/card-api';
+
 interface Signature {
   Args: {
     delete: (card: CardDef, afterDelete?: () => void) => void;
@@ -111,6 +119,16 @@ const defaultPanelWidths: PanelWidths = {
   emptyCodeModePanel: '80%',
 };
 
+interface ExportedCard {
+  cardType: CardType;
+  card: typeof BaseDef;
+}
+
+// Element
+// - exported / unexported card or field
+// - exported class or function
+export type ElementInFile = ExportedCard; // can add more types here
+
 export default class CodeMode extends Component<Signature> {
   @service declare monacoService: MonacoService;
   @service declare cardService: CardService;
@@ -122,6 +140,7 @@ export default class CodeMode extends Component<Signature> {
   @tracked private loadFileError: string | null = null;
   @tracked private maybeMonacoSDK: MonacoSDK | undefined;
   @tracked private card: CardDef | undefined;
+  @tracked private selectedElement: ElementInFile | undefined;
   @tracked cardError: Error | undefined;
   private hasUnsavedSourceChanges = false;
   private hasUnsavedCardChanges = false;
@@ -298,6 +317,50 @@ export default class CodeMode extends Component<Signature> {
     return state;
   });
 
+  @use private elements = resource(() => {
+    if (!this.importedModule) {
+      return new TrackedObject({
+        error: null,
+        isLoading: false,
+        value: [],
+        load: () => Promise<void>,
+      });
+    }
+
+    const state: {
+      isLoading: boolean;
+      value: RealmInfo | null;
+      error: Error | undefined;
+      load: () => Promise<void>;
+    } = new TrackedObject({
+      isLoading: true,
+      value: [],
+      error: undefined,
+      load: async () => {
+        state.isLoading = true;
+        if (this.importedModule === undefined) {
+          return [];
+        }
+        await this.importedModule.loaded;
+        let module = this.importedModule?.module;
+        if (module === undefined) {
+          return [];
+        }
+        let cards = cardsOrFieldsFromModule(module);
+        let elements = cards.map((card) => {
+          return {
+            cardType: getCardType(this, () => card),
+            card: card,
+          };
+        });
+        state.value = elements;
+      },
+    });
+
+    state.load();
+    return state;
+  });
+
   private openFile = maybe(this, (context) => {
     if (!this.codePath) {
       this.setFileView('browser');
@@ -335,14 +398,6 @@ export default class CodeMode extends Component<Signature> {
     return undefined;
   });
 
-  @use adoptionChainManager = resource(() => {
-    if (this.importedModule) {
-      return adoptionChainManager(this, this.importedModule);
-    } else {
-      return undefined;
-    }
-  });
-
   private maybeReloadCard = restartableTask(async (id: string) => {
     if (this.card?.id === id) {
       try {
@@ -419,6 +474,25 @@ export default class CodeMode extends Component<Signature> {
     return this.card;
   }
 
+  private get selectedElementInFile() {
+    if (this.selectedElement) {
+      return this.selectedElement;
+    } else {
+      return this.elementsInFile.length > 0
+        ? this.elementsInFile[0]
+        : undefined;
+    }
+  }
+
+  @action
+  private selectElementInFile(el: ElementInFile) {
+    this.selectedElement = el;
+  }
+
+  get elementsInFile() {
+    return this.elements.value;
+  }
+
   private loadIfDifferent = restartableTask(
     async (url: URL, incomingDoc?: SingleCardDocument) => {
       await this.withTestWaiters(async () => {
@@ -690,7 +764,9 @@ export default class CodeMode extends Component<Signature> {
                         @cardInstance={{this.card}}
                         @readyFile={{this.readyFile}}
                         @realmInfo={{this.realmInfo}}
-                        @adoptionChainManager={{this.adoptionChainManager}}
+                        @selectedElement={{this.selectedElementInFile}}
+                        @elements={{this.elementsInFile}}
+                        @selectElement={{this.selectElementInFile}}
                         @delete={{this.delete}}
                         data-test-card-inheritance-panel
                       />
@@ -1023,3 +1099,14 @@ function comparableSerialization(doc: LooseSingleCardDocument) {
   }
   return doc;
 }
+
+function isCardOrField(cardOrField: any): cardOrField is typeof BaseDef {
+  return typeof cardOrField === 'function' && 'baseDef' in cardOrField;
+}
+
+function cardsOrFieldsFromModule(
+  module: Record<string, any>,
+  _never?: never, // glint insists that w/o this last param that there are actually no params
+): (typeof BaseDef)[] {
+  return Object.values(module).filter(isCardOrField);
+}
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 6adfe082940..3a91d6fa718 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -20,10 +20,7 @@ import {
 } from './definition-container';
 // @ts-expect-error cached doesn't have type yet
 import { tracked, cached } from '@glimmer/tracking';
-import {
-  type AdoptionChainManager,
-  type ElementInFile,
-} from '@cardstack/host/resources/adoption-chain-manager';
+import { type ElementInFile } from '@cardstack/host/resources/adoption-chain-manager';
 
 import type OperatorModeStateService from '../../services/operator-mode-state-service';
 
@@ -33,7 +30,9 @@ interface Signature {
     realmInfo: RealmInfo | null;
     readyFile: Ready;
     cardInstance: CardDef | undefined;
-    adoptionChainManager?: AdoptionChainManager;
+    selectedElement?: ElementInFile;
+    elements: ElementInFile[];
+    selectElement: (el: ElementInFile) => void;
     delete: () => void;
   };
 }
@@ -43,17 +42,11 @@ export default class DetailPanel extends Component<Signature> {
   private lastModified = lastModifiedDate(this, () => this.args.readyFile);
 
   get cardType() {
-    return this.args.adoptionChainManager?.selectedElement?.cardType;
-  }
-
-  get elementsInFile() {
-    return this.args.adoptionChainManager?.elementsInFile;
+    return this.args.selectedElement?.cardType;
   }
 
   get isLoading() {
-    return (
-      this.args.adoptionChainManager?.isLoading || this.cardType?.isLoading
-    );
+    return this.cardType?.isLoading;
   }
 
   @action
@@ -68,8 +61,8 @@ export default class DetailPanel extends Component<Signature> {
   }
 
   @action
-  select(el: ElementInFile) {
-    this.args.adoptionChainManager?.select(el);
+  isSelected(el: ElementInFile) {
+    return this.args.selectedElement === el;
   }
   get isModule() {
     return hasExecutableExtension(this.args.readyFile.url);
@@ -114,13 +107,14 @@ export default class DetailPanel extends Component<Signature> {
         {{else if this.isModule}}
           {{! Module case when visting, eg author.gts }}
           <h3>In This File</h3>
-          {{#each this.elementsInFile as |el|}}
+          {{#each @elements as |el|}}
             <div
-              class='inheritance-chain
-                {{if (@adoptionChainManager.isSelected el) "selected"}}'
+              class='inheritance-chain {{if (this.isSelected el) "selected"}}'
             >
               <div>{{this.getCardTypeDisplayName el.card}}</div>
-              <button {{on 'click' (fn this.select el)}}>Select</button>
+              <button
+                {{on 'click' (fn this.args.selectElement el)}}
+              >Select</button>
             </div>
           {{/each}}
           <h3>Inheritance Panel</h3>
diff --git a/packages/host/app/resources/adoption-chain-manager.ts b/packages/host/app/resources/adoption-chain-manager.ts
deleted file mode 100644
index 2fcd0f83c9c..00000000000
--- a/packages/host/app/resources/adoption-chain-manager.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { ImportResource } from './import';
-import { Resource } from 'ember-resources';
-import { tracked } from '@glimmer/tracking';
-import { Loader } from '@cardstack/runtime-common/loader';
-import { getOwner } from '@ember/application';
-import { type BaseDef } from 'https://cardstack.com/base/card-api';
-import type LoaderService from '../services/loader-service';
-import {
-  getCardType,
-  type CardType,
-} from '@cardstack/host/resources/card-type';
-import { restartableTask } from 'ember-concurrency';
-import { action } from '@ember/object';
-
-interface AdoptionChainManagerArgs {
-  named: { importResource: ImportResource | undefined; loader: Loader };
-}
-
-export type ElementInFile = CardInFile; // can add more types here
-
-interface CardInFile {
-  cardType: CardType;
-  card: typeof BaseDef;
-}
-
-// forwards the card type resource (doesn't care about the card type resource)
-export class AdoptionChainManager extends Resource<AdoptionChainManagerArgs> {
-  importResource: ImportResource | undefined;
-  ready: Promise<void> | undefined;
-  @tracked elementsInFile: ElementInFile[] = [];
-  @tracked selected: ElementInFile | undefined;
-
-  modify(_positional: never[], named: AdoptionChainManagerArgs['named']) {
-    this.importResource = named['importResource'];
-    this.ready = this.load.perform();
-  }
-
-  get isLoading() {
-    return this.load.isRunning;
-  }
-
-  get selectedElement() {
-    return this.selected;
-  }
-
-  get selectedCardType() {
-    return this.selected?.cardType;
-  }
-
-  isSelected(el: ElementInFile) {
-    return el == this.selected;
-  }
-
-  @action
-  select(el: ElementInFile) {
-    this.selected = el;
-  }
-
-  private load = restartableTask(async () => {
-    await this.importResource?.loaded;
-    let module = this.importResource?.module;
-    if (module === undefined) {
-      throw new Error('module is undefined');
-    }
-    let cards = cardsOrFieldsFromModule(module);
-    cards.map((card) => {
-      this.elementsInFile.push({
-        cardType: getCardType(this, () => card),
-        card: card,
-      });
-    });
-    if (this.elementsInFile.length > 0) {
-      this.selected = this.elementsInFile[0];
-    }
-  });
-}
-
-function cardsOrFieldsFromModule(
-  module: Record<string, any>,
-  _never?: never, // glint insists that w/o this last param that there are actually no params
-): (typeof BaseDef)[] {
-  return Object.values(module).filter(isCardOrField);
-}
-
-export function isCardOrField(cardOrField: any): cardOrField is typeof BaseDef {
-  return typeof cardOrField === 'function' && 'baseDef' in cardOrField;
-}
-
-export function adoptionChainManager(
-  parent: object,
-  importResource: ImportResource | undefined,
-) {
-  return AdoptionChainManager.from(parent, () => ({
-    named: {
-      importResource,
-      loader: (
-        (getOwner(parent) as any).lookup(
-          'service:loader-service',
-        ) as LoaderService
-      ).loader,
-    },
-  })) as AdoptionChainManager;
-}

From c9309bd369b731cc6ac80237102dc3a37cdbb072 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 15:02:09 +0800
Subject: [PATCH 27/29] Fix lint

---
 .../components/operator-mode/code-mode.gts    | 45 +++++++++++--------
 .../definition-container/index.gts            |  1 -
 .../components/operator-mode/detail-panel.gts |  8 +++-
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/host/app/components/operator-mode/code-mode.gts b/packages/host/app/components/operator-mode/code-mode.gts
index ddea904752f..c96b898bd72 100644
--- a/packages/host/app/components/operator-mode/code-mode.gts
+++ b/packages/host/app/components/operator-mode/code-mode.gts
@@ -55,10 +55,7 @@ import {
   type FileResource,
 } from '@cardstack/host/resources/file';
 
-import {
-  importResource,
-  type ImportResource,
-} from '@cardstack/host/resources/import';
+import { importResource } from '@cardstack/host/resources/import';
 
 import { maybe } from '@cardstack/host/resources/maybe';
 
@@ -329,7 +326,7 @@ export default class CodeMode extends Component<Signature> {
 
     const state: {
       isLoading: boolean;
-      value: RealmInfo | null;
+      value: ElementInFile[] | null;
       error: Error | undefined;
       load: () => Promise<void>;
     } = new TrackedObject({
@@ -339,21 +336,27 @@ export default class CodeMode extends Component<Signature> {
       load: async () => {
         state.isLoading = true;
         if (this.importedModule === undefined) {
-          return [];
+          state.value = [];
+          return;
         }
-        await this.importedModule.loaded;
-        let module = this.importedModule?.module;
-        if (module === undefined) {
-          return [];
+        try {
+          await this.importedModule.loaded;
+          let module = this.importedModule?.module;
+          if (module) {
+            let cards = cardsOrFieldsFromModule(module);
+            let elements: ElementInFile[] = cards.map((card) => {
+              return {
+                cardType: getCardType(this, () => card),
+                card: card,
+              };
+            });
+            state.value = elements;
+          }
+        } catch (error: any) {
+          state.error = error;
+        } finally {
+          state.isLoading = false;
         }
-        let cards = cardsOrFieldsFromModule(module);
-        let elements = cards.map((card) => {
-          return {
-            cardType: getCardType(this, () => card),
-            card: card,
-          };
-        });
-        state.value = elements;
       },
     });
 
@@ -478,6 +481,9 @@ export default class CodeMode extends Component<Signature> {
     if (this.selectedElement) {
       return this.selectedElement;
     } else {
+      if (this.elementsInFile === null) {
+        return;
+      }
       return this.elementsInFile.length > 0
         ? this.elementsInFile[0]
         : undefined;
@@ -490,6 +496,9 @@ export default class CodeMode extends Component<Signature> {
   }
 
   get elementsInFile() {
+    if (this.elements.value === null) {
+      return [];
+    }
     return this.elements.value;
   }
 
diff --git a/packages/host/app/components/operator-mode/definition-container/index.gts b/packages/host/app/components/operator-mode/definition-container/index.gts
index 92dc5aead14..4d2932ef62f 100644
--- a/packages/host/app/components/operator-mode/definition-container/index.gts
+++ b/packages/host/app/components/operator-mode/definition-container/index.gts
@@ -19,7 +19,6 @@ export class FileDefinitionContainer extends Component<FileSignature> {
       @name={{undefined}}
       @fileExtension={{@fileExtension}}
       @realmInfo={{@realmInfo}}
-      @realmIconURL={{@realmIconURL}}
       @isActive={{true}}
       data-test-file-definition
     >
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 3a91d6fa718..c914d5a2759 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -20,9 +20,9 @@ import {
 } from './definition-container';
 // @ts-expect-error cached doesn't have type yet
 import { tracked, cached } from '@glimmer/tracking';
-import { type ElementInFile } from '@cardstack/host/resources/adoption-chain-manager';
 
 import type OperatorModeStateService from '../../services/operator-mode-state-service';
+import type { ElementInFile } from './code-mode';
 
 interface Signature {
   Element: HTMLElement;
@@ -46,7 +46,11 @@ export default class DetailPanel extends Component<Signature> {
   }
 
   get isLoading() {
-    return this.cardType?.isLoading;
+    return (
+      this.args.elements.some(({ cardType }) => {
+        return cardType?.isLoading;
+      }) || this.cardType?.isLoading
+    );
   }
 
   @action

From 2c3b1475f247e5146a6018b617cbecd0ebe0b510 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 15:21:54 +0800
Subject: [PATCH 28/29] Fix linting

---
 .../app/components/operator-mode/code-mode.gts | 12 ++++++------
 .../components/operator-mode/detail-panel.gts  | 18 ++++++++++--------
 packages/host/app/resources/card-type.ts       |  7 ++++---
 packages/host/tests/helpers/index.gts          |  5 +++--
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/host/app/components/operator-mode/code-mode.gts b/packages/host/app/components/operator-mode/code-mode.gts
index c96b898bd72..508f283f501 100644
--- a/packages/host/app/components/operator-mode/code-mode.gts
+++ b/packages/host/app/components/operator-mode/code-mode.gts
@@ -48,6 +48,10 @@ import config from '@cardstack/host/config/environment';
 
 import monacoModifier from '@cardstack/host/modifiers/monaco';
 
+import {
+  getCardType,
+  type CardType,
+} from '@cardstack/host/resources/card-type';
 import {
   file,
   isReady,
@@ -77,6 +81,8 @@ import RecentFilesService from '@cardstack/host/services/recent-files-service';
 
 import { CardDef } from 'https://cardstack.com/base/card-api';
 
+import { type BaseDef } from 'https://cardstack.com/base/card-api';
+
 import FileTree from '../editor/file-tree';
 
 import BinaryFileInfo from './binary-file-info';
@@ -84,12 +90,6 @@ import CardPreviewPanel from './card-preview-panel';
 import CardURLBar from './card-url-bar';
 import DetailPanel from './detail-panel';
 
-import {
-  getCardType,
-  type CardType,
-} from '@cardstack/host/resources/card-type';
-import { type BaseDef } from 'https://cardstack.com/base/card-api';
-
 interface Signature {
   Args: {
     delete: (card: CardDef, afterDelete?: () => void) => void;
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index c914d5a2759..780dd83480a 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -2,14 +2,20 @@ import { hash, array, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { BaseDef, type CardDef } from 'https://cardstack.com/base/card-api';
-import { cardTypeDisplayName, type RealmInfo } from '@cardstack/runtime-common';
+
 import Component from '@glimmer/component';
 
+// @ts-expect-error cached doesn't have type yet
+import { tracked, cached } from '@glimmer/tracking';
+
+import { cardTypeDisplayName, type RealmInfo } from '@cardstack/runtime-common';
+
 import { hasExecutableExtension } from '@cardstack/runtime-common';
 
 import { type Ready } from '@cardstack/host/resources/file';
 
+import { BaseDef, type CardDef } from 'https://cardstack.com/base/card-api';
+
 import { lastModifiedDate } from '../../resources/last-modified-date';
 
 import {
@@ -18,11 +24,9 @@ import {
   ModuleDefinitionContainer,
   ClickableModuleDefinitionContainer,
 } from './definition-container';
-// @ts-expect-error cached doesn't have type yet
-import { tracked, cached } from '@glimmer/tracking';
 
-import type OperatorModeStateService from '../../services/operator-mode-state-service';
 import type { ElementInFile } from './code-mode';
+import type OperatorModeStateService from '../../services/operator-mode-state-service';
 
 interface Signature {
   Element: HTMLElement;
@@ -116,9 +120,7 @@ export default class DetailPanel extends Component<Signature> {
               class='inheritance-chain {{if (this.isSelected el) "selected"}}'
             >
               <div>{{this.getCardTypeDisplayName el.card}}</div>
-              <button
-                {{on 'click' (fn this.args.selectElement el)}}
-              >Select</button>
+              <button {{on 'click' (fn @selectElement el)}}>Select</button>
             </div>
           {{/each}}
           <h3>Inheritance Panel</h3>
diff --git a/packages/host/app/resources/card-type.ts b/packages/host/app/resources/card-type.ts
index b865f9efa80..dc6cffb50e1 100644
--- a/packages/host/app/resources/card-type.ts
+++ b/packages/host/app/resources/card-type.ts
@@ -1,4 +1,5 @@
 import { getOwner } from '@ember/application';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
 import { restartableTask } from 'ember-concurrency';
@@ -12,9 +13,12 @@ import {
   getAncestor,
   RealmInfo,
 } from '@cardstack/runtime-common';
+import { SupportedMimeType } from '@cardstack/runtime-common';
 import { isCodeRef, type CodeRef } from '@cardstack/runtime-common/code-ref';
 import { Loader } from '@cardstack/runtime-common/loader';
 
+import type CardService from '@cardstack/host/services/card-service';
+
 import type {
   BaseDef,
   Field,
@@ -22,9 +26,6 @@ import type {
 } from 'https://cardstack.com/base/card-api';
 
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
-import { SupportedMimeType } from '@cardstack/runtime-common';
-import type CardService from '@cardstack/host/services/card-service';
-import { service } from '@ember/service';
 
 import type LoaderService from '../services/loader-service';
 
diff --git a/packages/host/tests/helpers/index.gts b/packages/host/tests/helpers/index.gts
index e1ba781582b..3d5d6408342 100644
--- a/packages/host/tests/helpers/index.gts
+++ b/packages/host/tests/helpers/index.gts
@@ -1,4 +1,3 @@
-import { formatRFC7231, parse } from 'date-fns';
 import Owner from '@ember/owner';
 import Service from '@ember/service';
 import { type TestContext, visit } from '@ember/test-helpers';
@@ -6,6 +5,8 @@ import { findAll, waitUntil } from '@ember/test-helpers';
 import { buildWaiter } from '@ember/test-waiters';
 import GlimmerComponent from '@glimmer/component';
 
+import { formatRFC7231, parse } from 'date-fns';
+
 import {
   Kind,
   RealmAdapter,
@@ -19,7 +20,6 @@ import {
   SupportedMimeType,
 } from '@cardstack/runtime-common';
 import { type RequestHandler } from '@cardstack/runtime-common/loader';
-import { getFileWithFallbacks } from '@cardstack/runtime-common/stream';
 
 import { Loader } from '@cardstack/runtime-common/loader';
 import { LocalPath, RealmPaths } from '@cardstack/runtime-common/paths';
@@ -33,6 +33,7 @@ import {
   type EntrySetter,
   type SearchEntryWithErrors,
 } from '@cardstack/runtime-common/search-index';
+import { getFileWithFallbacks } from '@cardstack/runtime-common/stream';
 
 import CardPrerender from '@cardstack/host/components/card-prerender';
 

From ffb2acecd66318cbc6797ed590a1e5717e17453a Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 16:37:37 +0800
Subject: [PATCH 29/29] fix info service to get card source accept header

---
 packages/host/app/services/realm-info-service.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/host/app/services/realm-info-service.ts b/packages/host/app/services/realm-info-service.ts
index f36b1b31bd2..afa65ebe4a9 100644
--- a/packages/host/app/services/realm-info-service.ts
+++ b/packages/host/app/services/realm-info-service.ts
@@ -14,7 +14,9 @@ export default class RecentFilesService extends Service {
       return this.cachedRealmURLsForFileURL.get(fileURL)!;
     }
 
-    let response = await this.loaderService.loader.fetch(fileURL);
+    let response = await this.loaderService.loader.fetch(fileURL, {
+      headers: { Accept: SupportedMimeType.CardSource },
+    });
     let realmURL = response.headers.get('x-boxel-realm-url');
 
     if (!realmURL) {