diff --git a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts
index 316d481ea..1d5d6b309 100644
--- a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts
+++ b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts
@@ -115,6 +115,51 @@ export function resourceReplacementAssetHints(
   return hints;
 }
 
+/**
+ * 候选排序：**可替换（无硬门禁失败）的排在最前，其余按原名次跟随**。
+ *
+ * 判据与弹窗的禁用状态同源（`resourceReplacementBlockedReason`），所以"排在最前"与
+ * "点得动"永远是同一批条目 —— 不会出现排在最前却点不动的候选，也不会出现能点的候选被
+ * 挤在不可替换项后面。同档内显式按原名次排（不依赖 `Array.prototype.sort` 的稳定性），
+ * 保证任何引擎下结果一致。
+ *
+ * 不可替换项**不隐藏**：仍然渲染但禁用，把"为什么不能替换"留在界面上。
+ */
+export function sortResourceReplacementCandidates<
+  Candidate extends LocalProjectVersionReplacementCandidate,
+>(candidates: readonly Candidate[]): Candidate[] {
+  return candidates
+    .map((candidate, index) => ({ candidate, index }))
+    .sort((left, right) => {
+      const leftBlocked =
+        resourceReplacementBlockedReason(left.candidate) !== null;
+      const rightBlocked =
+        resourceReplacementBlockedReason(right.candidate) !== null;
+      if (leftBlocked !== rightBlocked) return leftBlocked ? 1 : -1;
+      return left.index - right.index;
+    })
+    .map((entry) => entry.candidate);
+}
+
+/**
+ * manifest 资产 id → 资源投影（同一资产生成多个投影时取第一个，与资源画布口径一致）。
+ *
+ * 抽成纯函数是为了让「候选条目 ↔ 资源投影 ↔ 预览身份」这条链在弹窗素材映射与宿主渲染处
+ * 共用同一份口径，而不是各写一份 `forEach`。
+ */
+export function projectResourcesByManifestAssetId(
+  resources: readonly ProjectResource[],
+): Map<string, ProjectResource> {
+  const resourceByAssetId = new Map<string, ProjectResource>();
+  for (const resource of resources) {
+    const assetId = resource.manifestAssetId;
+    if (assetId && !resourceByAssetId.has(assetId)) {
+      resourceByAssetId.set(assetId, resource);
+    }
+  }
+  return resourceByAssetId;
+}
+
 /**
  * 候选 → 弹窗素材。
  *
@@ -126,13 +171,7 @@ export function resourceReplacementPickerAssets(
   resources: readonly ProjectResource[],
   candidates: readonly LocalProjectVersionReplacementCandidate[],
 ): EditorAsset[] {
-  const resourceByAssetId = new Map<string, ProjectResource>();
-  for (const resource of resources) {
-    const assetId = resource.manifestAssetId;
-    if (assetId && !resourceByAssetId.has(assetId)) {
-      resourceByAssetId.set(assetId, resource);
-    }
-  }
+  const resourceByAssetId = projectResourcesByManifestAssetId(resources);
   return candidates.flatMap((candidate) => {
     const resource = resourceByAssetId.get(candidate.resourceId);
     if (!resource) return [];
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 6f853e8a5..bba6bc9f3 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -6325,6 +6325,17 @@ iframe.preview-frame {
   gap: 10px;
 }
 
+/*
+ * 「编辑素材标签」底部只有一个「添加」，靠右下角。
+ *
+ * 面板本身是 `display: grid`，footer 作为网格项默认铺满整行；这里只把它改成靠右的行内排布，
+ * 按钮宽度仍由共享的 `PlatformActionButton` 决定。
+ */
+.game-resource-classification-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .game-resource-classification-error {
   margin: 0;
   color: #b3261e;
@@ -6413,10 +6424,11 @@ iframe.preview-frame {
 }
 
 /*
- * 「替换素材」候选弹窗里的类型占位。
+ * 「替换素材」候选弹窗里候选卡的媒体区。
  *
- * AGC 的素材预览要经带 scope 的原生读取器拿 Blob URL，弹窗内没有同步 `src`，
- * 所以候选行只渲染稳定类型图标，不挂 `<img>`、不出现破图。
+ * 缩略图由资源卡同一条预览管线（`useProjectResourceCardPreviews`）给出 Blob URL 后渲染，
+ * 所以这里只负责"铺满弹窗给的 20 高度媒体槽 + 居中"：读不到预览时它是类型占位的容器，
+ * 读到之后就是真实缩略图的容器，两种状态同一块版面、不跳尺寸。
  */
 .game-resource-replacement-media {
   display: flex;
@@ -6424,6 +6436,7 @@ iframe.preview-frame {
   justify-content: center;
   width: 100%;
   height: 100%;
+  overflow: hidden;
   color: #8d7a6b;
 }
 
diff --git a/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx b/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx
index ee2da6936..5350aec11 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx
+++ b/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx
@@ -13,28 +13,12 @@ import {
   normalizeGameCreationAppAssetTags,
 } from '../../../../../packages/shared/src/contracts/gameCreationApp';
 import { ThemedModal } from '../../components/modal/ThemedModal';
-import {
-  ResourceAssetDeleteDialog,
-  type ResourceAssetReferenceVersion,
-} from './ResourceAssetDeleteDialog';
 
 type UpdateLocalProjectResourceClassificationResult = {
   asset: GameCreationAppAssetManifestEntry;
   committedProjectRevision: number;
 };
 
-type DeleteLocalProjectAssetResult = {
-  assetId: string;
-  localPath: string;
-  committedProjectRevision: number;
-  fileRetained: boolean;
-};
-
-type ReadLocalProjectAssetReferencesResult = {
-  assetId: string;
-  versions: ResourceAssetReferenceVersion[];
-};
-
 /**
  * 标签草稿沿用写入路径的归一化边界，只按中英文逗号、顿号与换行切分。
  * 与输入框旧的"整段逗号分隔文本"口径完全一致，改动只是把结果换成逐个可删的 pill。
@@ -71,19 +55,12 @@ function resourceClassificationErrorMessage(error: unknown) {
   return '保存素材标签失败';
 }
 
-function resourceDeleteErrorMessage(error: unknown) {
-  if (typeof error === 'string' && error.trim()) return error;
-  if (error instanceof Error && error.message) return error.message;
-  return '删除资源失败';
-}
-
 type ResourceClassificationPanelProps = {
   projectPath: string;
   projectId: string;
   asset: GameCreationAppAssetManifestEntry;
   onClose: () => void;
   onSaved: (result: UpdateLocalProjectResourceClassificationResult) => void;
-  onDeleted: (result: DeleteLocalProjectAssetResult) => void;
 };
 
 export function ResourceClassificationPanel({
@@ -92,7 +69,6 @@ export function ResourceClassificationPanel({
   asset,
   onClose,
   onSaved,
-  onDeleted,
 }: ResourceClassificationPanelProps) {
   /**
    * 分类取值优先级由落盘 `category` + `kind` 派生决定，本面板不再提供手动设置入口。
@@ -111,17 +87,9 @@ export function ResourceClassificationPanel({
   );
   const [tagDraft, setTagDraft] = useState('');
   const [saving, setSaving] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [deleteDialogPreparing, setDeleteDialogPreparing] = useState(false);
-  const [deleteReferencedVersions, setDeleteReferencedVersions] =
-    useState(false);
-  const [referencedVersions, setReferencedVersions] = useState<
-    readonly ResourceAssetReferenceVersion[]
-  >([]);
-  const [deleting, setDeleting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  /** 回车 / 逗号 / 顿号都按同一口径切分；输入框仍是同一套提交方式。 */
+  /** 回车 / 逗号 / 顿号都按同一口径切分：把草稿落成 pill。 */
   function commitTagDraft() {
     if (!tagDraft.trim()) return;
     setTags((current) =>
@@ -134,7 +102,12 @@ export function ResourceClassificationPanel({
     setTags((current) => current.filter((item) => item !== tag));
   }
 
-  async function saveResourceClassification() {
+  /**
+   * 保存标签：`tagsToSave` 由调用方给出（「添加」把输入框里还未落成 pill 的尾巴一起并入）。
+   */
+  async function saveResourceClassification(
+    tagsToSave: readonly string[],
+  ): Promise<void> {
     const invoke = window.__TAURI__?.core?.invoke;
     if (!invoke) {
       setError('编辑素材标签需要在客户端内保存');
@@ -150,9 +123,6 @@ export function ResourceClassificationPanel({
       if (!Number.isSafeInteger(status.revision) || status.revision < 0) {
         throw new Error('项目 revision 无效');
       }
-      // 输入框里还没按回车 / 逗号落成 pill 的尾巴也要一起保存，
-      // 沿用"整段文本在保存时统一切分"的既有行为，不让用户白输入。
-      const tagsToSave = mergeResourceClassificationTagDraft(tags, tagDraft);
       const result =
         await invoke<UpdateLocalProjectResourceClassificationResult>(
           'update_local_project_resource_classification',
@@ -177,66 +147,16 @@ export function ResourceClassificationPanel({
   }
 
   /**
-   * 点删除先读引用信息，再打开独立确认面板。素材不可变：只摘掉 manifest 登记，磁盘文件保留。
+   * 底部唯一的「添加」：把输入框里的内容（**含没按回车的尾巴**）落成 pill，然后按同一写入路径保存。
+   *
+   * 落 pill 是即时反馈，保存是本次动作的语义本身 —— 拆成"先落 pill 再等用户去点保存"要求
+   * 用户理解两步，而这里只有一步。
    */
-  async function openDeleteResourceDialog() {
-    const invoke = window.__TAURI__?.core?.invoke;
-    if (!invoke) {
-      setError('删除资源需要在客户端内执行');
-      return;
-    }
-    setDeleteDialogPreparing(true);
-    setError(null);
-    try {
-      const references = await invoke<ReadLocalProjectAssetReferencesResult>(
-        'read_local_project_asset_references',
-        { input: { projectPath, assetId: asset.id } },
-      );
-      setReferencedVersions(references.versions);
-      setDeleteReferencedVersions(false);
-      setDeleteDialogOpen(true);
-    } catch (referenceError) {
-      setError(resourceDeleteErrorMessage(referenceError));
-    } finally {
-      setDeleteDialogPreparing(false);
-    }
-  }
-
-  async function confirmDeleteResource() {
-    const invoke = window.__TAURI__?.core?.invoke;
-    if (!invoke) {
-      setError('删除资源需要在客户端内执行');
-      return;
-    }
-    setDeleting(true);
-    setError(null);
-    try {
-      const status = await invoke<{ revision: number }>(
-        'get_local_game_project_revision',
-        { projectPath },
-      );
-      if (!Number.isSafeInteger(status.revision) || status.revision < 0) {
-        throw new Error('项目 revision 无效');
-      }
-      const result = await invoke<DeleteLocalProjectAssetResult>(
-        'delete_local_project_asset',
-        {
-          input: {
-            projectPath,
-            expectedProjectId: projectId,
-            expectedProjectRevision: status.revision,
-            assetId: asset.id,
-            deleteReferencedVersions,
-          },
-        },
-      );
-      setDeleteDialogOpen(false);
-      onDeleted(result);
-    } catch (deleteError) {
-      setError(resourceDeleteErrorMessage(deleteError));
-    } finally {
-      setDeleting(false);
-    }
+  async function addTagDraftAndSave() {
+    const tagsToSave = mergeResourceClassificationTagDraft(tags, tagDraft);
+    setTags(tagsToSave);
+    setTagDraft('');
+    await saveResourceClassification(tagsToSave);
   }
 
   return (
@@ -304,41 +224,18 @@ export function ResourceClassificationPanel({
           </p>
         ) : null}
       </div>
-      <footer>
+      {/*
+        底部只留一个「添加」：它 = 落 pill + 保存。删除素材挪到资源卡选中工具条
+        （破坏性操作与它要改的对象放在一起），标签自身的删除按钮仍在每个 pill 内部。
+      */}
+      <footer className="game-resource-classification-footer">
         <PlatformActionButton
-          tone="danger"
-          onClick={() => void openDeleteResourceDialog()}
-          disabled={saving || deleting || deleteDialogPreparing}
-          aria-label="删除资源"
+          onClick={() => void addTagDraftAndSave()}
+          disabled={saving}
         >
-          删除
-        </PlatformActionButton>
-        <PlatformActionButton
-          tone="secondary"
-          onClick={onClose}
-          disabled={saving || deleting}
-        >
-          取消
-        </PlatformActionButton>
-        <PlatformActionButton
-          onClick={() => void saveResourceClassification()}
-          disabled={saving || deleting}
-        >
-          保存标签
+          添加
         </PlatformActionButton>
       </footer>
-      {deleteDialogOpen ? (
-        <ResourceAssetDeleteDialog
-          open
-          localPath={asset.localPath}
-          referencedVersions={referencedVersions}
-          deleteReferencedVersions={deleteReferencedVersions}
-          deleting={deleting}
-          onChangeDeleteReferencedVersions={setDeleteReferencedVersions}
-          onClose={() => setDeleteDialogOpen(false)}
-          onConfirm={() => void confirmDeleteResource()}
-        />
-      ) : null}
     </ThemedModal>
   );
 }
diff --git a/apps/ai-game-creator-shell/src/view/project-development/ResourcePreviewMedia.tsx b/apps/ai-game-creator-shell/src/view/project-development/ResourcePreviewMedia.tsx
new file mode 100644
index 000000000..1da6ca17c
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/project-development/ResourcePreviewMedia.tsx
@@ -0,0 +1,132 @@
+import { Image as ImageIcon, Music2, Video } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+
+import {
+  projectResourceCardPreviewKind,
+  type ProjectResourceCardPreviewState,
+} from './resourceCardPreviewModel';
+import type { ProjectResource } from './resourceProjectionModel';
+
+type ResourcePreviewMediaProps = {
+  /**
+   * 该条目对应的资源投影。`null` 表示宿主给不出投影（候选条目理论上都来自资源投影，
+   * 这里只做兜底）：此时只渲染类型占位，不注册预览、不请求读取。
+   */
+  resource: ProjectResource | null;
+  /**
+   * 资源卡预览身份（`useProjectResourceCardPreviews().identityByResourceId` 的取值）。
+   *
+   * 身份缺失时同样退化为类型占位：拿不到身份就无法进入预览队列，硬挂 `<img>` 只会是破图。
+   */
+  previewIdentity: string | null;
+  /** 与资源卡同源的预览状态快照。 */
+  preview: ProjectResourceCardPreviewState;
+  /**
+   * 把本卡元素登记进资源卡预览管线（`useProjectResourceCardPreviews().observePreview`）。
+   *
+   * 登记即复核：`observePreview` 注册后立刻按几何判一次可见性，所以弹窗里的可见候选
+   * 开箱即进同一条队列；滚动等后续几何变化由宿主的兜底扫描补齐。
+   */
+  onObservePreview: (
+    element: HTMLElement,
+    resource: ProjectResource,
+    identity: string,
+  ) => () => void;
+  onPreviewDecodeError: (identity: string, error: string) => void;
+  /**
+   * 资源投影缺失时的类型占位口径（宿主条目自带的媒体类型，取值域是宿主的 `EditorAsset`）。
+   * 缺省按图片处理，与资源卡对未知类型的占位一致。
+   */
+  fallbackMediaType?: string;
+};
+
+function resourcePreviewPlaceholderIcon(mediaType: string | undefined) {
+  if (mediaType === 'audio') {
+    return <Music2 className="h-5 w-5" aria-hidden="true" />;
+  }
+  if (mediaType === 'video') {
+    return <Video className="h-5 w-5" aria-hidden="true" />;
+  }
+  return <ImageIcon className="h-5 w-5" aria-hidden="true" />;
+}
+
+/**
+ * 弹窗类宿主（portal 里）的资源缩略图。
+ *
+ * 走的是**资源卡同一条预览管线**：身份取自 `identityByResourceId`、状态取自 `previews`、
+ * 可见性通过 `observePreview` 登记进同一张 `observedCards` 表。没有任何第二条读取通路：
+ * 这里只用管线给的 `sourceUrl` 渲染，读不到就退回类型占位（与资源卡的占位语义一致）。
+ *
+ * `data-resource-preview-status` 与资源卡一样暴露"为什么没有图"：`idle` / `loading` /
+ * `failed` 在界面上都是占位图标，排障时需要能直接分辨。
+ */
+export function ResourcePreviewMedia({
+  resource,
+  previewIdentity,
+  preview,
+  onObservePreview,
+  onPreviewDecodeError,
+  fallbackMediaType,
+}: ResourcePreviewMediaProps) {
+  const mediaRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const element = mediaRef.current;
+    if (!element || !resource || !previewIdentity) {
+      return undefined;
+    }
+    return onObservePreview(element, resource, previewIdentity);
+  }, [onObservePreview, previewIdentity, resource]);
+
+  const kind = resource ? projectResourceCardPreviewKind(resource) : null;
+  const sourceUrl =
+    preview.status === 'loaded' ? (preview.preview.sourceUrl ?? null) : null;
+  const visual = (() => {
+    if (sourceUrl && (kind === 'raster-image' || kind === 'media-image')) {
+      return (
+        <img
+          src={sourceUrl}
+          alt=""
+          className="h-full w-full object-cover"
+          decoding="async"
+          onError={() => {
+            if (previewIdentity) {
+              onPreviewDecodeError(
+                previewIdentity,
+                '美术资源无法解码，请重新生成或替换该资源',
+              );
+            }
+          }}
+        />
+      );
+    }
+    if (sourceUrl && kind === 'video') {
+      return (
+        <video
+          src={sourceUrl}
+          className="h-full w-full object-cover"
+          preload="metadata"
+          muted
+          playsInline
+        />
+      );
+    }
+    return resourcePreviewPlaceholderIcon(
+      kind === 'video'
+        ? 'video'
+        : kind === 'audio'
+          ? 'audio'
+          : fallbackMediaType,
+    );
+  })();
+
+  return (
+    <span
+      ref={mediaRef}
+      className="game-resource-replacement-media"
+      data-resource-preview-status={preview.status}
+    >
+      {visual}
+    </span>
+  );
+}
diff --git a/apps/ai-game-creator-shell/src/view/project-development/index.tsx b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
index 4b77248db..50b98eccb 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
@@ -41,9 +41,9 @@ import {
   Settings2,
   SlidersHorizontal,
   Sparkles,
+  Trash2,
   Undo2,
   Users,
-  Video,
   X,
   ZoomOut,
 } from 'lucide-react';
@@ -148,10 +148,12 @@ import {
 import { ResourcePromptPolishSlot } from '../../features/resource-canvas/ResourcePromptPolishSlot';
 import {
   type LocalProjectVersionReplacementCandidate,
+  projectResourcesByManifestAssetId,
   resourceReplacementAssetHints,
   resourceReplacementBlockedReasons,
   resourceReplacementPickerAssets,
   resourceVersionReplacementErrorMessage,
+  sortResourceReplacementCandidates,
 } from '../../features/resource-canvas/resourceVersionReplacementModel';
 import {
   readVersionResourceReplacementCandidates,
@@ -171,6 +173,7 @@ import {
   type ResourceFocusIntent,
   uploadProjectAssetFilesAndReadSnapshot,
 } from './projectResourceLiveUpdateModel';
+import { ResourceAssetDeleteDialog } from './ResourceAssetDeleteDialog';
 import {
   createResourceBookTransitionController,
   type ResourceBookTransitionController,
@@ -268,6 +271,7 @@ import {
   ResourceInfoFieldsView,
   ResourceInfoPanelView,
 } from './ResourceInfoPanelView';
+import { ResourcePreviewMedia } from './ResourcePreviewMedia';
 import {
   type ProjectAgentResultSummary,
   type ProjectAttachmentResult,
@@ -292,6 +296,7 @@ import {
 } from './useProjectResourceCanvasLayout';
 import { useProjectResourceCardPreviews } from './useProjectResourceCardPreviews';
 import { useProjectResourceSectionHeights } from './useProjectResourceSectionHeights';
+import { useResourceAssetDeleteFlow } from './useResourceAssetDeleteFlow';
 
 export type {
   ProjectAgentResultSummary,
@@ -2809,6 +2814,21 @@ export default function ProjectDevelopmentView({
     },
     [reloadManifestAfterAssetCommand],
   );
+  /**
+   * 资源卡选中工具条的「删除素材」。
+   *
+   * 复用「编辑素材标签」面板原来那套删除流程（读引用 → 二次确认 `ResourceAssetDeleteDialog`
+   * → `delete_local_project_asset` 的 `deleteReferencedVersions` 三分支），抽成 hook 后两处
+   * 共用同一份实现；失败原因落到工作台提示条，与资源工作台其它异步失败同一出口。
+   */
+  const resourceAssetDeleteFlow = useResourceAssetDeleteFlow({
+    projectPath,
+    projectId: manifest.projectId,
+    onError: setResourceWorkbenchNotice,
+    onDeleted: (result) => {
+      void handleResourceClassificationDeleted(result);
+    },
+  });
   /**
    * 素材重命名：只改磁盘文件名与 manifest 的 `localPath`，资产 id 不变。
    * Rust 入参是 `deny_unknown_fields` 的结构体，这里必须只传这三个字段。
@@ -4459,9 +4479,10 @@ export default function ProjectDevelopmentView({
       ) {
         return;
       }
-      const scale = (resourceBookOpensAllResources
-        ? resourceBookAllViewportRef.current
-        : resourceCanvasViewportRef.current
+      const scale = (
+        resourceBookOpensAllResources
+          ? resourceBookAllViewportRef.current
+          : resourceCanvasViewportRef.current
       ).scale;
       if (!Number.isFinite(scale) || scale <= 0) {
         return;
@@ -5405,10 +5426,31 @@ export default function ProjectDevelopmentView({
       resourceReplacementSource,
     ],
   );
+  /**
+   * 候选排序：可替换的排最前，不可替换的按后端原名次跟随（仍然渲染但禁用）。
+   *
+   * 排序只改展示顺序，不改 `resourceReplacementCandidates` 本身 —— 写入用的 `sourceResourceId`
+   * 与兼容性提示表都按 id 取值，与顺序无关。
+   */
+  const sortedResourceReplacementCandidates = useMemo(
+    () => sortResourceReplacementCandidates(resourceReplacementCandidates),
+    [resourceReplacementCandidates],
+  );
   const resourceReplacementPickerEntries = useMemo(
     () =>
-      resourceReplacementPickerAssets(resources, resourceReplacementCandidates),
-    [resourceReplacementCandidates, resources],
+      resourceReplacementPickerAssets(
+        resources,
+        sortedResourceReplacementCandidates,
+      ),
+    [resources, sortedResourceReplacementCandidates],
+  );
+  /**
+   * 候选条目 → 资源投影：候选卡的缩略图要拿资源投影才能进资源卡预览管线（身份、读取口径、
+   * 卡片预览类型都按资源投影算），因此这里与 `resourceReplacementPickerAssets` 共用同一份映射。
+   */
+  const resourceByManifestAssetId = useMemo(
+    () => projectResourcesByManifestAssetId(resources),
+    [resources],
   );
   const resourceReplacementBlockedReasonMap = useMemo(
     () => resourceReplacementBlockedReasons(resourceReplacementCandidates),
@@ -5418,6 +5460,31 @@ export default function ProjectDevelopmentView({
     () => resourceReplacementAssetHints(resourceReplacementCandidates),
     [resourceReplacementCandidates],
   );
+  /**
+   * 「替换素材」候选弹窗里的缩略图必须走资源卡同一条预览管线。
+   *
+   * 弹窗内容挂在 portal（`document.body`）下，**不在资源画本 observer 的 root 子树里**：
+   * observer 永远把它们报成不相交，所以可见性只能靠几何兜底扫描放行。`observePreview` 注册时
+   * 本就会扫一次（覆盖"打开弹窗"），这里再补两个几何变化点：打开后的下一轮宏任务（等弹窗
+   * 真正布局完）与候选区滚动（滚动事件不冒泡，用捕获阶段挂到 document 上）。
+   */
+  const sweepResourceReplacementPreviews =
+    resourceCardPreviews.sweepVisiblePreviews;
+  useEffect(() => {
+    if (!resourceReplacementOpen) {
+      return undefined;
+    }
+    const sweep = () => {
+      sweepResourceReplacementPreviews();
+    };
+    const timer = setTimeout(sweep, 0);
+    // 滚动事件不冒泡，但捕获阶段的祖先监听器能收到；用它覆盖弹窗自己的滚动容器。
+    document.addEventListener('scroll', sweep, true);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('scroll', sweep, true);
+    };
+  }, [resourceReplacementOpen, sweepResourceReplacementPreviews]);
 
   function showRunView() {
     if (!runAvailable || uiEditorRoute) {
@@ -6557,6 +6624,47 @@ export default function ProjectDevelopmentView({
                                     <span>替换素材</span>
                                   </CanvasChromeButton>
                                 ) : null}
+                                {/*
+                                  破坏性动作排在最后，并用共享工具条同一套分隔线（
+                                  `image-canvas-editor__floating-toolbar-divider`）把它与前面的
+                                  非破坏性动作隔开。只删素材登记：磁盘文件保留，确认面板里再问一次
+                                  「是否连带删除引用它的游戏版本」。
+                                */}
+                                {selectedResource?.manifestAssetId ? (
+                                  <>
+                                    <span
+                                      aria-hidden="true"
+                                      className="image-canvas-editor__floating-toolbar-divider"
+                                    />
+                                    <CanvasChromeButton
+                                      className="image-canvas-editor__floating-toolbar-text-button"
+                                      label="删除素材"
+                                      title="删除素材"
+                                      icon={<Trash2 className="h-4 w-4" />}
+                                      disabled={
+                                        resourceAssetDeleteFlow.deleting ||
+                                        resourceAssetDeleteFlow.preparing
+                                      }
+                                      onClick={() => {
+                                        if (!selectedResource.manifestAssetId) {
+                                          return;
+                                        }
+                                        void resourceAssetDeleteFlow.requestDelete(
+                                          {
+                                            assetId:
+                                              selectedResource.manifestAssetId,
+                                            // 资源投影的 `path` 就是 manifest 资产的
+                                            // `localPath`（见 `resourceProjectionModel`），
+                                            // 与面板曾用的副标题同源。
+                                            localPath: selectedResource.path,
+                                          },
+                                        );
+                                      }}
+                                    >
+                                      <span>删除素材</span>
+                                    </CanvasChromeButton>
+                                  </>
+                                ) : null}
                               </>
                             }
                             onOpenQuickEditPanel={openResourceQuickEditPanel}
@@ -7258,9 +7366,15 @@ export default function ProjectDevelopmentView({
           asset={resourceClassificationAsset}
           onClose={() => setResourceClassificationAssetId(null)}
           onSaved={(result) => void handleResourceClassificationSaved(result)}
-          onDeleted={(result) =>
-            void handleResourceClassificationDeleted(result)
-          }
+        />
+      ) : null}
+      {/*
+        删除素材的二次确认面板：资源卡选中工具条删素材时用，与「编辑素材标签」面板曾用的
+        是同一个 `ResourceAssetDeleteDialog` 与同一条删除流程（见 `useResourceAssetDeleteFlow`）。
+      */}
+      {resourceAssetDeleteFlow.deleteDialogProps ? (
+        <ResourceAssetDeleteDialog
+          {...resourceAssetDeleteFlow.deleteDialogProps}
         />
       ) : null}
       {resourceRenameAsset ? (
@@ -7279,8 +7393,8 @@ export default function ProjectDevelopmentView({
       ) : null}
       {/*
         版本级资源替换（直接替换）：复用美术画布的参考图弹窗（单选 + 禁用原因 + 提示 + 失败原因）。
-        缩略图走 `renderAssetMedia` 的类型占位：AGC 的素材预览要经带 scope 的原生读取器拿 Blob URL，
-        弹窗里没有同步 `src`，直接给 `<img>` 会挂破图。
+        候选缩略图走**资源卡同一条预览管线**（身份 / 队列 / LRU 缓存都共用），弹窗只负责把
+        管线给的 `sourceUrl` 画出来；读不到时退回类型占位，与资源卡占位语义一致。
       */}
       <ImageCanvasProjectAssetPickerDialog
         open={resourceReplacementOpen}
@@ -7291,17 +7405,28 @@ export default function ProjectDevelopmentView({
         assetBlockedReasons={resourceReplacementBlockedReasonMap}
         assetHints={resourceReplacementHintMap}
         errorMessage={resourceReplacementError}
-        renderAssetMedia={(asset) => (
-          <span className="game-resource-replacement-media" aria-hidden="true">
-            {asset.mediaType === 'audio' ? (
-              <Music2 className="h-5 w-5" />
-            ) : asset.mediaType === 'video' ? (
-              <Video className="h-5 w-5" />
-            ) : (
-              <Image className="h-5 w-5" />
-            )}
-          </span>
-        )}
+        renderAssetMedia={(asset) => {
+          const resource = resourceByManifestAssetId.get(asset.id) ?? null;
+          const previewIdentity = resource
+            ? (resourceCardPreviews.identityByResourceId.get(resource.id) ??
+              null)
+            : null;
+          return (
+            <ResourcePreviewMedia
+              resource={resource}
+              previewIdentity={previewIdentity}
+              preview={
+                previewIdentity
+                  ? (resourceCardPreviews.previews.get(previewIdentity) ??
+                    resourceCardPreviews.idlePreview)
+                  : resourceCardPreviews.idlePreview
+              }
+              onObservePreview={resourceCardPreviews.observePreview}
+              onPreviewDecodeError={handleCardPreviewDecodeError}
+              fallbackMediaType={asset.mediaType}
+            />
+          );
+        }}
         onCancel={closeResourceVersionReplacement}
         onConfirm={(assetIds) =>
           void confirmResourceVersionReplacement(assetIds)
diff --git a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
index a221ce453..eca67b523 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
+++ b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
@@ -1291,6 +1291,17 @@ export function useProjectResourceCardPreviews(input: {
     idlePreview: IDLE_PROJECT_RESOURCE_CARD_PREVIEW,
     observePreview,
     requestPreview,
+    /**
+     * 可见性兜底扫描（判据见 `viewportBandOfElement`：视口 ± 160px 内的 `idle` 卡补一次
+     * `visible`）。注册（`observePreview`）时本就会扫一次，这里把它暴露出来的唯一原因是
+     * **portal 宿主的几何变化事件 observer 收不到**：
+     *
+     * 弹窗内容挂在 `document.body` 下，不在资源画本 observer 的 `root` 子树里 ⇒ observer
+     * 永远把它们报成"不相交"；而扫描用的是**视口几何**，与 observer 的 root 无关，所以这类
+     * 宿主自己注册元素后，只要在「弹窗打开」「候选区滚动」这两个几何变化点上显式扫一次，
+     * 走的仍是同一条队列与同一条判据，不新增第二条加载通路。
+     */
+    sweepVisiblePreviews,
     failPreview,
     protectPreview,
     /**
diff --git a/apps/ai-game-creator-shell/src/view/project-development/useResourceAssetDeleteFlow.ts b/apps/ai-game-creator-shell/src/view/project-development/useResourceAssetDeleteFlow.ts
new file mode 100644
index 000000000..f96ea0197
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/project-development/useResourceAssetDeleteFlow.ts
@@ -0,0 +1,168 @@
+import { useCallback, useState } from 'react';
+
+import type { ResourceAssetReferenceVersion } from './ResourceAssetDeleteDialog';
+
+/**
+ * `delete_local_project_asset` 的返回：素材不可变，删除只摘掉 manifest 登记，磁盘文件保留。
+ */
+export type DeleteLocalProjectAssetResult = {
+  assetId: string;
+  localPath: string;
+  committedProjectRevision: number;
+  fileRetained: boolean;
+};
+
+type ReadLocalProjectAssetReferencesResult = {
+  assetId: string;
+  versions: ResourceAssetReferenceVersion[];
+};
+
+/** 待删除的素材：`assetId` 是 manifest 资产 id，`localPath` 只用于确认面板的副标题。 */
+export type ResourceAssetDeleteTarget = {
+  assetId: string;
+  localPath: string;
+};
+
+type UseResourceAssetDeleteFlowInput = {
+  projectPath: string;
+  projectId: string;
+  /**
+   * 失败原因出口（读引用失败 / 删除失败 / 不在客户端内）。
+   *
+   * 宿主自己决定显示在哪里：面板内联成 `role="alert"`，资源卡工具条落到工作台提示条。
+   * 删除流程本身不持有错误态，避免出现"两处各显示半句失败原因"。
+   */
+  onError: (message: string) => void;
+  onDeleted: (result: DeleteLocalProjectAssetResult) => void;
+};
+
+export function resourceDeleteErrorMessage(error: unknown) {
+  if (typeof error === 'string' && error.trim()) return error;
+  if (error instanceof Error && error.message) return error.message;
+  return '删除资源失败';
+}
+
+/**
+ * 素材删除流程：读引用信息 → 二次确认 → 落盘删除。
+ *
+ * 「编辑素材标签」面板与资源卡选中工具条**共用这一份实现**（同一个原生命令、同一个二次确认
+ * 面板、同一套 `deleteReferencedVersions` 三分支），所以再没有第二份删除实现可以分叉。
+ */
+export function useResourceAssetDeleteFlow({
+  projectPath,
+  projectId,
+  onError,
+  onDeleted,
+}: UseResourceAssetDeleteFlowInput) {
+  const [target, setTarget] = useState<ResourceAssetDeleteTarget | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [preparing, setPreparing] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [referencedVersions, setReferencedVersions] = useState<
+    readonly ResourceAssetReferenceVersion[]
+  >([]);
+  const [deleteReferencedVersions, setDeleteReferencedVersions] =
+    useState(false);
+
+  /**
+   * 点删除先读引用信息，再打开独立确认面板；这一步不写盘。
+   */
+  const requestDelete = useCallback(
+    async (next: ResourceAssetDeleteTarget) => {
+      const invoke = window.__TAURI__?.core?.invoke;
+      if (!invoke) {
+        onError('删除资源需要在客户端内执行');
+        return;
+      }
+      setPreparing(true);
+      setTarget(next);
+      try {
+        const references = await invoke<ReadLocalProjectAssetReferencesResult>(
+          'read_local_project_asset_references',
+          { input: { projectPath, assetId: next.assetId } },
+        );
+        setReferencedVersions(references.versions);
+        setDeleteReferencedVersions(false);
+        setDialogOpen(true);
+      } catch (referenceError) {
+        setTarget(null);
+        onError(resourceDeleteErrorMessage(referenceError));
+      } finally {
+        setPreparing(false);
+      }
+    },
+    [onError, projectPath],
+  );
+
+  const confirmDelete = useCallback(async () => {
+    const invoke = window.__TAURI__?.core?.invoke;
+    if (!invoke) {
+      onError('删除资源需要在客户端内执行');
+      return;
+    }
+    if (!target) return;
+    setDeleting(true);
+    try {
+      const status = await invoke<{ revision: number }>(
+        'get_local_game_project_revision',
+        { projectPath },
+      );
+      if (!Number.isSafeInteger(status.revision) || status.revision < 0) {
+        throw new Error('项目 revision 无效');
+      }
+      const result = await invoke<DeleteLocalProjectAssetResult>(
+        'delete_local_project_asset',
+        {
+          input: {
+            projectPath,
+            expectedProjectId: projectId,
+            expectedProjectRevision: status.revision,
+            assetId: target.assetId,
+            deleteReferencedVersions,
+          },
+        },
+      );
+      setDialogOpen(false);
+      setTarget(null);
+      onDeleted(result);
+    } catch (deleteError) {
+      onError(resourceDeleteErrorMessage(deleteError));
+    } finally {
+      setDeleting(false);
+    }
+  }, [
+    deleteReferencedVersions,
+    onDeleted,
+    onError,
+    projectId,
+    projectPath,
+    target,
+  ]);
+
+  const closeDeleteDialog = useCallback(() => {
+    setDialogOpen(false);
+    setTarget(null);
+  }, []);
+
+  return {
+    requestDelete,
+    /** 读引用信息在途：入口按钮据此禁用，避免连点发出两次确认面板。 */
+    preparing,
+    deleting,
+    /**
+     * 现有确认面板的现成入参。没有待删除目标时为 `null`，宿主直接不渲染 `ResourceAssetDeleteDialog`。
+     */
+    deleteDialogProps: target
+      ? {
+          open: dialogOpen,
+          localPath: target.localPath,
+          referencedVersions,
+          deleteReferencedVersions,
+          deleting,
+          onChangeDeleteReferencedVersions: setDeleteReferencedVersions,
+          onClose: closeDeleteDialog,
+          onConfirm: () => void confirmDelete(),
+        }
+      : null,
+  };
+}
diff --git a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
index 6c2581e50..738da1745 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
@@ -3719,8 +3719,9 @@ export function registerProjectWorkbenchFoundationTests() {
     // 音频资源的选中工具条复用美术画布的音频分支（aria-label「素材工具栏」），
     // 并且只渲染宿主编排层真实接通的动作：「引用」（从卡片挪进工具条的引用入口，
     // 资源卡上的圆钮已删除）「信息」（只读信息浮层）「编辑标签」（面板只编辑 manifest
-    // `assets[].tags`，分类不再有手动入口）「重命名」已接面板，「下载按钮」复用资源
-    // 面板同一条落盘链路，「改造」在宿主编排层仍是空回调，不能再渲染成点了没反应的按钮。
+    // `assets[].tags`，分类不再有手动入口）「重命名」已接面板「删除素材」（破坏性动作放末位，
+    // 前置共享分隔线，复用素材删除流程）「下载按钮」复用资源面板同一条落盘链路，
+    // 「改造」在宿主编排层仍是空回调，不能再渲染成点了没反应的按钮。
     const audioToolbar = screen.getByRole('toolbar', {
       name: '素材工具栏',
     });
@@ -3731,7 +3732,14 @@ export function registerProjectWorkbenchFoundationTests() {
       within(audioToolbar)
         .getAllByRole('button')
         .map((button) => button.getAttribute('aria-label')),
-    ).toEqual(['引用资源 bgm.mp3', '信息', '编辑标签', '重命名', '下载按钮']);
+    ).toEqual([
+      '引用资源 bgm.mp3',
+      '信息',
+      '编辑标签',
+      '重命名',
+      '删除素材',
+      '下载按钮',
+    ]);
 
     // 工具条的「下载按钮」必须真的走通落盘链路：原生保存对话框 + Rust 分块复制，
     // 而不是只渲染一个按钮。原生对话框由入口文件 mock 成"用户选了
diff --git a/apps/ai-game-creator-shell/tests/resourceAssetDeleteFlow.test.tsx b/apps/ai-game-creator-shell/tests/resourceAssetDeleteFlow.test.tsx
new file mode 100644
index 000000000..a7ec104c7
--- /dev/null
+++ b/apps/ai-game-creator-shell/tests/resourceAssetDeleteFlow.test.tsx
@@ -0,0 +1,328 @@
+// @vitest-environment jsdom
+import {
+  cleanup,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+import { ResourceAssetDeleteDialog } from '../src/view/project-development/ResourceAssetDeleteDialog';
+import type { DeleteLocalProjectAssetResult } from '../src/view/project-development/useResourceAssetDeleteFlow';
+import { useResourceAssetDeleteFlow } from '../src/view/project-development/useResourceAssetDeleteFlow';
+
+/**
+ * 素材删除流程的定向用例。
+ *
+ * 这条流程从「编辑素材标签」面板抽成了 `useResourceAssetDeleteFlow`，改由资源卡选中工具条
+ * 的「删除素材」触发；判据与实现在抽前后必须逐字不变 —— 所以这里钉住的是三件事：
+ * 1. 点入口只读引用、只开二次确认面板，不直接删；
+ * 2. `deleteReferencedVersions` 的三分支（不勾 / 勾 / 未被引用）；
+ * 3. 失败时既不改状态也不静默：原因经宿主的 `onError` 出口出去。
+ *
+ * 工具条上的入口渲染判据（只有 `manifestAssetId` 存在才渲染）与真链路 IPC 载荷由
+ * `resourceVersionReplacement.test.tsx` 的工台用例覆盖，这里只测流程本身。
+ */
+
+const TARGET = { assetId: 'asset-hero', localPath: 'assets/hero.png' };
+
+type InvokeMock = ReturnType<typeof vi.fn>;
+
+function installInvoke(
+  implementation: (command: string, args?: unknown) => Promise<unknown>,
+) {
+  const invoke = vi.fn(implementation);
+  (
+    window as unknown as {
+      __TAURI__?: { core?: { invoke?: typeof invoke } };
+    }
+  ).__TAURI__ = { core: { invoke } };
+  return invoke;
+}
+
+function removeInvoke() {
+  delete (
+    window as unknown as {
+      __TAURI__?: { core?: { invoke?: unknown } };
+    }
+  ).__TAURI__;
+}
+
+function DeleteFlowHarness({
+  onDeleted,
+  onError,
+}: {
+  onDeleted: (result: DeleteLocalProjectAssetResult) => void;
+  onError: (message: string) => void;
+}) {
+  const flow = useResourceAssetDeleteFlow({
+    projectPath: 'C:/project',
+    projectId: 'project-1',
+    onError,
+    onDeleted,
+  });
+
+  return (
+    <div>
+      <button
+        type="button"
+        disabled={flow.preparing || flow.deleting}
+        onClick={() => void flow.requestDelete(TARGET)}
+      >
+        删除素材
+      </button>
+      {flow.deleteDialogProps ? (
+        <ResourceAssetDeleteDialog {...flow.deleteDialogProps} />
+      ) : null}
+    </div>
+  );
+}
+
+function renderDeleteFlow() {
+  const onDeleted = vi.fn();
+  const onError = vi.fn();
+  render(<DeleteFlowHarness onDeleted={onDeleted} onError={onError} />);
+  return { onDeleted, onError };
+}
+
+function deleteCalls(invoke: InvokeMock) {
+  return invoke.mock.calls.filter(
+    ([command]) => command === 'delete_local_project_asset',
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  removeInvoke();
+});
+
+describe('useResourceAssetDeleteFlow 删除素材', () => {
+  test('入口只开确认面板不直接删；未被引用时不出现连带删除勾选', async () => {
+    const user = userEvent.setup();
+    const invoke = installInvoke(async (command) => {
+      if (command === 'read_local_project_asset_references') {
+        return { assetId: 'asset-hero', versions: [] };
+      }
+      if (command === 'get_local_game_project_revision') {
+        return { revision: 9 };
+      }
+      if (command === 'delete_local_project_asset') {
+        return {
+          assetId: 'asset-hero',
+          localPath: 'assets/hero.png',
+          committedProjectRevision: 10,
+          fileRetained: true,
+        };
+      }
+      throw new Error(`unexpected command: ${command}`);
+    });
+    const { onDeleted, onError } = renderDeleteFlow();
+
+    await user.click(screen.getByRole('button', { name: '删除素材' }));
+    await screen.findByRole('dialog', { name: '确认删除资源' });
+
+    expect(onDeleted).not.toHaveBeenCalled();
+    expect(invoke).toHaveBeenCalledWith('read_local_project_asset_references', {
+      input: { projectPath: 'C:/project', assetId: 'asset-hero' },
+    });
+    expect(deleteCalls(invoke)).toHaveLength(0);
+    expect(
+      screen.queryByRole('checkbox', { name: '把相关游戏版本一并删除' }),
+    ).toBeNull();
+    // 面板副标题用的是落盘 `localPath`，不是素材 id。
+    expect(screen.getByText('assets/hero.png')).not.toBeNull();
+
+    await user.click(screen.getByRole('button', { name: '确认删除资源' }));
+
+    await waitFor(() => {
+      expect(onDeleted).toHaveBeenCalledTimes(1);
+    });
+    expect(invoke).toHaveBeenCalledWith('delete_local_project_asset', {
+      input: {
+        projectPath: 'C:/project',
+        expectedProjectId: 'project-1',
+        expectedProjectRevision: 9,
+        assetId: 'asset-hero',
+        deleteReferencedVersions: false,
+      },
+    });
+    expect(onDeleted.mock.calls[0]?.[0]).toEqual({
+      assetId: 'asset-hero',
+      localPath: 'assets/hero.png',
+      committedProjectRevision: 10,
+      fileRetained: true,
+    });
+    expect(onError).not.toHaveBeenCalled();
+    // 删完面板收起，不留一个"点不动"的确认面板。
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog', { name: '确认删除资源' })).toBeNull(),
+    );
+  });
+
+  test('列出引用该素材的版本，并默认不连带删除', async () => {
+    const user = userEvent.setup();
+    const invoke = installInvoke(async (command) => {
+      if (command === 'read_local_project_asset_references') {
+        return {
+          assetId: 'asset-hero',
+          versions: [
+            {
+              versionId: 'initial-1',
+              projectRevision: 1,
+              createdAt: 1_760_000_000,
+            },
+            {
+              versionId: 'agent-4',
+              projectRevision: 4,
+              createdAt: 1_760_003_600,
+            },
+          ],
+        };
+      }
+      if (command === 'get_local_game_project_revision') {
+        return { revision: 9 };
+      }
+      return {
+        assetId: 'asset-hero',
+        localPath: 'assets/hero.png',
+        committedProjectRevision: 10,
+        fileRetained: true,
+      };
+    });
+    renderDeleteFlow();
+
+    await user.click(screen.getByRole('button', { name: '删除素材' }));
+    const dialog = await screen.findByRole('dialog', {
+      name: '确认删除资源',
+    });
+
+    expect(within(dialog).getByText('被 2 个游戏版本使用')).toBeTruthy();
+    expect(within(dialog).getByText('initial-1')).toBeTruthy();
+    expect(within(dialog).getByText('agent-4')).toBeTruthy();
+    expect(
+      (
+        within(dialog).getByRole('checkbox', {
+          name: '把相关游戏版本一并删除',
+        }) as HTMLInputElement
+      ).checked,
+    ).toBe(false);
+
+    await user.click(
+      within(dialog).getByRole('button', { name: '确认删除资源' }),
+    );
+
+    await waitFor(() => expect(deleteCalls(invoke)).toHaveLength(1));
+    expect(invoke).toHaveBeenCalledWith(
+      'delete_local_project_asset',
+      expect.objectContaining({
+        input: expect.objectContaining({ deleteReferencedVersions: false }),
+      }),
+    );
+  });
+
+  test('只有勾上连带删除才按 true 走同一分支', async () => {
+    const user = userEvent.setup();
+    const invoke = installInvoke(async (command) => {
+      if (command === 'read_local_project_asset_references') {
+        return {
+          assetId: 'asset-hero',
+          versions: [
+            {
+              versionId: 'initial-1',
+              projectRevision: 1,
+              createdAt: 1_760_000_000,
+            },
+          ],
+        };
+      }
+      if (command === 'get_local_game_project_revision') {
+        return { revision: 9 };
+      }
+      return {
+        assetId: 'asset-hero',
+        localPath: 'assets/hero.png',
+        committedProjectRevision: 10,
+        fileRetained: true,
+      };
+    });
+    renderDeleteFlow();
+
+    await user.click(screen.getByRole('button', { name: '删除素材' }));
+    const dialog = await screen.findByRole('dialog', {
+      name: '确认删除资源',
+    });
+    await user.click(
+      within(dialog).getByRole('checkbox', {
+        name: '把相关游戏版本一并删除',
+      }),
+    );
+    await user.click(
+      within(dialog).getByRole('button', { name: '确认删除资源' }),
+    );
+
+    await waitFor(() => expect(deleteCalls(invoke)).toHaveLength(1));
+    expect(invoke).toHaveBeenCalledWith(
+      'delete_local_project_asset',
+      expect.objectContaining({
+        input: expect.objectContaining({ deleteReferencedVersions: true }),
+      }),
+    );
+  });
+
+  test('读引用失败时不弹空壳确认面板，原因经宿主出口说明白', async () => {
+    const user = userEvent.setup();
+    const invoke = installInvoke(async (command) => {
+      if (command === 'read_local_project_asset_references') {
+        throw '素材已被删除';
+      }
+      throw new Error(`unexpected command: ${command}`);
+    });
+    const { onDeleted, onError } = renderDeleteFlow();
+
+    await user.click(screen.getByRole('button', { name: '删除素材' }));
+
+    await waitFor(() => expect(onError).toHaveBeenCalledWith('素材已被删除'));
+    expect(screen.queryByRole('dialog', { name: '确认删除资源' })).toBeNull();
+    expect(deleteCalls(invoke)).toHaveLength(0);
+    expect(onDeleted).not.toHaveBeenCalled();
+  });
+
+  test('删除失败时保留确认面板、透出原生拒绝，且不报删除成功', async () => {
+    const user = userEvent.setup();
+    installInvoke(async (command) => {
+      if (command === 'read_local_project_asset_references') {
+        return { assetId: 'asset-hero', versions: [] };
+      }
+      if (command === 'get_local_game_project_revision') {
+        return { revision: 9 };
+      }
+      throw 'project-revision-conflict';
+    });
+    const { onDeleted, onError } = renderDeleteFlow();
+
+    await user.click(screen.getByRole('button', { name: '删除素材' }));
+    await screen.findByRole('dialog', { name: '确认删除资源' });
+    await user.click(screen.getByRole('button', { name: '确认删除资源' }));
+
+    await waitFor(() =>
+      expect(onError).toHaveBeenCalledWith('project-revision-conflict'),
+    );
+    expect(screen.getByRole('dialog', { name: '确认删除资源' })).not.toBeNull();
+    expect(onDeleted).not.toHaveBeenCalled();
+  });
+
+  test('不在客户端内时不发任何 IPC，直接说明原因', async () => {
+    const user = userEvent.setup();
+    const { onDeleted, onError } = renderDeleteFlow();
+
+    await user.click(screen.getByRole('button', { name: '删除素材' }));
+
+    await waitFor(() =>
+      expect(onError).toHaveBeenCalledWith('删除资源需要在客户端内执行'),
+    );
+    expect(screen.queryByRole('dialog', { name: '确认删除资源' })).toBeNull();
+    expect(onDeleted).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/ai-game-creator-shell/tests/resourceClassificationPanel.test.tsx b/apps/ai-game-creator-shell/tests/resourceClassificationPanel.test.tsx
index e2d552573..5a72c8d65 100644
--- a/apps/ai-game-creator-shell/tests/resourceClassificationPanel.test.tsx
+++ b/apps/ai-game-creator-shell/tests/resourceClassificationPanel.test.tsx
@@ -4,6 +4,7 @@ import { resolve } from 'node:path';
 
 import {
   cleanup,
+  fireEvent,
   render,
   screen,
   waitFor,
@@ -50,7 +51,6 @@ function renderPanel(
     asset?: GameCreationAppAssetManifestEntry;
     onClose?: () => void;
     onSaved?: (result: unknown) => void;
-    onDeleted?: (result: unknown) => void;
   } = {},
 ) {
   render(
@@ -60,7 +60,6 @@ function renderPanel(
       asset={overrides.asset ?? asset}
       onClose={overrides.onClose ?? vi.fn()}
       onSaved={overrides.onSaved ?? vi.fn()}
-      onDeleted={overrides.onDeleted ?? vi.fn()}
     />,
   );
 }
@@ -86,7 +85,7 @@ afterEach(() => {
 });
 
 describe('ResourceClassificationPanel 编辑素材标签', () => {
-  test('对齐用户截图：标题、素材名副标题、标签占位与底部按钮', () => {
+  test('对齐用户截图：标题、素材名副标题、标签占位与底部唯一的「添加」', () => {
     installInvoke(async () => undefined);
     renderPanel({
       asset: { ...asset, localPath: 'assets/UI Assets/生成UI设计图.png' },
@@ -101,8 +100,13 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
     expect(
       screen.getByPlaceholderText('新增标签，多个用逗号分隔'),
     ).not.toBeNull();
-    expect(screen.getByRole('button', { name: '保存标签' })).not.toBeNull();
-    expect(screen.getByRole('button', { name: '取消' })).not.toBeNull();
+    // 底部只留一个「添加」：保存 / 取消 / 删除三个旧按钮都撤了
+    // （关闭走头部 ×，删除素材在资源卡选中工具条上）。
+    expect(screen.getByRole('button', { name: '添加' })).not.toBeNull();
+    expect(screen.queryByRole('button', { name: '保存标签' })).toBeNull();
+    expect(screen.queryByRole('button', { name: '取消' })).toBeNull();
+    expect(screen.queryByRole('button', { name: '删除资源' })).toBeNull();
+    expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
     // 「管理全部标签」没有实现，分类也不再由这个面板编辑。
     expect(screen.queryByRole('button', { name: '管理全部标签' })).toBeNull();
     expect(screen.queryByRole('button', { name: '角色与对象' })).toBeNull();
@@ -136,7 +140,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
     ).not.toBeNull();
   });
 
-  test('删除在保存前可撤销：点取消不写盘', async () => {
+  test('删掉 pill 之后只关面板不写盘：撤销不需要额外按钮', async () => {
     const user = userEvent.setup();
     const onClose = vi.fn();
     const invoke = installInvoke(async () => undefined);
@@ -148,7 +152,8 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
     await user.click(screen.getByRole('button', { name: '删除标签 主页' }));
     expect(pillLabels()).toEqual(['节日']);
 
-    await user.click(screen.getByRole('button', { name: '取消' }));
+    // 关闭只有头部 × 一个入口（底部不再有「取消」）。
+    await user.click(screen.getByRole('button', { name: '关闭编辑素材标签' }));
 
     expect(onClose).toHaveBeenCalledTimes(1);
     expect(classificationWrites(invoke)).toHaveLength(0);
@@ -174,7 +179,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
     expect(pillLabels()).toEqual(['主页', '节日', '新春']);
   });
 
-  test('保存时把剩余标签写成数组，并原样回传读到的分类', async () => {
+  test('点「添加」把输入框与剩余标签写成数组，并原样回传读到的分类', async () => {
     const user = userEvent.setup();
     const onSaved = vi.fn();
     const invoke = installInvoke(async (command) => {
@@ -196,7 +201,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
       screen.getByPlaceholderText('新增标签，多个用逗号分隔'),
       '新春',
     );
-    await user.click(screen.getByRole('button', { name: '保存标签' }));
+    await user.click(screen.getByRole('button', { name: '添加' }));
 
     await waitFor(() => {
       expect(onSaved).toHaveBeenCalledTimes(1);
@@ -223,7 +228,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
    *
    * 变异验证：把面板改回 `gameCreationAppAssetCategory(asset)`，本用例必须失败。
    */
-  test('保存标签不改动落盘 category：自愈值不得被回写', async () => {
+  test('添加标签不改动落盘 category：自愈值不得被回写', async () => {
     const user = userEvent.setup();
     const invoke = installInvoke(async (command) => {
       if (command === 'get_local_game_project_revision') {
@@ -247,7 +252,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
       screen.getByPlaceholderText('新增标签，多个用逗号分隔'),
       '界面',
     );
-    await user.click(screen.getByRole('button', { name: '保存标签' }));
+    await user.click(screen.getByRole('button', { name: '添加' }));
 
     await waitFor(() => {
       expect(classificationWrites(invoke)).toHaveLength(1);
@@ -266,7 +271,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
     });
   });
 
-  test('归一化口径不变：重复与空白标签在保存前被收敛', async () => {
+  test('归一化口径不变：重复与空白标签在落盘前被收敛', async () => {
     const user = userEvent.setup();
     const invoke = installInvoke(async (command) => {
       if (command === 'get_local_game_project_revision') {
@@ -278,7 +283,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
 
     const field = screen.getByPlaceholderText('新增标签，多个用逗号分隔');
     await user.type(field, ' 主舞台 ，日夜，主舞台、');
-    await user.click(screen.getByRole('button', { name: '保存标签' }));
+    await user.click(screen.getByRole('button', { name: '添加' }));
 
     await waitFor(() => {
       expect(classificationWrites(invoke)).toHaveLength(1);
@@ -290,6 +295,42 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
     ]);
   });
 
+  /**
+   * 「添加」的语义包含**输入框里还没按回车的尾巴**：用户打了字直接点按钮，不能白输入。
+   *
+   * 这里刻意用 `fireEvent.click` 而不是 `user.click`：前者不会先让输入框失焦，所以只有
+   * 「点击处理器自己把草稿并进来」这一条路能让用例通过
+   * （`onBlur` 的 `commitTagDraft` 兜不住它）。
+   *
+   * 变异验证：点「添加」只保存 `tags`、不合并 `tagDraft`，本用例必须失败。
+   */
+  test('点「添加」把没按回车的尾巴一起落成 pill 并保存', async () => {
+    const invoke = installInvoke(async (command) => {
+      if (command === 'get_local_game_project_revision') {
+        return { revision: 7 };
+      }
+      return { asset, committedProjectRevision: 8 };
+    });
+    renderPanel({ asset: { ...asset, tags: ['主页'] } });
+
+    const field = screen.getByPlaceholderText('新增标签，多个用逗号分隔');
+    fireEvent.change(field, { target: { value: '未回车的尾巴' } });
+    fireEvent.click(screen.getByRole('button', { name: '添加' }));
+
+    // 落 pill 是即时反馈，保存是这一步的语义本身。
+    await waitFor(() => {
+      expect(pillLabels()).toEqual(['主页', '未回车的尾巴']);
+    });
+    await waitFor(() => {
+      expect(classificationWrites(invoke)).toHaveLength(1);
+    });
+    const [, args] = classificationWrites(invoke)[0]!;
+    expect((args as { input: { tags: string[] } }).input.tags).toEqual([
+      '主页',
+      '未回车的尾巴',
+    ]);
+  });
+
   test('surfaces the native rejection without reporting a save', async () => {
     const user = userEvent.setup();
     const onSaved = vi.fn();
@@ -302,7 +343,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
 
     renderPanel({ onSaved });
 
-    await user.click(screen.getByRole('button', { name: '保存标签' }));
+    await user.click(screen.getByRole('button', { name: '添加' }));
 
     await screen.findByRole('alert');
     expect(screen.getByRole('alert').textContent).toContain('非法资源分类');
@@ -314,7 +355,7 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
     const onSaved = vi.fn();
     renderPanel({ onSaved });
 
-    await user.click(screen.getByRole('button', { name: '保存标签' }));
+    await user.click(screen.getByRole('button', { name: '添加' }));
 
     await screen.findByRole('alert');
     expect(screen.getByRole('alert').textContent).toContain('客户端');
@@ -357,239 +398,57 @@ describe('ResourceClassificationPanel 编辑素材标签', () => {
   });
 });
 
-describe('ResourceClassificationPanel 删除资源', () => {
-  test('deletes the asset registration only after the confirmation panel is submitted', async () => {
-    const user = userEvent.setup();
-    const onDeleted = vi.fn();
+describe('ResourceClassificationPanel 不再承载删除素材', () => {
+  /**
+   * 删除素材挪到资源卡选中工具条（破坏性动作与它要改的对象放在一起），面板里**一个入口都不该再有**：
+   * 旧版 footer 那个 `tone="danger"` 的「删除」删的是素材，属于放错地方。
+   *
+   * 顺序也一并钉住：头部关闭 → 标签 pill 内的删除标签 → 底部「添加」，多出任何一个按钮都会红。
+   * 变异验证：把 footer 的删除素材按钮加回来，本用例必须失败。
+   */
+  test('面板里没有任何删除素材入口，打开面板不读写删除相关命令', async () => {
     const invoke = installInvoke(async (command) => {
-      if (command === 'read_local_project_asset_references') {
-        return { assetId: 'asset-hero', versions: [] };
-      }
-      if (command === 'get_local_game_project_revision') {
-        return { revision: 9 };
-      }
-      if (command === 'delete_local_project_asset') {
-        return {
-          assetId: 'asset-hero',
-          localPath: 'assets/hero.png',
-          committedProjectRevision: 10,
-          fileRetained: true,
-        };
-      }
       throw new Error(`unexpected command: ${command}`);
     });
+    renderPanel();
 
-    render(
-      <ResourceClassificationPanel
-        projectPath="C:/project"
-        projectId="project-1"
-        asset={asset}
-        onClose={vi.fn()}
-        onSaved={vi.fn()}
-        onDeleted={onDeleted}
-      />,
-    );
-
-    // 删除入口只打开确认面板，不得直接发起删除。
-    await user.click(screen.getByRole('button', { name: '删除资源' }));
-    await screen.findByRole('dialog', { name: '确认删除资源' });
-    expect(onDeleted).not.toHaveBeenCalled();
-    expect(invoke).toHaveBeenCalledWith('read_local_project_asset_references', {
-      input: { projectPath: 'C:/project', assetId: 'asset-hero' },
-    });
     expect(
-      invoke.mock.calls.some(
-        ([command]) => command === 'delete_local_project_asset',
-      ),
-    ).toBe(false);
-    // 未被任何版本引用时不出现连带删除勾选。
-    expect(
-      screen.queryByRole('checkbox', { name: '把相关游戏版本一并删除' }),
-    ).toBeNull();
-
-    await user.click(screen.getByRole('button', { name: '确认删除资源' }));
-
-    await waitFor(() => {
-      expect(onDeleted).toHaveBeenCalledTimes(1);
-    });
-    expect(invoke).toHaveBeenCalledWith('delete_local_project_asset', {
-      input: {
-        projectPath: 'C:/project',
-        expectedProjectId: 'project-1',
-        expectedProjectRevision: 9,
-        assetId: 'asset-hero',
-        deleteReferencedVersions: false,
-      },
-    });
-    expect(onDeleted.mock.calls[0]?.[0]).toEqual({
-      assetId: 'asset-hero',
-      localPath: 'assets/hero.png',
-      committedProjectRevision: 10,
-      fileRetained: true,
-    });
+      screen
+        .getAllByRole('button')
+        .map(
+          (button) => button.getAttribute('aria-label') ?? button.textContent,
+        ),
+    ).toEqual(['关闭编辑素材标签', '删除标签 主角', '添加']);
+    // 打开面板不读引用、不写盘：删除那条链路在这里已经完全不存在。
+    expect(invoke).not.toHaveBeenCalled();
   });
 
-  test('lists the versions using the asset and keeps the cascade option unchecked', async () => {
-    const user = userEvent.setup();
-    const onDeleted = vi.fn();
-    const invoke = installInvoke(async (command) => {
-      if (command === 'read_local_project_asset_references') {
-        return {
-          assetId: 'asset-hero',
-          versions: [
-            {
-              versionId: 'initial-1',
-              projectRevision: 1,
-              createdAt: 1_760_000_000,
-            },
-            {
-              versionId: 'agent-4',
-              projectRevision: 4,
-              createdAt: 1_760_003_600,
-            },
-          ],
-        };
-      }
-      if (command === 'get_local_game_project_revision') {
-        return { revision: 9 };
-      }
-      if (command === 'delete_local_project_asset') {
-        return {
-          assetId: 'asset-hero',
-          localPath: 'assets/hero.png',
-          committedProjectRevision: 10,
-          fileRetained: true,
-        };
-      }
-      throw new Error(`unexpected command: ${command}`);
-    });
-
-    render(
-      <ResourceClassificationPanel
-        projectPath="C:/project"
-        projectId="project-1"
-        asset={asset}
-        onClose={vi.fn()}
-        onSaved={vi.fn()}
-        onDeleted={onDeleted}
-      />,
+  /**
+   * 底部只有一个「添加」且靠右下角。
+   *
+   * 变异验证：把 `justify-content` 改回默认（或改 `flex-start`），本用例必须失败。
+   */
+  test('底部只有一个「添加」并靠右下角', () => {
+    const styles = readFileSync(
+      resolve(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'),
+      'utf8',
     );
+    const rule = styles.match(
+      /\.game-resource-classification-footer\s*\{([^}]*)\}/s,
+    )?.[1];
+    expect(rule).toBeDefined();
+    expect(rule).toMatch(/display:\s*flex/);
+    expect(rule).toMatch(/justify-content:\s*flex-end/);
 
-    await user.click(screen.getByRole('button', { name: '删除资源' }));
-    await screen.findByRole('dialog', { name: '确认删除资源' });
-    expect(screen.getByText('被 2 个游戏版本使用')).toBeTruthy();
-    expect(screen.getByText('initial-1')).toBeTruthy();
-    expect(screen.getByText('agent-4')).toBeTruthy();
+    installInvoke(async () => undefined);
+    renderPanel();
 
-    const cascade = screen.getByRole('checkbox', {
-      name: '把相关游戏版本一并删除',
-    });
-    expect((cascade as HTMLInputElement).checked).toBe(false);
-
-    await user.click(screen.getByRole('button', { name: '确认删除资源' }));
-
-    await waitFor(() => {
-      expect(onDeleted).toHaveBeenCalledTimes(1);
-    });
-    expect(invoke).toHaveBeenCalledWith(
-      'delete_local_project_asset',
-      expect.objectContaining({
-        input: expect.objectContaining({ deleteReferencedVersions: false }),
-      }),
+    const footer = document.querySelector(
+      '.game-resource-classification-footer',
     );
-  });
-
-  test('requests the cascade delete only when the user checks the option', async () => {
-    const user = userEvent.setup();
-    const onDeleted = vi.fn();
-    const invoke = installInvoke(async (command) => {
-      if (command === 'read_local_project_asset_references') {
-        return {
-          assetId: 'asset-hero',
-          versions: [
-            {
-              versionId: 'initial-1',
-              projectRevision: 1,
-              createdAt: 1_760_000_000,
-            },
-          ],
-        };
-      }
-      if (command === 'get_local_game_project_revision') {
-        return { revision: 9 };
-      }
-      if (command === 'delete_local_project_asset') {
-        return {
-          assetId: 'asset-hero',
-          localPath: 'assets/hero.png',
-          committedProjectRevision: 10,
-          fileRetained: true,
-        };
-      }
-      throw new Error(`unexpected command: ${command}`);
-    });
-
-    render(
-      <ResourceClassificationPanel
-        projectPath="C:/project"
-        projectId="project-1"
-        asset={asset}
-        onClose={vi.fn()}
-        onSaved={vi.fn()}
-        onDeleted={onDeleted}
-      />,
+    expect(footer).not.toBeNull();
+    expect(within(footer as HTMLElement).getAllByRole('button')).toHaveLength(
+      1,
     );
-
-    await user.click(screen.getByRole('button', { name: '删除资源' }));
-    await screen.findByRole('dialog', { name: '确认删除资源' });
-    await user.click(
-      screen.getByRole('checkbox', { name: '把相关游戏版本一并删除' }),
-    );
-    await user.click(screen.getByRole('button', { name: '确认删除资源' }));
-
-    await waitFor(() => {
-      expect(onDeleted).toHaveBeenCalledTimes(1);
-    });
-    expect(invoke).toHaveBeenCalledWith(
-      'delete_local_project_asset',
-      expect.objectContaining({
-        input: expect.objectContaining({ deleteReferencedVersions: true }),
-      }),
-    );
-  });
-
-  test('surfaces the native rejection without reporting a delete', async () => {
-    const user = userEvent.setup();
-    const onDeleted = vi.fn();
-    installInvoke(async (command) => {
-      if (command === 'read_local_project_asset_references') {
-        return { assetId: 'asset-hero', versions: [] };
-      }
-      if (command === 'get_local_game_project_revision') {
-        return { revision: 9 };
-      }
-      throw 'project-revision-conflict';
-    });
-
-    render(
-      <ResourceClassificationPanel
-        projectPath="C:/project"
-        projectId="project-1"
-        asset={asset}
-        onClose={vi.fn()}
-        onSaved={vi.fn()}
-        onDeleted={onDeleted}
-      />,
-    );
-
-    await user.click(screen.getByRole('button', { name: '删除资源' }));
-    await screen.findByRole('dialog', { name: '确认删除资源' });
-    await user.click(screen.getByRole('button', { name: '确认删除资源' }));
-
-    await screen.findByRole('alert');
-    expect(screen.getByRole('alert').textContent).toContain(
-      'project-revision-conflict',
-    );
-    expect(onDeleted).not.toHaveBeenCalled();
   });
 });
diff --git a/apps/ai-game-creator-shell/tests/resourceVersionReplacement.test.tsx b/apps/ai-game-creator-shell/tests/resourceVersionReplacement.test.tsx
index f990dac4a..1c220d41f 100644
--- a/apps/ai-game-creator-shell/tests/resourceVersionReplacement.test.tsx
+++ b/apps/ai-game-creator-shell/tests/resourceVersionReplacement.test.tsx
@@ -1,4 +1,6 @@
 /** @vitest-environment jsdom */
+import { afterEach } from 'vitest';
+
 import {
   act,
   createGameCreationAppManifest,
@@ -115,7 +117,20 @@ function replacementManifest() {
 const REPLACEMENT_CANDIDATES = {
   sourceVersionId: SOURCE_VERSION_ID,
   sourceResourceId: 'asset-legacy',
+  // 后端给的名次里**不可替换项排在最前**（真实后端按资源名次给，不保证可替换项在前）：
+  // 这样"候选排序"用例才有可失败的判据。
   candidates: [
+    {
+      resourceId: 'asset-scene',
+      compatible: false,
+      compatibility: {
+        categoryEqual: false,
+        subtypeEqual: false,
+        sizeSpecEqual: true,
+      },
+      blockedReason: '分类不同',
+      warning: null,
+    },
     {
       resourceId: 'asset-final',
       compatible: true,
@@ -139,17 +154,6 @@ const REPLACEMENT_CANDIDATES = {
       blockedReason: null,
       warning: '格式与源素材不同',
     },
-    {
-      resourceId: 'asset-scene',
-      compatible: false,
-      compatibility: {
-        categoryEqual: false,
-        subtypeEqual: false,
-        sizeSpecEqual: true,
-      },
-      blockedReason: '分类不同',
-      warning: null,
-    },
   ],
 };
 
@@ -173,12 +177,67 @@ const REPLACEMENT_RESULT = {
 type RenderOptions = {
   replacementCandidates?: () => Promise<unknown>;
   replacementWrite?: () => Promise<unknown>;
+  /** 未被 manifest 登记的附件：用来验证「只有 manifest 资产才有删除素材入口」这一判据。 */
+  attachments?: Array<{
+    fileName: string;
+    mediaType: string;
+    localPath: string;
+    status: 'imported' | 'failed';
+  }>;
+  /** 引用这个素材的游戏版本；非空时确认面板要列出它们并给出连带删除勾选。 */
+  referencedVersions?: Array<{
+    versionId: string;
+    projectRevision: number;
+    createdAt: number;
+  }>;
+  deletion?: () => Promise<unknown>;
 };
 
 let observer: ReturnType<
   typeof installResourceCardIntersectionObserver
 > | null = null;
 
+type RectOverride = { restore: () => void };
+
+let rectOverride: RectOverride | null = null;
+
+afterEach(() => {
+  rectOverride?.restore();
+  rectOverride = null;
+});
+
+/**
+ * 候选弹窗缩略图的可见性判据是**视口几何**（`viewportBandOfElement`：视口 ± 160px），
+ * jsdom 里所有元素量出来都是 0×0 ⇒ 一律判"不在放行范围内"，缩略图永远不会被请求。
+ *
+ * 这里只给候选弹窗自己的媒体元素一个真实矩形，其它元素保持原样：既不动画布布局计算，
+ * 也不改判据本身 —— 用例钉的还是线上那条几何放行路径。
+ */
+function installVisibleCandidateMediaRects() {
+  const original = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function (this: Element) {
+    if (this.classList?.contains('game-resource-replacement-media')) {
+      return {
+        x: 0,
+        y: 0,
+        top: 0,
+        left: 0,
+        right: 120,
+        bottom: 80,
+        width: 120,
+        height: 80,
+        toJSON: () => ({}),
+      } as DOMRect;
+    }
+    return original.call(this);
+  };
+  rectOverride = {
+    restore: () => {
+      Element.prototype.getBoundingClientRect = original;
+    },
+  };
+}
+
 function renderReplacementWorkbench(options: RenderOptions = {}) {
   observer = installResourceCardIntersectionObserver();
   const manifest = replacementManifest();
@@ -246,6 +305,25 @@ function renderReplacementWorkbench(options: RenderOptions = {}) {
           ? options.replacementWrite()
           : REPLACEMENT_RESULT;
       }
+      if (command === 'read_local_project_asset_references') {
+        const input = args?.input as { assetId?: string } | undefined;
+        return {
+          assetId: input?.assetId,
+          versions: options.referencedVersions ?? [],
+        };
+      }
+      if (command === 'delete_local_project_asset') {
+        if (options.deletion) {
+          return options.deletion();
+        }
+        const input = args?.input as { assetId?: string } | undefined;
+        return {
+          assetId: input?.assetId,
+          localPath: 'assets/legacy.png',
+          committedProjectRevision: 6,
+          fileRetained: true,
+        };
+      }
       if (command === 'get_local_game_manifest') {
         return nextManifest;
       }
@@ -262,7 +340,7 @@ function renderReplacementWorkbench(options: RenderOptions = {}) {
       projectName: manifest.name,
       projectPath: PROJECT_PATH,
       manifest,
-      attachments: [],
+      attachments: options.attachments ?? [],
       recentRunStatus: null,
       recentRunStopReason: null,
       activeVersionId: null,
@@ -432,6 +510,17 @@ describe('版本级资源替换', () => {
     const dialog = await screen.findByRole('dialog', {
       name: '选择替换素材',
     });
+    // 候选排序：可替换的排在最前，不可替换的（分类不同）按后端原名次跟随 ——
+    // 后端给的名次里它本来排在第一位。
+    expect(
+      within(dialog)
+        .getAllByRole('option')
+        .map((option) => option.getAttribute('aria-label')),
+    ).toEqual([
+      '选择替换素材final.png',
+      '选择替换素材final.webp',
+      '选择替换素材scene.png',
+    ]);
     // 候选只列后端给出的素材：未绑定/未登记的素材不合成条目。
     expect(
       within(dialog).queryByRole('option', { name: '选择替换素材late.png' }),
@@ -545,4 +634,266 @@ describe('版本级资源替换', () => {
     );
     expect(screen.queryByRole('dialog', { name: '选择替换素材' })).toBeNull();
   });
+
+  /**
+   * 候选弹窗的缩略图必须走**资源卡同一条预览管线**：候选媒体元素登记进同一张可见性登记表、
+   * 由同一条几何判据（视口 ± 160px）放行、读到的 Blob URL 直接渲染出来。
+   *
+   * 判据要点：弹窗内容挂在 portal 下，**不在资源画本 observer 的 root 子树里**，所以这里
+   * 不能指望 observer 回调 —— 走的是注册与几何扫描这条同源通路（用例只给候选媒体元素
+   * 一个真实矩形，不动判据本身）。
+   *
+   * 变异验证：把 `renderAssetMedia` 改回"只渲染类型占位图标"，本用例必须失败
+   * （既不请求 `read_local_project_image_preview`，候选卡里也没有 `<img>`）。
+   */
+  it('候选卡缩略图走资源卡同一条预览管线：可见候选读到图并渲染出来', async () => {
+    installVisibleCandidateMediaRects();
+    const { invoke } = renderReplacementWorkbench();
+
+    const toolbar = await selectCardAndOpenToolbar('legacy.png');
+    fireEvent.click(within(toolbar).getByRole('button', { name: '替换素材' }));
+    const dialog = await screen.findByRole('dialog', {
+      name: '选择替换素材',
+    });
+
+    await waitFor(() => {
+      expect(
+        invoke.mock.calls.some(
+          ([command, args]) =>
+            command === 'read_local_project_image_preview' &&
+            (args as { relativePath?: string } | undefined)?.relativePath ===
+              'assets/final.png',
+        ),
+      ).toBe(true);
+    });
+
+    const option = within(dialog).getByRole('option', {
+      name: '选择替换素材final.png',
+    });
+    await waitFor(() => {
+      expect(option.querySelector('img')?.getAttribute('src')).toBe(
+        'blob:mock-attachment-preview',
+      );
+    });
+    // 预览状态与资源卡一样暴露在 DOM 上：占位图标到底是"还没读"还是"读失败"，排障不用猜。
+    expect(
+      option
+        .querySelector('.game-resource-replacement-media')
+        ?.getAttribute('data-resource-preview-status'),
+    ).toBe('loaded');
+  });
+
+  /**
+   * portal 里的候选卡**不在资源画本 observer 的 root 子树里**，observer 永远不会把它们报成
+   * 相交 —— 所以"可见才读"只能由几何兜底扫描承担，而扫描要在**几何变化点**被显式触发。
+   *
+   * 这里把候选媒体元素的矩形推迟到弹窗打开之后再给：打开时的注册扫描量不出尺寸、不请求，
+   * 只有滚动那一次显式扫描才放行。判据用的还是同一条几何口径（视口 ± 160px）。
+   *
+   * 变异验证：去掉弹窗打开时挂的滚动/定时兜底扫描，本用例必须失败。
+   */
+  it('候选弹窗滚动时靠几何扫描补放行：portal 内容不在 observer 的 root 里', async () => {
+    const { invoke } = renderReplacementWorkbench();
+    const readsOf = (relativePath: string) =>
+      invoke.mock.calls.filter(
+        ([command, args]) =>
+          command === 'read_local_project_image_preview' &&
+          (args as { relativePath?: string } | undefined)?.relativePath ===
+            relativePath,
+      ).length;
+
+    const toolbar = await selectCardAndOpenToolbar('legacy.png');
+    fireEvent.click(within(toolbar).getByRole('button', { name: '替换素材' }));
+    const dialog = await screen.findByRole('dialog', {
+      name: '选择替换素材',
+    });
+
+    // 等打开时那一次扫描（含 0ms 兜底）跑完：量不出尺寸 ⇒ 一个候选都不请求。
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+    // 场景候选的卡不在当前栏目里，所以这条路径的读取只可能来自弹窗。
+    expect(readsOf('assets/scene.png')).toBe(0);
+
+    installVisibleCandidateMediaRects();
+    fireEvent.scroll(document);
+
+    await waitFor(() => {
+      expect(readsOf('assets/scene.png')).toBeGreaterThan(0);
+    });
+    const sceneOption = within(dialog).getByRole('option', {
+      name: '选择替换素材scene.png',
+    });
+    await waitFor(() => {
+      expect(sceneOption.querySelector('img')?.getAttribute('src')).toBe(
+        'blob:mock-attachment-preview',
+      );
+    });
+    // 不可替换的候选也照样出图：禁用说的是"不能替换"，不是"看不到素材"。
+    expect((sceneOption as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  /**
+   * 工具条「删除素材」：破坏性动作放在末位 + 共享分隔线，复用同一套删除流程
+   * （读引用 → 二次确认 → `deleteReferencedVersions` 分支 → 重读 manifest）。
+   *
+   * 变异验证：
+   * - 把按钮挪到「替换素材」之前、或删掉前置分隔线，位置断言必须失败；
+   * - 把 `deleteReferencedVersions` 写死成 `false`，勾选用例（另一条分支）必须失败。
+   */
+  it('工具条末位是「删除素材」：前置分隔线，且复用二次确认与 deleteReferencedVersions 分支', async () => {
+    const { invoke, onManifestChange } = renderReplacementWorkbench({
+      referencedVersions: [
+        {
+          versionId: SOURCE_VERSION_ID,
+          projectRevision: 1,
+          createdAt: 1_700_000_000,
+        },
+      ],
+    });
+
+    const toolbar = await selectCardAndOpenToolbar('legacy.png');
+    const toolbarLabels = within(toolbar)
+      .getAllByRole('button')
+      .map((button) => button.getAttribute('aria-label') ?? '');
+    // 末位：在最后一个非破坏性动作（替换素材）之后、共享下载按钮之前。
+    expect(toolbarLabels.indexOf('删除素材')).toBeGreaterThan(
+      toolbarLabels.indexOf('替换素材'),
+    );
+    expect(toolbarLabels.indexOf('删除素材')).toBeLessThan(
+      toolbarLabels.indexOf('下载按钮'),
+    );
+    // 与前面隔开：紧邻的前一个兄弟就是共享工具条那套分隔线，不是新造的分隔符。
+    const deleteButton = within(toolbar).getByRole('button', {
+      name: '删除素材',
+    });
+    const divider = deleteButton.previousElementSibling;
+    expect(divider?.getAttribute('aria-hidden')).toBe('true');
+    expect(divider?.getAttribute('class')).toContain(
+      'image-canvas-editor__floating-toolbar-divider',
+    );
+
+    // 点删除先读引用信息（不直接删），再开二次确认面板。
+    fireEvent.click(deleteButton);
+    const dialog = await screen.findByRole('dialog', { name: '确认删除资源' });
+    expect(invoke).toHaveBeenCalledWith('read_local_project_asset_references', {
+      input: { projectPath: PROJECT_PATH, assetId: 'asset-legacy' },
+    });
+    expect(
+      invoke.mock.calls.some(
+        ([command]) => command === 'delete_local_project_asset',
+      ),
+    ).toBe(false);
+    // 被版本引用时列出引用版本；连带删除默认不勾（默认只摘登记，版本保留悬空绑定）。
+    expect(within(dialog).getByText('被 1 个游戏版本使用')).not.toBeNull();
+    expect(
+      (
+        within(dialog).getByRole('checkbox', {
+          name: '把相关游戏版本一并删除',
+        }) as HTMLInputElement
+      ).checked,
+    ).toBe(false);
+
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: '确认删除资源' }),
+    );
+
+    await waitFor(() => {
+      expect(invoke).toHaveBeenCalledWith('delete_local_project_asset', {
+        input: {
+          projectPath: PROJECT_PATH,
+          expectedProjectId: PROJECT_ID,
+          expectedProjectRevision: EXPECTED_REVISION,
+          assetId: 'asset-legacy',
+          deleteReferencedVersions: false,
+        },
+      });
+    });
+    // 删除成功后走与标签保存同一条 manifest 重载路径。
+    await waitFor(() =>
+      expect(onManifestChange).toHaveBeenCalledWith(
+        PROJECT_PATH,
+        expect.objectContaining({ projectId: PROJECT_ID }),
+        expect.objectContaining({ revision: 6, source: 'asset-command' }),
+      ),
+    );
+  });
+
+  it('勾上连带删除时按 true 走同一分支', async () => {
+    const { invoke } = renderReplacementWorkbench({
+      referencedVersions: [
+        {
+          versionId: SOURCE_VERSION_ID,
+          projectRevision: 1,
+          createdAt: 1_700_000_000,
+        },
+      ],
+    });
+
+    const toolbar = await selectCardAndOpenToolbar('legacy.png');
+    fireEvent.click(within(toolbar).getByRole('button', { name: '删除素材' }));
+    const dialog = await screen.findByRole('dialog', { name: '确认删除资源' });
+    fireEvent.click(
+      within(dialog).getByRole('checkbox', {
+        name: '把相关游戏版本一并删除',
+      }),
+    );
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: '确认删除资源' }),
+    );
+
+    await waitFor(() => {
+      expect(invoke).toHaveBeenCalledWith(
+        'delete_local_project_asset',
+        expect.objectContaining({
+          input: expect.objectContaining({ deleteReferencedVersions: true }),
+        }),
+      );
+    });
+  });
+
+  /**
+   * 入口判据与「编辑标签」同口径：只有 `manifestAssetId` 存在才渲染「删除素材」。
+   *
+   * 附件（`attachments`）没有 manifest 登记，删不了 —— 给它一个"点了报错"的按钮比不渲染更糟。
+   *
+   * 变异验证：把判据换成"只要选中就渲染"，本用例必须失败。
+   */
+  it('没有 manifest 身份的资源不渲染「删除素材」：与「编辑标签」同口径', async () => {
+    renderReplacementWorkbench({
+      attachments: [
+        {
+          fileName: '草稿.png',
+          mediaType: 'image/png',
+          localPath: 'uploads/draft.png',
+          status: 'imported',
+        },
+      ],
+    });
+
+    fireEvent.click(await screen.findByRole('button', { name: '打开待归类' }));
+    await waitFor(() =>
+      expect(
+        document.querySelector('[data-resource-book-view="child"]'),
+      ).not.toBeNull(),
+    );
+    act(() => {
+      observer?.triggerVisible();
+    });
+    fireEvent.click(await findResourceSelectButton('草稿.png'));
+    const toolbar = await screen.findByRole('toolbar', {
+      name: '图片工具栏',
+    });
+
+    expect(
+      within(toolbar).queryByRole('button', { name: '删除素材' }),
+    ).toBeNull();
+    expect(
+      within(toolbar).queryByRole('button', { name: '编辑标签' }),
+    ).toBeNull();
+    // 同一条工具条仍在（只读动作不受 manifest 身份影响），证明不是"整条工具条没渲染"。
+    expect(
+      within(toolbar).getByRole('button', { name: '信息' }),
+    ).not.toBeNull();
+  });
 });
diff --git a/apps/ai-game-creator-shell/tests/resourceVersionReplacementModel.test.ts b/apps/ai-game-creator-shell/tests/resourceVersionReplacementModel.test.ts
index 2ac98a05e..2352a8a09 100644
--- a/apps/ai-game-creator-shell/tests/resourceVersionReplacementModel.test.ts
+++ b/apps/ai-game-creator-shell/tests/resourceVersionReplacementModel.test.ts
@@ -7,12 +7,14 @@ import type {
   ProjectVersionResourceCompatibility,
 } from '../src/features/resource-canvas/resourceVersionReplacementModel';
 import {
+  projectResourcesByManifestAssetId,
   resourceReplacementAssetHints,
   resourceReplacementBlockedReason,
   resourceReplacementBlockedReasons,
   resourceReplacementPickerAssets,
   resourceReplacementWarning,
   resourceVersionReplacementErrorMessage,
+  sortResourceReplacementCandidates,
 } from '../src/features/resource-canvas/resourceVersionReplacementModel';
 import {
   readVersionResourceReplacementCandidates,
@@ -231,6 +233,127 @@ describe('资源替换的展示层口径', () => {
   });
 });
 
+describe('候选择序与资源映射', () => {
+  /**
+   * 排序口径：**可替换（无硬门禁失败）的排最前，其余按后端原名次跟随**，不可替换项不隐藏。
+   *
+   * 变异验证：把 `sortResourceReplacementCandidates` 改成 identity（直接返回原数组），
+   * 本用例必须失败。
+   */
+  it('可替换的排最前，不可替换的按原名次跟随，且不改写调用方数组', () => {
+    const candidates = [
+      candidate(
+        'asset-scene',
+        { categoryEqual: false },
+        { blockedReason: '分类不同' },
+      ),
+      candidate('asset-ok'),
+      candidate(
+        'asset-subtype',
+        { subtypeEqual: false },
+        { blockedReason: '类型不同' },
+      ),
+      candidate('asset-format', { sizeSpecEqual: false }),
+      // 后端说不可替换，但三项兼容性都是 true：兜底原因也是"不可选"。
+      candidate('asset-unknown', {}, { compatible: false }),
+    ];
+
+    const sorted = sortResourceReplacementCandidates(candidates);
+
+    expect(sorted.map((entry) => entry.resourceId)).toEqual([
+      'asset-ok',
+      'asset-format',
+      'asset-scene',
+      'asset-subtype',
+      'asset-unknown',
+    ]);
+    // 原名次不变：排序只改展示顺序，返回的是新数组。
+    expect(candidates.map((entry) => entry.resourceId)).toEqual([
+      'asset-scene',
+      'asset-ok',
+      'asset-subtype',
+      'asset-format',
+      'asset-unknown',
+    ]);
+    expect(sorted).not.toBe(candidates);
+  });
+
+  /**
+   * 排序与弹窗的禁用状态必须同源：排在前面的候选**一定**没有禁用原因。
+   *
+   * 否则会出现"排在最前却点不动"的候选，排序就成了误导。
+   *
+   * 变异验证：把排序判据换成 `candidate.compatible === true`（而不是复用
+   * `resourceReplacementBlockedReason`），`asset-unknown` 会被排到前面，本用例必须失败。
+   */
+  it('排在前面的候选一定没有禁用原因', () => {
+    const candidates = [
+      candidate('asset-ok'),
+      candidate('asset-unknown', {}, { compatible: false }),
+      candidate('asset-scene', { categoryEqual: false }),
+      candidate('asset-format', { sizeSpecEqual: false }),
+    ];
+    const blockedReasons = resourceReplacementBlockedReasons(candidates);
+    const selectableCount = candidates.filter(
+      (entry) => blockedReasons[entry.resourceId] === undefined,
+    ).length;
+
+    const sorted = sortResourceReplacementCandidates(candidates);
+
+    expect(selectableCount).toBe(2);
+    expect(
+      sorted
+        .slice(0, selectableCount)
+        .every((entry) => blockedReasons[entry.resourceId] === undefined),
+    ).toBe(true);
+    expect(
+      sorted
+        .slice(selectableCount)
+        .every((entry) => blockedReasons[entry.resourceId] !== undefined),
+    ).toBe(true);
+  });
+
+  it('manifest 资产 → 资源投影映射：跳过没有 manifest 身份的投影，同一资产取第一个', () => {
+    const manifest = manifestWithAssets([
+      {
+        id: 'asset-image',
+        kind: 'character',
+        mediaType: 'image/png',
+        localPath: 'assets/hero.png',
+      },
+      {
+        id: 'asset-audio',
+        kind: 'background-music',
+        mediaType: 'audio/mpeg',
+        localPath: 'assets/theme.mp3',
+      },
+    ]);
+    const resources = projectResourcesFromReadModels(
+      manifest,
+      [
+        {
+          fileName: '草稿.png',
+          mediaType: 'image/png',
+          localPath: 'uploads/draft.png',
+          status: 'imported',
+        },
+      ],
+      [],
+    );
+    const resourceByAssetId = projectResourcesByManifestAssetId(resources);
+
+    expect(Array.from(resourceByAssetId.keys()).sort()).toEqual([
+      'asset-audio',
+      'asset-image',
+    ]);
+    expect(resourceByAssetId.get('asset-image')?.path).toBe('assets/hero.png');
+    // 同一份映射喂给弹窗素材与候选缩略图，所以它必须与附件这类非 manifest 投影无关。
+    expect(
+      resources.some((entry) => entry.id === 'attachment:uploads/draft.png'),
+    ).toBe(true);
+  });
+});
+
 describe('资源替换的 IPC 边界', () => {
   it('两个命令都只传一个 input 对象，字段名与 Rust 结构体逐字一致', async () => {
     const invoke = vi.fn(async () => ({ ok: true }));
diff --git a/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.test.tsx b/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.test.tsx
index 89dca93c4..5d588db1b 100644
--- a/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.test.tsx
+++ b/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.test.tsx
@@ -186,4 +186,40 @@ describe('ImageCanvasProjectAssetPickerDialog', () => {
 
     expect(screen.getByText('当前项目还没有已登记素材')).toBeTruthy();
   });
+
+  /**
+   * 禁用候选的「变灰」不能压在禁用原因上。
+   *
+   * 「分类不同」这类小字是用户唯一能看到的解释，整卡 `opacity-60` 会让它几乎读不出来；
+   * 视觉上的禁用感由缩略图与名称承担（这里用类名契约钉住分工，jsdom 不渲染真实对比度）。
+   *
+   * 变异验证：把 `opacity-60` 挪回整卡 `<button>` 上，本用例必须失败。
+   */
+  it('keeps the disabled reason at full contrast instead of dimming the whole card', () => {
+    render(
+      <ImageCanvasProjectAssetPickerDialog
+        open
+        assets={ASSETS}
+        selectedAssetIds={[]}
+        assetBlockedReasons={{ 'asset-town': '分类不同' }}
+        onCancel={() => {}}
+        onConfirm={() => {}}
+      />,
+    );
+
+    const option = screen.getByRole('option', { name: '选择参考图小镇背景' });
+    const media = option.firstElementChild as HTMLElement;
+    const reason = screen.getByText('分类不同');
+
+    // 整卡不再压透明度，只保留不可点的光标语义。
+    expect(option.className).toContain('cursor-not-allowed');
+    expect(option.className).not.toMatch(/opacity-\d/u);
+    // 变灰只压在缩略图上。
+    expect(media.className).toMatch(/opacity-\d/u);
+    expect(reason.className).not.toMatch(/opacity-\d/u);
+    expect(reason.className).toContain('font-medium');
+    expect(reason.className).toContain('var(--platform-text-strong)');
+    // 禁用项仍然渲染（不隐藏），原因与可点性都在。
+    expect((option as HTMLButtonElement).disabled).toBe(true);
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.tsx b/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.tsx
index ef61d91c2..e3852866d 100644
--- a/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.tsx
+++ b/src/components/image-editor/ImageCanvasProjectAssetPickerDialog.tsx
@@ -245,13 +245,23 @@ export function ImageCanvasProjectAssetPickerDialog({
                   selected
                     ? 'border-[var(--platform-accent)] bg-white shadow-sm'
                     : 'border-[var(--platform-subpanel-border)] bg-white/70 hover:bg-white',
-                  blockedReason !== null ? 'cursor-not-allowed opacity-60' : '',
+                  // 禁用项的"变灰"只压在缩略图与名称上，**不压禁用原因**：
+                  // 「分类不同」这类小字压在整卡 `opacity-60` 下几乎读不出来，而它恰恰是
+                  // 用户唯一能看到的解释。视觉上的禁用感由缩略图与名称承担。
+                  blockedReason !== null ? 'cursor-not-allowed' : '',
                 ]
                   .filter(Boolean)
                   .join(' ')}
                 onClick={() => toggleAsset(asset.id)}
               >
-                <span className="flex h-20 w-full items-center justify-center overflow-hidden bg-white/60">
+                <span
+                  className={[
+                    'flex h-20 w-full items-center justify-center overflow-hidden bg-white/60',
+                    blockedReason !== null ? 'opacity-50' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
                   {renderAssetMedia ? (
                     renderAssetMedia(asset)
                   ) : projectAssetPickerCategory(asset) === 'image' ? (
@@ -264,7 +274,14 @@ export function ImageCanvasProjectAssetPickerDialog({
                     assetIcon(asset)
                   )}
                 </span>
-                <span className="flex min-w-0 items-center gap-1 px-2 py-1.5">
+                <span
+                  className={[
+                    'flex min-w-0 items-center gap-1 px-2 py-1.5',
+                    blockedReason !== null ? 'opacity-60' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
                   <span className="min-w-0 flex-1 truncate text-xs font-bold text-[var(--platform-text-strong)]">
                     {asset.label}
                   </span>
@@ -276,7 +293,7 @@ export function ImageCanvasProjectAssetPickerDialog({
                   ) : null}
                 </span>
                 {blockedReason !== null ? (
-                  <span className="block px-2 pb-1.5 text-[0.6875rem] leading-snug text-[var(--platform-text-base)]">
+                  <span className="block px-2 pb-1.5 text-[0.6875rem] leading-snug font-medium text-[var(--platform-text-strong)]">
                     {blockedReason}
                   </span>
                 ) : hint !== null ? (