diff --git a/packages/host/app/components/card-chooser/mini/index.gts b/packages/host/app/components/card-chooser/mini/index.gts
new file mode 100644
index 0000000000..f40aae5e95
--- /dev/null
+++ b/packages/host/app/components/card-chooser/mini/index.gts
@@ -0,0 +1,105 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import type { Filter } from '@cardstack/runtime-common';
+
+import SearchPanel from '@cardstack/host/components/card-search/panel';
+import {
+  removeFileExtension,
+  type NewCardArgs,
+} from '@cardstack/host/utils/card-search/types';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    initialSearchKey?: string;
+    baseFilter?: Filter;
+    onSelect: (url: string) => void;
+    // URL of the currently selected card — the matching row gets the teal
+    // selection treatment + checkmark. Omit for a chooser that surfaces
+    // matches but doesn't persist a pinned selection.
+    selected?: string;
+  };
+}
+
+export default class MiniCardChooser extends Component<Signature> {
+  @tracked private searchKey: string = this.args.initialSearchKey ?? '';
+
+  // SearchContent expects an array (it's the multi-select API plumbing).
+  // Wrap the single-select `@selected` so the existing isCardSelected check
+  // in SearchResultSection picks it up without any other changes.
+  private get selectedCards(): string[] | undefined {
+    return this.args.selected ? [this.args.selected] : undefined;
+  }
+
+  @action
+  private setSearchKey(value: string) {
+    this.searchKey = value;
+  }
+
+  @action
+  private handleSelect(selection: string | NewCardArgs) {
+    if (typeof selection !== 'string') {
+      return;
+    }
+    let normalized = removeFileExtension(selection);
+    if (normalized) {
+      this.args.onSelect(normalized);
+    }
+  }
+
+  <template>
+    <div class='mini-card-chooser' data-test-mini-card-chooser ...attributes>
+      <SearchPanel
+        @searchKey={{this.searchKey}}
+        @baseFilter={{@baseFilter}}
+        as |Bar Content|
+      >
+        <header class='mini-card-chooser__header'>
+          <Bar
+            @onInput={{this.setSearchKey}}
+            @placeholder='Search for a card'
+            @hidePickers={{true}}
+          />
+        </header>
+        <div class='mini-card-chooser__results'>
+          <Content
+            @isCompact={{false}}
+            @handleSelect={{this.handleSelect}}
+            @showHeader={{true}}
+            @variant='mini'
+            @selectedCards={{this.selectedCards}}
+          />
+        </div>
+      </SearchPanel>
+    </div>
+    <style scoped>
+      .mini-card-chooser {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        background-color: var(--boxel-light);
+      }
+      .mini-card-chooser__header {
+        flex: 0 0 auto;
+        padding: var(--boxel-sp-xs) var(--boxel-sp-xs) 0;
+      }
+      /* Pill-shaped, design-matched bar height. SearchBar's defaults are
+         tuned for the full search-sheet (50px tall, generous focus ring);
+         in the mini envelope we want a tighter pill. */
+      .mini-card-chooser__header :deep(.search-sheet__search-bar) {
+        min-height: 2.5rem;
+        border-radius: 999px;
+      }
+      .mini-card-chooser__results {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/components/card-chooser/mini/usage.gts b/packages/host/app/components/card-chooser/mini/usage.gts
new file mode 100644
index 0000000000..87258f1879
--- /dev/null
+++ b/packages/host/app/components/card-chooser/mini/usage.gts
@@ -0,0 +1,71 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import MiniCardChooser from './index';
+
+export default class MiniCardChooserUsage extends Component {
+  @tracked selectedUrl: string | undefined;
+
+  @action onSelect(url: string) {
+    this.selectedUrl = url;
+  }
+
+  <template>
+    <FreestyleUsage @name='MiniCardChooser'>
+      <:description>
+        Compact, inline card picker for side-by-side layouts. Wraps
+        <code>SearchPanel</code>
+        with a fluid 100%-of-parent envelope and renders the mini visual variant
+        of
+        <code>SearchContent</code>: single-line rows, no per-section &quot;show
+        only&quot; toggle, results count visible on every section, and a
+        pill-shaped show-more button. The hosting container owns dismissal —
+        this primitive only fires
+        <code>onSelect</code>
+        with the selected card URL.
+      </:description>
+      <:example>
+        <div class='example-container'>
+          <MiniCardChooser @onSelect={{this.onSelect}} />
+        </div>
+        {{#if this.selectedUrl}}
+          <p class='selection-readout' data-test-mini-card-chooser-selection>
+            Selected:
+            <code>{{this.selectedUrl}}</code>
+          </p>
+        {{/if}}
+      </:example>
+      <:api as |Args|>
+        <Args.Action
+          @name='onSelect'
+          @description='Called with the selected card URL (no .json suffix).'
+          @required={{true}}
+        />
+        <Args.String
+          @name='initialSearchKey'
+          @description='Optional initial search term. Read once at mount; subsequent parent updates are ignored.'
+        />
+        <Args.String
+          @name='selected'
+          @description='URL of the currently selected card. The matching row gets the teal selection fill + checkmark.'
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .example-container {
+        width: 360px;
+        height: 480px;
+        border: 1px solid var(--boxel-border-color, var(--boxel-300));
+        border-radius: var(--boxel-border-radius);
+        overflow: hidden;
+      }
+      .selection-readout {
+        margin-top: var(--boxel-sp-xs);
+        font: var(--boxel-font-sm);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/components/card-search/constants.ts b/packages/host/app/components/card-search/constants.ts
index ec99388ebb..6b50dafcdd 100644
--- a/packages/host/app/components/card-search/constants.ts
+++ b/packages/host/app/components/card-search/constants.ts
@@ -24,6 +24,11 @@ export const VIEW_OPTIONS: ViewOption[] = [
   { id: 'strip', icon: StripViewIcon },
 ];
 
+// 'mini' is an internal-only view id that opt-in consumers (e.g.
+// MiniCardChooser) request via @variant='mini'. It is deliberately
+// not in VIEW_OPTIONS so the user-facing view picker stays grid/strip.
+export type SectionViewOption = 'grid' | 'strip' | 'mini';
+
 /** Initial display limit for sections when not focused */
 export const SECTION_DISPLAY_LIMIT_UNFOCUSED = 5;
 
diff --git a/packages/host/app/components/card-search/item-button.gts b/packages/host/app/components/card-search/item-button.gts
index b84e17c8e8..59105ab726 100644
--- a/packages/host/app/components/card-search/item-button.gts
+++ b/packages/host/app/components/card-search/item-button.gts
@@ -9,7 +9,7 @@ import { modifier } from 'ember-modifier';
 
 import { Button } from '@cardstack/boxel-ui/components';
 import { and, cn, not } from '@cardstack/boxel-ui/helpers';
-import { IconPlus } from '@cardstack/boxel-ui/icons';
+import { CheckMark, IconPlus } from '@cardstack/boxel-ui/icons';
 
 import {
   cardTypeDisplayName,
@@ -124,6 +124,11 @@ interface Signature {
       Element: HTMLElement;
       Args: { Positional: [cardEl: HTMLElement | undefined] };
     }>;
+    // When true, render a right-aligned <CheckMark> inside the row whenever
+    // @isSelected is set and the row is not in multi-select mode. Used by
+    // the mini-chooser variant whose selection treatment is a teal fill +
+    // checkmark rather than the legacy border-color shift.
+    showSelectedCheckmark?: boolean;
   };
 }
 
@@ -364,6 +369,22 @@ export default class ItemButton extends Component<Signature> {
           </div>
         {{/if}}
       {{/if}}
+      {{#if
+        (and
+          @showSelectedCheckmark
+          @isSelected
+          (not @multiSelect)
+          (not this.isNewCard)
+        )
+      }}
+        <CheckMark
+          class='selected-checkmark'
+          width='16'
+          height='16'
+          aria-hidden='true'
+          data-test-item-button-selected-checkmark
+        />
+      {{/if}}
       {{#if this.isNewCard}}
         <IconPlus
           class='plus-icon'
@@ -504,6 +525,18 @@ export default class ItemButton extends Component<Signature> {
         pointer-events: none;
         z-index: 1;
       }
+      /* Right-aligned check icon for single-select rows (mini chooser).
+         Vertically centered on the row; the row-level background is
+         supplied by the variant's parent scope. */
+      .selected-checkmark {
+        position: absolute;
+        top: 50%;
+        right: var(--boxel-sp);
+        transform: translateY(-50%);
+        color: var(--boxel-dark);
+        pointer-events: none;
+        z-index: 1;
+      }
     </style>
   </template>
 }
diff --git a/packages/host/app/components/card-search/search-bar.gts b/packages/host/app/components/card-search/search-bar.gts
index 7b7d8dc4a8..601a1dda2d 100644
--- a/packages/host/app/components/card-search/search-bar.gts
+++ b/packages/host/app/components/card-search/search-bar.gts
@@ -43,6 +43,7 @@ interface Signature {
     bottomTreatment?: BoxelInputBottomTreatments;
     state?: 'none' | 'valid' | 'invalid' | 'loading' | 'initial';
     id?: string;
+    hidePickers?: boolean;
   };
   Blocks: {};
 }
@@ -66,21 +67,26 @@ export default class SearchBar extends Component<Signature> {
           height='18'
         />
       </div>
-      <div class='search-sheet__search-bar-picker'>
-        <RealmPicker
-          @filter={{@realmFilter}}
-          @destination={{@pickerDestination}}
-        />
-      </div>
-      {{#unless @typeFilter.skipTypeFiltering}}
+      {{#unless @hidePickers}}
         <div class='search-sheet__search-bar-picker'>
-          <TypePicker
-            @filter={{@typeFilter}}
+          <RealmPicker
+            @filter={{@realmFilter}}
             @destination={{@pickerDestination}}
           />
         </div>
+        {{#unless @typeFilter.skipTypeFiltering}}
+          <div class='search-sheet__search-bar-picker'>
+            <TypePicker
+              @filter={{@typeFilter}}
+              @destination={{@pickerDestination}}
+            />
+          </div>
+        {{/unless}}
+        <div
+          class='search-sheet__search-bar-separator'
+          aria-hidden='true'
+        ></div>
       {{/unless}}
-      <div class='search-sheet__search-bar-separator' aria-hidden='true'></div>
       {{! template-lint-disable no-invalid-interactive }}
       <div
         class='search-sheet__search-bar-input-wrap'
diff --git a/packages/host/app/components/card-search/search-content.gts b/packages/host/app/components/card-search/search-content.gts
index 8ed5b8a93d..a5d14e1c9f 100644
--- a/packages/host/app/components/card-search/search-content.gts
+++ b/packages/host/app/components/card-search/search-content.gts
@@ -147,6 +147,10 @@ interface Signature {
     // When true, search-result cards render the Adorn visual treatment
     // (teal hover type-label tab + teal selection chip).
     adorn?: boolean;
+    // Opt-in visual variant. 'mini' forces single-line rows, suppresses the
+    // per-section "show only" toggle, hides the grid/strip view picker, and
+    // un-hides the recents count — used by MiniCardChooser.
+    variant?: 'default' | 'mini';
   };
   Blocks: {};
 }
@@ -171,6 +175,13 @@ export default class SearchContent extends Component<Signature> {
   @tracked activeViewId = 'grid';
   private pagination = new SectionPagination(this.args.initialFocusedSection);
 
+  // Under @variant='mini', the displayed viewId is forced to the internal
+  // 'mini' literal regardless of activeViewId, so the user-facing view picker
+  // (which the mini variant also hides) cannot fight the consumer.
+  private get displayedViewId(): string {
+    return this.args.variant === 'mini' ? 'mini' : this.activeViewId;
+  }
+
   @consume(GetCardContextName) declare private getCard: getCard;
   @consume(GetCardCollectionContextName)
   declare private getCardCollection: getCardCollection;
@@ -371,6 +382,13 @@ export default class SearchContent extends Component<Signature> {
     const total = this.searchEntries.meta.page?.total ?? 0;
     const realms = this.realms;
 
+    // Mini variant compresses the summary to "X results" — the design puts
+    // it next to the Sort dropdown on a single row, so there's no room for
+    // the across-realms qualifier.
+    if (this.args.variant === 'mini') {
+      return pluralize('result', total, true);
+    }
+
     // Default: all results across all realms
     return `${pluralize('result', total, true)} across ${pluralize('realm', realms.length, true)}`;
   }
@@ -522,7 +540,11 @@ export default class SearchContent extends Component<Signature> {
         focusedSectionSid=this.pagination.focusedSection
         sectionSelector='[data-section-sid]'
       }}
-      class={{cn 'search-sheet-content' compact=@isCompact}}
+      class={{cn
+        'search-sheet-content'
+        compact=@isCompact
+        mini=(eq @variant 'mini')
+      }}
       ...attributes
     >
       {{! AdornContext aligns with this search-sheet-content div as
@@ -548,6 +570,7 @@ export default class SearchContent extends Component<Signature> {
               @allCards={{this.allCards}}
               @onSelectAll={{@onSelectAll}}
               @onDeselectAll={{@onDeselectAll}}
+              @hideViewSelector={{eq @variant 'mini'}}
             />
           {{/unless}}
         {{/if}}
@@ -581,7 +604,8 @@ export default class SearchContent extends Component<Signature> {
           {{#each this.sections key='sid' as |section i|}}
             <SearchResultSection
               @section={{section}}
-              @viewOption={{this.activeViewId}}
+              @viewOption={{this.displayedViewId}}
+              @variant={{@variant}}
               @handleSelect={{@handleSelect}}
               @isFocused={{eq this.pagination.focusedSection section.sid}}
               @isCollapsed={{this.isSectionCollapsed section.sid}}
@@ -650,6 +674,23 @@ export default class SearchContent extends Component<Signature> {
       .search-sheet-content.compact :deep(.search-result-block) {
         margin-bottom: 0;
       }
+      /* Mini variant — tighten the layout so the chooser fits into a
+         narrow side-by-side envelope and matches the design references
+         (`.context/attachments/MXpUf9/...` and `.../BMmJkV/...`). */
+      .search-sheet-content.mini {
+        padding-block: var(--boxel-sp-xs);
+      }
+      .search-sheet-content.mini :deep(.search-result-header) {
+        padding-block: var(--boxel-sp-xs);
+      }
+      /* Summary + Sort sit on one row, with the Sort dropdown shrunk to
+         fit its label rather than padded to a comfortable touch target. */
+      .search-sheet-content.mini :deep(.search-result-header .controls) {
+        gap: var(--boxel-sp-xs);
+      }
+      .search-sheet-content.mini :deep(.search-result-header .sort-button) {
+        min-width: 0;
+      }
       .empty-state {
         padding-block: var(--boxel-sp);
       }
diff --git a/packages/host/app/components/card-search/search-result-header.gts b/packages/host/app/components/card-search/search-result-header.gts
index ef469f62d7..048c0b6eaa 100644
--- a/packages/host/app/components/card-search/search-result-header.gts
+++ b/packages/host/app/components/card-search/search-result-header.gts
@@ -31,6 +31,7 @@ interface Signature {
     allCards?: string[];
     onSelectAll?: (cards: string[]) => void;
     onDeselectAll?: () => void;
+    hideViewSelector?: boolean;
   };
   Blocks: {};
 }
@@ -93,11 +94,13 @@ export default class SearchResultHeader extends Component<Signature> {
             @label={{this.selectionMenuLabel}}
           />
         {{/if}}
-        <ViewSelector
-          @items={{@viewOptions}}
-          @selectedId={{@activeViewId}}
-          @onChange={{@onChangeView}}
-        />
+        {{#unless @hideViewSelector}}
+          <ViewSelector
+            @items={{@viewOptions}}
+            @selectedId={{@activeViewId}}
+            @onChange={{@onChangeView}}
+          />
+        {{/unless}}
         <SortDropdown
           @options={{@sortOptions}}
           @selectedOption={{@activeSort}}
diff --git a/packages/host/app/components/card-search/search-result-section.gts b/packages/host/app/components/card-search/search-result-section.gts
index e52b69536e..546d4b844e 100644
--- a/packages/host/app/components/card-search/search-result-section.gts
+++ b/packages/host/app/components/card-search/search-result-section.gts
@@ -95,6 +95,9 @@ interface Signature {
       Element: HTMLElement;
       Args: { Positional: [cardEl: HTMLElement | undefined] };
     }>;
+    // Opt-in visual variant. 'mini' forces single-strip rows, suppresses the
+    // per-section "show only" toggle, and un-hides the recents count.
+    variant?: 'default' | 'mini';
   };
   Blocks: {};
 }
@@ -235,8 +238,20 @@ export default class SearchResultSection extends Component<Signature> {
     return Math.min(SECTION_SHOW_MORE_INCREMENT, this.remainingCount);
   }
 
+  get isMini(): boolean {
+    return this.args.variant === 'mini';
+  }
+
+  // Recents rows go through FittedCardContainer, which writes an inline
+  // `width: <single-strip width>px` unless @fullWidthItem is set. The mini
+  // variant wants every row to fill the chooser's narrow envelope, same
+  // as strip-view does in the full search sheet.
+  get useFullWidthItem(): boolean {
+    return this.viewClass === 'strip-view' || this.isMini;
+  }
+
   get viewClass() {
-    if (this.args.isCompact) {
+    if (this.args.isCompact || this.isMini) {
       return 'compact-view';
     } else if (
       this.args.viewOption === 'grid' &&
@@ -271,6 +286,10 @@ export default class SearchResultSection extends Component<Signature> {
     );
   };
 
+  showSelectedCheckmark = (cardUrl: string): boolean => {
+    return this.isMini && this.isCardSelected(cardUrl);
+  };
+
   get isCreateNewSelected(): boolean {
     const selected = this.args.selectedCards;
     if (!this.realmSection || !selected) {
@@ -311,6 +330,7 @@ export default class SearchResultSection extends Component<Signature> {
       class={{cn
         'search-result-block'
         search-result-block--collapsed=@isCollapsed
+        search-result-block--mini=this.isMini
       }}
       data-test-realm={{this.sectionRealmName}}
       data-test-realm-url={{this.sectionRealmUrl}}
@@ -329,7 +349,7 @@ export default class SearchResultSection extends Component<Signature> {
           @realmInfo={{this.realmSection.realmInfo}}
           @title={{this.realmSection.realmInfo.name}}
           @totalCount={{this.realmSection.totalCount}}
-          @showOnlyLabel={{this.realmSection.realmInfo.name}}
+          @showOnlyLabel={{unless this.isMini this.realmSection.realmInfo.name}}
           @showOnlyChecked={{@isFocused}}
           @onShowOnlyChange={{this.handleShowOnlyChange}}
         />
@@ -357,6 +377,7 @@ export default class SearchResultSection extends Component<Signature> {
                 @item={{card.component}}
                 @itemId={{card.id}}
                 @isSelected={{this.isCardSelected card.id}}
+                @showSelectedCheckmark={{this.showSelectedCheckmark card.id}}
                 @multiSelect={{@multiSelect}}
                 @onSelect={{@handleSelect}}
                 @onSubmit={{@onSubmit}}
@@ -401,6 +422,7 @@ export default class SearchResultSection extends Component<Signature> {
             @itemId={{this.urlSection.card.id}}
             @isSelected={{this.isCardSelected this.urlSection.card.id}}
             @multiSelect={{@multiSelect}}
+            @showSelectedCheckmark={{this.isMini}}
             @onSelect={{@handleSelect}}
             @onSubmit={{@onSubmit}}
             @adorn={{@adorn}}
@@ -411,14 +433,22 @@ export default class SearchResultSection extends Component<Signature> {
         </GridContainer>
       {{else if this.recentsSection}}
         {{#unless @isCompact}}
-          <SearchSheetSectionHeader
-            @icon={{this.recentsIcon}}
-            @title='Recents'
-            @hideCount={{true}}
-            @showOnlyLabel='Recents'
-            @showOnlyChecked={{@isFocused}}
-            @onShowOnlyChange={{this.handleShowOnlyChange}}
-          />
+          {{#if this.isMini}}
+            <SearchSheetSectionHeader
+              @icon={{this.recentsIcon}}
+              @title='Recents'
+              @totalCount={{this.recentsSection.totalCount}}
+            />
+          {{else}}
+            <SearchSheetSectionHeader
+              @icon={{this.recentsIcon}}
+              @title='Recents'
+              @hideCount={{true}}
+              @showOnlyLabel='Recents'
+              @showOnlyChecked={{@isFocused}}
+              @onShowOnlyChange={{this.handleShowOnlyChange}}
+            />
+          {{/if}}
         {{/unless}}
 
         {{#if (eq this.recentsSection.kind 'prerendered')}}
@@ -427,7 +457,7 @@ export default class SearchResultSection extends Component<Signature> {
             @items={{this.displayedPrerenderedRecents}}
             @viewFormat={{this.viewFormat}}
             @size={{this.cardSize}}
-            @fullWidthItem={{eq this.viewClass 'strip-view'}}
+            @fullWidthItem={{this.useFullWidthItem}}
             as |card GridItem|
           >
             <GridItem class={{if @isCompact 'recent-card-item--compact'}}>
@@ -437,6 +467,7 @@ export default class SearchResultSection extends Component<Signature> {
                   @itemId={{card.id}}
                   @isSelected={{this.isCardSelected card.id}}
                   @multiSelect={{@multiSelect}}
+                  @showSelectedCheckmark={{this.isMini}}
                   @onSelect={{@handleSelect}}
                   @onSubmit={{@onSubmit}}
                   @adorn={{@adorn}}
@@ -468,7 +499,7 @@ export default class SearchResultSection extends Component<Signature> {
             @items={{this.displayedLiveRecents}}
             @viewFormat={{this.viewFormat}}
             @size={{this.cardSize}}
-            @fullWidthItem={{eq this.viewClass 'strip-view'}}
+            @fullWidthItem={{this.useFullWidthItem}}
             as |card GridItem|
           >
             <GridItem class={{if @isCompact 'recent-card-item--compact'}}>
@@ -478,6 +509,7 @@ export default class SearchResultSection extends Component<Signature> {
                   @itemId={{card.id}}
                   @isSelected={{this.isCardSelected card.id}}
                   @multiSelect={{@multiSelect}}
+                  @showSelectedCheckmark={{this.isMini}}
                   @onSelect={{@handleSelect}}
                   @onSubmit={{@onSubmit}}
                   @adorn={{@adorn}}
@@ -556,6 +588,74 @@ export default class SearchResultSection extends Component<Signature> {
         margin-top: var(--boxel-sp);
         width: fit-content;
       }
+      .search-result-block--mini .show-more {
+        border-radius: var(--boxel-border-radius-xl);
+        padding: var(--boxel-sp-xs) var(--boxel-sp);
+        font-weight: 600;
+      }
+      .search-result-block--mini {
+        margin-bottom: var(--boxel-sp);
+      }
+      /* The recents/realm "in {realm}" caption is rendered as a GridItem
+         :after — hide it in the mini variant so each row collapses to icon
+         + name only. The Spec card type also renders a `spec-tag-pill`
+         badge inside its prerendered body; suppress it for the same
+         single-line reason. */
+      .search-result-block--mini .realm-name,
+      .search-result-block--mini :deep(.spec-tag-pill) {
+        display: none;
+      }
+      /* `.compact-view` was authored for the horizontal quick-menu strip
+         (row of cards scrolling sideways). The mini chooser wants the
+         opposite — a vertical list of single-line rows, one per card. */
+      .search-result-block--mini .compact-view {
+        flex-flow: column nowrap;
+        gap: 0;
+      }
+      /* The realm/recents section header is bottom-margined for the full
+         search-sheet layout; in mini it sits right above the rows, so
+         tighten the gap. */
+      .search-result-block--mini :deep(.search-sheet-section-header) {
+        margin-bottom: var(--boxel-sp-xxs);
+        padding-block: var(--boxel-sp-xs);
+      }
+      /* Rows in the mini variant are bare — no border or hover shadow.
+         Selection is signaled by a teal fill + a black checkmark on the
+         right, matching the design. */
+      .search-result-block--mini :deep(.item-button) {
+        border: none;
+        background-color: transparent;
+        border-radius: var(--boxel-border-radius);
+      }
+      .search-result-block--mini :deep(.item-button:hover) {
+        box-shadow: none;
+        background-color: var(--boxel-200);
+      }
+      .search-result-block--mini :deep(.item-button.selected),
+      .search-result-block--mini :deep(.item-button.selected:hover) {
+        background-color: var(--boxel-highlight);
+        box-shadow: none;
+        border: none;
+        --background: transparent;
+        --card: transparent;
+      }
+      /* The Button's own scoped CSS sets `background-color` via the
+         `--boxel-button-color` variable; override that var here too so
+         the teal fill wins regardless of which selector lands first. */
+      .search-result-block--mini :deep(.item-button.selected) {
+        --boxel-button-color: var(--boxel-highlight);
+      }
+      /* The fitted-format card template (and the prerendered HTML for
+         each card type) renders with its own opaque background — that
+         covers the Button's teal so only the strip of padding around
+         the card would show through. Force every descendant of a
+         selected row to transparent so the teal reads end-to-end.
+         SVG fills (e.g. the CheckMark icon) aren't `background-color`,
+         so the icon glyph stays visible. */
+      .search-result-block--mini :deep(.item-button.selected *) {
+        background-color: transparent;
+        background-image: none;
+      }
       .realm-name {
         padding-top: var(--boxel-sp-4xs);
         color: var(--boxel-450);
diff --git a/packages/host/app/components/card-search/section-header.gts b/packages/host/app/components/card-search/section-header.gts
index 7356b43de0..2b41b740d5 100644
--- a/packages/host/app/components/card-search/section-header.gts
+++ b/packages/host/app/components/card-search/section-header.gts
@@ -101,6 +101,9 @@ export default class SearchSheetSectionHeader extends Component<Signature> {
         font: 500 var(--boxel-font);
         color: var(--boxel-450);
       }
+      .search-sheet-section-header:not(:has(.show-only)) .count {
+        margin-left: auto;
+      }
       .show-only {
         margin-left: auto;
         display: flex;
diff --git a/packages/host/app/templates/host-freestyle.gts b/packages/host/app/templates/host-freestyle.gts
index d73bf356ed..9e63a71c57 100644
--- a/packages/host/app/templates/host-freestyle.gts
+++ b/packages/host/app/templates/host-freestyle.gts
@@ -22,6 +22,7 @@ import AiAssistantChatInputUsage from '@cardstack/host/components/ai-assistant/c
 import AiAssistantFocusPillUsage from '@cardstack/host/components/ai-assistant/focus-pill/usage';
 import AiAssistantMessageUsage from '@cardstack/host/components/ai-assistant/message/usage';
 import AiAssistantSkillMenuUsage from '@cardstack/host/components/ai-assistant/skill-menu/usage';
+import MiniCardChooserUsage from '@cardstack/host/components/card-chooser/mini/usage';
 import CardChooserModal from '@cardstack/host/components/card-chooser/modal';
 import PillMenuUsage from '@cardstack/host/components/pill-menu/usage';
 import SearchSheetUsage from '@cardstack/host/components/search-sheet/usage';
@@ -74,6 +75,7 @@ class HostFreestyleComponent extends Component<HostFreestyleSignature> {
       ['AiAssistant::Message', AiAssistantMessageUsage],
       ['AiAssistant::PillMenu', PillMenuUsage],
       ['AiAssistant::SkillMenu', AiAssistantSkillMenuUsage],
+      ['MiniCardChooser', MiniCardChooserUsage],
       ['SearchSheet', SearchSheetUsage],
     ].map(([name, c]) => {
       return {
diff --git a/packages/host/tests/integration/components/mini-card-chooser-test.gts b/packages/host/tests/integration/components/mini-card-chooser-test.gts
new file mode 100644
index 0000000000..b38d69b080
--- /dev/null
+++ b/packages/host/tests/integration/components/mini-card-chooser-test.gts
@@ -0,0 +1,359 @@
+import type { TOC } from '@ember/component/template-only';
+import {
+  type RenderingTestContext,
+  click,
+  fillIn,
+  render,
+  waitFor,
+  waitUntil,
+} from '@ember/test-helpers';
+
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { getService } from '@universal-ember/test-support';
+import { provide } from 'ember-provide-consume-context';
+
+import { module, test } from 'qunit';
+
+import {
+  baseRealm,
+  rri,
+  CardContextName,
+  GetCardContextName,
+  GetCardCollectionContextName,
+  GetCardsContextName,
+} from '@cardstack/runtime-common';
+
+import MiniCardChooser from '@cardstack/host/components/card-chooser/mini';
+import { getCardCollection } from '@cardstack/host/resources/card-collection';
+import { getCard } from '@cardstack/host/resources/card-resource';
+import type RecentCardsService from '@cardstack/host/services/recent-cards-service';
+import type StoreService from '@cardstack/host/services/store';
+
+import {
+  setupIntegrationTestRealm,
+  setupLocalIndexing,
+  testRealmURL,
+} from '../../helpers';
+import {
+  CardDef,
+  StringField,
+  contains,
+  field,
+  setupBaseRealm,
+} from '../../helpers/base-realm';
+import { setupMockMatrix } from '../../helpers/mock-matrix';
+
+import { setupRenderingTest } from '../../helpers/setup';
+
+// Sized envelope mirroring the chooser's intended hosting context (a narrow
+// side panel, ~360×480). The chooser's layout is fluid (100% of parent), so
+// every behavioral assertion below — single-line rows, show-more wrapping,
+// the recents header sitting flush above its rows — only holds at a
+// realistic width. Rendering unsized would let rows expand to the viewport
+// and quietly mask layout regressions.
+const DesignRatioContainer: TOC<{ Blocks: { default: [] } }> = <template>
+  <div class='design-ratio-container' data-test-design-ratio-container>
+    {{yield}}
+  </div>
+  <style scoped>
+    .design-ratio-container {
+      width: 360px;
+      height: 480px;
+      border: 1px solid var(--boxel-border-color, var(--boxel-300));
+      border-radius: var(--boxel-border-radius);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</template>;
+
+// Provides the contexts SearchContent reads via @consume so the
+// chooser can render in isolation, without OperatorMode.
+class HostContextProvider extends GlimmerComponent<{
+  Blocks: { default: [] };
+}> {
+  @provide(GetCardContextName)
+  get getCardFn() {
+    return getCard;
+  }
+
+  @provide(GetCardsContextName)
+  get getCardsFn() {
+    let store = getService('store') as StoreService;
+    return store.getSearchResource.bind(store);
+  }
+
+  @provide(GetCardCollectionContextName)
+  get getCardCollectionFn() {
+    return getCardCollection;
+  }
+
+  @provide(CardContextName)
+  get cardContext() {
+    return {};
+  }
+
+  <template>
+    {{! template-lint-disable no-yield-only }}
+    {{yield}}
+  </template>
+}
+
+module('Integration | mini-card-chooser', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+  setupLocalIndexing(hooks);
+
+  let mockMatrixUtils = setupMockMatrix(hooks, {
+    loggedInAs: '@testuser:localhost',
+    activeRealms: [baseRealm.url, testRealmURL],
+    autostart: true,
+  });
+
+  const noop = () => {};
+
+  // The Book module path inside the test realm — referenced by the baseFilter
+  // test below to scope results to the Book type only.
+  const bookModule = `${testRealmURL}book`;
+
+  hooks.beforeEach(async function (this: RenderingTestContext) {
+    class Book extends CardDef {
+      static displayName = 'Book';
+      @field title = contains(StringField);
+    }
+    class Movie extends CardDef {
+      static displayName = 'Movie';
+      @field title = contains(StringField);
+    }
+
+    await setupIntegrationTestRealm({
+      mockMatrixUtils,
+      realmURL: testRealmURL,
+      contents: {
+        'book.gts': { Book },
+        'movie.gts': { Movie },
+        'books/mango.json': new Book({ title: 'Mango' }),
+        'books/vincent.json': new Book({ title: 'Vincent' }),
+        'movies/casablanca.json': new Movie({ title: 'Casablanca' }),
+      },
+    });
+    await getService('realm').login(testRealmURL);
+  });
+
+  test('mounts in isolation with a search input and no filter chips, and renders the mini visual variant', async function (assert) {
+    // Seed a recent so a row actually renders — without one, the empty state
+    // has nothing to click and the design assertions (no show-only, no view
+    // picker) verify the negative case but the screenshot for manual diff
+    // would be blank.
+    let recent = getService('recent-cards-service') as RecentCardsService;
+    recent.add(`${testRealmURL}books/mango`);
+
+    // Round-trip the selection: clicking a row fires onSelect, which sets
+    // tracked state, which feeds back into @selected so the row visibly
+    // highlights. Mirrors what a real consumer (hosting container) does.
+    class SelectionHarness {
+      @tracked selected: string | undefined = undefined;
+      onSelect = (url: string) => {
+        this.selected = url;
+      };
+    }
+    const harness = new SelectionHarness();
+
+    await render(
+      <template>
+        <DesignRatioContainer>
+          <HostContextProvider>
+            <MiniCardChooser
+              @onSelect={{harness.onSelect}}
+              @selected={{harness.selected}}
+            />
+          </HostContextProvider>
+        </DesignRatioContainer>
+      </template>,
+    );
+
+    await waitFor('[data-test-mini-card-chooser] [data-test-search-field]');
+
+    assert
+      .dom('[data-test-mini-card-chooser]')
+      .exists('the mini chooser mounts in isolation');
+    assert
+      .dom('[data-test-mini-card-chooser] [data-test-search-field]')
+      .exists('the search input is rendered');
+    // The realm/type chips are deliberately suppressed in the mini variant.
+    assert
+      .dom('[data-test-mini-card-chooser] .search-sheet__search-bar-picker')
+      .doesNotExist('realm/type filter chips are hidden in the mini variant');
+    // The grid/strip view-mode picker is suppressed; the Sort dropdown stays.
+    assert
+      .dom('[data-test-search-result-header] .view-options-label')
+      .doesNotExist('view-mode picker is hidden under the mini variant');
+    // The per-section show-only toggle is gated off.
+    assert
+      .dom('[data-test-mini-card-chooser] [data-test-search-sheet-show-only]')
+      .doesNotExist('show-only toggle is suppressed in the mini variant');
+
+    // Type a token that the seeded fixtures share — `a` matches Mango,
+    // Casablanca, and (via the Vincent display name) any card whose
+    // title or type label contains an "a". This proves the search wire
+    // is live and gives us every visible row to iterate over.
+    await fillIn('[data-test-mini-card-chooser] [data-test-search-field]', 'a');
+    await waitFor('[data-test-mini-card-chooser] [data-test-item-button]', {
+      timeout: 5000,
+    });
+
+    // Capture the URL of every visible row, then click each in turn and
+    // assert that exactly that row carries the selected marker.
+    const buttonEls = Array.from(
+      document.querySelectorAll<HTMLElement>(
+        '[data-test-mini-card-chooser] [data-test-item-button]',
+      ),
+    );
+    const urls = buttonEls
+      .map((el) => el.getAttribute('data-test-item-button'))
+      .filter((u): u is string => Boolean(u));
+
+    assert.ok(
+      urls.length > 0,
+      `at least one row matches "a" (saw ${urls.length})`,
+    );
+
+    for (const url of urls) {
+      await click(
+        `[data-test-mini-card-chooser] [data-test-item-button="${url}"]`,
+      );
+      await waitUntil(() => harness.selected === url);
+
+      // The clicked row carries the selected marker…
+      assert
+        .dom(
+          `[data-test-mini-card-chooser] [data-test-item-button="${url}"][data-test-item-button-selected="true"]`,
+        )
+        .exists(`row ${url} highlights after click`);
+      // …and the visible checkmark icon lands inside it (the mini
+      // variant's @showSelectedCheckmark path).
+      assert
+        .dom(
+          `[data-test-mini-card-chooser] [data-test-item-button="${url}"] [data-test-item-button-selected-checkmark]`,
+        )
+        .exists(`row ${url} shows the CheckMark icon`);
+      // …and no other row is marked selected at the same time.
+      assert
+        .dom(
+          '[data-test-mini-card-chooser] [data-test-item-button-selected="true"]',
+        )
+        .exists({ count: 1 }, `exactly one row selected after clicking ${url}`);
+    }
+  });
+
+  test('shows recents in the empty state, and selecting one fires onSelect with the canonical URL', async function (assert) {
+    let recent = getService('recent-cards-service') as RecentCardsService;
+    recent.add(`${testRealmURL}books/mango`);
+
+    const selections: string[] = [];
+    const onSelect = (url: string) => selections.push(url);
+
+    await render(
+      <template>
+        <DesignRatioContainer>
+          <HostContextProvider>
+            <MiniCardChooser @onSelect={{onSelect}} />
+          </HostContextProvider>
+        </DesignRatioContainer>
+      </template>,
+    );
+
+    const cardUrl = `${testRealmURL}books/mango`;
+    await waitFor(
+      `[data-test-mini-card-chooser] [data-section-sid="recents"] [data-test-item-button="${cardUrl}"]`,
+      { timeout: 5000 },
+    );
+
+    // The wrapper carries the mini modifier class so the scoped CSS applies.
+    assert
+      .dom('[data-test-mini-card-chooser] .search-result-block--mini')
+      .exists('section wrapper carries the mini modifier class');
+
+    await click(
+      `[data-test-mini-card-chooser] [data-test-item-button="${cardUrl}"]`,
+    );
+
+    await waitUntil(() => selections.length > 0);
+    assert.deepEqual(
+      selections,
+      [cardUrl],
+      'onSelect receives the canonical URL exactly once (no .json suffix)',
+    );
+  });
+
+  test('typing in the search input renders matching results from the realm', async function (assert) {
+    await render(
+      <template>
+        <DesignRatioContainer>
+          <HostContextProvider>
+            <MiniCardChooser @onSelect={{noop}} />
+          </HostContextProvider>
+        </DesignRatioContainer>
+      </template>,
+    );
+
+    await waitFor('[data-test-mini-card-chooser] [data-test-search-field]');
+
+    const vincent = `${testRealmURL}books/vincent`;
+    const mango = `${testRealmURL}books/mango`;
+
+    await fillIn(
+      '[data-test-mini-card-chooser] [data-test-search-field]',
+      'Vincent',
+    );
+    await waitFor(
+      `[data-test-mini-card-chooser] [data-test-item-button="${vincent}"]`,
+      { timeout: 5000 },
+    );
+
+    assert
+      .dom(`[data-test-mini-card-chooser] [data-test-item-button="${vincent}"]`)
+      .exists('the matching card surfaces');
+    assert
+      .dom(`[data-test-mini-card-chooser] [data-test-item-button="${mango}"]`)
+      .doesNotExist('non-matching cards are filtered out');
+  });
+
+  test('baseFilter narrows results to the requested card type', async function (assert) {
+    const bookFilter = { type: { module: rri(bookModule), name: 'Book' } };
+
+    await render(
+      <template>
+        <DesignRatioContainer>
+          <HostContextProvider>
+            <MiniCardChooser @onSelect={{noop}} @baseFilter={{bookFilter}} />
+          </HostContextProvider>
+        </DesignRatioContainer>
+      </template>,
+    );
+
+    const mango = `${testRealmURL}books/mango`;
+    const vincent = `${testRealmURL}books/vincent`;
+    const casablanca = `${testRealmURL}movies/casablanca`;
+
+    await waitFor(
+      `[data-test-mini-card-chooser] [data-test-item-button="${mango}"]`,
+      { timeout: 5000 },
+    );
+
+    assert
+      .dom(`[data-test-mini-card-chooser] [data-test-item-button="${mango}"]`)
+      .exists('Book-type cards are included under a Book baseFilter');
+    assert
+      .dom(`[data-test-mini-card-chooser] [data-test-item-button="${vincent}"]`)
+      .exists('all Book-type cards surface');
+    assert
+      .dom(
+        `[data-test-mini-card-chooser] [data-test-item-button="${casablanca}"]`,
+      )
+      .doesNotExist('Movie-type cards are excluded by a Book baseFilter');
+  });
+});