From 8737f7bbea64e8cf74544c3b972183c3cac6a394 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sat, 14 Mar 2026 23:24:29 +0800
Subject: [PATCH 1/9] remove navigate the listing open in interact mode

---
 packages/host/app/commands/listing-create.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/host/app/commands/listing-create.ts b/packages/host/app/commands/listing-create.ts
index ce94c134ece..54e6d940cf7 100644
--- a/packages/host/app/commands/listing-create.ts
+++ b/packages/host/app/commands/listing-create.ts
@@ -149,7 +149,6 @@ export default class ListingCreateCommand extends HostBaseCommand<
     if (!listingId) {
       throw new Error('Failed to create listing card (no localId)');
     }
-    await this.operatorModeStateService.openCardInInteractMode(listingId);
 
     const commandModule = await this.loadCommandModule();
     const listingCard = listing as CardAPI.CardDef; // ensure correct type

From d700f68a667cd5787bf800f32e760626a1df54cc Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sun, 15 Mar 2026 10:26:26 +0800
Subject: [PATCH 2/9] implement openCreateListingModal as a host command

---
 packages/host/app/commands/index.ts           |   6 +
 .../app/commands/open-create-listing-modal.ts |  33 ++
 .../components/operator-mode/container.gts    |   2 +
 .../operator-mode/create-listing-modal.gts    | 348 ++++++++++++++++++
 .../services/operator-mode-state-service.ts   |  16 +
 5 files changed, 405 insertions(+)
 create mode 100644 packages/host/app/commands/open-create-listing-modal.ts
 create mode 100644 packages/host/app/components/operator-mode/create-listing-modal.gts

diff --git a/packages/host/app/commands/index.ts b/packages/host/app/commands/index.ts
index 4fd424e63da..d125fdf950d 100644
--- a/packages/host/app/commands/index.ts
+++ b/packages/host/app/commands/index.ts
@@ -37,6 +37,7 @@ import * as ListingUpdateSpecsCommandModule from './listing-update-specs';
 import * as ListingUseCommandModule from './listing-use';
 import * as OneShotLlmRequestCommandModule from './one-shot-llm-request';
 import * as OpenAiAssistantRoomCommandModule from './open-ai-assistant-room';
+import * as OpenCreateListingModalCommandModule from './open-create-listing-modal';
 import * as OpenInInteractModeModule from './open-in-interact-mode';
 import * as OpenWorkspaceCommandModule from './open-workspace';
 import * as PatchCardInstanceCommandModule from './patch-card-instance';
@@ -256,6 +257,10 @@ export function shimHostCommands(virtualNetwork: VirtualNetwork) {
     '@cardstack/boxel-host/commands/open-ai-assistant-room',
     OpenAiAssistantRoomCommandModule,
   );
