From b172b1e7e6195b5067f0c80f31ce345530151371 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Wed, 15 Apr 2026 18:04:30 -0400
Subject: [PATCH 1/3] add ability to toggle base template from isolated and
 edit

---
 packages/base/card-api.gts                    |  19 +-
 .../default-templates/isolated-and-edit.gts   |   5 +-
 packages/base/menu-items.ts                   |  53 +++++
 .../operator-mode/interact-submode.gts        |  30 ++-
 .../components/operator-mode/stack-item.gts   |   8 +
 packages/host/app/lib/stack-item.ts           |   6 +
 .../services/operator-mode-state-service.ts   |  26 ++-
 .../components/operator-mode-test.gts         |  60 ++++++
 .../components/operator-mode/setup.gts        |  30 +++
 .../tests/integration/realm-indexing-test.gts |   2 +
 .../tests/unit/card-def-menu-items-test.ts    | 190 ++++++++++++++++++
 11 files changed, 423 insertions(+), 6 deletions(-)

diff --git a/packages/base/card-api.gts b/packages/base/card-api.gts
index 3d7dea9f99f..71098db1d41 100644
--- a/packages/base/card-api.gts
+++ b/packages/base/card-api.gts
@@ -2306,10 +2306,14 @@ export type ViewCardFn = (
     stackIndex?: number;
     fieldType?: 'linksTo' | 'contains' | 'containsMany' | 'linksToMany';
     fieldName?: string;
+    useBaseTemplate?: boolean;
   },
 ) => void;
 
-export type EditCardFn = (card: CardDef) => void;
+export type EditCardFn = (
+  card: CardDef,
+  opts?: { useBaseTemplate?: boolean },
+) => void;
 
 export type SaveCardFn = (id: string) => void;
 
@@ -2794,6 +2798,14 @@ export class CardDef extends BaseDef {
   static atom: BaseDefComponent = DefaultAtomViewTemplate;
   static head: BaseDefComponent = DefaultHeadTemplate;
 
+  static get hasCustomEditTemplate(): boolean {
+    return this.edit !== CardDef.edit;
+  }
+
+  static get hasCustomIsolatedTemplate(): boolean {
+    return this.isolated !== CardDef.isolated;
+  }
+
   static prefersWideFormat = false; // whether the card is full-width in the stack
   static headerColor: string | null = null; // set string color value if the stack-item header has a background color
 
@@ -3053,7 +3065,10 @@ function lazilyLoadLink(
     inflightLoads = new Map();
     inflightLinkLoads.set(instance, inflightLoads);
   }
-  let reference = resolveCardReference(link, instance.id ?? instance[relativeTo]);
+  let reference = resolveCardReference(
+    link,
+    instance.id ?? instance[relativeTo],
+  );
   let key = `${field.name}/${reference}`;
   let promise = inflightLoads.get(key);
   let store = getStore(instance);
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 2958e7dec34..0c80e73bdaf 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -57,7 +57,10 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
   }
 
   <template>
