diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index d62e9819ec..fdfb1b3544 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';
@@ -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) {
@@ -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/catalog-new/contents b/packages/catalog-new/contents
new file mode 160000
index 0000000000..c3845a0cb6
--- /dev/null
+++ b/packages/catalog-new/contents
@@ -0,0 +1 @@
+Subproject commit c3845a0cb6e2a59d9995c3857904d518979fae85
diff --git a/packages/host/app/commands/index.ts b/packages/host/app/commands/index.ts
index 4fd424e63d..d125fdf950 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/listing-create.ts b/packages/host/app/commands/listing-create.ts
index ce94c134ec..92a1da2f4d 100644
--- a/packages/host/app/commands/listing-create.ts
+++ b/packages/host/app/commands/listing-create.ts
@@ -145,11 +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)');
-    }
-    await this.operatorModeStateService.openCardInInteractMode(listingId);
 
     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
new file mode 100644
index 0000000000..a6e965bf24
--- /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.showCreateListingModal({
+      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 45653d4104..b514090ff5 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 0000000000..6c45aece40
--- /dev/null
+++ b/packages/host/app/components/operator-mode/create-listing-modal.gts
@@ -0,0 +1,345 @@
+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 { 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 {
+  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';
+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';
+
+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 selectedExampleIds: Set<string> = new Set();
+
+  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');
+    }
+
+    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 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',
+      });
+    }
+  });
+
+  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 codeRefTitle(): string {
+    return this.codeRef?.name ?? 'Unknown';
+  }
+
+  private get codeRefId(): string {
+    return this.request?.openCardId ?? this.codeRef?.module ?? '';
+  }
+
+  private get instances(): CardDef[] {
+    return this.instancesSearch.instances;
+  }
+
+  private get hasInstances(): boolean {
+    return this.instances.length > 0;
+  }
+
+  private get effectiveSelectedExampleIds(): Set<string> {
+    if (this.selectedExampleIds.size > 0) {
+      return this.selectedExampleIds;
+    }
+    let openCardId = this.request?.openCardId;
+    return openCardId ? new Set([openCardId]) : new Set();
+  }
+
+  @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 isSelected = (instance: CardDef): boolean => {
+    return this.effectiveSelectedExampleIds.has(instance.id);
+  };
+
+  @action private onClose() {
+    this.selectedExampleIds = new Set();
+    this.operatorModeStateService.dismissCreateListingModal();
+  }
+
+  <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>
+          <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'
+              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='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.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'>
+            <Button
+              @size='tall'
+              {{on 'click' this.onClose}}
+              {{onKeyMod 'Escape'}}
+              data-test-create-listing-cancel-button
+            >
+              Cancel
+            </Button>
+            <Button
+              @kind='primary'
+              @size='tall'
+              {{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;
+      }
+      .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);
+      }
+      .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;
+      }
+      .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;
+        gap: var(--horizontal-gap);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/components/operator-mode/detail-panel.gts b/packages/host/app/components/operator-mode/detail-panel.gts
index 4e5d5c0232..d6c1421472 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.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 });
+    } else {
+      const codeRef: ResolvedCodeRef = this.selectedDeclarationAsCodeRef;
+      await command.execute({
+        codeRef,
+        openCardId: this.args.cardInstance?.id,
+        targetRealm,
+      });
+    }
   }
 
   private get selectedDeclarationAsCodeRef(): ResolvedCodeRef {
diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts
index f801d63b65..5817ddeecc 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 0000000000..8bb98a1628
--- /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 a07541ccf3..2abfd12094 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -68,6 +68,19 @@ import type { Stack } from '../components/operator-mode/interact-submode';
 
 import type IndexController from '../controllers';
 
+export interface CreateListingModalRequest {
+  codeRef: CodeRef;
+  targetRealm: string;
+  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.
@@ -142,6 +155,8 @@ export default class OperatorModeStateService extends Service {
   private moduleInspectorHistory: Record<string, ModuleInspectorView>;
 
   @tracked profileSettingsOpen = false;
+  @tracked createListingModalRequest?: CreateListingModalRequest;
+  @tracked toast?: OperatorModeToast;
 
   @service declare private cardService: CardService;
   @service declare private codeSemanticsService: CodeSemanticsService;
@@ -210,6 +225,22 @@ export default class OperatorModeStateService extends Service {
     this.schedulePersist();
   };
 
+  showCreateListingModal = (request: CreateListingModalRequest) => {
+    this.createListingModalRequest = request;
+  };
+
+  dismissCreateListingModal = () => {
+    this.createListingModalRequest = undefined;
+  };
+
+  showToast = (toast: OperatorModeToast) => {
+    this.toast = toast;
+  };
+
+  dismissToast = () => {
+    this.toast = undefined;
+  };
+
   setNewFileDropdownOpen = () => {
     this._state.newFileDropdownOpen = true;
     this.schedulePersist();
@@ -240,6 +271,8 @@ export default class OperatorModeStateService extends Service {
     this.cardTitles = new TrackedMap();
     this.moduleInspectorHistory = {};
     this.profileSettingsOpen = false;
+    this.createListingModalRequest = undefined;
+    this.toast = undefined;
     window.localStorage.removeItem(ModuleInspectorSelections);
     this.schedulePersist();
   }
diff --git a/packages/host/tests/acceptance/code-submode/inspector-test.ts b/packages/host/tests/acceptance/code-submode/inspector-test.ts
index 702463b600..2b8615ef2e 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 0000000000..8ddcc27615
--- /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('dismissCreateListingModal 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.dismissCreateListingModal();
+
+    assert.strictEqual(
+      operatorModeStateService.createListingModalRequest,
+      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
new file mode 100644
index 0000000000..ac5cbd1e01
--- /dev/null
+++ b/packages/host/tests/integration/components/create-listing-modal-test.gts
@@ -0,0 +1,153 @@
+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.showCreateListingModal({
+      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.showCreateListingModal({
+      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.showCreateListingModal({
+      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.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');
+  });
+
+  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 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.showCreateListingModal({
+      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');
+  });
+});
diff --git a/packages/host/tests/integration/realm-indexing-test.gts b/packages/host/tests/integration/realm-indexing-test.gts
index a1ddb51411..f85a747ab3 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',