Add preview pane for non-module files in Module Inspector

When a non-module file (e.g., .png, .css, .json non-card) is selected in
CodeMode, the Module Inspector now renders a FilePreviewPanel showing the
file's FileDef instance with a format toggle (isolated/embedded/fitted/atom)
instead of the "No tools available" message.

Make it a template-only component

Unify CardRendererPanel and FilePreviewPanel into PreviewPanel

Merge the separate FilePreviewPanel into a single PreviewPanel component
that handles both card instances and file defs. The component now accepts
BaseDef instead of CardDef, guards card-specific features (edit, menu items,
open in interact mode) behind isCardInstance checks, and filters out the
edit format for non-card files.

Enrich existing code-submode tests to verify that file previews (FileDef)
don't show edit format or edit button, while card previews do.

- Change fileDefResource and fileDefInstance from BaseDef to FileDef for
  better type safety since store.get with 'file-meta' returns FileDef.
- Add fileDefError getter and show a meaningful error message in the
  incompatibility fallback when the file preview fails to load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: lukemelia

packages/host/app/components/operator-mode/code-submode/module-inspector.gts

@@ -19,6 +19,7 @@ import window from 'ember-window-mock';
 
 import { TrackedObject } from 'tracked-built-ins';
 
+import { LoadingIndicator } from '@cardstack/boxel-ui/components';
 import { eq } from '@cardstack/boxel-ui/helpers';
 
 import type {
@@ -33,6 +34,7 @@ import {
   type CardResourceMeta,
   isFieldDef,
   isSpecCard,
+  isCardErrorJSONAPI,
   internalKeyFor,
   GetCardsContextName,
   GetCardContextName,
@@ -45,7 +47,6 @@ import {
 
 import CreateSpecCommand from '@cardstack/host/commands/create-specs';
 import CardError from '@cardstack/host/components/operator-mode/card-error';
-import CardRendererPanel from '@cardstack/host/components/operator-mode/card-renderer-panel/index';
 import Playground from '@cardstack/host/components/operator-mode/code-submode/playground/playground';
 
 import SchemaEditor from '@cardstack/host/components/operator-mode/code-submode/schema-editor';
@@ -54,6 +55,7 @@ import SpecPreview from '@cardstack/host/components/operator-mode/code-submode/s
 import SpecPreviewBadge from '@cardstack/host/components/operator-mode/code-submode/spec-preview-badge';
 
 import ToggleButton from '@cardstack/host/components/operator-mode/code-submode/toggle-button';
+import PreviewPanel from '@cardstack/host/components/operator-mode/preview-panel/index';
 import SyntaxErrorDisplay from '@cardstack/host/components/operator-mode/syntax-error-display';
 import consumeContext from '@cardstack/host/helpers/consume-context';
 
@@ -158,6 +160,53 @@ export default class ModuleInspector extends Component<ModuleInspectorSignature>
     return state;
   });
 
+  @use private fileDefResource = resource(() => {
+    let state = new TrackedObject<{
+      value: FileDef | undefined;
+      isLoading: boolean;
+      error: unknown;
+    }>({
+      value: undefined,
+      isLoading: false,
+      error: undefined,
+    });
+    if (!this.args.isIncompatibleFile || !this.args.readyFile?.url) {
+      return state;
+    }
+    let fileUrl = this.args.readyFile.url;
+    state.isLoading = true;
+    (async () => {
+      try {
+        let result = await this.store.get(fileUrl, { type: 'file-meta' });
+        if (isCardErrorJSONAPI(result)) {
+          state.error = result;
+          state.value = undefined;
+        } else {
+          state.value = result as unknown as FileDef;
+          state.error = undefined;
+        }
+      } catch (e) {
+        state.error = e;
+        state.value = undefined;
+      } finally {
+        state.isLoading = false;
+      }
+    })();
+    return state;
+  });
+
+  private get fileDefInstance(): FileDef | undefined {
+    return this.fileDefResource?.value;
+  }
+
+  private get fileDefError(): boolean {
+    return this.fileDefResource?.error != null;
+  }
+
+  private get isFileDefLoading(): boolean {
+    return this.fileDefResource?.isLoading ?? false;
+  }
+
   private get selectedDeclarationIsSpec() {
     return this.isSpecResource?.value ?? false;
   }
@@ -261,6 +310,9 @@ export default class ModuleInspector extends Component<ModuleInspectorSignature>
 
   private get fileIncompatibilityMessage() {
     if (this.args.isIncompatibleFile) {
+      if (this.fileDefError) {
+        return `Unable to load file preview. Choose a file representing a card instance or module.`;
+      }
       return `No tools are available to be used with this file type. Choose a file representing a card instance or module.`;
     }
     return null;
@@ -495,6 +547,16 @@ export default class ModuleInspector extends Component<ModuleInspectorSignature>
           'File is empty - tools like schema inspector, and file preview, are unavailable.'
         }}
       </div>
