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 01/20] 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 02/20] 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 03/20] 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 04/20] 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 05/20] 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 06/20] 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 07/20] 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 08/20] 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 09/20] 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,
     });

From 0ddd02c38b41762c4db1d47b9e5245a5fb563d35 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 15:02:19 +0800
Subject: [PATCH 10/20] support openCardIDs

---
 packages/base/command.gts                     |   2 +-
 packages/host/app/commands/listing-create.ts  |  98 +++---
 .../app/commands/open-create-listing-modal.ts |   2 +-
 .../operator-mode/create-listing-modal.gts    | 333 +++++++++++-------
 .../operator-mode/submode-layout.gts          |  13 -
 .../services/operator-mode-state-service.ts   |  31 +-
 6 files changed, 276 insertions(+), 203 deletions(-)

diff --git a/packages/base/command.gts b/packages/base/command.gts
index 4d206d63cb2..8df32a10cf3 100644
--- a/packages/base/command.gts
+++ b/packages/base/command.gts
@@ -389,7 +389,7 @@ export class CreateListingPRRequestInput extends CardDef {
 }
 
 export class ListingCreateInput extends CardDef {
-  @field openCardId = contains(StringField);
+  @field openCardIds = containsMany(StringField);
   @field codeRef = contains(CodeRefField);
   @field targetRealm = contains(RealmField);
 }
