diff --git a/packages/host/app/components/operator-mode/card-error-detail.gts b/packages/host/app/components/operator-mode/card-error-detail.gts
index 4d39f9216d..99be8630fc 100644
--- a/packages/host/app/components/operator-mode/card-error-detail.gts
+++ b/packages/host/app/components/operator-mode/card-error-detail.gts
@@ -1,16 +1,20 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
-import { Accordion, Button } from '@cardstack/boxel-ui/components';
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
 import TriangleAlert from '@cardstack/boxel-icons/triangle-alert';
 
 import { dropTask } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
 
+import { Accordion, Button } from '@cardstack/boxel-ui/components';
+
 import SwitchSubmodeCommand from '../../commands/switch-submode';
 import { type CardError } from '../../resources/card-resource';
+
 import type CommandService from '../../services/command-service';
 
 interface Signature {
@@ -41,17 +45,19 @@ export default class CardErrorDetail extends Component<Signature> {
   <template>
     <Accordion as |A|>
       <A.Item
+        data-test-error-detail-toggle
         @onClick={{fn this.toggleDetail 'schema'}}
         @isOpen={{this.showErrorDetail}}
       >
         <:title>
           <TriangleAlert />
           An error was encountered on this card:
-          <span class='error-detail'>{{this.args.title}}</span>
+          <span class='error-detail' data-test-error-title>{{@title}}</span>
         </:title>
         <:content>
           <div class='actions'>
             <Button
+              data-test-view-in-code-mode-button
               @kind='primary'
               {{on 'click' (perform this.viewInCodeMode)}}
             >View in Code Mode</Button>
@@ -59,12 +65,17 @@ export default class CardErrorDetail extends Component<Signature> {
           <div class='detail'>
             <div class='detail-item'>
               <div class='detail-title'>Details:</div>
-              <div class='detail-contents'>{{@error.message}}</div>
+              <div
+                class='detail-contents'
+                data-test-error-detail
+              >{{@error.message}}</div>
             </div>
             {{#if @error.meta.stack}}
               <div class='detail-item'>
                 <div class='detail-title'>Stack trace:</div>
-                <pre>
+                <pre
+                  data-test-error-stack
+                >
 {{@error.meta.stack}}
                 </pre>
               </div>
diff --git a/packages/host/app/components/operator-mode/card-error.gts b/packages/host/app/components/operator-mode/card-error.gts
index fc6f9f9f9a..095a425ae1 100644
--- a/packages/host/app/components/operator-mode/card-error.gts
+++ b/packages/host/app/components/operator-mode/card-error.gts
@@ -1,4 +1,5 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
 import FileAlert from '@cardstack/boxel-icons/file-alert';
 
 const CardErrorComponent: TemplateOnlyComponent = <template>
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
index 606968ed1c..15f15dca97 100644
--- a/packages/host/app/components/operator-mode/stack-item.gts
+++ b/packages/host/app/components/operator-mode/stack-item.gts
@@ -63,8 +63,8 @@ import { htmlComponent } from '../../lib/html-component';
 import ElementTracker from '../../resources/element-tracker';
 import Preview from '../preview';
 
-import CardErrorDetail from './card-error-detail';
 import CardError from './card-error';
+import CardErrorDetail from './card-error-detail';
 
 import OperatorModeOverlays from './overlays';