-    <div class={{cn 'default-card-template' @format}}>
+    <div
+      class={{cn 'default-card-template' @format}}
+      data-test-base-template={{@format}}
+    >
       <Header @hasBottomBorder={{true}} class='card-info-header'>
         {{#if (eq @format 'isolated')}}
           <CardInfoTemplates.view
diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index cf5b41a800d..d609fc1c9dd 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -28,6 +28,7 @@ import { resolveAdoptsFrom } from '@cardstack/runtime-common';
 import CodeIcon from '@cardstack/boxel-icons/code';
 import ArrowLeft from '@cardstack/boxel-icons/arrow-left';
 import Eye from '@cardstack/boxel-icons/eye';
+import FormIcon from '@cardstack/boxel-icons/forms';
 import LinkIcon from '@cardstack/boxel-icons/link';
 import Trash2Icon from '@cardstack/boxel-icons/trash-2';
 import Wand from '@cardstack/boxel-icons/wand';
@@ -51,8 +52,29 @@ export type GetMenuItemParams = {
   cardCrudFunctions: Partial<CardCrudFunctions>;
   commandContext: CommandContext;
   format?: Format;
+  useBaseTemplate?: boolean;
 } & MenuContext;
 
+function makeToggleTemplateItem(
+  card: CardDef,
+  useBaseTemplate: boolean | undefined,
+  action: (useBaseTemplate: boolean) => void,
+): MenuItemOptions {
+  return useBaseTemplate
+    ? {
+        label: 'Toggle Custom View',
+        action: () => action(false),
+        icon: Eye,
+        disabled: !card.id,
+      }
+    : {
+        label: 'Toggle Standard View',
+        action: () => action(true),
+        icon: FormIcon,
+        disabled: !card.id,
+      };
+}
+
 export function getDefaultCardMenuItems(
   card: CardDef,
   params: GetMenuItemParams,
@@ -72,6 +94,37 @@ export function getDefaultCardMenuItems(
     });
   }
   if (params.menuContext === 'interact') {
+    if (
+      cardId &&
+      params.canEdit &&
+      params.format === 'edit' &&
+      (card.constructor as typeof CardDef).hasCustomEditTemplate
+    ) {
+      menuItems.push(
+        makeToggleTemplateItem(
+          card,
+          params.useBaseTemplate,
+          (useBaseTemplate) =>
+            params.cardCrudFunctions.editCard?.(card, { useBaseTemplate }),
+        ),
+      );
+    }
+    if (
+      cardId &&
+      params.format === 'isolated' &&
+      (card.constructor as typeof CardDef).hasCustomIsolatedTemplate
+    ) {
+      menuItems.push(
+        makeToggleTemplateItem(
+          card,
+          params.useBaseTemplate,
+          (useBaseTemplate) =>
+            params.cardCrudFunctions.viewCard?.(card, 'isolated', {
+              useBaseTemplate,
+            }),
+        ),
+      );
+    }
     if (
       !isRealmIndexCard(card) && // workspace index card cannot be deleted
       cardId &&
diff --git a/packages/host/app/components/operator-mode/interact-submode.gts b/packages/host/app/components/operator-mode/interact-submode.gts
index cdbc6ff087f..9df3d8babac 100644
--- a/packages/host/app/components/operator-mode/interact-submode.gts
+++ b/packages/host/app/components/operator-mode/interact-submode.gts
@@ -206,6 +206,7 @@ export default class InteractSubmode extends Component {
       stackIndex?: number;
       fieldType?: 'linksTo' | 'linksToMany' | 'contains' | 'containsMany';
       fieldName?: string;
+      useBaseTemplate?: boolean;
     },
   ): void => {
     if (format instanceof Event) {
@@ -221,6 +222,20 @@ export default class InteractSubmode extends Component {
     if (!cardId) {
       return;
     }
+    // When toggling the isolated template for a card already on the stack,
+    // replace the existing item in-place rather than pushing a new one.
+    if (format === 'isolated' && opts?.useBaseTemplate !== undefined) {
+      let stack = this.stacks[stackIndex];
+      let isOnStack = stack?.some((item) => item.id === cardId);
+      if (isOnStack) {
+        this.operatorModeStateService.viewCardOnStack(
+          stackIndex,
+          cardOrURL as CardDef,
+          { useBaseTemplate: opts.useBaseTemplate },
+        );
+        return;
+      }
+    }
     if (opts?.openCardInRightMostStack) {
       stackIndex = this.stacks.length;
     } else if (typeof opts?.stackIndex === 'number') {
@@ -244,6 +259,7 @@ export default class InteractSubmode extends Component {
       format,
       stackIndex,
       type: stackItemType,
+      useBaseTemplate: opts?.useBaseTemplate,
       relationshipContext: opts?.fieldName
         ? {
             fieldName: opts.fieldName,
@@ -258,8 +274,18 @@ export default class InteractSubmode extends Component {
     this.operatorModeStateService.closeWorkspaceChooser();
   };
 
-  private editCard = (stackIndex: number, card: CardDef): void => {
-    this.operatorModeStateService.editCardOnStack(stackIndex, card);
+  private editCard = (
+    stackIndex: number,
+    card: CardDef,
+    opts?: { useBaseTemplate?: boolean },
+  ): void => {
+    let stack = this.stacks[stackIndex];
+    let isOnStack = stack?.some((item) => item.id === card.id);
+    if (isOnStack) {
+      this.operatorModeStateService.editCardOnStack(stackIndex, card, opts);
+    } else {
+      this.viewCard(stackIndex, card, 'edit', opts);
+    }
   };
 
   private getStackItemType(
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
index cc3d8b6b7f6..f5ed31acc44 100644
--- a/packages/host/app/components/operator-mode/stack-item.gts
+++ b/packages/host/app/components/operator-mode/stack-item.gts
@@ -57,6 +57,7 @@ import {
   CardContextName,
   CardCrudFunctionsContextName,
   getMenuItems,
+  baseCardRef,
 } from '@cardstack/runtime-common';
 
 import {
@@ -488,6 +489,8 @@ export default class OperatorModeStackItem extends Component<Signature> {
         cardCrudFunctions: this.cardCrudFunctions,
         menuContext: 'interact',
         commandContext: this.args.commandContext,
+        format: this.cardFormat,
+        useBaseTemplate: this.args.item.useBaseTemplate,
       }) ?? [],
     );
   }
@@ -680,6 +683,10 @@ export default class OperatorModeStackItem extends Component<Signature> {
     return this.isFileCard ? 'isolated' : this.args.item.format;
   }
 
+  private get defaultCodeRef() {
+    return this.args.item.useBaseTemplate ? baseCardRef : undefined;
+  }
+
   private get showError() {
     // in edit format, prefer showing the stale card if possible so user can
     // attempt to fix the card error
@@ -850,6 +857,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
               class='stack-item-preview'
               @card={{this.card}}
               @format={{this.cardFormat}}
+              @codeRef={{this.defaultCodeRef}}
             />
             <OperatorModeOverlays
               @renderedCardsForOverlayActions={{this.renderedCardsForOverlayActions}}
diff --git a/packages/host/app/lib/stack-item.ts b/packages/host/app/lib/stack-item.ts
index 2f84e9d9572..25361258226 100644
--- a/packages/host/app/lib/stack-item.ts
+++ b/packages/host/app/lib/stack-item.ts
@@ -11,6 +11,7 @@ interface Args {
   id: string;
   type?: StackItemType;
   closeAfterSaving?: boolean;
+  useBaseTemplate?: boolean;
   relationshipContext?: {
     fieldName?: string;
     fieldType?: 'linksTo' | 'linksToMany';
@@ -55,6 +56,7 @@ export class StackItem {
   request?: Deferred<string>;
   stackIndex: number;
   closeAfterSaving?: boolean;
+  useBaseTemplate?: boolean;
   type: StackItemType;
   #id: string;
   relationshipContext?:
@@ -72,6 +74,7 @@ export class StackItem {
       id,
       type,
       closeAfterSaving,
+      useBaseTemplate,
       relationshipContext,
     } = args;
 
@@ -81,6 +84,7 @@ export class StackItem {
     this.stackIndex = stackIndex;
     this.type = inferStackItemType(type);
     this.closeAfterSaving = closeAfterSaving;
+    this.useBaseTemplate = useBaseTemplate;
     this.relationshipContext = relationshipContext;
   }
 
@@ -97,6 +101,7 @@ export class StackItem {
       stackIndex,
       relationshipContext,
       type,
+      useBaseTemplate,
     } = this;
     return new StackItem({
       format,
@@ -106,6 +111,7 @@ export class StackItem {
       type,
       stackIndex,
       relationshipContext,
+      useBaseTemplate,
       ...args,
     });
   }
diff --git a/packages/host/app/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
index 70b77d412ea..6302c4c28e2 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -437,7 +437,11 @@ export default class OperatorModeStateService extends Service {
     return item;
   }
 
-  editCardOnStack(stackIndex: number, card: CardDef): void {
+  editCardOnStack(
+    stackIndex: number,
+    card: CardDef,
+    opts?: { useBaseTemplate?: boolean },
+  ): void {
     let item = this.findCardInStack(card, stackIndex);
     if (item.type === 'file') {
       return;
@@ -447,6 +451,26 @@ export default class OperatorModeStateService extends Service {
       item.clone({
         request: new Deferred(),
         format: 'edit',
+        useBaseTemplate: opts?.useBaseTemplate,
+      }),
+    );
+  }
+
+  viewCardOnStack(
+    stackIndex: number,
+    card: CardDef,
+    opts?: { useBaseTemplate?: boolean },
+  ): void {
+    let item = this.findCardInStack(card, stackIndex);
+    if (item.type === 'file') {
+      return;
+    }
+    this.replaceItemInStack(
+      item,
+      item.clone({
+        request: new Deferred(),
+        format: 'isolated',
+        useBaseTemplate: opts?.useBaseTemplate,
       }),
     );
   }
diff --git a/packages/host/tests/integration/components/operator-mode-test.gts b/packages/host/tests/integration/components/operator-mode-test.gts
index fa7bbee31af..bfd29bd103e 100644
--- a/packages/host/tests/integration/components/operator-mode-test.gts
+++ b/packages/host/tests/integration/components/operator-mode-test.gts
@@ -630,4 +630,64 @@ module('Integration | operator-mode | basics', function (hooks) {
     assert.dom(`[data-test-cards-grid-cards]`).isNotVisible();
     assert.dom(`[data-test-create-new-card-button]`).isNotVisible();
   });
+
+  test('can toggle between custom and base edit template', async function (assert) {
+    const cardId = `${testRealmURL}PublishingPacket/story`;
+    const customEdit = '[data-test-pubpacket-edit]';
+    const baseEdit = '[data-test-base-template="edit"]';
+
+    ctx.setCardInOperatorModeState(cardId, 'edit');
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+    assert.dom(`[data-test-stack-card="${cardId}"]`).exists();
+    assert.dom(customEdit).exists('custom edit template is shown');
+    assert.dom(baseEdit).doesNotExist();
+
+    await click('[data-test-more-options-button]');
+    await click('[data-test-boxel-menu-item-text="Toggle Standard View"]');
+    assert.dom(baseEdit).exists('switched to base edit template');
+    assert.dom(customEdit).doesNotExist();
+
+    await click('[data-test-more-options-button]');
+    await click('[data-test-boxel-menu-item-text="Toggle Custom View"]');
+    assert.dom(customEdit).exists('custom edit template is restored');
+
+    await click('[data-test-more-options-button]');
+    assert
+      .dom('[data-test-boxel-menu-item-text="Toggle Standard View"]')
+      .exists('Toggle Standard View is offered again');
+  });
+
+  test('can toggle between custom and base isolated template', async function (assert) {
+    const cardId = `${testRealmURL}PublishingPacket/story`;
+    const customIsolated = '[data-test-pubpacket-isolated]';
+    const baseIsolated = '[data-test-base-template="isolated"]';
+
+    ctx.setCardInOperatorModeState(cardId);
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+    assert.dom(`[data-test-stack-card="${cardId}"]`).exists();
+    assert.dom(customIsolated).exists('custom isolated template is shown');
+    assert.dom(baseIsolated).doesNotExist();
+
+    await click('[data-test-more-options-button]');
+    await click('[data-test-boxel-menu-item-text="Toggle Standard View"]');
+    assert.dom(baseIsolated).exists('switched to base isolated template');
+    assert.dom(customIsolated).doesNotExist();
+
+    await click('[data-test-more-options-button]');
+    await click('[data-test-boxel-menu-item-text="Toggle Custom View"]');
+    assert.dom(customIsolated).exists('custom isolated template is restored');
+
+    await click('[data-test-more-options-button]');
+    assert
+      .dom('[data-test-boxel-menu-item-text="Toggle Standard View"]')
+      .exists('Toggle Standard View is offered again');
+  });
 });
diff --git a/packages/host/tests/integration/components/operator-mode/setup.gts b/packages/host/tests/integration/components/operator-mode/setup.gts
index 26bed7aed1a..8342c8417a7 100644
--- a/packages/host/tests/integration/components/operator-mode/setup.gts
+++ b/packages/host/tests/integration/components/operator-mode/setup.gts
@@ -389,6 +389,36 @@ export function setupOperatorModeTests(
       static headerColor = '#6638ff'; // rgb(102, 56, 255);
       @field blogPost = linksTo(BlogPost);
       @field socialBlurb = contains(TextAreaField);
+      static isolated = class Isolated extends Component<typeof this> {
+        <template>
+          <div data-test-pubpacket-isolated>
+            <h1><@fields.cardTitle /></h1>
+            <p><@fields.socialBlurb /></p>
+            Posts:
+            <@fields.blogPost />
+          </div>
+        </template>
+      };
+      static edit = class Edit extends Component<typeof this> {
+        <template>
+          <div data-test-pubpacket-edit>
+            <h1><@fields.cardTitle /></h1>
+            <div>
+              <label data-test-field='cardInfo-name'>
+                <@fields.cardInfo.name />
+              </label>
+            </div>
+            <label data-test-field='blogPost'>
+              Blog Post:
+              <@fields.blogPost />
+            </label>
+            <label data-test-field='socialBlurb'>
+              Social Blurb:
+              <@fields.socialBlurb />
+            </label>
+          </div>
+        </template>
+      };
     }
 
     class PetRoom extends CardDef {
diff --git a/packages/host/tests/integration/realm-indexing-test.gts b/packages/host/tests/integration/realm-indexing-test.gts
index 5a24f8b513d..917c6eb3279 100644
--- a/packages/host/tests/integration/realm-indexing-test.gts
+++ b/packages/host/tests/integration/realm-indexing-test.gts
@@ -4489,6 +4489,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file-pencil',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/folder-pen',
+        'http://localhost:4206/@cardstack/boxel-icons/v1/icons/forms',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/hash',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/image',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/import',
@@ -4629,6 +4630,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file-pencil',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/folder-pen',
+        'http://localhost:4206/@cardstack/boxel-icons/v1/icons/forms',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/git-branch',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/hash',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/image',
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 9ab85bb9b35..516c01e8a18 100644
--- a/packages/host/tests/unit/card-def-menu-items-test.ts
+++ b/packages/host/tests/unit/card-def-menu-items-test.ts
@@ -23,12 +23,18 @@ let getDefaultCardMenuItems: (
 ) => MenuItemOptions[];
 
 class DummyCard {
+  static hasCustomEditTemplate = false;
   constructor(
     public id?: string,
     public title?: string,
   ) {}
 }
 
+class DummyCardWithCustomTemplates extends DummyCard {
+  static hasCustomEditTemplate = true;
+  static hasCustomIsolatedTemplate = true;
+}
+
 module('Unit | CardDef menu items', function (hooks) {
   setupRenderingTest(hooks);
 
@@ -62,6 +68,190 @@ module('Unit | CardDef menu items', function (hooks) {
     assert.ok(texts.includes('Delete'), 'contains Delete');
   });
 
+  test('interact edit format includes "Toggle Standard View" for a card with a custom edit template', function (assert: Assert) {
+    let card = new DummyCardWithCustomTemplates(
+      'https://example.com/realm/card-5',
+      'Five',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'edit',
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.ok(
+      texts.includes('Toggle Standard View'),
+      'contains Toggle Standard View',
+    );
+  });
+
+  test('interact edit format includes "Toggle Custom View" when already in standard view', function (assert: Assert) {
+    let card = new DummyCardWithCustomTemplates(
+      'https://example.com/realm/card-5b',
+      'FiveB',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'edit',
+      useBaseTemplate: true,
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.ok(
+      texts.includes('Toggle Custom View'),
+      'contains Toggle Custom View',
+    );
+  });
+
+  test('interact isolated format shows only the isolated toggle, not the edit toggle', function (assert: Assert) {
+    let card = new DummyCardWithCustomTemplates(
+      'https://example.com/realm/card-6',
+      'Six',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'isolated',
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.strictEqual(
+      texts.filter((t) => t === 'Toggle Standard View').length,
+      1,
+      'contains exactly one toggle (isolated, not edit)',
+    );
+  });
+
+  test('interact context omits toggle for a card without a custom edit template', function (assert: Assert) {
+    let card = new DummyCard(
+      'https://example.com/realm/card-6b',
+      'SixB',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'edit',
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.notOk(
+      texts.includes('Toggle Standard View'),
+      'does not include Toggle Standard View when no custom edit template',
+    );
+  });
+
+  test('interact context omits toggle when not editable', function (assert: Assert) {
+    let card = new DummyCardWithCustomTemplates(
+      'https://example.com/realm/card-7',
+      'Seven',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: false,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'edit',
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.notOk(
+      texts.includes('Toggle Standard View'),
+      'does not include Toggle Standard View when canEdit is false',
+    );
+  });
+
+  test('interact isolated format includes "Toggle Standard View" for a card with a custom isolated template', function (assert: Assert) {
+    let card = new DummyCardWithCustomTemplates(
+      'https://example.com/realm/card-8',
+      'Eight',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'isolated',
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.ok(
+      texts.includes('Toggle Standard View'),
+      'contains Toggle Standard View',
+    );
+  });
+
+  test('interact isolated format includes "Toggle Custom View" when already in standard view', function (assert: Assert) {
+    let card = new DummyCardWithCustomTemplates(
+      'https://example.com/realm/card-8b',
+      'EightB',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'isolated',
+      useBaseTemplate: true,
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.ok(
+      texts.includes('Toggle Custom View'),
+      'contains Toggle Custom View',
+    );
+  });
+
+  test('interact edit format shows only the edit toggle, not the isolated toggle', function (assert: Assert) {
+    let card = new DummyCardWithCustomTemplates(
+      'https://example.com/realm/card-9',
+      'Nine',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'edit',
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.strictEqual(
+      texts.filter((t) => t === 'Toggle Standard View').length,
+      1,
+      'contains exactly one toggle (edit, not isolated)',
+    );
+  });
+
+  test('interact context omits isolated toggle for a card without a custom isolated template', function (assert: Assert) {
+    let card = new DummyCard(
+      'https://example.com/realm/card-9b',
+      'NineB',
+    ) as unknown as CardDef;
+    let items = getDefaultCardMenuItems(card, {
+      canEdit: true,
+      cardCrudFunctions: {},
+      menuContext: 'interact',
+      commandContext: {} as any,
+      format: 'isolated',
+    });
+
+    let texts = items.map((i: MenuItemOptions) => i.label);
+    assert.notOk(
+      texts.includes('Toggle Standard View'),
+      'does not include Toggle Standard View when no custom isolated template',
+    );
+  });
+
   test('ai-assistant context contains Copy to Workspace when editable', function (assert: Assert) {
     let card = new DummyCard(
       'https://example.com/realm/card-2',

From 7db99201496c11bd07ebc03485a882cafc8f4feb Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Apr 2026 15:16:10 -0400
Subject: [PATCH 2/3] handle edge cases

---
 packages/base/menu-items.ts                   |  3 +-
 .../operator-mode/interact-submode.gts        | 38 ++++++++--
 .../services/operator-mode-state-service.ts   | 17 +++++
 .../components/operator-mode-test.gts         | 75 ++++++++++++++++++-
 .../tests/integration/realm-indexing-test.gts |  2 -
 5 files changed, 123 insertions(+), 12 deletions(-)

diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index d609fc1c9dd..b2028f44976 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -28,7 +28,6 @@ import { resolveAdoptsFrom } from '@cardstack/runtime-common';
 import CodeIcon from '@cardstack/boxel-icons/code';
 import ArrowLeft from '@cardstack/boxel-icons/arrow-left';
 import Eye from '@cardstack/boxel-icons/eye';
-import FormIcon from '@cardstack/boxel-icons/forms';
 import LinkIcon from '@cardstack/boxel-icons/link';
 import Trash2Icon from '@cardstack/boxel-icons/trash-2';
 import Wand from '@cardstack/boxel-icons/wand';
@@ -70,7 +69,7 @@ function makeToggleTemplateItem(
     : {
         label: 'Toggle Standard View',
         action: () => action(true),
-        icon: FormIcon,
+        icon: Eye,
         disabled: !card.id,
       };
 }
diff --git a/packages/host/app/components/operator-mode/interact-submode.gts b/packages/host/app/components/operator-mode/interact-submode.gts
index 9df3d8babac..9291c64d928 100644
--- a/packages/host/app/components/operator-mode/interact-submode.gts
+++ b/packages/host/app/components/operator-mode/interact-submode.gts
@@ -213,6 +213,31 @@ export default class InteractSubmode extends Component {
       // common when invoked from template {{on}} modifier
       format = 'isolated';
     }
+    // When toggling the isolated template for a card already on the stack,
+    // replace the existing item in-place rather than pushing a new one.
+    // Two separate checks are needed:
+    //   1. CardDef instances (including local-id-only cards with no .id yet) —
+    //      findCardInStackSafe matches by instance identity or local id.
+    //   2. String/URL inputs — matched below by resolved cardId after the
+    //      CardDef branch is skipped.
+    if (
+      format === 'isolated' &&
+      !(typeof cardOrURL === 'string' || cardOrURL instanceof URL) &&
+      this.stacks[stackIndex]
+    ) {
+      let item = this.operatorModeStateService.findCardInStackSafe(
+        cardOrURL,
+        stackIndex,
+      );
+      if (item) {
+        this.operatorModeStateService.viewCardOnStack(
+          stackIndex,
+          cardOrURL,
+          opts,
+        );
+        return;
+      }
+    }
     let cardId =
       typeof cardOrURL === 'string'
         ? cardOrURL
@@ -222,16 +247,14 @@ export default class InteractSubmode extends Component {
     if (!cardId) {
       return;
     }
-    // When toggling the isolated template for a card already on the stack,
-    // replace the existing item in-place rather than pushing a new one.
-    if (format === 'isolated' && opts?.useBaseTemplate !== undefined) {
+    if (format === 'isolated') {
       let stack = this.stacks[stackIndex];
       let isOnStack = stack?.some((item) => item.id === cardId);
       if (isOnStack) {
         this.operatorModeStateService.viewCardOnStack(
           stackIndex,
           cardOrURL as CardDef,
-          { useBaseTemplate: opts.useBaseTemplate },
+          opts,
         );
         return;
       }
@@ -279,9 +302,10 @@ export default class InteractSubmode extends Component {
     card: CardDef,
     opts?: { useBaseTemplate?: boolean },
   ): void => {
-    let stack = this.stacks[stackIndex];
-    let isOnStack = stack?.some((item) => item.id === card.id);
-    if (isOnStack) {
+    let item =
+      this.stacks[stackIndex] &&
+      this.operatorModeStateService.findCardInStackSafe(card, stackIndex);
+    if (item) {
       this.operatorModeStateService.editCardOnStack(stackIndex, card, opts);
     } else {
       this.viewCard(stackIndex, card, 'edit', opts);
diff --git a/packages/host/app/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
index 6302c4c28e2..c58d1aa0448 100644
--- a/packages/host/app/services/operator-mode-state-service.ts
+++ b/packages/host/app/services/operator-mode-state-service.ts
@@ -102,6 +102,7 @@ interface CardItem {
   id: string;
   format: 'isolated' | 'edit' | 'head';
   type?: StackItemType;
+  useBaseTemplate?: boolean;
 }
 
 export type FileView = 'inspector' | 'browser';
@@ -414,6 +415,20 @@ export default class OperatorModeStateService extends Service {
     this.schedulePersist();
   }
 
+  findCardInStackSafe(
+    card: CardDef | string,
+    stackIndex: number,
+  ): StackItem | undefined {
+    try {
+      return this.findCardInStack(card, stackIndex);
+    } catch (err) {
+      if (err instanceof Error && err.message.includes('Could not find card')) {
+        return undefined;
+      }
+      throw err;
+    }
+  }
+
   findCardInStack(card: CardDef | string, stackIndex: number): StackItem {
     let stack = this._state.stacks[stackIndex];
     if (!stack) {
@@ -931,6 +946,7 @@ export default class OperatorModeStateService extends Service {
               id: instance?.id ?? item.id,
               format: item.format,
               type: item.type === 'card' ? undefined : item.type,
+              useBaseTemplate: item.useBaseTemplate ?? undefined,
             });
           }
         }
@@ -1015,6 +1031,7 @@ export default class OperatorModeStateService extends Service {
             format,
             stackIndex,
             type: item.type,
+            useBaseTemplate: item.useBaseTemplate,
           }),
         );
       }
diff --git a/packages/host/tests/integration/components/operator-mode-test.gts b/packages/host/tests/integration/components/operator-mode-test.gts
index bfd29bd103e..4a3f1f8d8ba 100644
--- a/packages/host/tests/integration/components/operator-mode-test.gts
+++ b/packages/host/tests/integration/components/operator-mode-test.gts
@@ -4,10 +4,13 @@ import GlimmerComponent from '@glimmer/component';
 import { getService } from '@universal-ember/test-support';
 import { module, test } from 'qunit';
 
-import { Deferred } from '@cardstack/runtime-common';
+import { Deferred, localId } from '@cardstack/runtime-common';
 import type { LooseSingleCardDocument } from '@cardstack/runtime-common';
 
 import OperatorMode from '@cardstack/host/components/operator-mode/container';
+import type StoreService from '@cardstack/host/services/store';
+
+import type { CardDef } from 'https://cardstack.com/base/card-api';
 
 import {
   percySnapshot,
@@ -690,4 +693,74 @@ module('Integration | operator-mode | basics', function (hooks) {
       .dom('[data-test-boxel-menu-item-text="Toggle Standard View"]')
       .exists('Toggle Standard View is offered again');
   });
+
+  test('clicking Edit updates an unsaved local-id-backed stack item in place', async function (assert) {
+    let store = getService('store') as StoreService;
+    let { Person } = (await ctx.loader.import(`${testRealmURL}person`)) as {
+      Person: new (...args: unknown[]) => CardDef;
+    };
+    let instance = new Person({ firstName: 'Unsaved Person' });
+    await store.add(instance, { doNotPersist: true, realm: testRealmURL });
+
+    ctx.operatorModeStateService.restore({
+      stacks: [[{ id: instance[localId], format: 'isolated' }]],
+    });
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+    assert.dom('[data-test-stack-card-index]').exists({ count: 1 });
+    assert.dom('[data-test-person]').hasText('Unsaved Person');
+
+    await click('[data-test-edit-button]');
+
+    assert.dom('[data-test-stack-card-index]').exists({ count: 1 });
+    assert.dom('[data-test-field="firstName"] input').exists();
+    assert.strictEqual(
+      ctx.operatorModeStateService.state.stacks[0][0].id,
+      instance[localId],
+      'the same local-id-backed stack item is retained',
+    );
+    assert.strictEqual(
+      ctx.operatorModeStateService.state.stacks[0][0].format,
+      'edit',
+      'the existing stack item switches to edit mode',
+    );
+  });
+
+  test('can toggle isolated template in place when the stack stores a saved card by local id', async function (assert) {
+    const cardId = `${testRealmURL}PublishingPacket/story`;
+    const customIsolated = '[data-test-pubpacket-isolated]';
+    const baseIsolated = '[data-test-base-template="isolated"]';
+    let store = getService('store') as StoreService;
+    let packet = (await store.get(cardId)) as CardDef;
+
+    ctx.operatorModeStateService.restore({
+      stacks: [[{ id: packet[localId], format: 'isolated' }]],
+    });
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+    assert.dom('[data-test-stack-card]').exists({ count: 1 });
+    assert.dom(customIsolated).exists('custom isolated template is shown');
+    assert.dom(baseIsolated).doesNotExist();
+
+    await click('[data-test-more-options-button]');
+    await click('[data-test-boxel-menu-item-text="Toggle Standard View"]');
+    assert.dom('[data-test-stack-card]').exists({ count: 1 });
+    assert.dom(baseIsolated).exists('switched to base isolated template');
+    assert.dom(customIsolated).doesNotExist();
+    assert.strictEqual(
+      ctx.operatorModeStateService.state.stacks[0][0].id,
+      packet[localId],
+      'the stack item keeps its local id',
+    );
+    assert.true(
+      Boolean(ctx.operatorModeStateService.state.stacks[0][0].useBaseTemplate),
+      'the existing stack item toggles to the base template',
+    );
+  });
 });
diff --git a/packages/host/tests/integration/realm-indexing-test.gts b/packages/host/tests/integration/realm-indexing-test.gts
index 917c6eb3279..5a24f8b513d 100644
--- a/packages/host/tests/integration/realm-indexing-test.gts
+++ b/packages/host/tests/integration/realm-indexing-test.gts
@@ -4489,7 +4489,6 @@ module(`Integration | realm indexing`, function (hooks) {
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file-pencil',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/folder-pen',
-        'http://localhost:4206/@cardstack/boxel-icons/v1/icons/forms',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/hash',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/image',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/import',
@@ -4630,7 +4629,6 @@ module(`Integration | realm indexing`, function (hooks) {
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/file-pencil',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/folder-pen',
-        'http://localhost:4206/@cardstack/boxel-icons/v1/icons/forms',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/git-branch',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/hash',
         'http://localhost:4206/@cardstack/boxel-icons/v1/icons/image',

From 6034d2babbe611658da9d8e6e6ef74f2f6bd7165 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Apr 2026 17:47:17 -0400
Subject: [PATCH 3/3] use checked for toggle

---
 packages/base/menu-items.ts                   |  20 ++--
 .../components/operator-mode-test.gts         |   4 +-
 .../tests/unit/card-def-menu-items-test.ts    | 111 +++++-------------
 3 files changed, 37 insertions(+), 98 deletions(-)

diff --git a/packages/base/menu-items.ts b/packages/base/menu-items.ts
index b2028f44976..283987c620c 100644
--- a/packages/base/menu-items.ts
+++ b/packages/base/menu-items.ts
@@ -59,19 +59,13 @@ function makeToggleTemplateItem(
   useBaseTemplate: boolean | undefined,
   action: (useBaseTemplate: boolean) => void,
 ): MenuItemOptions {
-  return useBaseTemplate
-    ? {
-        label: 'Toggle Custom View',
-        action: () => action(false),
-        icon: Eye,
-        disabled: !card.id,
-      }
-    : {
-        label: 'Toggle Standard View',
-        action: () => action(true),
-        icon: Eye,
-        disabled: !card.id,
-      };
+  return {
+    label: 'Toggle Standard View',
+    action: () => action(!useBaseTemplate),
+    icon: Eye,
+    checked: !!useBaseTemplate,
+    disabled: !card.id,
+  };
 }
 
 export function getDefaultCardMenuItems(
diff --git a/packages/host/tests/integration/components/operator-mode-test.gts b/packages/host/tests/integration/components/operator-mode-test.gts
index 4a3f1f8d8ba..0a4801afccb 100644
--- a/packages/host/tests/integration/components/operator-mode-test.gts
+++ b/packages/host/tests/integration/components/operator-mode-test.gts
@@ -655,7 +655,7 @@ module('Integration | operator-mode | basics', function (hooks) {
     assert.dom(customEdit).doesNotExist();
 
     await click('[data-test-more-options-button]');
-    await click('[data-test-boxel-menu-item-text="Toggle Custom View"]');
+    await click('[data-test-boxel-menu-item-text="Toggle Standard View"]');
     assert.dom(customEdit).exists('custom edit template is restored');
 
     await click('[data-test-more-options-button]');
@@ -685,7 +685,7 @@ module('Integration | operator-mode | basics', function (hooks) {
     assert.dom(customIsolated).doesNotExist();
 
     await click('[data-test-more-options-button]');
-    await click('[data-test-boxel-menu-item-text="Toggle Custom View"]');
+    await click('[data-test-boxel-menu-item-text="Toggle Standard View"]');
     assert.dom(customIsolated).exists('custom isolated template is restored');
 
     await click('[data-test-more-options-button]');
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 516c01e8a18..a42fd4f0289 100644
--- a/packages/host/tests/unit/card-def-menu-items-test.ts
+++ b/packages/host/tests/unit/card-def-menu-items-test.ts
@@ -23,7 +23,6 @@ let getDefaultCardMenuItems: (
 ) => MenuItemOptions[];
 
 class DummyCard {
-  static hasCustomEditTemplate = false;
   constructor(
     public id?: string,
     public title?: string,
@@ -68,7 +67,7 @@ module('Unit | CardDef menu items', function (hooks) {
     assert.ok(texts.includes('Delete'), 'contains Delete');
   });
 
-  test('interact edit format includes "Toggle Standard View" for a card with a custom edit template', function (assert: Assert) {
+  test('interact edit format includes unchecked "Toggle Standard View" for card with custom template', function (assert: Assert) {
     let card = new DummyCardWithCustomTemplates(
       'https://example.com/realm/card-5',
       'Five',
@@ -81,56 +80,17 @@ module('Unit | CardDef menu items', function (hooks) {
       format: 'edit',
     });
 
-    let texts = items.map((i: MenuItemOptions) => i.label);
-    assert.ok(
-      texts.includes('Toggle Standard View'),
-      'contains Toggle Standard View',
+    let item = items.find(
+      (i: MenuItemOptions) => i.label === 'Toggle Standard View',
     );
-  });
-
-  test('interact edit format includes "Toggle Custom View" when already in standard view', function (assert: Assert) {
-    let card = new DummyCardWithCustomTemplates(
-      'https://example.com/realm/card-5b',
-      'FiveB',
-    ) as unknown as CardDef;
-    let items = getDefaultCardMenuItems(card, {
-      canEdit: true,
-      cardCrudFunctions: {},
-      menuContext: 'interact',
-      commandContext: {} as any,
-      format: 'edit',
-      useBaseTemplate: true,
-    });
-
-    let texts = items.map((i: MenuItemOptions) => i.label);
-    assert.ok(
-      texts.includes('Toggle Custom View'),
-      'contains Toggle Custom View',
-    );
-  });
-
-  test('interact isolated format shows only the isolated toggle, not the edit toggle', function (assert: Assert) {
-    let card = new DummyCardWithCustomTemplates(
-      'https://example.com/realm/card-6',
-      'Six',
-    ) as unknown as CardDef;
-    let items = getDefaultCardMenuItems(card, {
-      canEdit: true,
-      cardCrudFunctions: {},
-      menuContext: 'interact',
-      commandContext: {} as any,
-      format: 'isolated',
-    });
-
-    let texts = items.map((i: MenuItemOptions) => i.label);
-    assert.strictEqual(
-      texts.filter((t) => t === 'Toggle Standard View').length,
-      1,
-      'contains exactly one toggle (isolated, not edit)',
+    assert.ok(item, 'contains Toggle Standard View');
+    assert.notOk(
+      item?.checked,
+      'Standard View is unchecked (custom template active)',
     );
   });
 
-  test('interact context omits toggle for a card without a custom edit template', function (assert: Assert) {
+  test('interact edit format omits toggle for card without custom template', function (assert: Assert) {
     let card = new DummyCard(
       'https://example.com/realm/card-6b',
       'SixB',
@@ -146,11 +106,11 @@ module('Unit | CardDef menu items', function (hooks) {
     let texts = items.map((i: MenuItemOptions) => i.label);
     assert.notOk(
       texts.includes('Toggle Standard View'),
-      'does not include Toggle Standard View when no custom edit template',
+      'does not include Standard View when no custom edit template',
     );
   });
 
-  test('interact context omits toggle when not editable', function (assert: Assert) {
+  test('interact edit format omits toggle when not editable', function (assert: Assert) {
     let card = new DummyCardWithCustomTemplates(
       'https://example.com/realm/card-7',
       'Seven',
@@ -166,11 +126,11 @@ module('Unit | CardDef menu items', function (hooks) {
     let texts = items.map((i: MenuItemOptions) => i.label);
     assert.notOk(
       texts.includes('Toggle Standard View'),
-      'does not include Toggle Standard View when canEdit is false',
+      'does not include Standard View when canEdit is false',
     );
   });
 
-  test('interact isolated format includes "Toggle Standard View" for a card with a custom isolated template', function (assert: Assert) {
+  test('interact isolated format includes unchecked "Toggle Standard View" for card with custom template', function (assert: Assert) {
     let card = new DummyCardWithCustomTemplates(
       'https://example.com/realm/card-8',
       'Eight',
@@ -183,14 +143,17 @@ module('Unit | CardDef menu items', function (hooks) {
       format: 'isolated',
     });
 
-    let texts = items.map((i: MenuItemOptions) => i.label);
-    assert.ok(
-      texts.includes('Toggle Standard View'),
-      'contains Toggle Standard View',
+    let item = items.find(
+      (i: MenuItemOptions) => i.label === 'Toggle Standard View',
+    );
+    assert.ok(item, 'contains Toggle Standard View');
+    assert.notOk(
+      item?.checked,
+      'Standard View is unchecked (custom template active)',
     );
   });
 
-  test('interact isolated format includes "Toggle Custom View" when already in standard view', function (assert: Assert) {
+  test('interact isolated format shows "Toggle Standard View" as checked when already in standard view', function (assert: Assert) {
     let card = new DummyCardWithCustomTemplates(
       'https://example.com/realm/card-8b',
       'EightB',
@@ -204,35 +167,17 @@ module('Unit | CardDef menu items', function (hooks) {
       useBaseTemplate: true,
     });
 
-    let texts = items.map((i: MenuItemOptions) => i.label);
-    assert.ok(
-      texts.includes('Toggle Custom View'),
-      'contains Toggle Custom View',
+    let item = items.find(
+      (i: MenuItemOptions) => i.label === 'Toggle Standard View',
     );
-  });
-
-  test('interact edit format shows only the edit toggle, not the isolated toggle', function (assert: Assert) {
-    let card = new DummyCardWithCustomTemplates(
-      'https://example.com/realm/card-9',
-      'Nine',
-    ) as unknown as CardDef;
-    let items = getDefaultCardMenuItems(card, {
-      canEdit: true,
-      cardCrudFunctions: {},
-      menuContext: 'interact',
-      commandContext: {} as any,
-      format: 'edit',
-    });
-
-    let texts = items.map((i: MenuItemOptions) => i.label);
-    assert.strictEqual(
-      texts.filter((t) => t === 'Toggle Standard View').length,
-      1,
-      'contains exactly one toggle (edit, not isolated)',
+    assert.ok(item, 'contains Toggle Standard View');
+    assert.ok(
+      item?.checked,
+      'Standard View is checked (standard template active)',
     );
   });
 
-  test('interact context omits isolated toggle for a card without a custom isolated template', function (assert: Assert) {
+  test('interact isolated format omits isolated toggle for card without custom template', function (assert: Assert) {
     let card = new DummyCard(
       'https://example.com/realm/card-9b',
       'NineB',
@@ -248,7 +193,7 @@ module('Unit | CardDef menu items', function (hooks) {
     let texts = items.map((i: MenuItemOptions) => i.label);
     assert.notOk(
       texts.includes('Toggle Standard View'),
-      'does not include Toggle Standard View when no custom isolated template',
+      'does not include Standard View when no custom isolated template',
     );
   });