+  virtualNetwork.shimModule(
+    '@cardstack/boxel-host/commands/open-create-listing-modal',
+    OpenCreateListingModalCommandModule,
+  );
   virtualNetwork.shimModule(
     '@cardstack/boxel-host/commands/open-workspace',
     OpenWorkspaceCommandModule,
@@ -404,6 +409,7 @@ export const HostCommandClasses: (typeof HostBaseCommand<any, any>)[] = [
   ListingUseCommandModule.default,
   OneShotLlmRequestCommandModule.default,
   OpenAiAssistantRoomCommandModule.default,
+  OpenCreateListingModalCommandModule.default,
   OpenInInteractModeModule.default,
   OpenWorkspaceCommandModule.default,
   GenerateThemeExampleCommandModule.default,
diff --git a/packages/host/app/commands/open-create-listing-modal.ts b/packages/host/app/commands/open-create-listing-modal.ts
new file mode 100644
index 00000000000..c7e51d1a285
--- /dev/null
+++ b/packages/host/app/commands/open-create-listing-modal.ts
@@ -0,0 +1,33 @@
+import { service } from '@ember/service';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import type OperatorModeStateService from '../services/operator-mode-state-service';
+
+export default class OpenCreateListingModalCommand extends HostBaseCommand<
+  typeof BaseCommandModule.ListingCreateInput
+> {
+  @service declare private operatorModeStateService: OperatorModeStateService;
+
+  description = 'Open create listing confirmation modal';
+
+  async getInputType() {
+    let commandModule = await this.loadCommandModule();
+    const { ListingCreateInput } = commandModule;
+    return ListingCreateInput;
+  }
+
+  requireInputFields = ['codeRef', 'targetRealm'];
+
+  protected async run(
+    input: BaseCommandModule.ListingCreateInput,
+  ): Promise<undefined> {
+    this.operatorModeStateService.openCreateListingModal({
+      codeRef: input.codeRef,
+      targetRealm: input.targetRealm,
+      openCardId: input.openCardId,
+    });
+  }
+}
diff --git a/packages/host/app/components/operator-mode/container.gts b/packages/host/app/components/operator-mode/container.gts
index 45653d4104c..b514090ff56 100644
--- a/packages/host/app/components/operator-mode/container.gts
+++ b/packages/host/app/components/operator-mode/container.gts
@@ -41,6 +41,7 @@ import PrerenderedCardSearch from '../prerendered-card-search';
 import { Submodes } from '../submode-switcher';
 
 import ChooseFileModal from './choose-file-modal';
+import CreateListingModal from './create-listing-modal';
 
 import type CardService from '../../services/card-service';
 import type CommandService from '../../services/command-service';
@@ -143,6 +144,7 @@ export default class OperatorModeContainer extends Component<Signature> {
   <template>
     <div class='operator-mode'>
       <ChooseFileModal />
+      <CreateListingModal />
       <CardCatalogModal />
       <FromElseWhere @name='modal-elsewhere' />
 
diff --git a/packages/host/app/components/operator-mode/create-listing-modal.gts b/packages/host/app/components/operator-mode/create-listing-modal.gts
new file mode 100644
index 00000000000..f77e3d94f70
--- /dev/null
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -0,0 +1,348 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { getOwner } from '@ember/owner';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { cached, tracked } from '@glimmer/tracking';
+
+import { dropTask } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
+import onKeyMod from 'ember-keyboard/modifiers/on-key';
+
+import {
+  BoxelSelect,
+  Button,
+  FieldContainer,
+  RealmIcon,
+} from '@cardstack/boxel-ui/components';
+
+import {
+  isResolvedCodeRef,
+  type ResolvedCodeRef,
+} from '@cardstack/runtime-common';
+
+import ListingCreateCommand from '@cardstack/host/commands/listing-create';
+import ModalContainer from '@cardstack/host/components/modal-container';
+import { getSearch } from '@cardstack/host/resources/search';
+
+import type CommandService from '@cardstack/host/services/command-service';
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+import type RealmService from '@cardstack/host/services/realm';
+
+import type { CardDef } from 'https://cardstack.com/base/card-api';
+
+type SourceOption = {
+  id: string | null; // null = card definition, string = instance id
+  label: string;
+  detail: string;
+};
+
+function fileNameFromUrl(url: string, ext: string): string {
+  return `${url.split('/').pop() ?? url}${ext}`;
+}
+
+interface Signature {
+  Args: {};
+}
+
+export default class CreateListingModal extends Component<Signature> {
+  @service declare private commandService: CommandService;
+  @service declare private operatorModeStateService: OperatorModeStateService;
+  @service declare private realm: RealmService;
+
+  @tracked private errorMessage?: string;
+  @tracked private _userSelectedKey?: string;
+  @tracked private _userSelectedValue: string | null = null;
+
+  private instancesSearch = getSearch<CardDef>(this, getOwner(this)!, () =>
+    this.codeRef ? { filter: { type: this.codeRef } } : undefined,
+  );
+
+  private createListing = dropTask(async () => {
+    let request = this.request;
+    if (!request) {
+      throw new Error('Cannot create listing without a modal request');
+    }
+
+    this.errorMessage = undefined;
+
+    try {
+      let codeRef = this.codeRef;
+      if (!codeRef) {
+        throw new Error('Cannot create listing without a resolved code ref');
+      }
+      await new ListingCreateCommand(
+        this.commandService.commandContext,
+      ).execute({
+        codeRef,
+        targetRealm: request.targetRealm,
+        openCardId: this.activeOpenCardId ?? undefined,
+      });
+      this.operatorModeStateService.closeCreateListingModal();
+    } catch (error) {
+      this.errorMessage =
+        error instanceof Error ? error.message : 'Failed to create listing';
+    }
+  });
+
+  private get request() {
+    return this.operatorModeStateService.createListingModalRequest;
+  }
+
+  private get isModalOpen() {
+    return Boolean(this.request);
+  }
+
+  private get realmInfo() {
+    let request = this.request;
+    if (!request) {
+      return undefined;
+    }
+    return this.realm.info(request.targetRealm);
+  }
+
+  private get codeRef(): ResolvedCodeRef | undefined {
+    let codeRef = this.request?.codeRef;
+    return codeRef && isResolvedCodeRef(codeRef) ? codeRef : undefined;
+  }
+
+  private get definitionLabel() {
+    let module = this.codeRef?.module;
+    return module
+      ? fileNameFromUrl(module, '.gts')
+      : (this.codeRef?.name ?? 'Unknown');
+  }
+
+  private get requestKey(): string | undefined {
+    let codeRef = this.codeRef;
+    return codeRef
+      ? `${codeRef.module}::${codeRef.name}::${this.request?.openCardId ?? ''}`
+      : undefined;
+  }
+
+  private get activeOpenCardId(): string | null {
+    if (
+      this._userSelectedKey !== undefined &&
+      this._userSelectedKey === this.requestKey
+    ) {
+      return this._userSelectedValue;
+    }
+    return this.request?.openCardId ?? null;
+  }
+
+  @cached
+  private get definitionOption(): SourceOption {
+    return {
+      id: null,
+      label: this.definitionLabel,
+      detail: 'Card Definition',
+    };
+  }
+
+  @cached
+  private get allOptions(): SourceOption[] {
+    const instanceOptions: SourceOption[] = this.instancesSearch.instances.map(
+      (instance) => ({
+        id: instance.id,
+        label: fileNameFromUrl(instance.id, '.json'),
+        detail: 'Instance',
+      }),
+    );
+    // If opened from a specific instance (openCardId), ensure it appears in
+    // the list immediately — before the async search finishes loading — so
+    // the select shows it as pre-selected on first render.
+    const openCardId = this.request?.openCardId;
+    if (openCardId && !instanceOptions.some((o) => o.id === openCardId)) {
+      instanceOptions.unshift({
+        id: openCardId,
+        label: fileNameFromUrl(openCardId, '.json'),
+        detail: 'Instance',
+      });
+    }
+    return [this.definitionOption, ...instanceOptions];
+  }
+
+  private get selectedOption(): SourceOption {
+    return (
+      this.allOptions.find((opt) => opt.id === this.activeOpenCardId) ??
+      this.definitionOption
+    );
+  }
+
+  private get isCreateRunning() {
+    return this.createListing.isRunning;
+  }
+
+  @action private onClose() {
+    this.errorMessage = undefined;
+    this.operatorModeStateService.closeCreateListingModal();
+  }
+
+  @action private onSelectChange(option: SourceOption) {
+    this.errorMessage = undefined;
+    this._userSelectedKey = this.requestKey;
+    this._userSelectedValue = option.id;
+  }
+
+  <template>
+    {{#if this.isModalOpen}}
+      <ModalContainer
+        class='create-listing-modal'
+        @cardContainerClass='create-listing'
+        @title='Create Listing'
+        @size='small'
+        @isOpen={{this.isModalOpen}}
+        @onClose={{this.onClose}}
+        data-test-create-listing-modal
+      >
+        <:content>
+          <FieldContainer @label='Create In' @tag='label' class='field'>
+            <div
+              class='field-contents realm-value'
+              data-test-create-listing-target-realm
+            >
+              {{#if this.realmInfo}}
+                <RealmIcon class='realm-icon' @realmInfo={{this.realmInfo}} />
+                <span>{{this.realmInfo.name}}</span>
+              {{/if}}
+            </div>
+          </FieldContainer>
+
+          <FieldContainer @label='Source' @tag='div' class='field'>
+            <BoxelSelect
+              class='source-select'
+              @options={{this.allOptions}}
+              @selected={{this.selectedOption}}
+              @onChange={{this.onSelectChange}}
+              @disabled={{this.isCreateRunning}}
+              @renderInPlace={{true}}
+              data-test-create-listing-source-select
+              as |option|
+            >
+              <div
+                class='source-option-item'
+                data-test-create-listing-definition-option={{unless
+                  option.id
+                  'true'
+                }}
+                data-test-create-listing-instance-option={{option.id}}
+              >
+                <span
+                  class='option-label'
+                  data-test-create-listing-display-name={{unless
+                    option.id
+                    'true'
+                  }}
+                >{{option.label}}</span>
+                <span class='option-detail'>{{option.detail}}</span>
+              </div>
+            </BoxelSelect>
+          </FieldContainer>
+
+          {{#if this.errorMessage}}
+            <p class='error' data-test-create-listing-error>
+              {{this.errorMessage}}
+            </p>
+          {{/if}}
+        </:content>
+        <:footer>
+          <div class='footer-buttons'>
+            <Button
+              @size='tall'
+              {{on 'click' this.onClose}}
+              {{onKeyMod 'Escape'}}
+              data-test-create-listing-cancel-button
+            >
+              Cancel
+            </Button>
+            <Button
+              @kind='primary'
+              @size='tall'
+              @loading={{this.isCreateRunning}}
+              @disabled={{this.isCreateRunning}}
+              {{on 'click' (perform this.createListing)}}
+              {{onKeyMod 'Enter'}}
+              data-test-create-listing-confirm-button
+            >
+              Create
+            </Button>
+          </div>
+        </:footer>
+      </ModalContainer>
+    {{/if}}
+
+    <style scoped>
+      .create-listing-modal {
+        --horizontal-gap: var(--boxel-sp-xs);
+        --stack-card-footer-height: auto;
+      }
+      .create-listing-modal > :deep(.boxel-modal__inner) {
+        display: flex;
+      }
+      .create-listing-modal :deep(.dialog-box__content) {
+        display: flex;
+        flex-direction: column;
+      }
+      :deep(.create-listing) {
+        height: 30rem;
+      }
+      .field + .field {
+        margin-top: var(--boxel-sp-sm);
+      }
+      .field {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxxs) var(--horizontal-gap);
+      }
+      .field :deep(.label-container) {
+        width: 8rem;
+      }
+      .field :deep(.content) {
+        flex-grow: 1;
+        min-width: 13rem;
+      }
+      .field-contents {
+        display: flex;
+        align-items: center;
+        min-height: 2.25rem;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxxs);
+      }
+      .realm-value {
+        gap: var(--boxel-sp-xxxs);
+      }
+      .realm-icon {
+        --boxel-realm-icon-size: 1rem;
+      }
+      .source-select {
+        width: 100%;
+      }
+      .source-option-item {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+        width: 100%;
+      }
+      .option-label {
+        font: 600 var(--boxel-font-sm);
+        flex: 1;
+      }
+      .option-detail {
+        font: var(--boxel-font-xs);
+        color: var(--boxel-500);
+        white-space: nowrap;
+      }
+      .footer-buttons {
+        display: flex;
+        margin-left: auto;
+        gap: var(--horizontal-gap);
+      }
+      .error {
+        color: var(--boxel-danger);
+        font: 500 var(--boxel-font-sm);
+        letter-spacing: var(--boxel-lsp-xs);
+        margin: var(--boxel-sp) 0 0;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
index a07541ccf3b..a481d0f7666 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -68,6 +68,12 @@ import type { Stack } from '../components/operator-mode/interact-submode';
 
 import type IndexController from '../controllers';
 
+export interface CreateListingModalRequest {
+  codeRef: CodeRef;
+  targetRealm: string;
+  openCardId?: string;
+}
+
 // Below types form a raw POJO representation of operator mode state.
 // This state differs from OperatorModeState in that it only contains cards that have been saved (i.e. have an ID).
 // This is because we don't have a way to serialize a stack configuration of linked cards that have not been saved yet.
@@ -142,6 +148,7 @@ export default class OperatorModeStateService extends Service {
   private moduleInspectorHistory: Record<string, ModuleInspectorView>;
 
   @tracked profileSettingsOpen = false;
+  @tracked createListingModalRequest?: CreateListingModalRequest;
 
   @service declare private cardService: CardService;
   @service declare private codeSemanticsService: CodeSemanticsService;
@@ -210,6 +217,14 @@ export default class OperatorModeStateService extends Service {
     this.schedulePersist();
   };
 
+  openCreateListingModal = (request: CreateListingModalRequest) => {
+    this.createListingModalRequest = request;
+  };
+
+  closeCreateListingModal = () => {
+    this.createListingModalRequest = undefined;
+  };
+
   setNewFileDropdownOpen = () => {
     this._state.newFileDropdownOpen = true;
     this.schedulePersist();
@@ -240,6 +255,7 @@ export default class OperatorModeStateService extends Service {
     this.cardTitles = new TrackedMap();
     this.moduleInspectorHistory = {};
     this.profileSettingsOpen = false;
+    this.createListingModalRequest = undefined;
     window.localStorage.removeItem(ModuleInspectorSelections);
     this.schedulePersist();
   }

From d793a22c8096db25bb7dc5a8f87bf2759b8c37a4 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sun, 15 Mar 2026 10:29:45 +0800
Subject: [PATCH 3/9] implement command & support create listing from card
 instances with pre-selected source

---
 packages/base/menu-items.ts                   |  6 ++--
 .../components/operator-mode/detail-panel.gts | 34 +++++++++++++------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index d62e9819ece..84ce63e521c 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -6,7 +6,7 @@ import {
 
 import CopyCardCommand from '@cardstack/boxel-host/commands/copy-card';
 import GenerateExampleCardsCommand from '@cardstack/boxel-host/commands/generate-example-cards';
-import ListingCreateCommand from '@cardstack/boxel-host/commands/listing-create';
+import OpenCreateListingModalCommand from '@cardstack/boxel-host/commands/open-create-listing-modal';
 import OpenInInteractModeCommand from '@cardstack/boxel-host/commands/open-in-interact-mode';
 import PopulateWithSampleDataCommand from '@cardstack/boxel-host/commands/populate-with-sample-data';
 import ShowCardCommand from '@cardstack/boxel-host/commands/show-card';
@@ -165,9 +165,9 @@ export function getDefaultCardMenuItems(
         if (!targetRealm) {
           throw new Error('Unable to determine target realm from card');
         }
-        await new ListingCreateCommand(params.commandContext).execute({
-          openCardId: cardId,
+        await new OpenCreateListingModalCommand(params.commandContext).execute({
           codeRef,
+          openCardId: cardId,
           targetRealm,
         });
       },
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 4e5d5c02324..e2735c5d231 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -39,7 +39,7 @@ import {
   type CardErrorJSONAPI,
 } from '@cardstack/runtime-common';
 
-import ListingCreateCommand from '@cardstack/host/commands/listing-create';
+import OpenCreateListingModalCommand from '@cardstack/host/commands/open-create-listing-modal';
 import { getCardType } from '@cardstack/host/resources/card-type';
 import type { Ready } from '@cardstack/host/resources/file';
 
@@ -300,6 +300,11 @@ export default class DetailPanel extends Component<Signature> {
       },
       ...(this.realm.canWrite(this.args.readyFile.url)
         ? [
+            {
+              label: 'Create Listing',
+              icon: Package,
+              handler: this.createListingWithAI,
+            },
             {
               label: 'Delete',
               icon: IconTrash,
@@ -416,21 +421,30 @@ export default class DetailPanel extends Component<Signature> {
   }
 
   @action private async createListingWithAI() {
-    const command = new ListingCreateCommand(
+    const command = new OpenCreateListingModalCommand(
       this.commandService.commandContext,
     );
-    let codeRef: ResolvedCodeRef = this.selectedDeclarationAsCodeRef;
-    if (!codeRef) {
-      throw new Error('codeRef is required to create listing');
-    }
     const targetRealm = this.operatorModeStateService.realmURL;
     if (!targetRealm) {
       throw new Error('targetRealm is required to create listing');
     }
-    await command.execute({
-      codeRef,
-      targetRealm,
-    });
+    if (this.isCardInstance) {
+      const openCardId = this.args.readyFile.url;
+      const codeRef = this.cardInstanceType?.type
+        ? getResolvedCodeRefFromType(this.cardInstanceType.type)
+        : undefined;
+      if (!codeRef) {
+        throw new Error('Cannot create listing: card type not yet loaded');
+      }
+      await command.execute({ openCardId, codeRef, targetRealm });
+    } else {
+      const codeRef: ResolvedCodeRef = this.selectedDeclarationAsCodeRef;
+      await command.execute({
+        codeRef,
+        openCardId: this.args.cardInstance?.id,
+        targetRealm,
+      });
+    }
   }
 
   private get selectedDeclarationAsCodeRef(): ResolvedCodeRef {

From c62229dacad45739325eed9b218f31dcd73c56d0 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sun, 15 Mar 2026 12:27:08 +0800
Subject: [PATCH 4/9] add command test

---
 .../acceptance/code-submode/inspector-test.ts |  63 +++++++
 .../open-create-listing-modal-test.gts        | 125 ++++++++++++++
 .../components/create-listing-modal-test.gts  | 158 ++++++++++++++++++
 3 files changed, 346 insertions(+)
 create mode 100644 packages/host/tests/integration/commands/open-create-listing-modal-test.gts
 create mode 100644 packages/host/tests/integration/components/create-listing-modal-test.gts

diff --git a/packages/host/tests/acceptance/code-submode/inspector-test.ts b/packages/host/tests/acceptance/code-submode/inspector-test.ts
index 702463b6000..2b8615ef2e9 100644
--- a/packages/host/tests/acceptance/code-submode/inspector-test.ts
+++ b/packages/host/tests/acceptance/code-submode/inspector-test.ts
@@ -2693,4 +2693,67 @@ export class ExportedCard extends ExportedCardParent {
         .includesText('File Definition');
     });
   });
+
+  test('clicking "Create Listing" opens confirmation modal for card definition', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[]],
+      submode: 'code',
+      codePath: `${testRealmURL}in-this-file.gts`,
+    });
+
+    await waitFor('[data-boxel-selector-item-text="ExportedCard"]');
+    await click('[data-boxel-selector-item-text="ExportedCard"]');
+    await waitFor('[data-test-card-module-definition]');
+
+    await click('[data-test-action-button="Create Listing"]');
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .exists('confirmation modal appears after clicking Create Listing');
+  });
+
+  test('clicking "Create Listing" on a card instance opens modal with instance pre-selected', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[]],
+      submode: 'code',
+      codePath: `${testRealmURL}Pet/mango.json`,
+    });
+
+    await waitFor('[data-test-card-inspector-panel]');
+    await waitFor('[data-test-card-instance-definition]');
+
+    await click('[data-test-action-button="Create Listing"]');
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .exists('confirmation modal appears after clicking Create Listing');
+    assert
+      .dom(
+        `.ember-power-select-trigger [data-test-create-listing-instance-option]`,
+      )
+      .exists('instance option is pre-selected in the source dropdown');
+  });
+
+  test('cancel button in Create Listing modal closes the modal', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[]],
+      submode: 'code',
+      codePath: `${testRealmURL}in-this-file.gts`,
+    });
+
+    await waitFor('[data-boxel-selector-item-text="ExportedCard"]');
+    await click('[data-boxel-selector-item-text="ExportedCard"]');
+    await waitFor('[data-test-card-module-definition]');
+
+    await click('[data-test-action-button="Create Listing"]');
+    await waitFor('[data-test-create-listing-modal]');
+
+    await click('[data-test-create-listing-cancel-button]');
+
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .doesNotExist('modal is dismissed after clicking Cancel');
+  });
 });
diff --git a/packages/host/tests/integration/commands/open-create-listing-modal-test.gts b/packages/host/tests/integration/commands/open-create-listing-modal-test.gts
new file mode 100644
index 00000000000..45d059d3611
--- /dev/null
+++ b/packages/host/tests/integration/commands/open-create-listing-modal-test.gts
@@ -0,0 +1,125 @@
+import { getService } from '@universal-ember/test-support';
+import { module, test } from 'qunit';
+
+import OpenCreateListingModalCommand from '@cardstack/host/commands/open-create-listing-modal';
+
+import {
+  setupIntegrationTestRealm,
+  setupLocalIndexing,
+  testRealmURL,
+  setupRealmCacheTeardown,
+  withCachedRealmSetup,
+} from '../../helpers';
+import { setupBaseRealm } from '../../helpers/base-realm';
+import { setupMockMatrix } from '../../helpers/mock-matrix';
+import { setupRenderingTest } from '../../helpers/setup';
+
+module('Integration | commands | open-create-listing-modal', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+  setupLocalIndexing(hooks);
+
+  let mockMatrixUtils = setupMockMatrix(hooks, {
+    loggedInAs: '@testuser:localhost',
+    activeRealms: [testRealmURL],
+    autostart: true,
+  });
+
+  setupRealmCacheTeardown(hooks);
+
+  hooks.beforeEach(async function () {
+    await withCachedRealmSetup(async () =>
+      setupIntegrationTestRealm({
+        mockMatrixUtils,
+        contents: {},
+      }),
+    );
+  });
+
+  test('stores modal request in operator mode state', async function (assert) {
+    let commandService = getService('command-service');
+    let operatorModeStateService = getService('operator-mode-state-service');
+
+    let command = new OpenCreateListingModalCommand(
+      commandService.commandContext,
+    );
+
+    await command.execute({
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+      openCardId: `${testRealmURL}Pet/mango`,
+    } as never);
+
+    assert.deepEqual(operatorModeStateService.createListingModalRequest, {
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+      openCardId: `${testRealmURL}Pet/mango`,
+    });
+  });
+
+  test('stores modal request without openCardId', async function (assert) {
+    let commandService = getService('command-service');
+    let operatorModeStateService = getService('operator-mode-state-service');
+
+    let command = new OpenCreateListingModalCommand(
+      commandService.commandContext,
+    );
+
+    await command.execute({
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+    } as never);
+
+    let request = operatorModeStateService.createListingModalRequest;
+    assert.deepEqual(request?.codeRef, {
+      module: `${testRealmURL}pet`,
+      name: 'Pet',
+    });
+    assert.strictEqual(request?.targetRealm, testRealmURL);
+    assert.strictEqual(
+      request?.openCardId,
+      undefined,
+      'openCardId is absent from state',
+    );
+  });
+
+  test('closeCreateListingModal clears the request', async function (assert) {
+    let commandService = getService('command-service');
+    let operatorModeStateService = getService('operator-mode-state-service');
+
+    let command = new OpenCreateListingModalCommand(
+      commandService.commandContext,
+    );
+
+    await command.execute({
+      codeRef: {
+        module: `${testRealmURL}pet`,
+        name: 'Pet',
+      },
+      targetRealm: testRealmURL,
+      openCardId: `${testRealmURL}Pet/mango`,
+    } as never);
+
+    assert.ok(
+      operatorModeStateService.createListingModalRequest,
+      'request is set after execute',
+    );
+
+    operatorModeStateService.closeCreateListingModal();
+
+    assert.strictEqual(
+      operatorModeStateService.createListingModalRequest,
+      undefined,
+      'request is cleared after closeCreateListingModal',
+    );
+  });
+});
diff --git a/packages/host/tests/integration/components/create-listing-modal-test.gts b/packages/host/tests/integration/components/create-listing-modal-test.gts
new file mode 100644
index 00000000000..ddb4abcf180
--- /dev/null
+++ b/packages/host/tests/integration/components/create-listing-modal-test.gts
@@ -0,0 +1,158 @@
+import { click, waitFor } from '@ember/test-helpers';
+import GlimmerComponent from '@glimmer/component';
+
+import { module, test } from 'qunit';
+
+import OperatorMode from '@cardstack/host/components/operator-mode/container';
+
+import { testRealmURL } from '../../helpers';
+import { renderComponent } from '../../helpers/render-component';
+
+import { setupOperatorModeTests } from './operator-mode/setup';
+
+module(
+  'Integration | components | create-listing-modal',
+  function (hooks) {
+    let ctx = setupOperatorModeTests(hooks);
+
+    let noop = () => {};
+
+    test('modal is hidden by default', async function (assert) {
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template><OperatorMode @onClose={{noop}} /></template>
+        },
+      );
+
+      assert.dom('[data-test-create-listing-modal]').doesNotExist();
+    });
+
+    test('modal renders when request is set', async function (assert) {
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template><OperatorMode @onClose={{noop}} /></template>
+        },
+      );
+
+      ctx.operatorModeStateService.openCreateListingModal({
+        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+        targetRealm: testRealmURL,
+      });
+
+      await waitFor('[data-test-create-listing-modal]');
+
+      assert.dom('[data-test-create-listing-modal]').exists();
+      assert
+        .dom('[data-test-create-listing-modal]')
+        .includesText('Create Listing');
+    });
+
+    test('shows target realm name', async function (assert) {
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template><OperatorMode @onClose={{noop}} /></template>
+        },
+      );
+
+      ctx.operatorModeStateService.openCreateListingModal({
+        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+        targetRealm: testRealmURL,
+      });
+
+      await waitFor('[data-test-create-listing-modal]');
+
+      assert
+        .dom('[data-test-create-listing-target-realm]')
+        .includesText(ctx.realmName);
+    });
+
+    test('source select defaults to definition when no openCardId', async function (assert) {
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template><OperatorMode @onClose={{noop}} /></template>
+        },
+      );
+
+      ctx.operatorModeStateService.openCreateListingModal({
+        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+        targetRealm: testRealmURL,
+      });
+
+      await waitFor('[data-test-create-listing-modal]');
+
+      assert
+        .dom(
+          '.ember-power-select-trigger [data-test-create-listing-definition-option]',
+        )
+        .exists('definition option is selected in the trigger');
+    });
+
+    test('source select pre-selects instance when openCardId is provided', async function (assert) {
+      let openCardId = `${testRealmURL}Pet/mango`;
+
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template><OperatorMode @onClose={{noop}} /></template>
+        },
+      );
+
+      ctx.operatorModeStateService.openCreateListingModal({
+        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+        targetRealm: testRealmURL,
+        openCardId,
+      });
+
+      await waitFor('[data-test-create-listing-modal]');
+
+      assert
+        .dom(
+          `.ember-power-select-trigger [data-test-create-listing-instance-option="${openCardId}"]`,
+        )
+        .exists(
+          'instance option matching openCardId is selected in the trigger',
+        );
+    });
+
+    test('cancel button closes modal', async function (assert) {
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template><OperatorMode @onClose={{noop}} /></template>
+        },
+      );
+
+      ctx.operatorModeStateService.openCreateListingModal({
+        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+        targetRealm: testRealmURL,
+      });
+
+      await waitFor('[data-test-create-listing-modal]');
+      await click('[data-test-create-listing-cancel-button]');
+
+      assert.dom('[data-test-create-listing-modal]').doesNotExist();
+    });
+
+    test('shows error when listing creation fails', async function (assert) {
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template><OperatorMode @onClose={{noop}} /></template>
+        },
+      );
+
+      // Provide an incomplete codeRef (missing 'module') so the create task
+      // fails synchronously with a descriptive error message.
+      ctx.operatorModeStateService.openCreateListingModal({
+        codeRef: { name: 'Pet' } as any,
+        targetRealm: testRealmURL,
+      });
+
+      await waitFor('[data-test-create-listing-modal]');
+      await click('[data-test-create-listing-confirm-button]');
+
+      await waitFor('[data-test-create-listing-error]');
+
+      assert
+        .dom('[data-test-create-listing-error]')
+        .includesText('Cannot create listing without a resolved code ref');
+    });
+  },
+);