diff --git a/packages/host/app/commands/listing-create.ts b/packages/host/app/commands/listing-create.ts
index 92a1da2f4dc..7efde970b80 100644
--- a/packages/host/app/commands/listing-create.ts
+++ b/packages/host/app/commands/listing-create.ts
@@ -113,7 +113,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
     input: BaseCommandModule.ListingCreateInput,
   ): Promise<BaseCommandModule.ListingCreateResult> {
     const cardAPI = await this.loadCardAPI();
-    let { openCardId, codeRef, targetRealm } = input;
+    let { openCardIds, codeRef, targetRealm } = input;
 
     if (!codeRef) {
       throw new Error('codeRef is required');
@@ -127,14 +127,17 @@ export default class ListingCreateCommand extends HostBaseCommand<
 
     let listingType = await this.guessListingType(codeRef);
 
+    let relationships: Record<string, { links: { self: string } }> = {};
+    if (openCardIds && openCardIds.length > 0) {
+      openCardIds.forEach((id, index) => {
+        relationships[`examples.${index}`] = { links: { self: id } };
+      });
+    }
+
     const listingDoc: LooseSingleCardDocument = {
       data: {
         type: 'card',
-        relationships: openCardId
-          ? {
-              'examples.0': { links: { self: openCardId } },
-            }
-          : {},
+        relationships,
         meta: {
           adoptsFrom: {
             module: `${this.catalogRealm}catalog-app/listing/listing`,
@@ -144,29 +147,31 @@ 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 commandModule = await this.loadCommandModule();
-    const listingCard = listing as CardAPI.CardDef; // ensure correct type
-    const specsPromise = this.linkSpecs(
-      listingCard,
-      targetRealm,
-      openCardId ?? codeRef?.module,
-    );
+    const listingCard = listing as CardAPI.CardDef;
+    const firstOpenCardId = openCardIds?.[0];
 
-    const promises = [
+    const backgroundWork = Promise.all([
       this.autoPatchName(listingCard, codeRef),
       this.autoPatchSummary(listingCard, codeRef),
       this.autoLinkTag(listingCard),
       this.autoLinkCategory(listingCard),
       this.autoLinkLicense(listingCard),
-      this.autoLinkExample(listingCard, codeRef, openCardId),
-      specsPromise,
-    ];
+      this.autoLinkExample(listingCard, codeRef, openCardIds),
+      this.linkSpecs(
+        listingCard,
+        targetRealm,
+        firstOpenCardId ?? codeRef?.module,
+      ),
+    ]).catch((error) => {
+      console.warn('Background autopatch failed:', error);
+    });
 
-    await Promise.all(promises);
     const { ListingCreateResult } = commandModule;
-    return new ListingCreateResult({ listing });
+    const result = new ListingCreateResult({ listing });
+    (result as any).backgroundWork = backgroundWork;
+    return result;
   }
 
   private async guessListingType(
@@ -249,7 +254,9 @@ export default class ListingCreateCommand extends HostBaseCommand<
     targetRealm: string,
     resourceUrl: string, // can be module or card instance id
   ): Promise<Spec[]> {
-    const url = `${targetRealm}_dependencies?url=${encodeURIComponent(resourceUrl)}`;
+    const resourceRealm =
+      this.realm.realmOfURL(new URL(resourceUrl))?.href ?? targetRealm;
+    const url = `${resourceRealm}_dependencies?url=${encodeURIComponent(resourceUrl)}`;
     const response = await this.network.authedFetch(url, {
       headers: { Accept: SupportedMimeType.JSONAPI },
     });
@@ -371,7 +378,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
   private async autoLinkExample(
     listing: CardAPI.CardDef,
     codeRef: ResolvedCodeRef,
-    openCardId?: string,
+    openCardIds?: string[],
   ) {
     const existingExamples = Array.isArray((listing as any).examples)
       ? ((listing as any).examples as CardAPI.CardDef[])
@@ -391,25 +398,30 @@ export default class ListingCreateCommand extends HostBaseCommand<
       addCard(existing);
     }
 
-    let exampleCard: CardAPI.CardDef | undefined;
-    if (openCardId) {
-      try {
-        const instance = await this.store.get<CardAPI.CardDef>(openCardId);
-        if (isCardInstance(instance)) {
-          exampleCard = instance as CardAPI.CardDef;
-        } else {
-          console.warn('autoLinkExample: openCardId is not a card instance', {
-            openCardId,
-          });
-        }
-      } catch (error) {
-        console.warn('autoLinkExample: failed to load openCardId', {
-          openCardId,
-          error,
-        });
-      }
+    if (openCardIds && openCardIds.length > 0) {
+      await Promise.all(
+        openCardIds.map(async (openCardId) => {
+          try {
+            const instance =
+              await this.store.get<CardAPI.CardDef>(openCardId);
+            if (isCardInstance(instance)) {
+              addCard(instance as CardAPI.CardDef);
+            } else {
+              console.warn(
+                'autoLinkExample: openCardId is not a card instance',
+                { openCardId },
+              );
+            }
+          } catch (error) {
+            console.warn('autoLinkExample: failed to load openCardId', {
+              openCardId,
+              error,
+            });
+          }
+        }),
+      );
     } else {
-      // If no openCardId was provided, attempt to find any existing instance of this type.
+      // If no openCardIds were provided, attempt to find any existing instance of this type.
       try {
         const search = new SearchCardsByTypeAndTitleCommand(
           this.commandContext,
@@ -421,7 +433,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
             (c: any) => c && typeof c.id === 'string' && isCardInstance(c),
           );
           if (first) {
-            exampleCard = first as CardAPI.CardDef;
+            addCard(first as CardAPI.CardDef);
           }
         }
       } catch (error) {
@@ -432,10 +444,8 @@ export default class ListingCreateCommand extends HostBaseCommand<
       }
     }
 
-    addCard(exampleCard);
-
     const MAX_EXAMPLES = 4;
-    if (codeRef && exampleCard && uniqueById.size < MAX_EXAMPLES) {
+    if (codeRef && uniqueById.size > 0 && uniqueById.size < MAX_EXAMPLES) {
       try {
         const searchAndChoose = new SearchAndChooseCommand(this.commandContext);
         const existingIds = Array.from(uniqueById.keys());
@@ -457,7 +467,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
         }
       } catch (error) {
         console.warn('Failed to auto-link additional examples', {
-          sourceCardId: exampleCard.id,
+          codeRef,
           error,
         });
       }
diff --git a/packages/host/app/commands/open-create-listing-modal.ts b/packages/host/app/commands/open-create-listing-modal.ts
index a6e965bf246..ef1f4b0d1ca 100644
--- a/packages/host/app/commands/open-create-listing-modal.ts
+++ b/packages/host/app/commands/open-create-listing-modal.ts
@@ -27,7 +27,7 @@ export default class OpenCreateListingModalCommand extends HostBaseCommand<
     this.operatorModeStateService.showCreateListingModal({
       codeRef: input.codeRef,
       targetRealm: input.targetRealm,
-      openCardId: input.openCardId,
+      openCardIds: input.openCardIds,
     });
   }
 }
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 6c45aece408..32dc0896efe 100644
--- a/packages/host/app/components/operator-mode/create-listing-modal.gts
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -1,4 +1,3 @@
-import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { getOwner } from '@ember/owner';
@@ -6,26 +5,26 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { dropTask } from 'ember-concurrency';
+import { task } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
 import onKeyMod from 'ember-keyboard/modifiers/on-key';
 
 import {
+  BoxelInput,
   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 ItemButton from '@cardstack/host/components/card-search/item-button';
 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';
@@ -45,16 +44,16 @@ export default class CreateListingModal extends Component<Signature> {
   @service declare private operatorModeStateService: OperatorModeStateService;
   @service declare private realm: RealmService;
 
-  @tracked private selectedExampleIds: Set<string> = new Set();
+  @tracked private selectedExampleIds: Set<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');
+  private createListing = task(async () => {
+    let payload = this.payload;
+    if (!payload) {
+      throw new Error('Cannot create listing without a modal payload');
     }
 
     let codeRef = this.codeRef;
@@ -62,74 +61,64 @@ export default class CreateListingModal extends Component<Signature> {
       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}...`,
+    let targetRealm = payload.targetRealm;
+    // null means all selected → use all instance IDs
+    let openCardIds =
+      this.selectedExampleIds === null
+        ? this.instances.map((i) => i.id)
+        : this.selectedExampleIds.size > 0
+          ? [...this.selectedExampleIds]
+          : (payload.openCardIds ?? []);
+
+    let result = await new ListingCreateCommand(
+      this.commandService.commandContext,
+    ).execute({
+      codeRef,
+      targetRealm,
+      openCardIds,
     });
 
-    try {
-      let result = await new ListingCreateCommand(
-        this.commandService.commandContext,
-      ).execute({
-        codeRef,
-        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,
-      });
-    } catch (error) {
-      this.operatorModeStateService.showToast({
-        status: 'error',
-        message:
-          error instanceof Error ? error.message : 'Failed to create listing',
-      });
+    // Navigate to the listing in code mode with isolated preview
+    let cardUrl = result?.listing?.id;
+    if (cardUrl) {
+      if (this.operatorModeStateService.workspaceChooserOpened) {
+        this.operatorModeStateService.closeWorkspaceChooser();
+      }
+      await this.operatorModeStateService.updateSubmode(Submodes.Code);
+      await this.operatorModeStateService.updateCodePath(
+        new URL(cardUrl + '.json'),
+        'preview',
+      );
+      this.operatorModeStateService.updateCardPreviewFormat('isolated');
     }
+
+    // Keep modal open while background auto-patching runs
+    let backgroundWork = (result as any)?.backgroundWork;
+    if (backgroundWork) {
+      await backgroundWork;
+    }
+
+    this.operatorModeStateService.dismissCreateListingModal();
   });
 
-  private get request() {
-    return this.operatorModeStateService.createListingModalRequest;
+  private get payload() {
+    return this.operatorModeStateService.createListingModalPayload;
   }
 
   private get isModalOpen() {
-    return Boolean(this.request);
+    return Boolean(this.payload);
   }
 
   private get realmInfo() {
-    let request = this.request;
-    if (!request) {
+    let payload = this.payload;
+    if (!payload) {
       return undefined;
     }
-    return this.realm.info(request.targetRealm);
+    return this.realm.info(payload.targetRealm);
   }
 
   private get codeRef(): ResolvedCodeRef | undefined {
-    let codeRef = this.request?.codeRef;
+    let codeRef = this.payload?.codeRef;
     return codeRef && isResolvedCodeRef(codeRef) ? codeRef : undefined;
   }
 
@@ -138,7 +127,7 @@ export default class CreateListingModal extends Component<Signature> {
   }
 
   private get codeRefId(): string {
-    return this.request?.openCardId ?? this.codeRef?.module ?? '';
+    return this.payload?.openCardIds?.[0] ?? this.codeRef?.module ?? '';
   }
 
   private get instances(): CardDef[] {
@@ -149,33 +138,56 @@ export default class CreateListingModal extends Component<Signature> {
     return this.instances.length > 0;
   }
 
-  private get effectiveSelectedExampleIds(): Set<string> {
-    if (this.selectedExampleIds.size > 0) {
-      return this.selectedExampleIds;
+  // null = user hasn't manually toggled anything → all selected by default
+  private get hasManualSelection(): boolean {
+    return this.selectedExampleIds !== null;
+  }
+
+  private get allSelected(): boolean {
+    if (!this.hasInstances) {
+      return false;
     }
-    let openCardId = this.request?.openCardId;
-    return openCardId ? new Set([openCardId]) : new Set();
+    if (!this.hasManualSelection) {
+      return true;
+    }
+    return this.instances.every((instance) =>
+      this.selectedExampleIds!.has(instance.id),
+    );
   }
 
-  @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);
+  @action private onSelectExample(selection: string) {
+    // First manual toggle: start from "all selected" state
+    let current =
+      this.selectedExampleIds ?? new Set(this.instances.map((i) => i.id));
+    let next = new Set(current);
+    if (next.has(selection)) {
+      next.delete(selection);
     } else {
-      next.add(id);
+      next.add(selection);
     }
     this.selectedExampleIds = next;
   }
 
-  private isSelected = (instance: CardDef): boolean => {
-    return this.effectiveSelectedExampleIds.has(instance.id);
+  private isSelected = (id: string): boolean => {
+    // null means no manual selection → all selected
+    if (this.selectedExampleIds === null) {
+      return true;
+    }
+    return this.selectedExampleIds.has(id);
   };
 
-  @action private onClose() {
+  @action private selectAll() {
+    this.selectedExampleIds = new Set(
+      this.instances.map((instance) => instance.id),
+    );
+  }
+
+  @action private clearAll() {
     this.selectedExampleIds = new Set();
+  }
+
+  @action private onClose() {
+    this.selectedExampleIds = null;
     this.operatorModeStateService.dismissCreateListingModal();
   }
 
@@ -217,46 +229,83 @@ export default class CreateListingModal extends Component<Signature> {
           </FieldContainer>
 
           {{#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}}
+            <FieldContainer @label='Example' @tag='div' class='examples-field'>
+              <div class='examples-container' data-test-examples-container>
+                <div class='examples-header'>
+                  <label class='select-all-label'>
+                    <BoxelInput
+                      @type='checkbox'
+                      @value={{this.allSelected}}
+                      @onChange={{if
+                        this.allSelected
+                        this.clearAll
+                        this.selectAll
+                      }}
+                      data-test-select-all
+                    />
+                    Select All
+                  </label>
+                  <Button
+                    class='clear-all-button'
+                    @kind='text-only'
+                    @size='small'
+                    {{on 'click' this.clearAll}}
+                    data-test-clear-all
                   >
-                    <CardRenderer
-                      @card={{instance}}
-                      @format='fitted'
-                      @displayContainer={{false}}
+                    Clear All
+                  </Button>
+                </div>
+                <p class='examples-description'>
+                  Select the examples to be linked to the listing. These help
+                  others understand how to use your code.
+                </p>
+                <GridContainer
+                  class='examples-grid'
+                  data-test-create-listing-examples
+                >
+                  {{#each this.instances as |instance|}}
+                    <ItemButton
+                      class='example-card'
+                      @item={{instance}}
+                      @itemId={{instance.id}}
+                      @isSelected={{this.isSelected instance.id}}
+                      @multiSelect={{true}}
+                      @onSelect={{this.onSelectExample}}
+                      data-test-create-listing-example={{instance.id}}
                     />
-                  </button>
-                {{/each}}
-              </GridContainer>
+                  {{/each}}
+                </GridContainer>
+              </div>
             </FieldContainer>
           {{/if}}
 
         </:content>
         <:footer>
           <div class='footer-buttons'>
-            <Button
-              @size='tall'
-              {{on 'click' this.onClose}}
-              {{onKeyMod 'Escape'}}
-              data-test-create-listing-cancel-button
-            >
-              Cancel
-            </Button>
+            {{#if this.createListing.isRunning}}
+              <p
+                class='footer-loading-message'
+                data-test-create-listing-loading
+              >
+                Setting up your
+                <strong>{{this.codeRefTitle}}</strong>
+                listing. This may take a moment...
+              </p>
+            {{else}}
+              <Button
+                @size='tall'
+                {{on 'click' this.onClose}}
+                {{onKeyMod 'Escape'}}
+                data-test-create-listing-cancel-button
+              >
+                Cancel
+              </Button>
+            {{/if}}
             <Button
               @kind='primary'
               @size='tall'
+              @loading={{this.createListing.isRunning}}
+              @disabled={{this.createListing.isRunning}}
               {{on 'click' (perform this.createListing)}}
               {{onKeyMod 'Enter'}}
               data-test-create-listing-confirm-button
@@ -283,6 +332,22 @@ export default class CreateListingModal extends Component<Signature> {
       :deep(.create-listing) {
         height: 30rem;
       }
+      .footer-loading-message {
+        font: var(--boxel-font-sm);
+        color: var(--boxel-500);
+        margin: 0 auto 0 0;
+        flex: 1;
+        text-align: left;
+        animation: fade-in 0.3s ease-out;
+      }
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
       .description {
         font: var(--boxel-font-sm);
         color: var(--boxel-500);
@@ -316,29 +381,57 @@ export default class CreateListingModal extends Component<Signature> {
       .realm-icon {
         --boxel-realm-icon-size: 1rem;
       }
+      .examples-field {
+        margin-top: var(--boxel-sp-sm);
+      }
+      .examples-container {
+        border: 1px solid var(--boxel-300);
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp-sm);
+        width: 100%;
+      }
+      .examples-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .select-all-label {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        font: var(--boxel-font-sm);
+        font-weight: 600;
+        cursor: pointer;
+      }
+      .select-all-label :deep(.input-container) {
+        --boxel-checkbox-size: 16px;
+      }
+      .clear-all-button {
+        --boxel-button-font: var(--boxel-font-xs);
+        --boxel-button-text-color: var(--boxel-500);
+        text-decoration: underline;
+      }
+      .clear-all-button:hover {
+        --boxel-button-text-color: var(--boxel-dark);
+      }
+      .examples-description {
+        font: var(--boxel-font-xs);
+        color: var(--boxel-500);
+        margin: var(--boxel-sp-xxxs) 0 var(--boxel-sp-sm);
+      }
       .examples-grid {
         width: 100%;
         gap: var(--boxel-sp-xs);
       }
       .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;
-      }
-      .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;
+        align-items: center;
         gap: var(--horizontal-gap);
+        width: 100%;
+        justify-content: flex-end;
       }
     </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 5817ddeecc3..f801d63b65c 100644
--- a/packages/host/app/components/operator-mode/submode-layout.gts
+++ b/packages/host/app/components/operator-mode/submode-layout.gts
@@ -31,7 +31,6 @@ 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';
 
@@ -455,18 +454,6 @@ 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/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
index 2abfd12094a..04079f2021e 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -68,17 +68,10 @@ import type { Stack } from '../components/operator-mode/interact-submode';
 
 import type IndexController from '../controllers';
 
-export interface CreateListingModalRequest {
+export interface CreateListingModalPayload {
   codeRef: CodeRef;
   targetRealm: string;
-  openCardId?: string;
-}
-
-export interface OperatorModeToast {
-  message: string;
-  status?: 'loading' | 'success' | 'error';
-  ctaLabel?: string;
-  ctaAction?: () => void;
+  openCardIds?: string[];
 }
 
 // Below types form a raw POJO representation of operator mode state.
@@ -155,8 +148,7 @@ export default class OperatorModeStateService extends Service {
   private moduleInspectorHistory: Record<string, ModuleInspectorView>;
 
   @tracked profileSettingsOpen = false;
-  @tracked createListingModalRequest?: CreateListingModalRequest;
-  @tracked toast?: OperatorModeToast;
+  @tracked createListingModalPayload?: CreateListingModalPayload;
 
   @service declare private cardService: CardService;
   @service declare private codeSemanticsService: CodeSemanticsService;
@@ -225,20 +217,12 @@ export default class OperatorModeStateService extends Service {
     this.schedulePersist();
   };
 
-  showCreateListingModal = (request: CreateListingModalRequest) => {
-    this.createListingModalRequest = request;
+  showCreateListingModal = (payload: CreateListingModalPayload) => {
+    this.createListingModalPayload = payload;
   };
 
   dismissCreateListingModal = () => {
-    this.createListingModalRequest = undefined;
-  };
-
-  showToast = (toast: OperatorModeToast) => {
-    this.toast = toast;
-  };
-
-  dismissToast = () => {
-    this.toast = undefined;
+    this.createListingModalPayload = undefined;
   };
 
   setNewFileDropdownOpen = () => {
@@ -271,8 +255,7 @@ export default class OperatorModeStateService extends Service {
     this.cardTitles = new TrackedMap();
     this.moduleInspectorHistory = {};
     this.profileSettingsOpen = false;
-    this.createListingModalRequest = undefined;
-    this.toast = undefined;
+    this.createListingModalPayload = undefined;
     window.localStorage.removeItem(ModuleInspectorSelections);
     this.schedulePersist();
   }

From 74d2a99a09304ec3ffa9f53db65338221be7438b Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 15:33:21 +0800
Subject: [PATCH 11/20] add isListingDef checking

---
 .../catalog-app/listing/listing.gts           |  1 +
 .../operator-mode/create-listing-modal.gts    |  4 +--
 .../components/operator-mode/detail-panel.gts | 29 ++++++++++++++-----
 packages/runtime-common/code-ref.ts           |  8 +++++
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/catalog-realm/catalog-app/listing/listing.gts b/packages/catalog-realm/catalog-app/listing/listing.gts
index 90d0b733264..05d7369cea3 100644
--- a/packages/catalog-realm/catalog-app/listing/listing.gts
+++ b/packages/catalog-realm/catalog-app/listing/listing.gts
@@ -564,6 +564,7 @@ class EmbeddedTemplate extends Component<typeof Listing> {
 export class Listing extends CardDef {
   static displayName = 'Listing';
   static headerColor = '#6638ff';
+  static isListingDef = true;
 
   @field name = contains(StringField);
   @field summary = contains(MarkdownField);
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 32dc0896efe..bf818544881 100644
--- a/packages/host/app/components/operator-mode/create-listing-modal.gts
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -22,11 +22,11 @@ import {
   type ResolvedCodeRef,
 } from '@cardstack/runtime-common';
 
-import ItemButton from '@cardstack/host/components/card-search/item-button';
-import { Submodes } from '@cardstack/host/components/submode-switcher';
 import ListingCreateCommand from '@cardstack/host/commands/listing-create';
+import ItemButton from '@cardstack/host/components/card-search/item-button';
 import ModalContainer from '@cardstack/host/components/modal-container';
 import { SelectedTypePill } from '@cardstack/host/components/operator-mode/create-file-modal';
+import { Submodes } from '@cardstack/host/components/submode-switcher';
 import { getSearch } from '@cardstack/host/resources/search';
 
 import type CommandService from '@cardstack/host/services/command-service';
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index d6c1421472f..3155c214974 100644
--- a/packages/host/app/components/operator-mode/detail-panel.gts
+++ b/packages/host/app/components/operator-mode/detail-panel.gts
@@ -34,6 +34,8 @@ import {
   isFileDef,
   isBaseDef,
   isCardErrorJSONAPI,
+  isListingDef,
+  isListingInstance,
   internalKeyFor,
   type ResolvedCodeRef,
   type CardErrorJSONAPI,
@@ -255,12 +257,13 @@ export default class DetailPanel extends Component<Signature> {
           ]
         : []),
       ...(this.realm.canWrite(this.args.readyFile.url) &&
-      this.args.selectedDeclaration?.exportName
+      this.args.selectedDeclaration?.exportName &&
+      !isListingDef(this.args.selectedDeclaration?.cardOrField)
         ? [
             {
               label: 'Create Listing',
               icon: Package,
-              handler: this.createListingWithAI,
+              handler: this.createListing,
             },
           ]
         : []),
@@ -298,13 +301,18 @@ export default class DetailPanel extends Component<Signature> {
         icon: Copy,
         handler: this.duplicateInstance,
       },
-      ...(this.realm.canWrite(this.args.readyFile.url)
+      ...(this.realm.canWrite(this.args.readyFile.url) &&
+      !isListingInstance(this.args.cardInstance)
         ? [
             {
               label: 'Create Listing',
               icon: Package,
-              handler: this.createListingWithAI,
+              handler: this.createListing,
             },
+          ]
+        : []),
+      ...(this.realm.canWrite(this.args.readyFile.url)
+        ? [
             {
               label: 'Delete',
               icon: IconTrash,
@@ -420,7 +428,7 @@ export default class DetailPanel extends Component<Signature> {
     this.args.openSearch(`carddef:${refURL}`);
   }
 
-  @action private async createListingWithAI() {
+  @action private async createListing() {
     const command = new OpenCreateListingModalCommand(
       this.commandService.commandContext,
     );
@@ -429,19 +437,24 @@ export default class DetailPanel extends Component<Signature> {
       throw new Error('targetRealm is required to create listing');
     }
     if (this.isCardInstance) {
-      const openCardId = this.args.cardInstance?.id;
+      const openCardIds = this.args.cardInstance?.id
+        ? [this.args.cardInstance.id]
+        : [];
       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 });
+      await command.execute({ openCardIds, codeRef, targetRealm });
     } else {
       const codeRef: ResolvedCodeRef = this.selectedDeclarationAsCodeRef;
+      const openCardIds = this.args.cardInstance?.id
+        ? [this.args.cardInstance.id]
+        : [];
       await command.execute({
         codeRef,
-        openCardId: this.args.cardInstance?.id,
+        openCardIds,
         targetRealm,
       });
     }
diff --git a/packages/runtime-common/code-ref.ts b/packages/runtime-common/code-ref.ts
index 483172bfb0a..72dcc015156 100644
--- a/packages/runtime-common/code-ref.ts
+++ b/packages/runtime-common/code-ref.ts
@@ -129,6 +129,14 @@ export function isFileDef(def: any): def is typeof FileDef {
   return isBaseDef(def) && 'isFileDef' in def;
 }
 
+export function isListingDef(def: any): boolean {
+  return isCardDef(def) && 'isListingDef' in def;
+}
+
+export function isListingInstance(card: any): boolean {
+  return isListingDef(card?.constructor);
+}
+
 export function isFieldInstance<T extends FieldDef>(
   fieldInstance: any,
 ): fieldInstance is T {

From beab058e7bc0636cca50a9111a5e1eada15322c2 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 15:34:02 +0800
Subject: [PATCH 12/20] update test

---
 .../open-create-listing-modal-test.gts        | 20 ++++----
 .../components/create-listing-modal-test.gts  | 46 +++----------------
 2 files changed, 17 insertions(+), 49 deletions(-)

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 8ddcc276150..b8fec97ba13 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
@@ -50,20 +50,20 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
         name: 'Pet',
       },
       targetRealm: testRealmURL,
-      openCardId: `${testRealmURL}Pet/mango`,
+      openCardIds: [`${testRealmURL}Pet/mango`],
     } as never);
 
-    assert.deepEqual(operatorModeStateService.createListingModalRequest, {
+    assert.deepEqual(operatorModeStateService.createListingModalPayload, {
       codeRef: {
         module: `${testRealmURL}pet`,
         name: 'Pet',
       },
       targetRealm: testRealmURL,
-      openCardId: `${testRealmURL}Pet/mango`,
+      openCardIds: [`${testRealmURL}Pet/mango`],
     });
   });
 
-  test('stores modal request without openCardId', async function (assert) {
+  test('stores modal request without openCardIds', async function (assert) {
     let commandService = getService('command-service');
     let operatorModeStateService = getService('operator-mode-state-service');
 
@@ -79,16 +79,16 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
       targetRealm: testRealmURL,
     } as never);
 
-    let request = operatorModeStateService.createListingModalRequest;
+    let request = operatorModeStateService.createListingModalPayload;
     assert.deepEqual(request?.codeRef, {
       module: `${testRealmURL}pet`,
       name: 'Pet',
     });
     assert.strictEqual(request?.targetRealm, testRealmURL);
     assert.strictEqual(
-      request?.openCardId,
+      request?.openCardIds,
       undefined,
-      'openCardId is absent from state',
+      'openCardIds is absent from state',
     );
   });
 
@@ -106,18 +106,18 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
         name: 'Pet',
       },
       targetRealm: testRealmURL,
-      openCardId: `${testRealmURL}Pet/mango`,
+      openCardIds: [`${testRealmURL}Pet/mango`],
     } as never);
 
     assert.ok(
-      operatorModeStateService.createListingModalRequest,
+      operatorModeStateService.createListingModalPayload,
       'request is set after execute',
     );
 
     operatorModeStateService.dismissCreateListingModal();
 
     assert.strictEqual(
-      operatorModeStateService.createListingModalRequest,
+      operatorModeStateService.createListingModalPayload,
       undefined,
       '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 ac5cbd1e01f..d4818f8cfa3 100644
--- a/packages/host/tests/integration/components/create-listing-modal-test.gts
+++ b/packages/host/tests/integration/components/create-listing-modal-test.gts
@@ -64,7 +64,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
       .includesText(ctx.realmName);
   });
 
-  test('source select defaults to definition when no openCardId', async function (assert) {
+  test('shows codeRef in modal', async function (assert) {
     await renderComponent(
       class TestDriver extends GlimmerComponent {
         <template><OperatorMode @onClose={{noop}} /></template>
@@ -78,35 +78,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
 
     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.showCreateListingModal({
-      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');
+    assert.dom('[data-test-create-listing-coderef]').includesText('Pet');
   });
 
   test('cancel button closes modal', async function (assert) {
@@ -127,27 +99,23 @@ module('Integration | components | create-listing-modal', function (hooks) {
     assert.dom('[data-test-create-listing-modal]').doesNotExist();
   });
 
-  test('shows error when listing creation fails', async function (assert) {
+  test('shows create button', 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.showCreateListingModal({
-      codeRef: { name: 'Pet' } as any,
+      codeRef: { module: `${testRealmURL}pet`, name: 'Pet' },
       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');
+      .dom('[data-test-create-listing-confirm-button]')
+      .includesText('Create');
+    assert.dom('[data-test-create-listing-confirm-button]').isNotDisabled();
   });
 });

From 13a49f9ce3e00ae82da95ebb4a8dd290192f431b Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 15:40:49 +0800
Subject: [PATCH 13/20] remove toast

---
 packages/host/app/components/toast.gts | 162 -------------------------
 1 file changed, 162 deletions(-)
 delete mode 100644 packages/host/app/components/toast.gts

diff --git a/packages/host/app/components/toast.gts b/packages/host/app/components/toast.gts
deleted file mode 100644
index 8bb98a16284..00000000000
--- a/packages/host/app/components/toast.gts
+++ /dev/null
@@ -1,162 +0,0 @@
-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>
-}

From 0a12266f32fd32f5fda76128d3cee0d8de80d0b1 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 15:42:49 +0800
Subject: [PATCH 14/20] menu item should pass openCardIds

---
 packages/base/menu-items.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index fdfb1b3544e..efe10ce45d9 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -167,7 +167,7 @@ export function getDefaultCardMenuItems(
         }
         await new OpenCreateListingModalCommand(params.commandContext).execute({
           codeRef,
-          openCardId: cardId,
+          openCardIds: [cardId],
           targetRealm,
         });
       },

From 368cfd9b998e95522296d9bce7e489bc7e8f73ca Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 15:53:13 +0800
Subject: [PATCH 15/20] fix test

---
 .../open-create-listing-modal-test.gts        | 24 +++++-----
 .../components/create-listing-modal-test.gts  | 44 +++++--------------
 2 files changed, 22 insertions(+), 46 deletions(-)

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 b8fec97ba13..c786bb36b13 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
@@ -36,7 +36,7 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
     );
   });
 
-  test('stores modal request in operator mode state', async function (assert) {
+  test('stores modal payload in operator mode state', async function (assert) {
     let commandService = getService('command-service');
     let operatorModeStateService = getService('operator-mode-state-service');
 
@@ -63,7 +63,7 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
     });
   });
 
-  test('stores modal request without openCardIds', async function (assert) {
+  test('stores modal payload without openCardIds', async function (assert) {
     let commandService = getService('command-service');
     let operatorModeStateService = getService('operator-mode-state-service');
 
@@ -79,20 +79,20 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
       targetRealm: testRealmURL,
     } as never);
 
-    let request = operatorModeStateService.createListingModalPayload;
-    assert.deepEqual(request?.codeRef, {
+    let payload = operatorModeStateService.createListingModalPayload;
+    assert.deepEqual(payload?.codeRef, {
       module: `${testRealmURL}pet`,
       name: 'Pet',
     });
-    assert.strictEqual(request?.targetRealm, testRealmURL);
-    assert.strictEqual(
-      request?.openCardIds,
-      undefined,
-      'openCardIds is absent from state',
+    assert.strictEqual(payload?.targetRealm, testRealmURL);
+    assert.deepEqual(
+      payload?.openCardIds,
+      [],
+      'openCardIds is empty when not provided',
     );
   });
 
-  test('dismissCreateListingModal clears the request', async function (assert) {
+  test('dismissCreateListingModal clears the payload', async function (assert) {
     let commandService = getService('command-service');
     let operatorModeStateService = getService('operator-mode-state-service');
 
@@ -111,7 +111,7 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
 
     assert.ok(
       operatorModeStateService.createListingModalPayload,
-      'request is set after execute',
+      'payload is set after execute',
     );
 
     operatorModeStateService.dismissCreateListingModal();
@@ -119,7 +119,7 @@ module('Integration | commands | open-create-listing-modal', function (hooks) {
     assert.strictEqual(
       operatorModeStateService.createListingModalPayload,
       undefined,
-      'request is cleared after dismissCreateListingModal',
+      'payload 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 d4818f8cfa3..250eaa1fc23 100644
--- a/packages/host/tests/integration/components/create-listing-modal-test.gts
+++ b/packages/host/tests/integration/components/create-listing-modal-test.gts
@@ -1,4 +1,4 @@
-import { click, waitFor } from '@ember/test-helpers';
+import { waitFor } from '@ember/test-helpers';
 import GlimmerComponent from '@glimmer/component';
 
 import { module, test } from 'qunit';
@@ -15,17 +15,7 @@ module('Integration | components | create-listing-modal', function (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) {
+  test('modal renders when payload is set', async function (assert) {
     await renderComponent(
       class TestDriver extends GlimmerComponent {
         <template><OperatorMode @onClose={{noop}} /></template>
@@ -81,25 +71,7 @@ module('Integration | components | create-listing-modal', function (hooks) {
     assert.dom('[data-test-create-listing-coderef]').includesText('Pet');
   });
 
-  test('cancel button closes modal', async function (assert) {
-    await renderComponent(
-      class TestDriver extends GlimmerComponent {
-        <template><OperatorMode @onClose={{noop}} /></template>
-      },
-    );
-
-    ctx.operatorModeStateService.showCreateListingModal({
-      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 create button', async function (assert) {
+  test('shows example instances for a card type', async function (assert) {
     await renderComponent(
       class TestDriver extends GlimmerComponent {
         <template><OperatorMode @onClose={{noop}} /></template>
@@ -112,10 +84,14 @@ module('Integration | components | create-listing-modal', function (hooks) {
     });
 
     await waitFor('[data-test-create-listing-modal]');
+    await waitFor('[data-test-examples-container]');
 
+    assert.dom('[data-test-examples-container]').exists();
+    assert
+      .dom(`[data-test-create-listing-example="${testRealmURL}Pet/mango"]`)
+      .exists('shows the Pet instance as an example');
     assert
-      .dom('[data-test-create-listing-confirm-button]')
-      .includesText('Create');
-    assert.dom('[data-test-create-listing-confirm-button]').isNotDisabled();
+      .dom(`[data-test-card-catalog-item-selected="true"]`)
+      .exists('example is auto-selected');
   });
 });

From 5336b8ca509058a8796f3856dbcca2e1ac276540 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 16:01:20 +0800
Subject: [PATCH 16/20] fix test

---
 .../host/tests/acceptance/code-submode/inspector-test.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/host/tests/acceptance/code-submode/inspector-test.ts b/packages/host/tests/acceptance/code-submode/inspector-test.ts
index 2b8615ef2e9..1e711759cc8 100644
--- a/packages/host/tests/acceptance/code-submode/inspector-test.ts
+++ b/packages/host/tests/acceptance/code-submode/inspector-test.ts
@@ -2729,11 +2729,16 @@ export class ExportedCard extends ExportedCardParent {
     assert
       .dom('[data-test-create-listing-modal]')
       .exists('confirmation modal appears after clicking Create Listing');
+
+    await waitFor('[data-test-create-listing-examples]');
+    assert
+      .dom('[data-test-select-all]')
+      .isChecked('select all checkbox is checked');
     assert
       .dom(
-        `.ember-power-select-trigger [data-test-create-listing-instance-option]`,
+        '[data-test-create-listing-examples] [data-test-card-catalog-item-selected="true"]',
       )
-      .exists('instance option is pre-selected in the source dropdown');
+      .exists({ count: 2 }, 'all instances are pre-selected');
   });
 
   test('cancel button in Create Listing modal closes the modal', async function (assert) {

From 065d64d861a8f50dcbb0801f7b5e9850af9914a1 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 16:23:11 +0800
Subject: [PATCH 17/20] remove accidentally added submodule reference

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/catalog-new/contents | 1 -
 1 file changed, 1 deletion(-)
 delete mode 160000 packages/catalog-new/contents

diff --git a/packages/catalog-new/contents b/packages/catalog-new/contents
deleted file mode 160000
index c3845a0cb6e..00000000000
--- a/packages/catalog-new/contents
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit c3845a0cb6e2a59d9995c3857904d518979fae85

From 87624ce0e05a5999fce3ac248e9c810fdbb1d3d8 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 16:25:17 +0800
Subject: [PATCH 18/20] fix lint

---
 packages/host/app/commands/listing-create.ts              | 4 +---
 .../app/components/operator-mode/create-listing-modal.gts | 8 ++++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/host/app/commands/listing-create.ts b/packages/host/app/commands/listing-create.ts
index 7efde970b80..4b3eb2d4daa 100644
--- a/packages/host/app/commands/listing-create.ts
+++ b/packages/host/app/commands/listing-create.ts
@@ -112,7 +112,6 @@ export default class ListingCreateCommand extends HostBaseCommand<
   protected async run(
     input: BaseCommandModule.ListingCreateInput,
   ): Promise<BaseCommandModule.ListingCreateResult> {
-    const cardAPI = await this.loadCardAPI();
     let { openCardIds, codeRef, targetRealm } = input;
 
     if (!codeRef) {
@@ -402,8 +401,7 @@ export default class ListingCreateCommand extends HostBaseCommand<
       await Promise.all(
         openCardIds.map(async (openCardId) => {
           try {
-            const instance =
-              await this.store.get<CardAPI.CardDef>(openCardId);
+            const instance = await this.store.get<CardAPI.CardDef>(openCardId);
             if (isCardInstance(instance)) {
               addCard(instance as CardAPI.CardDef);
             } else {
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 bf818544881..3100c371b59 100644
--- a/packages/host/app/components/operator-mode/create-listing-modal.gts
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -24,6 +24,7 @@ import {
 
 import ListingCreateCommand from '@cardstack/host/commands/listing-create';
 import ItemButton from '@cardstack/host/components/card-search/item-button';
+import type { NewCardArgs } from '@cardstack/host/components/card-search/utils';
 import ModalContainer from '@cardstack/host/components/modal-container';
 import { SelectedTypePill } from '@cardstack/host/components/operator-mode/create-file-modal';
 import { Submodes } from '@cardstack/host/components/submode-switcher';
@@ -131,7 +132,7 @@ export default class CreateListingModal extends Component<Signature> {
   }
 
   private get instances(): CardDef[] {
-    return this.instancesSearch.instances;
+    return this.instancesSearch.instances as CardDef[];
   }
 
   private get hasInstances(): boolean {
@@ -155,7 +156,10 @@ export default class CreateListingModal extends Component<Signature> {
     );
   }
 
-  @action private onSelectExample(selection: string) {
+  @action private onSelectExample(selection: string | NewCardArgs) {
+    if (typeof selection !== 'string') {
+      return;
+    }
     // First manual toggle: start from "all selected" state
     let current =
       this.selectedExampleIds ?? new Set(this.instances.map((i) => i.id));

From 83b9a0365778977a86a547731b5f7de6c7a9a27b Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 18:07:57 +0800
Subject: [PATCH 19/20] fix test

---
 packages/catalog-realm/catalog-app/listing/listing.gts | 2 +-
 packages/host/tests/unit/card-def-menu-items-test.ts   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/catalog-realm/catalog-app/listing/listing.gts b/packages/catalog-realm/catalog-app/listing/listing.gts
index 05d7369cea3..58f0e0f43cb 100644
--- a/packages/catalog-realm/catalog-app/listing/listing.gts
+++ b/packages/catalog-realm/catalog-app/listing/listing.gts
@@ -642,7 +642,7 @@ export class Listing extends CardDef {
   [getMenuItems](params: GetMenuItemParams): MenuItemOptions[] {
     let menuItems = super
       [getMenuItems](params)
-      .filter((item) => item.label?.toLowerCase() !== 'create listing with ai');
+      .filter((item) => item.label?.toLowerCase() !== 'create listing');
     if (params.menuContext === 'interact') {
       const extra = this.getGenerateExampleMenuItem(params);
       if (extra) {
diff --git a/packages/host/tests/unit/card-def-menu-items-test.ts b/packages/host/tests/unit/card-def-menu-items-test.ts
index 922796178f0..f35014355fb 100644
--- a/packages/host/tests/unit/card-def-menu-items-test.ts
+++ b/packages/host/tests/unit/card-def-menu-items-test.ts
@@ -121,13 +121,13 @@ module('Unit | CardDef menu items', function (hooks) {
     });
 
     let hasCreateListing = items.some((i: MenuItemOptions) =>
-      i.label.includes('Create Listing with AI'),
+      i.label.includes('Create Listing'),
     );
     let hasSampleDataTagged = items.some((i: MenuItemOptions) =>
       (i.tags || []).includes('playground-sample-data'),
     );
 
-    assert.ok(hasCreateListing, 'contains Create Listing with AI');
+    assert.ok(hasCreateListing, 'contains Create Listing');
     assert.ok(
       hasSampleDataTagged,
       'contains items tagged playground-sample-data',

From 5e3dd97bf43a7792cc215b16e123d122ae8dd97c Mon Sep 17 00:00:00 2001
From: Lucas <lucas.law@cardstack.com>
Date: Wed, 18 Mar 2026 21:24:07 +0800
Subject: [PATCH 20/20] address codex feedback

---
 .../app/components/operator-mode/create-listing-modal.gts   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

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 3100c371b59..5cd803c1fbd 100644
--- a/packages/host/app/components/operator-mode/create-listing-modal.gts
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -63,13 +63,10 @@ export default class CreateListingModal extends Component<Signature> {
     }
 
     let targetRealm = payload.targetRealm;
-    // null means all selected → use all instance IDs
     let openCardIds =
       this.selectedExampleIds === null
         ? this.instances.map((i) => i.id)
-        : this.selectedExampleIds.size > 0
-          ? [...this.selectedExampleIds]
-          : (payload.openCardIds ?? []);
+        : [...this.selectedExampleIds];
 
     let result = await new ListingCreateCommand(
       this.commandService.commandContext,
@@ -99,6 +96,7 @@ export default class CreateListingModal extends Component<Signature> {
       await backgroundWork;
     }
 
+    this.selectedExampleIds = null;
     this.operatorModeStateService.dismissCreateListingModal();
   });