@@ -41,6 +41,8 @@ import { buildPackageScopeOptions } from './package-scope.js';
 import { diagnosticsHeaderTone, type DiagnosticsHeaderTone } from './diagnostics-tone.js';
 import { ENVIRONMENT_AREA_TYPES, SETUP_DATASOURCES_PATH, useMetadataAreaHost } from './metadataAreaHost.js';
 import { ENVIRONMENT_SCOPE_QUERY } from './catalog-scope.js';
+import { usePackageCustomizations } from '../studio-design/CustomizationMark.js';
+import { customizationCountsByType, customizationTotal } from '../studio-design/customizationMarks.js';
 
 /**
  * The "View all issues" link's look per sweep tone (objectui#12768). The
@@ -169,6 +171,15 @@ export function MetadataDirectoryPage() {
   } = useGlobalDiagnostics(client, 'warning', activePackage ?? undefined);
   const diagTone = diagnosticsHeaderTone(diagSummary.entries);
 
+  // objectstack ADR-0146 D3 (#28568) — under the area, a base's directory
+  // counts its customizations: each tile the type's, the header the base's
+  // total, all from the server's customization read. Setup reads nothing.
+  const customizations = usePackageCustomizations(host?.packageId ?? null);
+  const customizedByType = React.useMemo(
+    () => (customizations.status === 'read' ? customizationCountsByType(customizations.read) : null),
+    [customizations],
+  );
+
   // Base set: visible (non-hidden) metadata types contributed by the active
   // project package. Fail closed — show nothing until a concrete project
   // package is active, so system-only types never surface.
@@ -248,6 +259,19 @@ export function MetadataDirectoryPage() {
             }),
           }}
         />
+        {customizations.status === 'read' && customizationTotal(customizations.read) > 0 && (
+          <p className="text-sm text-muted-foreground mt-1" data-testid="directory-customizations-total">
+            {tFormat('engine.directory.customizations.total', locale, {
+              customized: customizationTotal(customizations.read),
+              base: customizations.baseName,
+            })}
+          </p>
+        )}
+        {customizations.status === 'failed' && (
+          <p className="text-xs text-muted-foreground mt-1" data-testid="directory-customizations-failed">
+            {tFormat('engine.customizationMark.readFailed', locale, { message: customizations.message })}
+          </p>
+        )}
 
         {/* Filter row */}
         <div className="flex items-center gap-3 mt-4 flex-wrap">