From 0d6e5c8c3cd6ec31a8c54d394c127c3cd58b0cbf Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sun, 15 Mar 2026 14:40:11 +0800
Subject: [PATCH 5/9] fix lint

---
 packages/catalog-new/contents                 |   1 +
 .../components/create-listing-modal-test.gts  | 237 +++++++++---------
 2 files changed, 117 insertions(+), 121 deletions(-)
 create mode 160000 packages/catalog-new/contents

diff --git a/packages/catalog-new/contents b/packages/catalog-new/contents
new file mode 160000
index 00000000000..c3845a0cb6e
--- /dev/null
+++ b/packages/catalog-new/contents
@@ -0,0 +1 @@
+Subproject commit c3845a0cb6e2a59d9995c3857904d518979fae85
diff --git a/packages/host/tests/integration/components/create-listing-modal-test.gts b/packages/host/tests/integration/components/create-listing-modal-test.gts
index ddb4abcf180..7068890bd73 100644
--- a/packages/host/tests/integration/components/create-listing-modal-test.gts
+++ b/packages/host/tests/integration/components/create-listing-modal-test.gts
@@ -10,149 +10,144 @@ import { renderComponent } from '../../helpers/render-component';
 
 import { setupOperatorModeTests } from './operator-mode/setup';
 
-module(
-  'Integration | components | create-listing-modal',
-  function (hooks) {
-    let ctx = setupOperatorModeTests(hooks);
+module('Integration | components | create-listing-modal', function (hooks) {
+  let ctx = setupOperatorModeTests(hooks);
+
+  let noop = () => {};
+
+  test('modal is hidden by default', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    assert.dom('[data-test-create-listing-modal]').doesNotExist();
+  });
+
+  test('modal renders when request is set', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.openCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
+    });
+
+    await waitFor('[data-test-create-listing-modal]');
 
-    let noop = () => {};
+    assert.dom('[data-test-create-listing-modal]').exists();
+    assert
+      .dom('[data-test-create-listing-modal]')
+      .includesText('Create Listing');
+  });
 
