use realmInfo provider in detail panel

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'}}

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>

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';
 
@@ -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() || '';
@@ -94,9 +98,9 @@ export default class DetailPanel extends Component<Signature> {
           <h3>Inheritance Panel</h3>
           <div class='inheritance-chain'>
             <InstanceDefinitionContainer
+              @fileURL={{@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 +109,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}}
             />
@@ -119,15 +123,15 @@ 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}}
           <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 +141,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}}
+        {{else if this.isBinary}}
           <FileDefinitionContainer
+            @fileURL={{@readyFile.url}}
             @fileExtension={{this.fileExtension}}
-            @realmInfo={{@realmInfo}}
             @infoText={{this.lastModified.value}}
             @actions={{array
               (hash label='Delete' handler=@delete icon='icon-trash')
@@ -170,9 +174,4 @@ export default class DetailPanel extends Component<Signature> {
       }
     </style>
   </template>
-
-  getCardTypeDisplayName(t: typeof BaseDef) {
-    let card = new t();
-    return cardTypeDisplayName(card);
-  }
 }

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?

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]')