Render the broken-ref visual in the markdown-embed chooser

packages/base/card-api.gts

@@ -2,7 +2,12 @@ import Modifier from 'ember-modifier';
 import GlimmerComponent from '@glimmer/component';
 import { isEqual } from 'lodash-es';
 import { WatchedArray, rawArrayValues } from './watched-array';
-import { BoxelInput, CopyButton } from '@cardstack/boxel-ui/components';
+import {
+  BoxelInput,
+  BrokenLinkTemplate,
+  CopyButton,
+  type BrokenLinkFormat,
+} from '@cardstack/boxel-ui/components';
 import {
   markdownEscape,
   type MenuItemOptions,
@@ -97,6 +102,7 @@ import {
   type RealmResourceIdentifier,
   type VirtualNetwork,
   isDirectIndexedFieldKey,
+  cardTypeName,
 } from '@cardstack/runtime-common';
 import {
   captureQueryFieldSeedData,
@@ -113,9 +119,6 @@ import DefaultCardDefTemplate from './default-templates/isolated-and-edit';
 import DefaultAtomViewTemplate from './default-templates/atom';
 import DefaultHeadTemplate from './default-templates/head';
 import MissingTemplate from './default-templates/missing-template';
-import BrokenLinkTemplate, {
-  type BrokenLinkFormat,
-} from './default-templates/broken-link-template';
 import FieldDefEditTemplate from './default-templates/field-edit';
 import MarkdownTemplate from './default-templates/markdown';
 import DefaultMarkdownFallbackTemplate from './default-templates/markdown-fallback';
@@ -1611,6 +1614,7 @@ class LinksTo<CardT extends LinkableDefConstructor> implements Field<CardT> {
                   @errorDoc={{broken.errorDoc}}
                   @state={{broken.kind}}
                   @format={{brokenLinkFormat @format defaultFormats.cardDef}}
+                  @displayName={{cardTypeName broken.reference}}
                   @viewCard={{cardCrudFunctions.viewCard}}
                   ...attributes
                 />

packages/base/codemirror-editor.gts

@@ -657,7 +657,10 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
     this._embedPopoverOpen = false;
     let result;
     try {
-      result = await chooseMarkdownEmbed({ defaultTab });
+      result = await chooseMarkdownEmbed({
+        defaultTab,
+        documentBaseUrl: this.args.cardReferenceBaseUrl ?? undefined,
+      });
     } catch (e) {
       // Bridge not registered (e.g. card running outside the host) — silently
       // no-op so the toolbar click doesn't blow up the editor.
@@ -684,12 +687,10 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
         // Resolve the directive's raw ref (which may be relative to the field's
         // base URL) to an absolute URL. The chooser loads the preview via
         // `store.get`, which can't resolve a relative specifier on its own.
-        url: resolveUrl(
-          ref.url,
-          this.args.cardReferenceBaseUrl,
-        ),
+        url: resolveUrl(ref.url, this.args.cardReferenceBaseUrl),
         sizeSpec: ref.sizeSpec,
         kind: ref.kind,
+        documentBaseUrl: this.args.cardReferenceBaseUrl ?? undefined,
       });
     } catch (e) {
       console.warn('markdown-embed chooser unavailable', e);

packages/base/links-to-editor.gts

@@ -28,11 +28,15 @@ import {
   Loader,
   type ResolvedCodeRef,
   isCardInstance,
+  cardTypeName,
 } from '@cardstack/runtime-common';
-import { Button, IconButton } from '@cardstack/boxel-ui/components';
+import {
+  BrokenLinkTemplate,
+  Button,
+  IconButton,
+} from '@cardstack/boxel-ui/components';
 import { IconMinusCircle } from '@cardstack/boxel-ui/icons';
 import { consume } from 'ember-provide-consume-context';
-import BrokenLinkTemplate from './default-templates/broken-link-template';
 import { type RelationshipState } from './field-support';
 
 // A broken singular link surfaces as a terminal failure state from
@@ -109,6 +113,7 @@ export class LinksToEditor extends GlimmerComponent<Signature> {
               @errorDoc={{@brokenLink.errorDoc}}
               @state={{@brokenLink.kind}}
               @format='embedded'
+              @displayName={{cardTypeName @brokenLink.reference}}
               @viewCard={{crud.viewCard}}
             />
           </CardCrudFunctionsConsumer>

packages/base/links-to-many-component.gts

@@ -16,7 +16,6 @@ import {
   isFileDef,
   brokenLinkFormat,
 } from './card-api';
-import BrokenLinkTemplate from './default-templates/broken-link-template';
 import {
   getRelationshipMembershipState,
   type RelationshipState,
@@ -29,7 +28,12 @@ import {
   PermissionsConsumer,
   getBoxComponent,
 } from './field-component';
-import { Button, IconButton, Pill } from '@cardstack/boxel-ui/components';
+import {
+  BrokenLinkTemplate,
+  Button,
+  IconButton,
+  Pill,
+} from '@cardstack/boxel-ui/components';
 import { restartableTask } from 'ember-concurrency';
 import {
   chooseCard,
@@ -46,6 +50,7 @@ import {
   uuidv4,
   CardCrudFunctionsContextName,
   CardErrorJSONAPI,
+  cardTypeName,
 } from '@cardstack/runtime-common';
 import {
   IconMinusCircle,
@@ -303,6 +308,7 @@ class LinksToManyStandardEditor extends GlimmerComponent<LinksToManyStandardEdit
                     @errorDoc={{entry.broken.errorDoc}}
                     @state={{entry.broken.kind}}
                     @format='fitted'
+                    @displayName={{cardTypeName entry.broken.reference}}
                     @viewCard={{crud.viewCard}}
                     data-test-plural-view-item={{entry.index}}
                   />
@@ -458,6 +464,7 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
                     @errorDoc={{broken.errorDoc}}
                     @state={{broken.kind}}
                     @format='atom'
+                    @displayName={{cardTypeName broken.reference}}
                     @viewCard={{crud.viewCard}}
                     data-test-plural-view-item={{i}}
                   />
@@ -715,6 +722,7 @@ export function getLinksToManyComponent({
                               effectiveFormat
                               effectiveFormat
                             }}
+                            @displayName={{cardTypeName broken.reference}}
                             @viewCard={{crud.viewCard}}
                             data-test-plural-view-item={{i}}
                           />

packages/boxel-ui/addon/src/components.ts

@@ -3,6 +3,14 @@ import AddButton from './components/add-button/index.gts';
 import Alert from './components/alert/index.gts';
 import Avatar from './components/avatar/index.gts';
 import BasicFitted from './components/basic-fitted/index.gts';
+import BrokenLink, {
+  type BrokenLinkErrorDoc,
+  type BrokenLinkFormat,
+  type BrokenLinkItemType,
+  type BrokenLinkState,
+  type BrokenLinkTemplateArgs,
+  type BrokenLinkViewFn,
+} from './components/broken-link/index.gts';
 import Button from './components/button/index.gts';
 import BoxelButton from './components/button/index.gts';
 import CardContainer from './components/card-container/index.gts';
@@ -95,6 +103,12 @@ import ViewSelector, {
 } from './components/view-selector/index.gts';
 
 export {
+  type BrokenLinkErrorDoc,
+  type BrokenLinkFormat,
+  type BrokenLinkItemType,
+  type BrokenLinkState,
+  type BrokenLinkTemplateArgs,
+  type BrokenLinkViewFn,
   type Filter,
   type FittedCardLayout,
   type FittedCardTitleTag,
@@ -126,6 +140,7 @@ export {
   BoxelMultiSelectBasic,
   BoxelSelect,
   BoxelTag,
+  BrokenLink as BrokenLinkTemplate,
   Button,
   CardContainer,
   CardHeader,