-    test('modal is hidden by default', async function (assert) {
-      await renderComponent(
-        class TestDriver extends GlimmerComponent {
-          <template><OperatorMode @onClose={{noop}} /></template>
-        },
-      );
+  test('shows target realm name', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
 
-      assert.dom('[data-test-create-listing-modal]').doesNotExist();
+    ctx.operatorModeStateService.openCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
     });
 
-    test('modal renders when request is set', async function (assert) {
-      await renderComponent(
-        class TestDriver extends GlimmerComponent {
-          <template><OperatorMode @onClose={{noop}} /></template>
-        },
-      );
+    await waitFor('[data-test-create-listing-modal]');
 
-      ctx.operatorModeStateService.openCreateListingModal({
-        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
-        targetRealm: testRealmURL,
-      });
+    assert
+      .dom('[data-test-create-listing-target-realm]')
+      .includesText(ctx.realmName);
+  });
 
-      await waitFor('[data-test-create-listing-modal]');
+  test('source select defaults to definition when no openCardId', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
 
-      assert.dom('[data-test-create-listing-modal]').exists();
-      assert
-        .dom('[data-test-create-listing-modal]')
-        .includesText('Create Listing');
+    ctx.operatorModeStateService.openCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
     });
 
-    test('shows target realm name', async function (assert) {
-      await renderComponent(
-        class TestDriver extends GlimmerComponent {
-          <template><OperatorMode @onClose={{noop}} /></template>
-        },
-      );
+    await waitFor('[data-test-create-listing-modal]');
 
-      ctx.operatorModeStateService.openCreateListingModal({
-        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
-        targetRealm: testRealmURL,
-      });
+    assert
+      .dom(
+        '.ember-power-select-trigger [data-test-create-listing-definition-option]',
+      )
+      .exists('definition option is selected in the trigger');
+  });
 
