From 3a33725a50c5304abfdd88f8b04f5ef2557d42c1 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 15:37:44 +0800
Subject: [PATCH 1/5] access displayName its static

---
 .../host/app/components/operator-mode/detail-panel.gts     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 780dd83480a..622eb73f5ad 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -119,7 +119,7 @@ export default class DetailPanel extends Component<Signature> {
             <div
               class='inheritance-chain {{if (this.isSelected el) "selected"}}'
             >
-              <div>{{this.getCardTypeDisplayName el.card}}</div>
+              <div>{{el.card.displayName}}</div>
               <button {{on 'click' (fn @selectElement el)}}>Select</button>
             </div>
           {{/each}}
@@ -170,9 +170,4 @@ export default class DetailPanel extends Component<Signature> {
       }
     </style>
   </template>
-
-  getCardTypeDisplayName(t: typeof BaseDef) {
-    let card = new t();
-    return cardTypeDisplayName(card);
-  }
 }

From 9ac7a58d81146fe2cf0a2d42d62c364d5b08968b Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 17:43:37 +0800
Subject: [PATCH 2/5] Use realmInfoProvider

---
 .../definition-container/base.gts             | 33 +++++++++----------
 .../definition-container/index.gts            |  8 ++---
 .../components/operator-mode/detail-panel.gts | 14 ++++----
 .../host/app/services/realm-info-service.ts   |  2 +-
 4 files changed, 28 insertions(+), 29 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 39f0faa3269..6a8d80a7653 100644
--- a/packages/host/app/components/operator-mode/definition-container/base.gts
+++ b/packages/host/app/components/operator-mode/definition-container/base.gts
@@ -6,7 +6,7 @@ import Label from '@cardstack/boxel-ui/components/label';
 
 import { svgJar } from '@cardstack/boxel-ui/helpers/svg-jar';
 
