Deleting cards that have an error

packages/host/app/components/ai-assistant/panel.gts

@@ -1,4 +1,4 @@
-import { fn, hash } from '@ember/helper';
+import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import type Owner from '@ember/owner';
@@ -56,6 +56,11 @@ interface Signature {
   };
 }
 
+interface RoomToDelete {
+  id: string;
+  name: string;
+}
+
 export interface SessionRoomData {
   roomId: string;
   name: string;
@@ -195,15 +200,17 @@ export default class AiAssistantPanel extends Component<Signature> {
     </Velcro>
 
     {{#if this.roomToDelete}}
-      {{#let this.roomToDelete.roomId this.roomToDelete.name as |id name|}}
-        <DeleteModal
-          @itemToDelete={{id}}
-          @onConfirm={{fn this.leaveRoom id}}
-          @onCancel={{fn this.setRoomToDelete undefined}}
-          @itemInfo={{hash type='room' name=(if name name id) id=id}}
-          @error={{this.roomDeleteError}}
-        />
-      {{/let}}
+      <DeleteModal
+        @itemToDelete={{this.roomToDelete}}
+        @onConfirm={{fn this.leaveRoom this.roomToDelete.id}}
+        @onCancel={{fn this.setRoomToDelete undefined}}
+        @error={{this.roomDeleteError}}
+      >
+        <:content>
+          Delete the room
+          <strong>{{this.roomToDelete.name}}</strong>?
+        </:content>
+      </DeleteModal>
     {{/if}}
 
     <style scoped>
@@ -364,7 +371,7 @@ export default class AiAssistantPanel extends Component<Signature> {
 
   @tracked private isShowingPastSessions = false;
   @tracked private roomToRename: SessionRoomData | undefined = undefined;
-  @tracked private roomToDelete: SessionRoomData | undefined = undefined;
+  @tracked private roomToDelete: RoomToDelete | undefined = undefined;
   @tracked private roomDeleteError: string | undefined = undefined;
   @tracked private displayRoomError = false;
   @tracked private maybeMonacoSDK: MonacoSDK | undefined;
@@ -555,7 +562,16 @@ export default class AiAssistantPanel extends Component<Signature> {
 
   @action private setRoomToDelete(room: SessionRoomData | undefined) {
     this.roomDeleteError = undefined;
-    this.roomToDelete = room;
+
+    if (!room) {
+      this.roomToDelete = undefined;
+      return;
+    }
+
+    this.roomToDelete = {
+      id: room.roomId,
+      name: room.name || room.roomId,
+    };
   }
 
   private get roomActions() {

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

@@ -1,5 +1,6 @@
 import { registerDestructor } from '@ember/destroyable';
 import { fn } from '@ember/helper';
+import { hash } from '@ember/helper';
 import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import { service } from '@ember/service';
@@ -54,7 +55,7 @@ import type OperatorModeStateService from '@cardstack/host/services/operator-mod
 import type RealmService from '@cardstack/host/services/realm';
 import type RecentFilesService from '@cardstack/host/services/recent-files-service';
 
-import type { CardDef, Format } from 'https://cardstack.com/base/card-api';
+import { type CardDef, type Format } from 'https://cardstack.com/base/card-api';
 
 import { htmlComponent } from '../../lib/html-component';
 import { CodeModePanelWidths } from '../../utils/local-storage-keys';
@@ -117,6 +118,13 @@ const defaultPanelHeights: PanelHeights = {
 
 const waiter = buildWaiter('code-submode:waiter');
 
+function urlToFilename(url: URL) {
+  if (url) {
+    return decodeURIComponent(url.href?.split('/').pop() ?? '');
+  }
+  return undefined;
+}
+
 export default class CodeSubmode extends Component<Signature> {
   @service private declare cardService: CardService;
   @service private declare operatorModeStateService: OperatorModeStateService;
@@ -478,6 +486,14 @@ export default class CodeSubmode extends Component<Signature> {
     return undefined;
   }
 
+  private get itemToDeleteAsCard() {
+    return this.itemToDelete as CardDef;
+  }
+
+  private get itemToDeleteAsFile() {
+    return this.itemToDelete as URL;
+  }
+
   @action
   private selectDeclaration(dec: ModuleDeclaration) {
     this.goToDefinition(undefined, dec.localName);
@@ -585,7 +601,8 @@ export default class CodeSubmode extends Component<Signature> {
   }
 
   // dropTask will ignore any subsequent delete requests until the one in progress is done
-  private delete = dropTask(async (item: CardDef | URL) => {
+  private delete = dropTask(async () => {
+    let item = this.itemToDelete;
     if (!item) {
       return;
     }
@@ -600,7 +617,7 @@ export default class CodeSubmode extends Component<Signature> {
     if (!(item instanceof URL)) {
       let card = item;
       await this.withTestWaiters(async () => {
-        await this.operatorModeStateService.deleteCard(card);
+        await this.operatorModeStateService.deleteCard(card.id);
       });
     } else {
       let file = item;
@@ -737,6 +754,15 @@ export default class CodeSubmode extends Component<Signature> {
     return this.realm.permissions(this.readyFile.url);
   }
 
+  get itemToDeleteId() {
+    if (!this.itemToDelete) {
+      return '';
+    }
+    return this.itemToDelete instanceof URL
+      ? this.itemToDelete.href
+      : this.itemToDelete.id;
+  }
+
   <template>
     {{#let (this.realm.info this.realmURL.href) as |realmInfo|}}
       <div
@@ -989,11 +1015,21 @@ export default class CodeSubmode extends Component<Signature> {
       </div>
       {{#if this.itemToDelete}}
         <DeleteModal
-          @itemToDelete={{this.itemToDelete}}
+          @itemToDelete={{hash id=this.itemToDeleteId}}
           @onConfirm={{perform this.delete}}
           @onCancel={{this.onCancelDelete}}
           @isDeleteRunning={{this.delete.isRunning}}
-        />
+        >
+          <:content>
+            {{#if this.isCard}}
+              Delete the card
+              <strong>{{this.itemToDeleteAsCard.title}}</strong>?
+            {{else}}
+              Delete the file
+              <strong>{{urlToFilename this.itemToDeleteAsFile}}</strong>?
+            {{/if}}
+          </:content>
+        </DeleteModal>
       {{/if}}
       <CreateFileModal @onCreate={{this.setupCreateFileModal}} />
       <FromElseWhere @name='schema-editor-modal' />