-      await waitFor('[data-test-create-listing-modal]');
+  test('source select pre-selects instance when openCardId is provided', async function (assert) {
+    let openCardId = `${testRealmURL}Pet/mango`;
 
-      assert
-        .dom('[data-test-create-listing-target-realm]')
-        .includesText(ctx.realmName);
-    });
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
 
-    test('source select defaults to definition when no openCardId', async function (assert) {
-      await renderComponent(
-        class TestDriver extends GlimmerComponent {
-          <template><OperatorMode @onClose={{noop}} /></template>
-        },
-      );
-
-      ctx.operatorModeStateService.openCreateListingModal({
-        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
-        targetRealm: testRealmURL,
-      });
-
-      await waitFor('[data-test-create-listing-modal]');
-
-      assert
-        .dom(
-          '.ember-power-select-trigger [data-test-create-listing-definition-option]',
-        )
-        .exists('definition option is selected in the trigger');
+    ctx.operatorModeStateService.openCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
+      openCardId,
     });
 
-    test('source select pre-selects instance when openCardId is provided', async function (assert) {
-      let openCardId = `${testRealmURL}Pet/mango`;
-
-      await renderComponent(
-        class TestDriver extends GlimmerComponent {
-          <template><OperatorMode @onClose={{noop}} /></template>
-        },
-      );
-
-      ctx.operatorModeStateService.openCreateListingModal({
-        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
-        targetRealm: testRealmURL,
-        openCardId,
-      });
-
-      await waitFor('[data-test-create-listing-modal]');
-
-      assert
-        .dom(
-          `.ember-power-select-trigger [data-test-create-listing-instance-option="${openCardId}"]`,
-        )
-        .exists(
-          'instance option matching openCardId is selected in the trigger',
-        );
+    await waitFor('[data-test-create-listing-modal]');
+
+    assert
+      .dom(
+        `.ember-power-select-trigger [data-test-create-listing-instance-option="${openCardId}"]`,
+      )
+      .exists('instance option matching openCardId is selected in the trigger');
+  });
+
+  test('cancel button closes modal', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.openCreateListingModal({
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
+      targetRealm: testRealmURL,
     });
 
-    test('cancel button closes modal', async function (assert) {
-      await renderComponent(
-        class TestDriver extends GlimmerComponent {
-          <template><OperatorMode @onClose={{noop}} /></template>
-        },
-      );
+    await waitFor('[data-test-create-listing-modal]');
+    await click('[data-test-create-listing-cancel-button]');
 
-      ctx.operatorModeStateService.openCreateListingModal({
-        codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
-        targetRealm: testRealmURL,
-      });
+    assert.dom('[data-test-create-listing-modal]').doesNotExist();
+  });
 
-      await waitFor('[data-test-create-listing-modal]');
-      await click('[data-test-create-listing-cancel-button]');
+  test('shows error when listing creation fails', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
 
-      assert.dom('[data-test-create-listing-modal]').doesNotExist();
+    // Provide an incomplete codeRef (missing 'module') so the create task
+    // fails synchronously with a descriptive error message.
+    ctx.operatorModeStateService.openCreateListingModal({
+      codeRef: { name: 'Pet' } as any,
+      targetRealm: testRealmURL,
     });
 
-    test('shows error when listing creation fails', async function (assert) {
-      await renderComponent(
-        class TestDriver extends GlimmerComponent {
-          <template><OperatorMode @onClose={{noop}} /></template>
-        },
-      );
+    await waitFor('[data-test-create-listing-modal]');
+    await click('[data-test-create-listing-confirm-button]');
 
-      // Provide an incomplete codeRef (missing 'module') so the create task
-      // fails synchronously with a descriptive error message.
-      ctx.operatorModeStateService.openCreateListingModal({
-        codeRef: { name: 'Pet' } as any,
-        targetRealm: testRealmURL,
-      });
+    await waitFor('[data-test-create-listing-error]');
 
-      await waitFor('[data-test-create-listing-modal]');
-      await click('[data-test-create-listing-confirm-button]');
-
-      await waitFor('[data-test-create-listing-error]');
-
-      assert
-        .dom('[data-test-create-listing-error]')
-        .includesText('Cannot create listing without a resolved code ref');
-    });
-  },
-);
+    assert
+      .dom('[data-test-create-listing-error]')
+      .includesText('Cannot create listing without a resolved code ref');
+  });
+});

From 0606903eb1876a92ee716284b595abf807e7dfba Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sun, 15 Mar 2026 15:16:16 +0800
Subject: [PATCH 6/9] fix realm index

---
 packages/host/tests/integration/realm-indexing-test.gts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/host/tests/integration/realm-indexing-test.gts b/packages/host/tests/integration/realm-indexing-test.gts
index a1ddb51411a..f85a747ab37 100644
--- a/packages/host/tests/integration/realm-indexing-test.gts
+++ b/packages/host/tests/integration/realm-indexing-test.gts
@@ -4173,7 +4173,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://packages/@cardstack/boxel-host/commands/copy-card',
         'https://packages/@cardstack/boxel-host/commands/create-ai-assistant-room',
         'https://packages/@cardstack/boxel-host/commands/generate-example-cards',
-        'https://packages/@cardstack/boxel-host/commands/listing-create',
+        'https://packages/@cardstack/boxel-host/commands/open-create-listing-modal',
         'https://packages/@cardstack/boxel-host/commands/open-in-interact-mode',
         'https://packages/@cardstack/boxel-host/commands/patch-theme',
         'https://packages/@cardstack/boxel-host/commands/populate-with-sample-data',
@@ -4309,7 +4309,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://packages/@cardstack/boxel-host/commands/create-ai-assistant-room',
         'https://packages/@cardstack/boxel-host/commands/generate-example-cards',
         'https://packages/@cardstack/boxel-host/commands/generate-readme-spec',
-        'https://packages/@cardstack/boxel-host/commands/listing-create',
+        'https://packages/@cardstack/boxel-host/commands/open-create-listing-modal',
         'https://packages/@cardstack/boxel-host/commands/open-in-interact-mode',
         'https://packages/@cardstack/boxel-host/commands/patch-theme',
         'https://packages/@cardstack/boxel-host/commands/populate-with-sample-data',

From 5e825a478e18e5c7b2a5cfa9a51de79b8d61d0d4 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sun, 15 Mar 2026 16:31:42 +0800
Subject: [PATCH 7/9] address codex feedback

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

diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index e2735c5d231..d6c1421472f 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -429,7 +429,7 @@ export default class DetailPanel extends Component<Signature> {
       throw new Error('targetRealm is required to create listing');
     }
     if (this.isCardInstance) {
-      const openCardId = this.args.readyFile.url;
+      const openCardId = this.args.cardInstance?.id;
       const codeRef = this.cardInstanceType?.type
         ? getResolvedCodeRefFromType(this.cardInstanceType.type)
         : undefined;

From 15cfc048b653fbca59aa7c1c99dd6911c4162a7c Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Sun, 15 Mar 2026 22:03:59 +0800
Subject: [PATCH 8/9] prevent stale create task from closing newer modal
 requests

---
 .../app/components/operator-mode/create-listing-modal.gts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/host/app/components/operator-mode/create-listing-modal.gts b/packages/host/app/components/operator-mode/create-listing-modal.gts
index f77e3d94f70..58599e167a8 100644
--- a/packages/host/app/components/operator-mode/create-listing-modal.gts
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -78,7 +78,11 @@ export default class CreateListingModal extends Component<Signature> {
         targetRealm: request.targetRealm,
         openCardId: this.activeOpenCardId ?? undefined,
       });