+    {{else if this.fileDefInstance}}
+      <PreviewPanel
+        @card={{this.fileDefInstance}}
+        @format={{@previewFormat}}
+        @setFormat={{@setPreviewFormat}}
+      />
+    {{else if this.isFileDefLoading}}
+      <div class='file-loading' data-test-file-preview-loading>
+        <LoadingIndicator />
+      </div>
     {{else if this.fileIncompatibilityMessage}}
       <div
         class='file-incompatible-message'
@@ -602,7 +664,7 @@ export default class ModuleInspector extends Component<ModuleInspectorSignature>
         />
       </section>
     {{else if @card}}
-      <CardRendererPanel
+      <PreviewPanel
         @card={{@card}}
         @format={{@previewFormat}}
         @setFormat={{@setPreviewFormat}}
@@ -676,6 +738,14 @@ export default class ModuleInspector extends Component<ModuleInspectorSignature>
         padding: var(--boxel-sp-xl);
       }
 
+      .file-loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        background-color: var(--boxel-200);
+      }
+
       .non-preview-panel-content {
         padding: var(--boxel-sp-xs);
         background-color: var(--code-mode-panel-background-color);

packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts

@@ -11,7 +11,7 @@ import {
 } from '@cardstack/runtime-common';
 
 import CardRenderer from '@cardstack/host/components/card-renderer';
-import FittedFormatGallery from '@cardstack/host/components/operator-mode/card-renderer-panel/fitted-format-gallery';
+import FittedFormatGallery from '@cardstack/host/components/operator-mode/preview-panel/fitted-format-gallery';
 import type { EnhancedRealmInfo } from '@cardstack/host/services/realm';
 
 import type {

…renderer-panel/fitted-format-gallery.gts …/preview-panel/fitted-format-gallery.gtspackages/host/app/components/operator-mode/card-renderer-panel/fitted-format-gallery.gts renamed to packages/host/app/components/operator-mode/preview-panel/fitted-format-gallery.gts packages/host/app/components/operator-mode/card-renderer-panel/fitted-format-gallery.gts renamed to packages/host/app/components/operator-mode/preview-panel/fitted-format-gallery.gts

@@ -20,8 +20,10 @@ import { Eye, IconCode } from '@cardstack/boxel-ui/icons';
 import {
   cardTypeDisplayName,
   cardTypeIcon,
+  formats as allFormats,
   getMenuItems,
   identifyCard,
+  isCardInstance,
   isResolvedCodeRef,
 } from '@cardstack/runtime-common';
 
@@ -30,8 +32,6 @@ import { CardContextName } from '@cardstack/runtime-common';
 import CardRenderer from '@cardstack/host/components/card-renderer';
 import Overlays from '@cardstack/host/components/operator-mode/overlays';
 
-import { urlForRealmLookup } from '@cardstack/host/lib/utils';
-
 import ElementTracker, {
   type RenderedCardForOverlayActions,
 } from '@cardstack/host/resources/element-tracker';
@@ -41,6 +41,7 @@ import type OperatorModeStateService from '@cardstack/host/services/operator-mod
 import type RealmService from '@cardstack/host/services/realm';
 
 import type {
+  BaseDef,
   CardContext,
   CardDef,
   Format,
@@ -54,14 +55,14 @@ import FittedFormatGallery from './fitted-format-gallery';
 interface Signature {
   Element: HTMLElement;
   Args: {
-    card: CardDef;
+    card: BaseDef;
     format?: Format; // defaults to 'isolated'
     setFormat: (format: Format) => void;
     viewCard?: ViewCardFn;
   };
 }
 
-export default class CardRendererPanel extends Component<Signature> {
+export default class PreviewPanel extends Component<Signature> {
   @consume(CardContextName) declare private cardContext: CardContext;
   @service declare private commandService: CommandService;
   @service declare private operatorModeStateService: OperatorModeStateService;
@@ -83,15 +84,23 @@ export default class CardRendererPanel extends Component<Signature> {
     return this.args.format ?? 'isolated';
   }
 
+  private get cardId(): string | undefined {
+    return (this.args.card as CardDef).id;
+  }
+
+  private get isCard(): boolean {
+    return isCardInstance(this.args.card);
+  }
+
   private openInInteractMode = () => {
-    this.operatorModeStateService.openCardInInteractMode(this.args.card.id);
+    if (this.cardId) {
+      this.operatorModeStateService.openCardInInteractMode(this.cardId);
+    }
   };
 
   private editTemplate = () => {
-    // Get the card definition using identifyCard
     const type = identifyCard(this.args.card.constructor as any);
     if (type && isResolvedCodeRef(type)) {
-      // Construct the GTS file URL
       const gtsFileUrl = type.module.endsWith('.gts')
         ? type.module
         : `${type.module}.gts`;
@@ -100,20 +109,19 @@ export default class CardRendererPanel extends Component<Signature> {
   };
 
   private get realmInfo() {
-    let url = this.args.card ? urlForRealmLookup(this.args.card) : undefined;
-    if (!url) {
+    if (!this.cardId) {
       return undefined;
     }
-    return this.realm.info(url);
+    return this.realm.info(this.cardId);
   }
 
   private get contextMenuItems() {
-    if (!this.args.card) {
+    if (!this.args.card || !(getMenuItems in this.args.card)) {
       return [];
     }
     return toMenuItems(
-      this.args.card[getMenuItems]({
-        canEdit: this.realm.canWrite(this.args.card.id),
+      (this.args.card as CardDef)[getMenuItems]({
+        canEdit: this.cardId ? this.realm.canWrite(this.cardId) : false,
         cardCrudFunctions: {},
         menuContext: 'code-mode-preview',
         commandContext: this.commandService.commandContext,
@@ -123,10 +131,27 @@ export default class CardRendererPanel extends Component<Signature> {
 
   private get canEditCard() {
     return Boolean(
-      this.format !== 'edit' && this.realm.canWrite(this.args.card.id),
+      this.isCard &&
+      this.format !== 'edit' &&
+      this.cardId &&
+      this.realm.canWrite(this.cardId),
     );
   }
 
+  private get cardTitle(): string | undefined {
+    if (this.isCard) {
+      return (this.args.card as CardDef).cardTitle;
+    }
+    return (this.args.card as any).name;
+  }
+
+  private get availableFormats() {
+    if (this.isCard) {
+      return allFormats;
+    }
+    return allFormats.filter((f) => f !== 'edit');
+  }
+
   @provide(CardContextName)
   // @ts-ignore context is used via provider
   private get context(): CardContext {
@@ -191,7 +216,7 @@ export default class CardRendererPanel extends Component<Signature> {
             class='card-renderer-header'
             @cardTypeDisplayName={{cardTypeDisplayName @card}}
             @cardTypeIcon={{cardTypeIcon @card}}
-            @cardTitle={{@card.cardTitle}}
+            @cardTitle={{this.cardTitle}}
             @realmInfo={{this.realmInfo}}
             @onEdit={{if this.canEditCard (fn @setFormat 'edit')}}
             @onFinishEditing={{if
@@ -200,7 +225,7 @@ export default class CardRendererPanel extends Component<Signature> {
             }}
             @isTopCard={{true}}
             @moreOptionsMenuItems={{this.contextMenuItems}}
-            data-test-code-mode-card-renderer-header={{@card.id}}
+            data-test-code-mode-card-renderer-header={{this.cardId}}
             ...attributes
           />
           {{#if (eq this.format 'fitted')}}
@@ -223,7 +248,11 @@ export default class CardRendererPanel extends Component<Signature> {
     </div>
 
     <div class='card-renderer-format-chooser'>
-      <FormatChooser @format={{this.format}} @setFormat={{@setFormat}} />
+      <FormatChooser
+        @format={{this.format}}
+        @setFormat={{@setFormat}}
+        @formats={{this.availableFormats}}
+      />
     </div>
 
     <style scoped>