-import { type RealmInfo } from '@cardstack/runtime-common';
+import RealmInfoProvider from '@cardstack/host/components/operator-mode/realm-info-provider';
 
 interface Action {
   label: string;
@@ -17,8 +17,8 @@ export interface BaseArgs {
   title: string | undefined;
   name: string | undefined;
   fileExtension: string | undefined;
-  realmInfo: RealmInfo | undefined | null;
   isActive: boolean;
+  fileURL?: string;
 }
 
 interface BaseSignature {
@@ -30,14 +30,6 @@ interface BaseSignature {
 }
 
 export class BaseDefinitionContainer extends Component<BaseSignature> {
-  get realmName(): string | undefined {
-    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'>
@@ -50,14 +42,21 @@ export class BaseDefinitionContainer extends Component<BaseSignature> {
       </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>
-          {{/if}}
+          <RealmInfoProvider @fileURL={{@fileURL}}>
+            <:ready as |realmInfo|>
+              <div class='realm-info'>
+                <img
+                  src={{realmInfo.iconURL}}
+                  alt='realm-icon'
+                  data-test-realm-icon-url={{realmInfo.iconURL}}
+                />
+                <Label class='realm-name' data-test-definition-realm-name>in
+                  {{realmInfo.name}}</Label>
+              </div>
+            </:ready>
+          </RealmInfoProvider>
           <div data-test-definition-name class='definition-name'>{{@name}}</div>
+
         </div>
         {{#if @isActive}}
           {{yield to='activeContent'}}
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 4d2932ef62f..0eb2877d265 100644
--- a/packages/host/app/components/operator-mode/definition-container/index.gts
+++ b/packages/host/app/components/operator-mode/definition-container/index.gts
@@ -18,8 +18,8 @@ export class FileDefinitionContainer extends Component<FileSignature> {
       @title='File'
       @name={{undefined}}
       @fileExtension={{@fileExtension}}
-      @realmInfo={{@realmInfo}}
       @isActive={{true}}
+      @fileURL={{@fileURL}}
       data-test-file-definition
     >
       <:activeContent>
@@ -41,8 +41,8 @@ export class ModuleDefinitionContainer extends Component<ModuleSignature> {
       @title='Card Definition'
       @name={{@name}}
       @fileExtension={{@fileExtension}}
-      @realmInfo={{@realmInfo}}
       @isActive={{@isActive}}
+      @fileURL={{@fileURL}}
       data-test-card-module-definition
     >
       <:activeContent>
@@ -67,8 +67,8 @@ export class InstanceDefinitionContainer extends Component<InstanceSignature> {
       @title='Card Instance'
       @fileExtension={{@fileExtension}}
       @name={{@name}}
-      @realmInfo={{@realmInfo}}
       @isActive={{true}}
+      @fileURL={{@fileURL}}
       data-test-card-instance-definition
     >
       <:activeContent>
@@ -98,8 +98,8 @@ export class ClickableModuleDefinitionContainer extends Component<ClickableModul
         @title='Card Definition'
         @name={{@name}}
         @fileExtension={{@fileExtension}}
-        @realmInfo={{@realmInfo}}
         @isActive={{false}}
+        @fileURL={{@fileURL}}
         data-test-card-module-definition
       />
     </Clickable>
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 622eb73f5ad..5dde370758e 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -8,13 +8,13 @@ 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 { 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 { type CardDef } from 'https://cardstack.com/base/card-api';
 
 import { lastModifiedDate } from '../../resources/last-modified-date';
 
@@ -94,9 +94,9 @@ export default class DetailPanel extends Component<Signature> {
           <h3>Inheritance Panel</h3>
           <div class='inheritance-chain'>
             <InstanceDefinitionContainer
+              @fileURL={{this.args.readyFile.url}}
               @name={{@cardInstance.title}}
               @fileExtension='.JSON'
-              @realmInfo={{@realmInfo}}
               @infoText={{this.lastModified.value}}
               @actions={{array
                 (hash label='Delete' handler=@delete icon='icon-trash')
@@ -105,9 +105,9 @@ export default class DetailPanel extends Component<Signature> {
             <div>Adopts from</div>
 
             <ClickableModuleDefinitionContainer
+              @fileURL={{this.cardType.type.module}}
               @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}}
             />
@@ -125,9 +125,9 @@ export default class DetailPanel extends Component<Signature> {
           {{/each}}
           <h3>Inheritance Panel</h3>
           <ModuleDefinitionContainer
+            @fileURL={{this.cardType.type.module}}
             @name={{this.cardType.type.displayName}}
             @fileExtension={{this.cardType.type.moduleMeta.extension}}
-            @realmInfo={{this.cardType.type.moduleMeta.realmInfo}}
             @infoText={{this.lastModified.value}}
             @isActive={{true}}
             @actions={{array
@@ -137,17 +137,17 @@ export default class DetailPanel extends Component<Signature> {
           {{#if this.cardType.type.super}}
             <div>Inherits from</div>
             <ClickableModuleDefinitionContainer
+              @fileURL={{this.cardType.type.super.module}}
               @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}}
         {{else}}
           <FileDefinitionContainer
+            @fileURL={{this.args.readyFile.url}}
             @fileExtension={{this.fileExtension}}
-            @realmInfo={{@realmInfo}}
             @infoText={{this.lastModified.value}}
             @actions={{array
               (hash label='Delete' handler=@delete icon='icon-trash')
diff --git a/packages/host/app/services/realm-info-service.ts b/packages/host/app/services/realm-info-service.ts
index afa65ebe4a9..35c5af44bb9 100644
--- a/packages/host/app/services/realm-info-service.ts
+++ b/packages/host/app/services/realm-info-service.ts
@@ -4,7 +4,7 @@ import { RealmInfo, SupportedMimeType } from '@cardstack/runtime-common';
 
 import LoaderService from '@cardstack/host/services/loader-service';
 
-export default class RecentFilesService extends Service {
+export default class RealmInfoService extends Service {
   @service declare loaderService: LoaderService;
   cachedRealmURLsForFileURL: Map<string, string> = new Map(); // Has the file url already been resolved to a realm url?
   cachedRealmInfos: Map<string, RealmInfo> = new Map(); // Has the realm url already been resolved to a realm info?

From c1a4e6834621018c7c1d04ac4c6779b0fdead0a1 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 17:49:20 +0800
Subject: [PATCH 3/5] fix lint

---
 packages/host/app/components/operator-mode/detail-panel.gts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 5dde370758e..4ca735203cc 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -94,7 +94,7 @@ export default class DetailPanel extends Component<Signature> {
           <h3>Inheritance Panel</h3>
           <div class='inheritance-chain'>
             <InstanceDefinitionContainer
-              @fileURL={{this.args.readyFile.url}}
+              @fileURL={{@readyFile.url}}
               @name={{@cardInstance.title}}
               @fileExtension='.JSON'
               @infoText={{this.lastModified.value}}
@@ -146,7 +146,7 @@ export default class DetailPanel extends Component<Signature> {
           {{/if}}
         {{else}}
           <FileDefinitionContainer
-            @fileURL={{this.args.readyFile.url}}
+            @fileURL={{@readyFile.url}}
             @fileExtension={{this.fileExtension}}
             @infoText={{this.lastModified.value}}
             @actions={{array

From e6c78d8cafc5399b5dc19294bc95268065c4beaf Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 19:59:05 +0800
Subject: [PATCH 4/5] fix flaky test

---
 packages/host/tests/acceptance/code-mode-test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/host/tests/acceptance/code-mode-test.ts b/packages/host/tests/acceptance/code-mode-test.ts
index 54336a64c10..48cafaa7c7d 100644
--- a/packages/host/tests/acceptance/code-mode-test.ts
+++ b/packages/host/tests/acceptance/code-mode-test.ts
@@ -899,9 +899,10 @@ module('Acceptance | code mode tests', function (hooks) {
     await waitFor('[data-test-file-definition]');
 
     assert.dom('[data-test-definition-file-extension]').hasText('.png');
+    await waitFor('[data-test-definition-realm-name]');
     assert
       .dom('[data-test-definition-realm-name]')
-      .hasText('in Test Workspace B');
+      .hasText('in Test Workspace A');
     assert.dom('[data-test-definition-info-text]').containsText('Last saved');
     assert
       .dom('[data-test-binary-info] [data-test-file-name]')

From f6e39f5ea338d262694ebf1e458e26e3d75f44c6 Mon Sep 17 00:00:00 2001
From: Justin <justinthong93@gmail.com>
Date: Tue, 26 Sep 2023 20:05:04 +0800
Subject: [PATCH 5/5] use isBinary condition so no flicker

---
 .../app/components/operator-mode/detail-panel.gts  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 4ca735203cc..ce8590a6944 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -64,18 +64,22 @@ export default class DetailPanel extends Component<Signature> {
     }
   }
 
-  get isCardInstance() {
-    return this.args.readyFile.url.endsWith('.json');
-  }
-
   @action
   isSelected(el: ElementInFile) {
     return this.args.selectedElement === el;
   }
+
+  get isCardInstance() {
+    return this.args.readyFile.url.endsWith('.json');
+  }
   get isModule() {
     return hasExecutableExtension(this.args.readyFile.url);
   }
 
+  get isBinary() {
+    return this.args.readyFile.isBinary;
+  }
+
   private get fileExtension() {
     if (!this.args.cardInstance) {
       return '.' + this.args.readyFile.url.split('.').pop() || '';
@@ -144,7 +148,7 @@ export default class DetailPanel extends Component<Signature> {
               @url={{this.cardType.type.super.module}}
             />
           {{/if}}
-        {{else}}
+        {{else if this.isBinary}}
           <FileDefinitionContainer
             @fileURL={{@readyFile.url}}
             @fileExtension={{this.fileExtension}}