-      this.operatorModeStateService.closeCreateListingModal();
+      // Only close if the request hasn't been replaced by a newer one while
+      // the task was running (e.g. user dismissed and reopened for a different card).
+      if (this.request === request) {
+        this.operatorModeStateService.closeCreateListingModal();
+      }
     } catch (error) {
       this.errorMessage =
         error instanceof Error ? error.message : 'Failed to create listing';
@@ -175,6 +179,8 @@ export default class CreateListingModal extends Component<Signature> {
 
   @action private onClose() {
     this.errorMessage = undefined;
+    this._userSelectedKey = undefined;
+    this._userSelectedValue = null;
     this.operatorModeStateService.closeCreateListingModal();
   }
 

From 82239b560616c606bdbe4884ec902031feac498a Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Tue, 17 Mar 2026 10:24:50 +0800
Subject: [PATCH 9/9] implement oeprator mode toast

---
 packages/base/menu-items.ts                   |   2 +-
 packages/host/app/commands/listing-create.ts  |   4 -
 .../app/commands/open-create-listing-modal.ts |   2 +-
 .../operator-mode/create-listing-modal.gts    | 285 +++++++++---------
 .../operator-mode/submode-layout.gts          |  13 +
 packages/host/app/components/toast.gts        | 162 ++++++++++
 .../services/operator-mode-state-service.ts   |  21 +-
 .../open-create-listing-modal-test.gts        |   6 +-
 .../components/create-listing-modal-test.gts  |  12 +-
 9 files changed, 343 insertions(+), 164 deletions(-)
 create mode 100644 packages/host/app/components/toast.gts

diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index 84ce63e521c..fdfb1b3544e 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -155,7 +155,7 @@ export function getDefaultCardMenuItems(
     });
     menuItems = [...menuItems, ...getSampleDataMenuItems(card, params)];
     menuItems.push({
-      label: `Create Listing with AI`,
+      label: `Create Listing`,
       action: async () => {
         const codeRef = resolveAdoptsFrom(card);
         if (!codeRef) {
diff --git a/packages/host/app/commands/listing-create.ts b/packages/host/app/commands/listing-create.ts
index 54e6d940cf7..92a1da2f4dc 100644
--- a/packages/host/app/commands/listing-create.ts
+++ b/packages/host/app/commands/listing-create.ts
@@ -145,10 +145,6 @@ export default class ListingCreateCommand extends HostBaseCommand<
     };
     const listing = await this.store.add(listingDoc, { realm: targetRealm });
     // Always use the transient symbol-based localId; ignore any persisted id at this stage
-    const listingId = (listing as any)[(cardAPI as any).localId];
-    if (!listingId) {
-      throw new Error('Failed to create listing card (no localId)');
-    }
 
     const commandModule = await this.loadCommandModule();
     const listingCard = listing as CardAPI.CardDef; // ensure correct type
diff --git a/packages/host/app/commands/open-create-listing-modal.ts b/packages/host/app/commands/open-create-listing-modal.ts
index c7e51d1a285..a6e965bf246 100644
--- a/packages/host/app/commands/open-create-listing-modal.ts
+++ b/packages/host/app/commands/open-create-listing-modal.ts
@@ -24,7 +24,7 @@ export default class OpenCreateListingModalCommand extends HostBaseCommand<
   protected async run(
     input: BaseCommandModule.ListingCreateInput,
   ): Promise<undefined> {
-    this.operatorModeStateService.openCreateListingModal({
+    this.operatorModeStateService.showCreateListingModal({
       codeRef: input.codeRef,
       targetRealm: input.targetRealm,
       openCardId: input.openCardId,
diff --git a/packages/host/app/components/operator-mode/create-listing-modal.gts b/packages/host/app/components/operator-mode/create-listing-modal.gts
index 58599e167a8..6c45aece408 100644
--- a/packages/host/app/components/operator-mode/create-listing-modal.gts
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -1,28 +1,33 @@
+import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { getOwner } from '@ember/owner';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
-import { cached, tracked } from '@glimmer/tracking';
+import { tracked } from '@glimmer/tracking';
 
 import { dropTask } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
 import onKeyMod from 'ember-keyboard/modifiers/on-key';
 
 import {
-  BoxelSelect,
   Button,
   FieldContainer,
+  GridContainer,
   RealmIcon,
 } from '@cardstack/boxel-ui/components';
+import { cn } from '@cardstack/boxel-ui/helpers';
 
 import {
   isResolvedCodeRef,
   type ResolvedCodeRef,
 } from '@cardstack/runtime-common';
 
+import { Submodes } from '@cardstack/host/components/submode-switcher';
 import ListingCreateCommand from '@cardstack/host/commands/listing-create';
+import CardRenderer from '@cardstack/host/components/card-renderer';
 import ModalContainer from '@cardstack/host/components/modal-container';
+import { SelectedTypePill } from '@cardstack/host/components/operator-mode/create-file-modal';
 import { getSearch } from '@cardstack/host/resources/search';
 
 import type CommandService from '@cardstack/host/services/command-service';
@@ -31,16 +36,6 @@ import type RealmService from '@cardstack/host/services/realm';
 
 import type { CardDef } from 'https://cardstack.com/base/card-api';
 
-type SourceOption = {
-  id: string | null; // null = card definition, string = instance id
-  label: string;
-  detail: string;
-};
-
-function fileNameFromUrl(url: string, ext: string): string {
-  return `${url.split('/').pop() ?? url}${ext}`;
-}
-
 interface Signature {
   Args: {};
 }
@@ -50,9 +45,7 @@ export default class CreateListingModal extends Component<Signature> {
   @service declare private operatorModeStateService: OperatorModeStateService;
   @service declare private realm: RealmService;
 
-  @tracked private errorMessage?: string;
-  @tracked private _userSelectedKey?: string;
-  @tracked private _userSelectedValue: string | null = null;
+  @tracked private selectedExampleIds: Set<string> = new Set();
 
   private instancesSearch = getSearch<CardDef>(this, getOwner(this)!, () =>
     this.codeRef ? { filter: { type: this.codeRef } } : undefined,
@@ -64,28 +57,58 @@ export default class CreateListingModal extends Component<Signature> {
       throw new Error('Cannot create listing without a modal request');
     }
 
-    this.errorMessage = undefined;
+    let codeRef = this.codeRef;
+    if (!codeRef) {
+      throw new Error('Cannot create listing without a resolved code ref');
+    }
+
+    let targetRealm = request.targetRealm;
+    let selectedIds = this.effectiveSelectedExampleIds;
+    let openCardId =
+      selectedIds.size > 0
+        ? [...selectedIds][0]
+        : request.openCardId;
+    let title = this.codeRefTitle;
+
+    this.operatorModeStateService.dismissCreateListingModal();
+    this.operatorModeStateService.showToast({
+      status: 'loading',
+      message: `Creating listing for ${title}...`,
+    });
 
     try {
-      let codeRef = this.codeRef;
-      if (!codeRef) {
-        throw new Error('Cannot create listing without a resolved code ref');
-      }
-      await new ListingCreateCommand(
+      let result = await new ListingCreateCommand(
         this.commandService.commandContext,
       ).execute({
         codeRef,
-        targetRealm: request.targetRealm,
-        openCardId: this.activeOpenCardId ?? undefined,
+        targetRealm,
+        openCardId,
+      });
+      let cardUrl = result?.listing?.id;
+      this.operatorModeStateService.showToast({
+        status: 'success',
+        message: `${title} listing created successfully`,
+        ctaLabel: cardUrl ? 'View Listing' : undefined,
+        ctaAction: cardUrl
+          ? async () => {
+              this.operatorModeStateService.dismissToast();
+              if (this.operatorModeStateService.workspaceChooserOpened) {
+                this.operatorModeStateService.closeWorkspaceChooser();
+              }
+              await this.operatorModeStateService.updateCodePath(
+                new URL(cardUrl + '.json'),
+                'preview',
+              );
+              this.operatorModeStateService.updateSubmode(Submodes.Code);
+            }
+          : undefined,
       });
-      // Only close if the request hasn't been replaced by a newer one while
-      // the task was running (e.g. user dismissed and reopened for a different card).
-      if (this.request === request) {
-        this.operatorModeStateService.closeCreateListingModal();
-      }
     } catch (error) {
-      this.errorMessage =
-        error instanceof Error ? error.message : 'Failed to create listing';
+      this.operatorModeStateService.showToast({
+        status: 'error',
+        message:
+          error instanceof Error ? error.message : 'Failed to create listing',
+      });
     }
   });
 
@@ -110,84 +133,50 @@ export default class CreateListingModal extends Component<Signature> {
     return codeRef && isResolvedCodeRef(codeRef) ? codeRef : undefined;
   }
 
-  private get definitionLabel() {
-    let module = this.codeRef?.module;
-    return module
-      ? fileNameFromUrl(module, '.gts')
-      : (this.codeRef?.name ?? 'Unknown');
+  private get codeRefTitle(): string {
+    return this.codeRef?.name ?? 'Unknown';
   }
 
-  private get requestKey(): string | undefined {
-    let codeRef = this.codeRef;
-    return codeRef
-      ? `${codeRef.module}::${codeRef.name}::${this.request?.openCardId ?? ''}`
-      : undefined;
+  private get codeRefId(): string {
+    return this.request?.openCardId ?? this.codeRef?.module ?? '';
   }
 
-  private get activeOpenCardId(): string | null {
-    if (
-      this._userSelectedKey !== undefined &&
-      this._userSelectedKey === this.requestKey
-    ) {
-      return this._userSelectedValue;
-    }
-    return this.request?.openCardId ?? null;
+  private get instances(): CardDef[] {
+    return this.instancesSearch.instances;
   }
 
-  @cached
-  private get definitionOption(): SourceOption {
-    return {
-      id: null,
-      label: this.definitionLabel,
-      detail: 'Card Definition',
-    };
+  private get hasInstances(): boolean {
+    return this.instances.length > 0;
   }
 
-  @cached
-  private get allOptions(): SourceOption[] {
-    const instanceOptions: SourceOption[] = this.instancesSearch.instances.map(
-      (instance) => ({
-        id: instance.id,
-        label: fileNameFromUrl(instance.id, '.json'),
-        detail: 'Instance',
-      }),
-    );
-    // If opened from a specific instance (openCardId), ensure it appears in
-    // the list immediately — before the async search finishes loading — so
-    // the select shows it as pre-selected on first render.
-    const openCardId = this.request?.openCardId;
-    if (openCardId && !instanceOptions.some((o) => o.id === openCardId)) {
-      instanceOptions.unshift({
-        id: openCardId,
-        label: fileNameFromUrl(openCardId, '.json'),
-        detail: 'Instance',
-      });
+  private get effectiveSelectedExampleIds(): Set<string> {
+    if (this.selectedExampleIds.size > 0) {
+      return this.selectedExampleIds;
     }
-    return [this.definitionOption, ...instanceOptions];
+    let openCardId = this.request?.openCardId;
+    return openCardId ? new Set([openCardId]) : new Set();
   }
 
-  private get selectedOption(): SourceOption {
-    return (
-      this.allOptions.find((opt) => opt.id === this.activeOpenCardId) ??
-      this.definitionOption
-    );
+  @action private onSelectExample(instance: CardDef) {
+    let id = instance.id;
+    let next = new Set(this.selectedExampleIds.size > 0
+      ? this.selectedExampleIds
+      : this.effectiveSelectedExampleIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    this.selectedExampleIds = next;
   }
 
-  private get isCreateRunning() {
-    return this.createListing.isRunning;
-  }
+  private isSelected = (instance: CardDef): boolean => {
+    return this.effectiveSelectedExampleIds.has(instance.id);
+  };
 
   @action private onClose() {
-    this.errorMessage = undefined;
-    this._userSelectedKey = undefined;
-    this._userSelectedValue = null;
-    this.operatorModeStateService.closeCreateListingModal();
-  }
-
-  @action private onSelectChange(option: SourceOption) {
-    this.errorMessage = undefined;
-    this._userSelectedKey = this.requestKey;
-    this._userSelectedValue = option.id;
+    this.selectedExampleIds = new Set();
+    this.operatorModeStateService.dismissCreateListingModal();
   }
 
   <template>
@@ -202,6 +191,10 @@ export default class CreateListingModal extends Component<Signature> {
         data-test-create-listing-modal
       >
         <:content>
+          <p class='description'>
+            You need a listing to share your code with others and publish to
+            catalogs.
+          </p>
           <FieldContainer @label='Create In' @tag='label' class='field'>
             <div
               class='field-contents realm-value'
@@ -214,42 +207,42 @@ export default class CreateListingModal extends Component<Signature> {
             </div>
           </FieldContainer>
 
-          <FieldContainer @label='Source' @tag='div' class='field'>
-            <BoxelSelect
-              class='source-select'
-              @options={{this.allOptions}}
-              @selected={{this.selectedOption}}
-              @onChange={{this.onSelectChange}}
-              @disabled={{this.isCreateRunning}}
-              @renderInPlace={{true}}
-              data-test-create-listing-source-select
-              as |option|
-            >
-              <div
-                class='source-option-item'
-                data-test-create-listing-definition-option={{unless
-                  option.id
-                  'true'
-                }}
-                data-test-create-listing-instance-option={{option.id}}
-              >
-                <span
-                  class='option-label'
-                  data-test-create-listing-display-name={{unless
-                    option.id
-                    'true'
-                  }}
-                >{{option.label}}</span>
-                <span class='option-detail'>{{option.detail}}</span>
-              </div>
-            </BoxelSelect>
+          <FieldContainer @label='CodeRef' @tag='label' class='field'>
+            <div class='field-contents' data-test-create-listing-coderef>
+              <SelectedTypePill
+                @title={{this.codeRefTitle}}
+                @id={{this.codeRefId}}
+              />
+            </div>
           </FieldContainer>
 
-          {{#if this.errorMessage}}
-            <p class='error' data-test-create-listing-error>
-              {{this.errorMessage}}
-            </p>
+          {{#if this.hasInstances}}
+            <FieldContainer @label='Example' @tag='div' class='field'>
+              <GridContainer
+                class='examples-grid'
+                data-test-create-listing-examples
+              >
+                {{#each this.instances as |instance|}}
+                  <button
+                    type='button'
+                    class={{cn
+                      'example-card'
+                      selected=(this.isSelected instance)
+                    }}
+                    {{on 'click' (fn this.onSelectExample instance)}}
+                    data-test-create-listing-example={{instance.id}}
+                  >
+                    <CardRenderer
+                      @card={{instance}}
+                      @format='fitted'
+                      @displayContainer={{false}}
+                    />
+                  </button>
+                {{/each}}
+              </GridContainer>
+            </FieldContainer>
           {{/if}}
+
         </:content>
         <:footer>
           <div class='footer-buttons'>
@@ -264,8 +257,6 @@ export default class CreateListingModal extends Component<Signature> {
             <Button
               @kind='primary'
               @size='tall'
-              @loading={{this.isCreateRunning}}
-              @disabled={{this.isCreateRunning}}
               {{on 'click' (perform this.createListing)}}
               {{onKeyMod 'Enter'}}
               data-test-create-listing-confirm-button
@@ -292,6 +283,11 @@ export default class CreateListingModal extends Component<Signature> {
       :deep(.create-listing) {
         height: 30rem;
       }
+      .description {
+        font: var(--boxel-font-sm);
+        color: var(--boxel-500);
+        margin: 0 0 var(--boxel-sp-sm);
+      }
       .field + .field {
         margin-top: var(--boxel-sp-sm);
       }
@@ -320,35 +316,30 @@ export default class CreateListingModal extends Component<Signature> {
       .realm-icon {
         --boxel-realm-icon-size: 1rem;
       }
-      .source-select {
+      .examples-grid {
         width: 100%;
-      }
-      .source-option-item {
-        display: flex;
-        align-items: center;
         gap: var(--boxel-sp-xs);
-        width: 100%;
       }
-      .option-label {
-        font: 600 var(--boxel-font-sm);
-        flex: 1;
+      .example-card {
+        all: unset;
+        cursor: pointer;
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+        overflow: hidden;
+        height: 60px;
+        box-sizing: border-box;
       }
-      .option-detail {
-        font: var(--boxel-font-xs);
-        color: var(--boxel-500);
-        white-space: nowrap;
+      .example-card:hover {
+        box-shadow: var(--boxel-box-shadow);
+      }
+      .example-card.selected {
+        border: 2px solid var(--boxel-dark);
       }
       .footer-buttons {
         display: flex;
         margin-left: auto;
         gap: var(--horizontal-gap);
       }
-      .error {
-        color: var(--boxel-danger);
-        font: 500 var(--boxel-font-sm);
-        letter-spacing: var(--boxel-lsp-xs);
-        margin: var(--boxel-sp) 0 0;
-      }
     </style>
   </template>
 }
diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts
index f801d63b65c..5817ddeecc3 100644
--- a/packages/host/app/components/operator-mode/submode-layout.gts
+++ b/packages/host/app/components/operator-mode/submode-layout.gts
@@ -31,6 +31,7 @@ import AiAssistantPanel from '@cardstack/host/components/ai-assistant/panel';
 import AiAssistantToast from '@cardstack/host/components/ai-assistant/toast';
 import ProfileSettingsModal from '@cardstack/host/components/operator-mode/profile/profile-settings-modal';
 import ProfileInfoPopover from '@cardstack/host/components/operator-mode/profile-info-popover';
+import Toast from '@cardstack/host/components/toast';
 
 import config from '@cardstack/host/config/environment';
 
@@ -454,6 +455,18 @@ export default class SubmodeLayout extends Component<Signature> {
               @onInputInsertion={{this.storeSearchElement}}
             />
           {{/if}}
+          {{#if this.operatorModeStateService.toast}}
+            <Toast
+              @isVisible={{true}}
+              @onDismiss={{this.operatorModeStateService.dismissToast}}
+              @status={{this.operatorModeStateService.toast.status}}
+              @ctaLabel={{this.operatorModeStateService.toast.ctaLabel}}
+              @onCtaClick={{this.operatorModeStateService.toast.ctaAction}}
+              data-test-toast
+            >
+              {{this.operatorModeStateService.toast.message}}
+            </Toast>
+          {{/if}}
           <AiAssistantToast
             @hide={{this.aiAssistantPanelService.isOpen}}
             @onViewInChatClick={{this.aiAssistantPanelService.openPanel}}
diff --git a/packages/host/app/components/toast.gts b/packages/host/app/components/toast.gts
new file mode 100644
index 00000000000..8bb98a16284
--- /dev/null
+++ b/packages/host/app/components/toast.gts
@@ -0,0 +1,162 @@
+import { on } from '@ember/modifier';
+
+import Component from '@glimmer/component';
+
+import {
+  BoxelButton,
+  IconButton,
+  LoadingIndicator,
+} from '@cardstack/boxel-ui/components';
+import { eq } from '@cardstack/boxel-ui/helpers';
+import { IconX } from '@cardstack/boxel-ui/icons';
+
+import AlertCircle from '@cardstack/boxel-icons/alert-circle';
+import CircleCheck from '@cardstack/boxel-icons/circle-check';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    isVisible: boolean;
+    onDismiss: () => void;
+    status?: 'loading' | 'success' | 'error';
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+  };
+  Blocks: {
+    header: [];
+    default: [];
+  };
+}
+
+export default class Toast extends Component<Signature> {
+  <template>
+    <div
+      class='toast {{if @isVisible "visible"}}'
+      data-test-toast={{@isVisible}}
+      ...attributes
+    >
+      <header class='toast-header'>
+        {{#if (has-block 'header')}}
+          {{yield to='header'}}
+        {{/if}}
+        <IconButton
+          @icon={{IconX}}
+          @width='10'
+          @height='10'
+          {{on 'click' @onDismiss}}
+          class='toast-close-button'
+          aria-label='close toast'
+          tabindex={{unless @isVisible '-1'}}
+          data-test-close-toast
+        />
+      </header>
+      <div class='toast-content' data-test-toast-content>
+        {{#if @status}}
+          <span class='toast-status-icon'>
+            {{#if (eq @status 'loading')}}
+              <LoadingIndicator @color='var(--boxel-light)' />
+            {{else if (eq @status 'success')}}
+              <CircleCheck width='16' height='16' />
+            {{else if (eq @status 'error')}}
+              <AlertCircle width='16' height='16' />
+            {{/if}}
+          </span>
+        {{/if}}
+        {{yield}}
+      </div>
+      {{#if @ctaLabel}}
+        <BoxelButton
+          @kind='secondary-dark'
+          @size='extra-small'
+          class='toast-cta-button'
+          {{on 'click' @onCtaClick}}
+          tabindex={{unless @isVisible '-1'}}
+          data-test-toast-cta-button
+        >
+          {{@ctaLabel}}
+        </BoxelButton>
+      {{/if}}
+    </div>
+    <style scoped>
+      .toast {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
+        background-color: var(--boxel-ai-purple);
+        border-radius: var(--boxel-border-radius);
+        padding: 0;
+        overflow: hidden;
+        position: absolute;
+        bottom: calc(
+          var(--boxel-sp) + var(--container-button-size) + var(--boxel-sp)
+        );
+        right: var(--boxel-sp);
+        opacity: 0;
+        height: 0;
+        max-width: 250px;
+        transition:
+          transform 0.5s ease-in-out,
+          opacity 0.5s ease-in-out;
+        transform: translateY(100%);
+      }
+      .visible {
+        padding: var(--boxel-sp);
+        opacity: 1;
+        height: fit-content;
+        transform: translateY(0);
+      }
+      .toast-header {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+        position: relative;
+        justify-content: flex-end;
+      }
+      .toast-close-button {
+        --icon-color: var(--boxel-450);
+        border: none;
+        background: none;
+        padding: 1px;
+        border-radius: var(--boxel-border-radius-xs);
+        transition: background-color 0.2s ease;
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
+        min-height: 16px;
+      }
+      .toast-close-button:hover {
+        --icon-color: var(--boxel-light);
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+      .toast-cta-button {
+        --boxel-button-font: 600 var(--boxel-font-xs);
+        --boxel-button-min-height: 1.5rem;
+        --boxel-button-padding: 0 var(--boxel-sp-xs);
+        min-width: initial;
+        width: fit-content;
+        max-height: 1.5rem;
+        margin-left: auto;
+      }
+      .toast-cta-button:hover {
+        filter: brightness(1.1);
+      }
+      .toast-content {
+        color: var(--boxel-light);
+        font-size: var(--boxel-font-sm);
+        font-weight: 500;
+        line-height: 1.25rem;
+        letter-spacing: var(--boxel-lsp-xs);
+        overflow: hidden;
+        display: flex;
+        align-items: flex-start;
+        gap: var(--boxel-sp-xs);
+      }
+      .toast-status-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        --icon-color: var(--boxel-light);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
index a481d0f7666..2abfd12094a 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -74,6 +74,13 @@ export interface CreateListingModalRequest {
   openCardId?: string;
 }
 
+export interface OperatorModeToast {
+  message: string;
+  status?: 'loading' | 'success' | 'error';
+  ctaLabel?: string;
+  ctaAction?: () => void;
+}
+
 // Below types form a raw POJO representation of operator mode state.
 // This state differs from OperatorModeState in that it only contains cards that have been saved (i.e. have an ID).
 // This is because we don't have a way to serialize a stack configuration of linked cards that have not been saved yet.
@@ -149,6 +156,7 @@ export default class OperatorModeStateService extends Service {
 
   @tracked profileSettingsOpen = false;
   @tracked createListingModalRequest?: CreateListingModalRequest;
+  @tracked toast?: OperatorModeToast;
 
   @service declare private cardService: CardService;
   @service declare private codeSemanticsService: CodeSemanticsService;
@@ -217,14 +225,22 @@ export default class OperatorModeStateService extends Service {
     this.schedulePersist();
   };
 
-  openCreateListingModal = (request: CreateListingModalRequest) => {
+  showCreateListingModal = (request: CreateListingModalRequest) => {
     this.createListingModalRequest = request;
   };
 
-  closeCreateListingModal = () => {
+  dismissCreateListingModal = () => {
     this.createListingModalRequest = undefined;
   };
 
+  showToast = (toast: OperatorModeToast) => {
+    this.toast = toast;
+  };
+
+  dismissToast = () => {
+    this.toast = undefined;
+  };
+
   setNewFileDropdownOpen = () => {
     this._state.newFileDropdownOpen = true;
     this.schedulePersist();
@@ -256,6 +272,7 @@ export default class OperatorModeStateService extends Service {
     this.moduleInspectorHistory = {};
     this.profileSettingsOpen = false;
     this.createListingModalRequest = undefined;
+    this.toast = undefined;
     window.localStorage.removeItem(ModuleInspectorSelections);
     this.schedulePersist();
   }
diff --git a/packages/host/tests/integration/commands/open-create-listing-modal-test.gts b/packages/host/tests/integration/commands/open-create-listing-modal-test.gts
index 45d059d3611..8ddcc276150 100644
--- a/packages/host/tests/integration/commands/open-create-listing-modal-test.gts
+++ b/packages/host/tests/integration/commands/open-create-listing-modal-test.gts
@@ -92,7 +92,7 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
     );
   });
 
-  test('closeCreateListingModal clears the request', async function (assert) {
+  test('dismissCreateListingModal clears the request', async function (assert) {
     let commandService = getService('command-service');
     let operatorModeStateService = getService('operator-mode-state-service');
 
@@ -114,12 +114,12 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
       'request is set after execute',
     );
 
-    operatorModeStateService.closeCreateListingModal();
+    operatorModeStateService.dismissCreateListingModal();
 
     assert.strictEqual(
       operatorModeStateService.createListingModalRequest,
       undefined,
-      'request is cleared after closeCreateListingModal',
+      'request is cleared after dismissCreateListingModal',
     );
   });
 });
diff --git a/packages/host/tests/integration/components/create-listing-modal-test.gts b/packages/host/tests/integration/components/create-listing-modal-test.gts
index 7068890bd73..ac5cbd1e01f 100644
--- a/packages/host/tests/integration/components/create-listing-modal-test.gts
+++ b/packages/host/tests/integration/components/create-listing-modal-test.gts
@@ -32,7 +32,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
       },
     );
 
-    ctx.operatorModeStateService.openCreateListingModal({
+    ctx.operatorModeStateService.showCreateListingModal({
       codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
       targetRealm: testRealmURL,
     });
@@ -52,7 +52,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
       },
     );
 
-    ctx.operatorModeStateService.openCreateListingModal({
+    ctx.operatorModeStateService.showCreateListingModal({
       codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
       targetRealm: testRealmURL,
     });
@@ -71,7 +71,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
       },
     );
 
-    ctx.operatorModeStateService.openCreateListingModal({
+    ctx.operatorModeStateService.showCreateListingModal({
       codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
       targetRealm: testRealmURL,
     });
@@ -94,7 +94,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
       },
     );
 
-    ctx.operatorModeStateService.openCreateListingModal({
+    ctx.operatorModeStateService.showCreateListingModal({
       codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
       targetRealm: testRealmURL,
       openCardId,
@@ -116,7 +116,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
       },
     );
 
-    ctx.operatorModeStateService.openCreateListingModal({
+    ctx.operatorModeStateService.showCreateListingModal({
       codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
       targetRealm: testRealmURL,
     });
@@ -136,7 +136,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
 
     // Provide an incomplete codeRef (missing 'module') so the create task
     // fails synchronously with a descriptive error message.
-    ctx.operatorModeStateService.openCreateListingModal({
+    ctx.operatorModeStateService.showCreateListingModal({
       codeRef: { name: 'Pet' } as any,
       targetRealm: testRealmURL,
     });