@@ -348,6 +372,7 @@ export function MetadataDirectoryPage() {
                       warnCount={warnByType[e.type] ?? 0}
                       lockedCount={lockedByType[e.type] ?? 0}
                       itemCount={totalCount}
+                      customizedCount={customizedByType?.[e.type]}
                       packageFilter={activePackage ?? undefined}
                       environmentScope={!!host && host.packageId === null}
                       // ADR-0146 D1 — under the area, the datasource tile
@@ -409,6 +434,7 @@ function TypeTile({
   packageFilter,
   environmentScope = false,
   href: hrefOverride,
+  customizedCount,
 }: {
   entry: RichMetadataTypeEntry;
   locale?: string;
@@ -423,6 +449,8 @@ function TypeTile({
   environmentScope?: boolean;
   /** Where the tile leads instead of the type's list (the Studio area's datasource tile). */
   href?: string;
+  /** The type's served customization count (ADR-0146 D3); absent while unread, failed, or none. */
+  customizedCount?: number;
 }) {
   // Prefer the locale-table translation; fall back to server's `label` (typically English).
   const label = translateMetadataType(entry.type, locale, entry.label);
@@ -467,6 +495,16 @@ function TypeTile({
           >
             {itemCount}
           </Badge>
+          {customizedCount !== undefined && customizedCount > 0 && (
+            <Badge
+              variant="outline"
+              className="text-[10px] tabular-nums border-violet-500/40 text-violet-700 dark:text-violet-300 bg-violet-500/[0.06]"
+              title={tFormat('engine.directory.customizations.tileTitle', locale ?? 'en', { customized: customizedCount })}
+              data-testid={`directory-tile-customized-${entry.type}`}
+            >
+              {tFormat('engine.directory.customizations.tile', locale ?? 'en', { customized: customizedCount })}
+            </Badge>
+          )}
           {invalidCount > 0 && (
             <Badge
               variant="outline"
 
@@ -73,6 +73,14 @@ import { t, tFormat, translateMetadataType, useMetadataLocale } from './i18n.js'
 import { buildPackageScopeOptions } from './package-scope.js';
 import { ENVIRONMENT_SCOPE_QUERY, isEnvironmentScope, useWalledCatalogReadOnly } from './catalog-scope.js';
 import { useMetadataAreaHost } from './metadataAreaHost.js';
+import { customizationPackageId } from '@objectstack/spec/kernel';
+import { CustomizationMark, usePackageCustomizations } from '../studio-design/CustomizationMark.js';
+import {
+  customizationBaseOfRow,
+  customizationMarkOf,
+  customizationTotal,
+  type CustomizationMarkKind,
+} from '../studio-design/customizationMarks.js';
 import {
   audienceAnchorsOf,
   hasCatalogActivation,
@@ -195,6 +203,19 @@ function DefaultMetadataList({ type, appName }: { type: string; appName?: string
   // package scope is the area's, never picked or repaired here, and a
   // read-only package offers no create.
   const host = useMetadataAreaHost();
+  // objectstack ADR-0146 D3 (#28568) — "On top, one surface": with a base open
+  // in the area, its list holds the base's items and its paired
+  // `<base>.custom` package's items together, each item of the pair marked
+  // from the server's customization read ("customized (base)" for a served
+  // override, "added" for the rest), filterable to those alone. A pending or
+  // failed read draws no mark; Setup (no host) reads nothing.
+  const customizations = usePackageCustomizations(host?.packageId ?? null);
+  const pairId = React.useMemo(() => {
+    if (!host?.packageId) return null;
+    const pair = customizationPackageId(host.packageId);
+    return pair.ok ? pair.value : null;
+  }, [host?.packageId]);
+  const [onlyCustomized, setOnlyCustomized] = React.useState(false);
   // objectstack#27356 — under Setup the header names the page as the sidebar
   // entry that opens it does ("Positions"); the type's label otherwise.
   const { app } = useExpressionContext();
@@ -548,15 +569,44 @@ function DefaultMetadataList({ type, appName }: { type: string; appName?: string
         // Only rows tagged with the active writable base match. Untagged /
         // `sys_metadata`-provenance legacy rows have no scope of their own
         // (ADR-0070 D5 — the package-less "Local / Custom" scope is removed).
-        return pkg === activePackage;
+        // Under the area a base's list also holds its pair's items (ADR-0146 D3).
+        return pkg === activePackage || (pairId !== null && pkg === pairId);
       }),
-    [items, activePackage, config, envScope],
+    [items, activePackage, config, envScope, pairId],
+  );
+
+  // The customization mark of each row, from the base's served read only.
+  const markOf = React.useCallback(
+    (row: ItemRow): CustomizationMarkKind | null => {
+      if (customizations.status !== 'read') return null;
+      const pk = config.primaryKey ?? 'name';
+      return customizationMarkOf(
+        {
+          type,
+          name: String(row.item[pk] ?? ''),
+          member: bundleMemberOf(row.item, config.bundleMemberField),
+          packageId: (row.item as { _packageId?: string })._packageId,
+        },
+        customizations.index,
+      );
+    },
+    [customizations, config.primaryKey, config.bundleMemberField, type],
   );
+  const markedCount = React.useMemo(
+    () => scopedItems.filter((row) => markOf(row) !== null).length,
+    [scopedItems, markOf],
+  );
+  // The filter is offered once the read has answered and the base has a
+  // customization to show; a base with no pair is unchanged.
+  const showCustomizedFilter =
+    customizations.status === 'read' && (markedCount > 0 || customizationTotal(customizations.read) > 0);
+  const filteringCustomized = onlyCustomized && showCustomizedFilter;
 
   // User-driven filters (search query + source provenance) on top of scope.
   const filtered = scopedItems.filter((row) => {
     if (!matchesQuery(row.item, query, searchableFields)) return false;
     if (sourceFilter !== 'all' && row.source !== sourceFilter) return false;
+    if (filteringCustomized && markOf(row) === null) return false;
     if (activation && statusFilter !== 'all') {
       // Only a KNOWN state filters: while the ledger is unread or unreadable,
       // no item is either active or inactive to this filter.
@@ -719,7 +769,24 @@ function DefaultMetadataList({ type, appName }: { type: string; appName?: string
               </SelectContent>
             </Select>
           )}
+          {showCustomizedFilter && (
+            <Button
+              size="sm"
+              variant={filteringCustomized ? 'default' : 'outline'}
+              className={inSetup ? 'h-8 rounded-full px-3 text-xs' : undefined}
+              aria-pressed={filteringCustomized}
+              onClick={() => setOnlyCustomized((v) => !v)}
+              data-testid="metadata-only-customizations"
+            >
+              {tFormat('engine.list.customizations.only', locale, { marked: markedCount })}
+            </Button>
+          )}
         </div>
+        {customizations.status === 'failed' && (
+          <div className="text-xs text-muted-foreground" data-testid="metadata-customizations-failed">
+            {tFormat('engine.customizationMark.readFailed', locale, { message: customizations.message })}
+          </div>
+        )}
 
         {/* objectui#7611 — the environment scope says WHY a caller cannot
             define here, in the posture's own terms (#22621 → A): under
@@ -924,6 +991,22 @@ function DefaultMetadataList({ type, appName }: { type: string; appName?: string
                     rowEditSuffix,
                     rowMember ? `${BUNDLE_MEMBER_PARAM}=${encodeURIComponent(rowMember)}` : '',
                   )}`;
+                  // ADR-0146 D3 — the row's customization mark: under a base,
+                  // from its served read; in the cross-package leg, an item of a
+                  // pair names its base.
+                  const mark = markOf(row);
+                  const pairBase = host && host.packageId === null ? customizationBaseOfRow(rowPkg) : null;
+                  const markNode =
+                    mark && customizations.status === 'read' ? (
+                      <CustomizationMark
+                        kind={mark}
+                        baseName={customizations.baseName}
+                        pairId={customizations.index.pairId}
+                        locale={locale}
+                      />
+                    ) : pairBase ? (
+                      <CustomizationMark kind="customizationOf" baseName={pairBase} pairId={rowPkg} locale={locale} />
+                    ) : null;
                   return (
                     <tr
                       key={name + i}
@@ -985,6 +1068,7 @@ function DefaultMetadataList({ type, appName }: { type: string; appName?: string
                                     {cell}
                                   </Link>
                                 )}
+                                {markNode}
                               </span>
                             ) : inSetup && c.key === 'description' && typeof value === 'string' && value !== '' ? (
                               // objectstack#27356 — two lines at most, so a row
 
@@ -0,0 +1,125 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * The console's one customization mark (objectstack ADR-0146 D3, "On top, one
+ * surface"): the chip that says an item of an installed base is customized,
+ * naming the base, or added by the base's paired `<base>.custom` package. The
+ * All metadata area's lists draw it; the pillar rails (N-19) reuse it, so a
+ * customization reads the same wherever it is listed.
+ *
+ * Which row carries which mark is `customizationMarks.ts`'s rule, from the
+ * base's served customization read only. {@link usePackageCustomizations} is
+ * that read for one base, in the four states the pages draw: off (no base to
+ * read), loading, failed (with the server's sentence) and read. ⛔ A loading
+ * or failed read draws no mark and no number, never a "0".
+ */
+
+import * as React from 'react';
+import { cn } from '@object-ui/components';
+import { customizationPackageId } from '@objectstack/spec/kernel';
+import { t, tFormat } from '../metadata-admin/i18n.js';
+import { fetchListedPackageManifests } from './packages-io.js';
+import { fetchPackageCustomizations, type PackageCustomizations } from './packageCustomizations-io.js';
+import { indexCustomizations, type CustomizationMarkIndex, type CustomizationMarkKind } from './customizationMarks.js';
+
+/**
+ * The marks the component draws: a list's two ({@link CustomizationMarkKind}),
+ * and `customizationOf`, which labels an item of a pair with its base where
+ * no base is open (the cross-package leg).
+ */
+export type CustomizationMarkChipKind = CustomizationMarkKind | 'customizationOf';
+
+const KIND_CLASS: Record<CustomizationMarkChipKind, string> = {
+  customized: 'bg-violet-100 text-violet-800 dark:bg-violet-500/15 dark:text-violet-300',
+  added: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300',
+  customizationOf: 'bg-muted text-muted-foreground',
+};
+
+export function CustomizationMark({
+  kind,
+  baseName,
+  pairId,
+  locale,
+  className,
+}: {
+  kind: CustomizationMarkChipKind;
+  /** The base's display name ("customized (HotCRM)"); needed by `customized` and `customizationOf`. */
+  baseName?: string;
+  /** The pair's id, named in the chip's title. */
+  pairId?: string;
+  locale: string;
+  className?: string;
+}): React.ReactElement {
+  const base = baseName ?? '';
+  const label =
+    kind === 'added'
+      ? t('engine.customizationMark.added', locale)
+      : tFormat(`engine.customizationMark.${kind}`, locale, { base });
+  const title = pairId
+    ? tFormat(`engine.customizationMark.${kind}Title`, locale, { base, pair: pairId })
+    : undefined;
+  return (
+    <span
+      data-testid="customization-mark"
+      data-kind={kind}
+      title={title}
+      className={cn(
+        'inline-flex h-[18px] shrink-0 items-center whitespace-nowrap rounded-[5px] px-1.5 text-[11px] font-medium',
+        KIND_CLASS[kind],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+/** One base's customization read, as the pages draw it. */
+export type PackageCustomizationsState =
+  | { status: 'off' }
+  | { status: 'loading' }
+  | { status: 'failed'; message: string }
+  | {
+      status: 'read';
+      read: PackageCustomizations;
+      index: CustomizationMarkIndex;
+      /** The base's listed name, else its id. */
+      baseName: string;
+    };
+
+/**
+ * Read `baseId`'s customizations, or nothing (`off`) when `baseId` is `null` or
+ * derives no pair: a customization package itself has none to read, and the
+ * route refuses its id.
+ *
+ * The base's name comes from the package list the area already reads (one
+ * request, `packages-io.ts`); when that list cannot name it, the id stands in.
+ */
+export function usePackageCustomizations(baseId: string | null): PackageCustomizationsState {
+  const readable = baseId !== null && customizationPackageId(baseId).ok;
+  const [answer, setAnswer] = React.useState<{ id: string; state: PackageCustomizationsState } | null>(null);
+  React.useEffect(() => {
+    if (!readable || baseId === null) return;
+    let cancelled = false;
+    const name = fetchListedPackageManifests().then(
+      (manifests) => manifests.get(baseId)?.name ?? baseId,
+      () => baseId,
+    );
+    Promise.all([fetchPackageCustomizations(baseId), name]).then(
+      ([read, baseName]) => {
+        if (cancelled) return;
+        const index = indexCustomizations(baseId, read);
+        setAnswer({ id: baseId, state: index ? { status: 'read', read, index, baseName } : { status: 'off' } });
+      },
+      (err: unknown) => {
+        if (cancelled) return;
+        setAnswer({ id: baseId, state: { status: 'failed', message: err instanceof Error ? err.message : String(err) } });
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [baseId, readable]);
+  if (!readable) return { status: 'off' };
+  return answer?.id === baseId ? answer.state : { status: 'loading' };
+}